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