mirror of
http://10.0.2.1:3031/sauer/bfa-dryer-design.git
synced 2026-06-30 11:36:42 +10:00
52 lines
2.5 KiB
HTML
52 lines
2.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
|
|
<title>BFA Banana Dryer — Login</title>
|
||
|
|
<style>
|
||
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
||
|
|
:root{--bg:#0a0e17;--card:#131a2b;--border:#1e2a45;--text:#e8ecf4;--text2:#7a8baa;--dim:#4a5670;--blue:#2d7ff9;--amber:#ffab00}
|
||
|
|
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);height:100vh;display:flex;align-items:center;justify-content:center}
|
||
|
|
.login-box{width:400px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:40px;display:flex;flex-direction:column;align-items:center;gap:24px}
|
||
|
|
.login-box h1{font-size:24px;font-weight:700}
|
||
|
|
.login-box h2{font-size:16px;color:var(--text2);font-weight:400}
|
||
|
|
.login-box .divider{width:100%;height:1px;background:var(--border)}
|
||
|
|
.user-list{width:100%;display:flex;flex-direction:column;gap:8px}
|
||
|
|
.user-btn{width:100%;padding:16px;border:2px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:18px;font-weight:600;cursor:pointer;text-align:left;transition:all 0.15s}
|
||
|
|
.user-btn:hover{border-color:var(--blue);background:rgba(45,127,249,0.1)}
|
||
|
|
.user-btn .initials{display:inline-flex;width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin-right:12px}
|
||
|
|
.add-section{width:100%;display:flex;gap:8px}
|
||
|
|
.add-section input{flex:1;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-size:16px}
|
||
|
|
.add-section input::placeholder{color:var(--dim)}
|
||
|
|
.add-section button{padding:12px 20px;border:none;border-radius:8px;background:var(--blue);color:#fff;font-size:14px;font-weight:600;cursor:pointer}
|
||
|
|
.add-section button:hover{opacity:0.9}
|
||
|
|
.footer{font-size:12px;color:var(--dim)}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<form method="POST" class="login-box">
|
||
|
|
<h1>BFA Banana Dryer</h1>
|
||
|
|
<h2>HMI Design Tool — Who are you?</h2>
|
||
|
|
<div class="divider"></div>
|
||
|
|
|
||
|
|
<div class="user-list">
|
||
|
|
{% for u in users %}
|
||
|
|
<button type="submit" name="user" value="{{ u }}" class="user-btn">
|
||
|
|
<span class="initials">{{ u[0] }}</span>{{ u }}
|
||
|
|
</button>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="divider"></div>
|
||
|
|
|
||
|
|
<div class="add-section">
|
||
|
|
<input type="text" name="user" placeholder="Or type your name...">
|
||
|
|
<button type="submit">Join</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer">SAE Engineering — Design Collaboration</div>
|
||
|
|
</form>
|
||
|
|
</body>
|
||
|
|
</html>
|