style: autoformatting
This commit is contained in:
Laureηt
parent
a957027656
commit
1939f8df0c
|
|
@ -1,101 +1,121 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Popup Login Form Design | CodingNepal</title>
|
||||
<link rel="stylesheet" href="utils.css" />
|
||||
<link rel="stylesheet" href="title-bar.css" />
|
||||
<link rel="stylesheet" href="login-signup.css" />
|
||||
<link rel="stylesheet" href="pixels.css" />
|
||||
<script>
|
||||
function toggleLoginSignup(l, s) {
|
||||
document.getElementById("show-login").checked = l;
|
||||
document.getElementById("show-signup").checked = s;
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="pixels.js"></script>
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Popup Login Form Design | CodingNepal</title>
|
||||
<link rel="stylesheet" href="utils.css">
|
||||
<link rel="stylesheet" href="title-bar.css">
|
||||
<link rel="stylesheet" href="login-signup.css">
|
||||
<link rel="stylesheet" href="pixels.css">
|
||||
<script>
|
||||
function toggleLoginSignup(l, s) {
|
||||
document.getElementById("show-login").checked = l;
|
||||
document.getElementById("show-signup").checked = s;
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="pixels.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="title-bar">
|
||||
<div class="title">
|
||||
<img src="logo.png" /> Pixels
|
||||
</div>
|
||||
<div class="profil">
|
||||
<input type="checkbox" id="show-login" class="show">
|
||||
<div onclick="toggleLoginSignup(true, false)" class="login-btn">Login</div>
|
||||
|
||||
<input type="checkbox" id="show-signup" class="show">
|
||||
<div onclick="toggleLoginSignup(false, true)" class="signup-btn">Signup</div>
|
||||
|
||||
<div class="login-container">
|
||||
<div onclick="toggleLoginSignup(false, false)" class="close-btn" title="close">X</div>
|
||||
<div class="text">
|
||||
<body>
|
||||
<div class="title-bar">
|
||||
<div class="title"><img src="logo.png" /> Pixels</div>
|
||||
<div class="profil">
|
||||
<input type="checkbox" id="show-login" class="show" />
|
||||
<div onclick="toggleLoginSignup(true, false)" class="login-btn">
|
||||
Login
|
||||
</div>
|
||||
<form action="api/user/login" method="post">
|
||||
<div class="data">
|
||||
<label>Nickname</label>
|
||||
<input type="text" name="username" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Password</label>
|
||||
<input type="password" name="password" required>
|
||||
</div>
|
||||
<div class="forgot-pass">
|
||||
<a href="#">Forgot Password?</a>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button type="submit">login</button>
|
||||
</div>
|
||||
<div class="signup-login-link">
|
||||
Not a member?
|
||||
<div class="href" onclick="toggleLoginSignup(false, true)">Signup now</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="signup-container">
|
||||
<div onclick="toggleLoginSignup(false, false)" class="close-btn" title="close">X</div>
|
||||
<div class="text">
|
||||
<input type="checkbox" id="show-signup" class="show" />
|
||||
<div
|
||||
onclick="toggleLoginSignup(false, true)"
|
||||
class="signup-btn"
|
||||
>
|
||||
Signup
|
||||
</div>
|
||||
<form action="api/user/signup" method="post">
|
||||
<div class="data">
|
||||
<label>Nickname</label>
|
||||
<input type="text" name="username" required>
|
||||
|
||||
<div class="login-container">
|
||||
<div
|
||||
onclick="toggleLoginSignup(false, false)"
|
||||
class="close-btn"
|
||||
title="close"
|
||||
>
|
||||
X
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Password</label>
|
||||
<input type="password" name="password" required>
|
||||
<div class="text">Login</div>
|
||||
<form action="api/user/login" method="post">
|
||||
<div class="data">
|
||||
<label>Nickname</label>
|
||||
<input type="text" name="username" required />
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Password</label>
|
||||
<input type="password" name="password" required />
|
||||
</div>
|
||||
<div class="forgot-pass">
|
||||
<a href="#">Forgot Password?</a>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button type="submit">login</button>
|
||||
</div>
|
||||
<div class="signup-login-link">
|
||||
Not a member?
|
||||
<div
|
||||
class="href"
|
||||
onclick="toggleLoginSignup(false, true)"
|
||||
>
|
||||
Signup now
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="signup-container">
|
||||
<div
|
||||
onclick="toggleLoginSignup(false, false)"
|
||||
class="close-btn"
|
||||
title="close"
|
||||
>
|
||||
X
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button type="submit">signup</button>
|
||||
</div>
|
||||
<div class="signup-login-link">
|
||||
Already a member?
|
||||
<div class="href" onclick="toggleLoginSignup(true, false)">Login now</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="text">Signup</div>
|
||||
<form action="api/user/signup" method="post">
|
||||
<div class="data">
|
||||
<label>Nickname</label>
|
||||
<input type="text" name="username" required />
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Password</label>
|
||||
<input type="password" name="password" required />
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button type="submit">signup</button>
|
||||
</div>
|
||||
<div class="signup-login-link">
|
||||
Already a member?
|
||||
<div
|
||||
class="href"
|
||||
onclick="toggleLoginSignup(true, false)"
|
||||
>
|
||||
Login now
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pixel-container">
|
||||
<table id="pixelTable">
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<div class="pixel-container">
|
||||
<table id="pixelTable">
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,218 +1,260 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Popup Login Form Design | CodingNepal</title>
|
||||
<link rel="stylesheet" href="utils.css">
|
||||
<link rel="stylesheet" href="title-bar.css">
|
||||
<link rel="stylesheet" href="profil.css">
|
||||
<link rel="stylesheet" href="pixels.css">
|
||||
<link rel="stylesheet" href="wallet.css">
|
||||
<link rel="stylesheet" href="mypixel.css">
|
||||
<link rel="stylesheet" href="buypixel.css">
|
||||
<script>
|
||||
function setMenu() {
|
||||
if (document.getElementById("show-menu").checked) {
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Popup Login Form Design | CodingNepal</title>
|
||||
<link rel="stylesheet" href="utils.css" />
|
||||
<link rel="stylesheet" href="title-bar.css" />
|
||||
<link rel="stylesheet" href="profil.css" />
|
||||
<link rel="stylesheet" href="pixels.css" />
|
||||
<link rel="stylesheet" href="wallet.css" />
|
||||
<link rel="stylesheet" href="mypixel.css" />
|
||||
<link rel="stylesheet" href="buypixel.css" />
|
||||
<script>
|
||||
function setMenu() {
|
||||
if (document.getElementById("show-menu").checked) {
|
||||
document.getElementById("show-menu").checked = false;
|
||||
} else {
|
||||
document.getElementById("show-menu").checked = true;
|
||||
document.getElementById("show-wallet").checked = false;
|
||||
document.getElementById("show-mypixel").checked = false;
|
||||
document.getElementById("show-buypixel").checked = false;
|
||||
document.getElementById("show-settings").checked = false;
|
||||
}
|
||||
}
|
||||
function setWallet() {
|
||||
document.getElementById("show-menu").checked = false;
|
||||
} else {
|
||||
document.getElementById("show-menu").checked = true;
|
||||
document.getElementById("show-wallet").checked = false;
|
||||
document.getElementById("show-wallet").checked = true;
|
||||
document.getElementById("show-mypixel").checked = false;
|
||||
document.getElementById("show-buypixel").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-buypixel").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-buypixel").checked = false;
|
||||
document.getElementById("show-settings").checked = false;
|
||||
}
|
||||
function setBuypixel() {
|
||||
document.getElementById("show-menu").checked = false;
|
||||
document.getElementById("show-wallet").checked = false;
|
||||
document.getElementById("show-mypixel").checked = false;
|
||||
document.getElementById("show-buypixel").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-buypixel").checked = false;
|
||||
document.getElementById("show-settings").checked = true;
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="pixels.js"></script>
|
||||
</head>
|
||||
function setMypixel() {
|
||||
document.getElementById("show-menu").checked = false;
|
||||
document.getElementById("show-wallet").checked = false;
|
||||
document.getElementById("show-mypixel").checked = true;
|
||||
document.getElementById("show-buypixel").checked = false;
|
||||
document.getElementById("show-settings").checked = false;
|
||||
}
|
||||
function setBuypixel() {
|
||||
document.getElementById("show-menu").checked = false;
|
||||
document.getElementById("show-wallet").checked = false;
|
||||
document.getElementById("show-mypixel").checked = false;
|
||||
document.getElementById("show-buypixel").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-buypixel").checked = false;
|
||||
document.getElementById("show-settings").checked = true;
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="pixels.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<div class="title-bar">
|
||||
<div class="title"><img src="logo.png" /> Pixels</div>
|
||||
<div class="profil">
|
||||
<input type="checkbox" id="show-menu" class="show" />
|
||||
<input type="checkbox" id="show-wallet" class="show" />
|
||||
<input type="checkbox" id="show-mypixel" class="show" />
|
||||
<input type="checkbox" id="show-buypixel" class="show" />
|
||||
<input type="checkbox" id="show-settings" class="show" />
|
||||
|
||||
<div class="title-bar">
|
||||
<div class="title">
|
||||
<img src="logo.png" /> Pixels
|
||||
</div>
|
||||
<div class="profil">
|
||||
<input type="checkbox" id="show-menu" class="show">
|
||||
<input type="checkbox" id="show-wallet" class="show">
|
||||
<input type="checkbox" id="show-mypixel" class="show">
|
||||
<input type="checkbox" id="show-buypixel" 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>
|
||||
|
||||
<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="buypixel-btn" onclick="setBuypixel()"
|
||||
>Buy pixel</label
|
||||
>
|
||||
<label class="settings-btn" onclick="setSettings()"
|
||||
>Settings</label
|
||||
>
|
||||
</div>
|
||||
</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="buypixel-btn" onclick="setBuypixel()">Buy pixel</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>
|
||||
<br />
|
||||
<div class="solde"></div>
|
||||
<form action="pay" method="post">
|
||||
<div class="data">
|
||||
<label>Amount</label>
|
||||
<input type="number" name="amount" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Card number</label>
|
||||
<input type="number" name="card" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Expiry date</label>
|
||||
<input type="month" name="date" required>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button type="submit">Pay</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="mypixel-container">
|
||||
<label for="show-mypixel" class="close-btn" title="close">X</label>
|
||||
<div class="text">
|
||||
My pixels
|
||||
</div>
|
||||
<br />
|
||||
<div class="solde"></div>
|
||||
<div id="color"></div>
|
||||
<div id="pixel-index"></div>
|
||||
(<div id="user-pixel-index"></div>)
|
||||
<form action="modify" method="post">
|
||||
<div class="data">
|
||||
<label>Price</label>
|
||||
<input type="number" name="price" id="price" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Red</label>
|
||||
<input type="range" name="red" id="red" oninput="updateUserColorPreview()" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Green</label>
|
||||
<input type="range" name="green" id="green" oninput="updateUserColorPreview()" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Blue</label>
|
||||
<input type="range" name="blue" id="blue" oninput="updateUserColorPreview()" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Description</label>
|
||||
<input type="text" name="desc" id="description" required>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button type="submit">Modify</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<div class="btn">
|
||||
<button onclick="previousUserPixel()">Previous</button>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button onclick="nextUserPixel()">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buypixel-container">
|
||||
<label for="show-buypixel" class="close-btn" title="close">X</label>
|
||||
<div class="text">
|
||||
Buy pixel
|
||||
</div>
|
||||
<br />
|
||||
<form action="modify" method="post">
|
||||
<div class="wallet-container">
|
||||
<label for="show-wallet" class="close-btn" title="close"
|
||||
>X</label
|
||||
>
|
||||
<div class="text">Wallet</div>
|
||||
<br />
|
||||
<div class="solde"></div>
|
||||
<div class="data">
|
||||
<label>Index</label>
|
||||
<input type="number" name="index" id="buy-pixel-index" required>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Owner</label>
|
||||
<div id="buy-pixel-owner"></div>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Description</label>
|
||||
<div id="buy-pixel-description"></div>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Price</label>
|
||||
<div id="buy-pixel-price"></div>
|
||||
</div>
|
||||
<div class=" btn">
|
||||
<button type="submit">Buy</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<div class="btn">
|
||||
<button onclick="previousBuyPixel()">Previous</button>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button onclick="nextBuyPixel()">Next</button>
|
||||
<form action="pay" method="post">
|
||||
<div class="data">
|
||||
<label>Amount</label>
|
||||
<input type="number" name="amount" required />
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Card number</label>
|
||||
<input type="number" name="card" required />
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Expiry date</label>
|
||||
<input type="month" name="date" required />
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button type="submit">Pay</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="mypixel-container">
|
||||
<label for="show-mypixel" class="close-btn" title="close"
|
||||
>X</label
|
||||
>
|
||||
<div class="text">My pixels</div>
|
||||
<br />
|
||||
<div class="solde"></div>
|
||||
<div id="color"></div>
|
||||
<div id="pixel-index"></div>
|
||||
(
|
||||
<div id="user-pixel-index"></div>
|
||||
)
|
||||
<form action="modify" method="post">
|
||||
<div class="data">
|
||||
<label>Price</label>
|
||||
<input
|
||||
type="number"
|
||||
name="price"
|
||||
id="price"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Red</label>
|
||||
<input
|
||||
type="range"
|
||||
name="red"
|
||||
id="red"
|
||||
oninput="updateUserColorPreview()"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Green</label>
|
||||
<input
|
||||
type="range"
|
||||
name="green"
|
||||
id="green"
|
||||
oninput="updateUserColorPreview()"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Blue</label>
|
||||
<input
|
||||
type="range"
|
||||
name="blue"
|
||||
id="blue"
|
||||
oninput="updateUserColorPreview()"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Description</label>
|
||||
<input
|
||||
type="text"
|
||||
name="desc"
|
||||
id="description"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button type="submit">Modify</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<div class="btn">
|
||||
<button onclick="previousUserPixel()">
|
||||
Previous
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button onclick="nextUserPixel()">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buypixel-container">
|
||||
<label for="show-buypixel" class="close-btn" title="close"
|
||||
>X</label
|
||||
>
|
||||
<div class="text">Buy pixel</div>
|
||||
<br />
|
||||
<form action="modify" method="post">
|
||||
<div class="solde"></div>
|
||||
<div class="data">
|
||||
<label>Index</label>
|
||||
<input
|
||||
type="number"
|
||||
name="index"
|
||||
id="buy-pixel-index"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Owner</label>
|
||||
<div id="buy-pixel-owner"></div>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Description</label>
|
||||
<div id="buy-pixel-description"></div>
|
||||
</div>
|
||||
<div class="data">
|
||||
<label>Price</label>
|
||||
<div id="buy-pixel-price"></div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button type="submit">Buy</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<div class="btn">
|
||||
<button onclick="previousBuyPixel()">
|
||||
Previous
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button onclick="nextBuyPixel()">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-container">
|
||||
<label for="show-settings" class="close-btn" title="close">X</label>
|
||||
<div class="text">
|
||||
Settings
|
||||
<div class="settings-container">
|
||||
<label for="show-settings" class="close-btn" title="close"
|
||||
>X</label
|
||||
>
|
||||
<div class="text">Settings</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pixel-container">
|
||||
<table id="pixelTable">
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<div class="pixel-container">
|
||||
<table id="pixelTable">
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
<tr></tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
box-shadow: 0px 0px 5px #000;
|
||||
}
|
||||
|
||||
#show-login:checked~.login-container {
|
||||
#show-login:checked ~ .login-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#show-signup:checked~.signup-container {
|
||||
#show-signup:checked ~ .signup-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -115,4 +115,4 @@ form .btn button {
|
|||
|
||||
form .signup-login-link {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,17 +11,17 @@ var userJSON;
|
|||
const updatePixelsJSON = async () => {
|
||||
var reponse = await fetch(urlPixel);
|
||||
pixelsJSON = await reponse.json();
|
||||
}
|
||||
};
|
||||
|
||||
const updateUserJSON = async () => {
|
||||
var reponse = await fetch(urlUser);
|
||||
userJSON = await reponse.json();
|
||||
}
|
||||
};
|
||||
|
||||
function updateSolde() {
|
||||
var elems = document.getElementsByClassName("solde");
|
||||
elems.forEach(el => {
|
||||
el.innerHTML = userJSON.solde + '₿';
|
||||
elems.forEach((el) => {
|
||||
el.innerHTML = userJSON.solde + "₿";
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -32,9 +32,6 @@ setInterval(updateSolde, 10000);
|
|||
setInterval(updateUserJSON, 10000);
|
||||
setInterval(updatePixelsJSON, 10000);
|
||||
|
||||
|
||||
|
||||
|
||||
////////////////
|
||||
// Pixel grid //
|
||||
////////////////
|
||||
|
|
@ -53,19 +50,22 @@ function setPixels() {
|
|||
var row = table.rows[row_id];
|
||||
|
||||
row.innerHTML +=
|
||||
'<td class="pixel" style="background:#' + pixel.color + '">' +
|
||||
'<div class="info-pixel">' +
|
||||
'<div class="username">' + pixel.owner_username + '</div>' +
|
||||
'<div class="description">' + pixel.description + '</div>' +
|
||||
'</div>' +
|
||||
'<div class="patch-shadow"></div>' +
|
||||
'</td>';
|
||||
|
||||
'<td class="pixel" style="background:#' +
|
||||
pixel.color +
|
||||
'">' +
|
||||
'<div class="info-pixel">' +
|
||||
'<div class="username">' +
|
||||
pixel.owner_username +
|
||||
"</div>" +
|
||||
'<div class="description">' +
|
||||
pixel.description +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
'<div class="patch-shadow"></div>' +
|
||||
"</td>";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//////////////////////
|
||||
// Modify my pixels //
|
||||
//////////////////////
|
||||
|
|
@ -73,11 +73,13 @@ function setPixels() {
|
|||
function hexToRgb(hex) {
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
console.log(result);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
return result
|
||||
? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16),
|
||||
}
|
||||
: null;
|
||||
}
|
||||
|
||||
// Initialize pixel index
|
||||
|
|
@ -93,7 +95,9 @@ function initUserPixel() {
|
|||
|
||||
// Compute next pixel index
|
||||
function nextUserPixel() {
|
||||
var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML);
|
||||
var user_pixel_index = parseInt(
|
||||
document.getElementById("user-pixel-index").innerHTML
|
||||
);
|
||||
|
||||
user_pixel_index++;
|
||||
if (user_pixel_index > userJSON.pixels.length - 1) {
|
||||
|
|
@ -110,7 +114,9 @@ function nextUserPixel() {
|
|||
|
||||
// Compute previous pixel index
|
||||
function previousUserPixel() {
|
||||
var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML);
|
||||
var user_pixel_index = parseInt(
|
||||
document.getElementById("user-pixel-index").innerHTML
|
||||
);
|
||||
|
||||
user_pixel_index--;
|
||||
if (user_pixel_index < 0) {
|
||||
|
|
@ -153,9 +159,9 @@ function updatePixelPreview() {
|
|||
|
||||
// Update preview's color
|
||||
function updateUserColorPreview() {
|
||||
var red = document.getElementById("red").value * 255 / 100;
|
||||
var green = document.getElementById("green").value * 255 / 100;
|
||||
var blue = document.getElementById("blue").value * 255 / 100;
|
||||
var red = (document.getElementById("red").value * 255) / 100;
|
||||
var green = (document.getElementById("green").value * 255) / 100;
|
||||
var blue = (document.getElementById("blue").value * 255) / 100;
|
||||
|
||||
var color = document.getElementById("color");
|
||||
color.style.background = "rgb(" + red + "," + green + "," + blue + ")";
|
||||
|
|
@ -163,10 +169,6 @@ function updateUserColorPreview() {
|
|||
|
||||
initUserPixel();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////
|
||||
// Buy pixel //
|
||||
///////////////
|
||||
|
|
@ -214,7 +216,8 @@ function previousBuyPixel() {
|
|||
function updatePixelBuyPreview(pixel) {
|
||||
document.getElementById("buy-pixel-index").value = pixel.id - 1;
|
||||
document.getElementById("buy-pixel-owner").innerHTML = pixel.owner_username;
|
||||
document.getElementById("buy-pixel-description").innerHTML = pixel.description;
|
||||
document.getElementById("buy-pixel-description").innerHTML =
|
||||
pixel.description;
|
||||
document.getElementById("buy-pixel-price").innerHTML = pixel.price;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,10 +12,9 @@
|
|||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px #000;
|
||||
|
||||
}
|
||||
|
||||
#show-menu:checked~.menu-container {
|
||||
#show-menu:checked ~ .menu-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -50,10 +49,9 @@
|
|||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px #000;
|
||||
|
||||
}
|
||||
|
||||
#show-wallet:checked~.wallet-container {
|
||||
#show-wallet:checked ~ .wallet-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -83,10 +81,9 @@
|
|||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px #000;
|
||||
|
||||
}
|
||||
|
||||
#show-mypixel:checked~.mypixel-container {
|
||||
#show-mypixel:checked ~ .mypixel-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -116,10 +113,9 @@
|
|||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px #000;
|
||||
|
||||
}
|
||||
|
||||
#show-buypixel:checked~.buypixel-container {
|
||||
#show-buypixel:checked ~ .buypixel-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -135,7 +131,6 @@
|
|||
color: #3498db;
|
||||
}
|
||||
|
||||
|
||||
.settings-container {
|
||||
--width: 410px;
|
||||
display: none;
|
||||
|
|
@ -150,10 +145,9 @@
|
|||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 5px #000;
|
||||
|
||||
}
|
||||
|
||||
#show-settings:checked~.settings-container {
|
||||
#show-settings:checked ~ .settings-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -169,7 +163,6 @@
|
|||
color: #3498db;
|
||||
}
|
||||
|
||||
|
||||
.wallet-btn,
|
||||
.mypixel-btn,
|
||||
.buypixel-btn,
|
||||
|
|
|
|||
|
|
@ -37,4 +37,4 @@
|
|||
|
||||
.show {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
padding: 0;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -17,4 +17,4 @@ body {
|
|||
|
||||
.href:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,4 +82,4 @@ form .btn button {
|
|||
|
||||
form .signup-login-link {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue