ENSEEIHT/projet-application-web
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: tous les menus vides

Browse source
This commit is contained in:
gdamms 2022-04-29 16:45:18 +02:00
parent 15d6c2e205
commit 764f32ef9b
3 changed files with 172 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/front/index2.html
View file

@ -10,9 +10,29 @@
<link rel="stylesheet" href="pixels.css">
<link rel="stylesheet" href="pix.css">
<script>
function toggleLoginSignup(l, s) {
document.getElementById("show-login").checked = l;
document.getElementById("show-signup").checked = s;
function setMenu() {
document.getElementById("show-menu").checked = true;
document.getElementById("show-wallet").checked = false;
document.getElementById("show-mypixel").checked = false;
document.getElementById("show-settings").checked = false;
}
function setWallet() {
document.getElementById("show-menu").checked = false;
document.getElementById("show-wallet").checked = true;
document.getElementById("show-mypixel").checked = false;
document.getElementById("show-settings").checked = false;
}
function setMypixel() {
document.getElementById("show-menu").checked = false;
document.getElementById("show-wallet").checked = false;
document.getElementById("show-mypixel").checked = true;
document.getElementById("show-settings").checked = false;
}
function setSettings() {
document.getElementById("show-menu").checked = false;
document.getElementById("show-wallet").checked = false;
document.getElementById("show-mypixel").checked = false;
document.getElementById("show-settings").checked = true;
}
</script>
</head>
@ -25,13 +45,44 @@
</div>
<div class="profil">
<input type="checkbox" id="show-menu" class="show">
<label for="show-menu" class="menu-btn">Menu</label>
<input type="checkbox" id="show-wallet" class="show">
<input type="checkbox" id="show-mypixel" class="show">
<input type="checkbox" id="show-settings" class="show">
<label class="menu-btn" onclick="setMenu()">Menu</label>
<div class="username">My name is Amogus</div>
<div class="menu-container">
<label for="show-menu" class="close-btn" title="close">X</label>
<div class="text">
Menu
</div>
<div>
<label class="wallet-btn" onclick="setWallet()">Wallet</label>
<label class="mypixel-btn" onclick="setMypixel()">My pixels</label>
<label class="settings-btn" onclick="setSettings()">Settings</label>
</div>
</div>
<div class="wallet-container">
<label for="show-wallet" class="close-btn" title="close">X</label>
<div class="text">
Wallet
</div>
</div>
<div class="mypixel-container">
<label for="show-mypixel" class="close-btn" title="close">X</label>
<div class="text">
My pixels
</div>
</div>
<div class="settings-container">
<label for="show-settings" class="close-btn" title="close">X</label>
<div class="text">
Settings
</div>
</div>
</div>
</div>

117
src/front/profil.css
View file

@ -12,6 +12,7 @@
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 5px #000;
}
#show-menu:checked~.menu-container {
@ -29,3 +30,119 @@
.menu-container .close-btn:hover {
color: #3498db;
}
.menu-container div {
display: flex;
justify-content: space-evenly;
}
.wallet-container {
--width: 410px;
display: none;
visibility: visible;
background: #fff;
width: var(--width);
margin: 30px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: absolute;
left: calc(50% - var(--width) / 2);
top: 30%;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 5px #000;
}
#show-wallet:checked~.wallet-container {
display: block;
}
.wallet-container .close-btn {
position: absolute;
right: 20px;
top: 15px;
font-size: 18px;
cursor: pointer;
}
.wallet-container .close-btn:hover {
color: #3498db;
}
.mypixel-container {
--width: 410px;
display: none;
visibility: visible;
background: #fff;
width: var(--width);
margin: 30px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: absolute;
left: calc(50% - var(--width) / 2);
top: 30%;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 5px #000;
}
#show-mypixel:checked~.mypixel-container {
display: block;
}
.mypixel-container .close-btn {
position: absolute;
right: 20px;
top: 15px;
font-size: 18px;
cursor: pointer;
}
.mypixel-container .close-btn:hover {
color: #3498db;
}
.settings-container {
--width: 410px;
display: none;
visibility: visible;
background: #fff;
width: var(--width);
margin: 30px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: absolute;
left: calc(50% - var(--width) / 2);
top: 30%;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 5px #000;
}
#show-settings:checked~.settings-container {
display: block;
}
.settings-container .close-btn {
position: absolute;
right: 20px;
top: 15px;
font-size: 18px;
cursor: pointer;
}
.settings-container .close-btn:hover {
color: #3498db;
}
.wallet-btn,
.mypixel-btn,
.settings-btn {
background: #fff;
margin: 10px 10px;
padding: 10px 10px;
color: #3498db;
cursor: pointer;
}

1
src/front/title-bar.css
View file

@ -31,7 +31,6 @@
background: #fff;
margin: 10% 10px;
padding: 10% 10px;
font-size: auto;
color: #3498db;
cursor: pointer;
}