Finalize frontend of session management

This commit is contained in:
2025-06-26 19:45:20 +03:00
parent 169c4faa7d
commit 3da7f369a5
9 changed files with 235 additions and 149 deletions

101
index.erb Normal file
View File

@@ -0,0 +1,101 @@
<!doctype html>
<html>
<head>
<title>InfinSweeper</title>
<link rel="icon" type="image/png" href="src/assets/img/logo_sm.png" />
<meta
name="viewport"
content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>
<meta name="signed_in" content="<%= @signed_in %>">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+JP+N&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="src/assets/style.css" />
<script type="module" src="src/js/accounts.js"></script>
<script type="module" src="src/js/game.js"></script>
</head>
<body>
<div class="header">
<a href="/">
<img
src="src/assets/img/logo_lg.png"
alt="InfinSweeper"
class="logo pixelart"
/>
</a>
<div class="header-right">
<div class="signed_in">
<button class="account-button" id="logout-button">LOGOUT</button>
</div>
<div class="not_signed_i">
<button class="account-button" id="login-button">LOGIN</button>
<button class="account-button" id="signup-button">SIGN UP</button>
</div>
</div>
</div>
<canvas id="main-canvas"></canvas>
<div class="popup" id="popup">
<span class="close" id="close">&times;</span>
<div class="popup-tab" id="login">
<form id="login-form" class="form">
<label for="username">USERNAME</label>
<input type="text" name="username" placeholder="Username" required />
<label for="pass">PASSWORD</label>
<input type="password" name="pass" placeholder="Password" required />
<button type="submit">LOGIN</button>
<span class="link" id="forgot-link">Forgot password?</span>
<span class="info" id="login-info"></span>
</form>
</div>
<div class="popup-tab" id="signup">
<form id="signup-form" class="form">
<label for="username">USERNAME</label>
<input type="text" name="username" placeholder="Username" required />
<label for="email">EMAIL</label>
<input
type="email"
name="email"
placeholder="Email"
required
autocapitalize="off"
/>
<label for="pass">PASSWORD</label>
<input type="password" name="pass" placeholder="Password" required />
<button type="submit">SIGN UP</button>
<span class="info" id="signup-info"></span>
</form>
</div>
<div class="popup-tab" id="forgot-pass">
<form id="forgot-form" class="form">
<input
type="email"
name="email"
placeholder="Email"
required
autocapitalize="off"
autocomplete="off"
/>
<button type="submit">SUBMIT</button>
<span class="info" id="forgot-info"></span>
</form>
</div>
<div class="popup-tab" id="reset-pass">
<form id="reset-form" class="form">
<input type="password" name="pass" placeholder="Password" required />
<input
type="password"
name="pass_confirm"
placeholder="Confirm Password"
required
/>
<button type="submit">SUBMIT</button>
<span class="info" id="reset-info"></span>
</form>
</div>
</div>
</body>
</html>