feat: tous les menus vides
This commit is contained in:
parent
15d6c2e205
commit
764f32ef9b
|
@ -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>
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px #000;
|
||||
|
||||
}
|
||||
|
||||
#show-menu:checked~.menu-container {
|
||||
|
@ -28,4 +29,120 @@
|
|||
|
||||
.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;
|
||||
}
|
|
@ -31,7 +31,6 @@
|
|||
background: #fff;
|
||||
margin: 10% 10px;
|
||||
padding: 10% 10px;
|
||||
font-size: auto;
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue