feat: Introduce mobile simulator UI with new routes, screens, shared application chrome, and updated dependencies.
This commit is contained in:
62
WebApp/src/lib/sim/screens/AuthScreen.svelte
Normal file
62
WebApp/src/lib/sim/screens/AuthScreen.svelte
Normal file
@@ -0,0 +1,62 @@
|
||||
<section
|
||||
id="screen-auth"
|
||||
class="flex flex-col items-center justify-center min-h-[70vh] animate-fade-in max-w-sm mx-auto"
|
||||
>
|
||||
<div class="text-center space-y-3 mb-8">
|
||||
<div
|
||||
class="w-20 h-20 bg-gradient-to-tr from-blue-600 to-indigo-600 rounded-3xl mx-auto flex items-center justify-center shadow-lg shadow-blue-900/20"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold text-white tracking-tight">SecureCam Web</h2>
|
||||
<p class="text-gray-400 text-sm">Sign in to manage visual security from your browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="w-full glass-card p-6 md:p-8 rounded-3xl space-y-4 shadow-2xl">
|
||||
<div class="form-control">
|
||||
<label class="label hidden" for="authEmail"><span class="label-text text-gray-400">Email</span></label>
|
||||
<input
|
||||
id="authEmail"
|
||||
type="email"
|
||||
placeholder="Email address"
|
||||
class="input bg-black/40 border-white/10 text-sm focus:border-blue-500 focus:outline-none transition-colors w-full h-12 rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<input
|
||||
id="authPassword"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
class="input bg-black/40 border-white/10 text-sm focus:border-blue-500 focus:outline-none transition-colors w-full h-12 rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
<div id="authNameField" class="form-control hidden">
|
||||
<input
|
||||
id="authName"
|
||||
type="text"
|
||||
placeholder="Your Name"
|
||||
class="input bg-black/40 border-white/10 text-sm focus:border-blue-500 focus:outline-none transition-colors w-full h-12 rounded-xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="pt-4 space-y-4">
|
||||
<button id="signInBtn" class="btn btn-premium w-full h-12 rounded-xl shadow-lg shadow-blue-900/20 text-base"
|
||||
>Sign In</button
|
||||
>
|
||||
<div class="divider text-xs text-gray-600">OR</div>
|
||||
<button
|
||||
id="toggleAuthModeBtn"
|
||||
class="btn btn-ghost w-full text-gray-400 hover:text-white hover:bg-white/5 rounded-xl border border-white/5"
|
||||
>
|
||||
Create an account
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user