103 lines
7.3 KiB
HTML
103 lines
7.3 KiB
HTML
<h2>Auth Page Layout</h2>
|
|
<p class="subtitle">Centered card layout used across all auth pages (login, signup, forgot-password, reset-password)</p>
|
|
|
|
<div class="split">
|
|
<div class="mockup">
|
|
<div class="mockup-header">Desktop Layout</div>
|
|
<div class="mockup-body" style="background: #100b14; padding: 0; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
<!-- Background decorative elements -->
|
|
<div style="position: absolute; top: 40px; left: 40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(235,55,121,0.15), transparent); filter: blur(30px);"></div>
|
|
<div style="position: absolute; bottom: 60px; right: 60px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(87,27,139,0.2), transparent); filter: blur(25px);"></div>
|
|
|
|
<!-- Auth Card -->
|
|
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 32px; width: 100%; max-width: 400px; margin: 20px; backdrop-filter: blur(10px);">
|
|
<!-- Logo -->
|
|
<div style="text-align: center; margin-bottom: 24px;">
|
|
<div style="font-size: 20px; font-weight: bold; color: #ebe4f1;">🔐 DeckyVault</div>
|
|
<div style="font-size: 13px; color: rgba(235,228,241,0.5); margin-top: 4px;">Sign in to your account</div>
|
|
</div>
|
|
|
|
<!-- Social Buttons -->
|
|
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
|
|
<button style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 13px; cursor: pointer;">🔵 Google</button>
|
|
<button style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 13px; cursor: pointer;">🟣 Discord</button>
|
|
</div>
|
|
|
|
<!-- Divider -->
|
|
<div style="display: flex; align-items: center; gap: 12px; margin: 16px 0;">
|
|
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
|
|
<span style="font-size: 11px; color: rgba(235,228,241,0.4); text-transform: uppercase;">or continue with email</span>
|
|
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
|
|
</div>
|
|
|
|
<!-- Email Input -->
|
|
<div style="margin-bottom: 12px;">
|
|
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 4px;">Email</label>
|
|
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; box-sizing: border-box;" placeholder="you@example.com" autocomplete="username webauthn" />
|
|
</div>
|
|
|
|
<!-- Password Input (conditional) -->
|
|
<div style="margin-bottom: 16px;">
|
|
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 4px;">Password</label>
|
|
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; box-sizing: border-box;" type="password" placeholder="••••••••" autocomplete="current-password webauthn" />
|
|
</div>
|
|
|
|
<!-- Submit -->
|
|
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600; cursor: pointer;">Continue</button>
|
|
|
|
<!-- Links -->
|
|
<div style="text-align: center; margin-top: 16px; font-size: 12px;">
|
|
<a style="color: rgba(235,228,241,0.5); text-decoration: none;">Forgot password?</a>
|
|
<span style="color: rgba(235,228,241,0.3); margin: 0 8px;">•</span>
|
|
<a style="color: #eb3779; text-decoration: none;">Create account</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mockup">
|
|
<div class="mockup-header">Mobile Layout</div>
|
|
<div class="mockup-body" style="background: #100b14; padding: 0; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 24px;">
|
|
<!-- Same card but full-width on mobile -->
|
|
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 24px 20px; width: calc(100% - 32px); max-width: none; margin: 0 16px;">
|
|
<div style="text-align: center; margin-bottom: 20px;">
|
|
<div style="font-size: 18px; font-weight: bold; color: #ebe4f1;">🔐 DeckyVault</div>
|
|
<div style="font-size: 12px; color: rgba(235,228,241,0.5); margin-top: 4px;">Sign in to your account</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
|
|
<button style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 13px;">🔵 Google</button>
|
|
<button style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 13px;">🟣 Discord</button>
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; gap: 12px; margin: 16px 0;">
|
|
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
|
|
<span style="font-size: 11px; color: rgba(235,228,241,0.4);">or email</span>
|
|
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
|
|
</div>
|
|
|
|
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; margin-bottom: 10px; box-sizing: border-box;" placeholder="you@example.com" />
|
|
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; margin-bottom: 16px; box-sizing: border-box;" type="password" placeholder="••••••••" />
|
|
|
|
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600;">Continue</button>
|
|
|
|
<div style="text-align: center; margin-top: 14px; font-size: 12px;">
|
|
<a style="color: rgba(235,228,241,0.5);">Forgot password?</a>
|
|
<span style="color: rgba(235,228,241,0.3); margin: 0 8px;">•</span>
|
|
<a style="color: #eb3779;">Create account</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" style="margin-top: 20px;">
|
|
<h3>Layout Specs</h3>
|
|
<ul>
|
|
<li><strong>Container:</strong> Full viewport height minus navbar, centered content</li>
|
|
<li><strong>Card:</strong> Max-width 400px, glass-morphism style (subtle border, blur backdrop)</li>
|
|
<li><strong>Background:</strong> Subtle radial gradient orbs for depth (pink + purple)</li>
|
|
<li><strong>Responsive:</strong> Card goes full-width on mobile with reduced padding</li>
|
|
<li><strong>Animations:</strong> Card fades in with Motion (consistent with existing navbar pattern)</li>
|
|
</ul>
|
|
</div> |