Skip to content
Snippets Groups Projects
Commit b6ab096d authored by Ingrid's avatar Ingrid
Browse files

flere seksjoner lagt inn. Endring i css

parent 966da95e
No related branches found
No related tags found
1 merge request!21Merge profilinnstillinger into main
Pipeline #218273 failed
<template>
<main>
<h1>Profilinnstillinger</h1>
<h1><br><br>Profilinnstillinger <br></h1>
<div id = "profilepicture">
<Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
<Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" />
</div>
<h2>Petter</h2>
<button id="changeUserBtn">Bytt bruker</button>
<form @submit.prevent="submit">
<label for="brukernavn">Navn</label><br>
<label for="brukernavn">Profilnavn</label><br>
<input type="text" required><br>
<h3>Brukertype</h3>
<br>
<h4>Brukertype</h4>
<input type="radio" id="normal" name="userType" value="normal">
<label for="normal">Vanlig</label><br>
<label for="normal"> Standard</label><br>
<input type="radio" id="restricted" name="userType" value="restricted">
<label for="restricted">Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>
<label for="restricted"> Begrenset - Kan ikke redigere ukeplan eller handleliste</label><br>
<br>
<h3>Profilbilde</h3>
<div id="changeUserImage">
<div id = "profilepicture">
<Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" />
<img src="#" alt="profile picture">
</div>
<button>Endre bilde</button>
</div>
<div id = "submitbuttonBox">
<button>Lagre brukerinnstillinger</button>
<button>Slett brukerprofil</button>
<button class="saveBtn" @click="saveUserSettings" >Lagre brukerinnstillinger</button>
<button class="delBtn" @click="deleteUser">Slett brukerprofil</button>
</div>
</form>
......@@ -40,39 +41,58 @@
<form @submit.prevent="submit">
<h2>Matpreferanser</h2>
<h2>-Matpreferanser-</h2>
<p class ="infoText">Hvis huket av, så vil du kun få oppskrifter av disse typene:</p>
<input type="checkbox" id="vegetar" name="vegetar" value="vegetar">
<label for="vegetar"> vegetar </label><br>
<input type="checkbox" id="vegan" name="vegan" value="vegan">
<label for="vegetar"> vegan </label><br>
<label for="vegan"> vegan </label><br>
<br>
<h3>Allergener</h3>
<h2>-Allergener-</h2>
<p class ="infoText">Du vil ikke få forslag om oppskrifter med disse varene:</p>
<input type="checkbox" id="gluten" name="gluten" value="Gluten">
<label for="vehicle1"> gluten</label><br>
<label for="allergen"> gluten</label><br>
<input type="checkbox" id="nøtter" name="nøtter" value="nøtter">
<label for="vehicle1">nøtter</label><br>
<button>Lagre Appinnstillinger</button>
<label for="allergen"> nøtter</label><br>
<input type="checkbox" id="melk" name="melk" value="melk">
<label for="allergen"> melk</label><br>
<button class="saveBtn" @click="saveFoodPreference">Lagre matpreferanser <br> og allergener</button>
</form>
<h1>Konto-innstillinger</h1>
<form @submit.prevent="submit">
<p class="infoText">OBS: Ved å endre epost endrer du også brukernavnet ditt</p>
<label for="email">Epost</label><br>
<input type="text" id="email">
<label for="password">Passord</label><br>
<input type="password" id="password">
<button>Lagre Appinnstillinger</button>
<button class="saveBtn" @click="saveAccountSettings">Lagre kontoinnstillinger</button>
</form>
</form>
<br>
<br>
<hr>
</main>
<form @submit.prevent="submit" id = "dangerZone">
<h1>🔺FARESONE🔺</h1>
<p class="infoText">Ved å trykke på knappen nedenfor, vil du slette din SmartMat-konto</p>
<input type="checkbox" id="melk" name="melk" value="melk">
<label for="allergen"> Jeg bekrefter jeg skjønner dette, og ønsker å slette kontoen min SmartMat-konto for alltid.</label><br>
<button class="delBtn" @click="deleteAccount">SLETT KONTO</button>
</form>
<br><br><br>
</main>
</template>
<script>
......@@ -86,22 +106,61 @@ export default {
iconColor() {
return "#000000"
}
},
methods: {
saveUserSettings(){
alert("(Denne knappen gjør ingen ting) brukerinnstillinger lagret!")
},
saveAccountSettings(){
alert("(Denne knappen gjør ingen ting) konto oppdatert")
},
deleteAccount(){
alert("(Denne knappen gjør ingen ting) men account deleted")
},
deleteUser(){
alert("(Denne knappen gjør ingen ting) bruker slettet")
},
saveFoodPreference() {
alert("(Denne knappen gjør ingen ting) matpreferanser lagret")
}
}
}
</script>
<style scoped lang ="scss">
#dangerZone {
color: white;
color: darkred;
qwidth: 100%;
}
#profilepicture {
display:flex;
border-radius:50%;
width:50px;
width:100px;
height: 100px;
background-color: white;
border: 2px solid black;
justify-content: center;
align-items: center;
border: 3px solid base.$grey;
}
#changeUserImage {
display:flex;
}
#changeUserImage #profilepicture {
width: 50px;
height: 50px;
}
.infoText {
background-color: white;
padding: .5em;
margin: .4em;
}
form {
background-color: base.$grey;
color: black;
......@@ -126,12 +185,32 @@ input[type="password"]{
button {
background-color: base.$red;
color: black;
border: 1px solid black;
margin: 1em;
}
button:hover{
background-color: #282828;
}
.saveBtn, .delBtn {
background-color: base.$green;
color: white;
font-weight: bold;
padding:.9em;
border:none;
}
.delBtn {
background-color: darkred;
}
#changeUserBtn {
padding:.9em;
padding-right: 1.5em;
}
main {
......@@ -141,8 +220,9 @@ main {
justify-content: center;
align-items: center;
flex-direction: column;
width: 90%;
width: 100%;
text-align: left;
left:0;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment