Refactor LoginDemo.vue for improved layout and accessibility
- Adjusted layout classes for better responsiveness and spacing in the login demo page. - Updated text sizes and spacing for headings and paragraphs to enhance readability across different screen sizes. - Modified button sizes and styles for a more consistent user experience. - Improved accessibility by ensuring proper semantic structure and spacing in demo and login sections. These changes enhance the overall user interface and experience of the LoginDemo component.
This commit is contained in:
parent
fe7ed67946
commit
1511505d0f
1 changed files with 41 additions and 69 deletions
|
|
@ -1,14 +1,15 @@
|
|||
<template>
|
||||
<div class="min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8">
|
||||
<div class="flex flex-col items-center justify-center space-y-8 max-w-4xl mx-auto w-full">
|
||||
<div
|
||||
class="min-h-screen flex items-start sm:items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8 sm:py-12">
|
||||
<div class="flex flex-col items-center justify-center space-y-3 sm:space-y-6 max-w-4xl mx-auto w-full mt-8 sm:mt-0">
|
||||
<!-- Welcome Section -->
|
||||
<div class="text-center space-y-6">
|
||||
<div class="text-center space-y-2 sm:space-y-4">
|
||||
<div class="flex justify-center">
|
||||
<img src="@/assets/logo.png" alt="Logo" class="h-36 w-36 sm:h-48 sm:w-48 md:h-60 md:w-60" />
|
||||
<img src="@/assets/logo.png" alt="Logo" class="h-34 w-34 sm:h-42 sm:w-42 lg:h-50 lg:w-50" />
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<h1 class="text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
|
||||
<p class="text-xl text-muted-foreground max-w-md mx-auto">
|
||||
<div class="space-y-1 sm:space-y-3">
|
||||
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
|
||||
<p class="text-sm sm:text-base md:text-xl text-muted-foreground max-w-md mx-auto px-4">
|
||||
Your secure platform for events and community management
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -16,10 +17,11 @@
|
|||
|
||||
<!-- Demo Account Creation Card -->
|
||||
<Card class="w-full max-w-md">
|
||||
<CardContent class="p-8 space-y-6">
|
||||
<CardContent class="p-4 sm:p-6 md:p-8 space-y-4 sm:space-y-6">
|
||||
<!-- Demo Badge -->
|
||||
<div class="flex justify-center">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
|
||||
<div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
|
||||
<span class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Demo Mode</span>
|
||||
</div>
|
||||
|
|
@ -28,31 +30,23 @@
|
|||
<!-- Mode Toggle -->
|
||||
<div class="flex justify-center">
|
||||
<div class="inline-flex rounded-lg bg-muted p-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
:class="activeMode === 'demo' ? 'bg-background shadow-sm' : ''"
|
||||
@click="activeMode = 'demo'"
|
||||
>
|
||||
<Button variant="ghost" size="sm" :class="activeMode === 'demo' ? 'bg-background shadow-sm' : ''"
|
||||
@click="activeMode = 'demo'">
|
||||
Demo Account
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
:class="activeMode === 'login' ? 'bg-background shadow-sm' : ''"
|
||||
@click="activeMode = 'login'"
|
||||
>
|
||||
<Button variant="ghost" size="sm" :class="activeMode === 'login' ? 'bg-background shadow-sm' : ''"
|
||||
@click="activeMode = 'login'">
|
||||
Sign In
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo Mode Content -->
|
||||
<div v-if="activeMode === 'demo'" class="space-y-6">
|
||||
<div v-if="activeMode === 'demo'" class="space-y-4 sm:space-y-6">
|
||||
<!-- Demo Info -->
|
||||
<div class="text-center space-y-3">
|
||||
<h2 class="text-2xl font-semibold">Create Demo Account</h2>
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
||||
<div class="text-center space-y-2 sm:space-y-3">
|
||||
<h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Create Demo Account</h2>
|
||||
<p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
|
||||
Get instant access with a pre-funded demo account containing
|
||||
<span class="font-semibold text-green-600 dark:text-green-400">1,000,000 FAKE satoshis</span>
|
||||
</p>
|
||||
|
|
@ -65,12 +59,8 @@
|
|||
<Label class="text-sm font-medium">Username</Label>
|
||||
<div class="flex items-center gap-2">
|
||||
<Input :value="generatedCredentials.username" readonly class="font-mono text-sm" />
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="copyToClipboard(generatedCredentials.username)"
|
||||
class="shrink-0"
|
||||
>
|
||||
<Button variant="outline" size="sm" @click="copyToClipboard(generatedCredentials.username)"
|
||||
class="shrink-0">
|
||||
Copy
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -79,12 +69,8 @@
|
|||
<Label class="text-sm font-medium">Password</Label>
|
||||
<div class="flex items-center gap-2">
|
||||
<Input :value="generatedCredentials.password" readonly class="font-mono text-sm" />
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="copyToClipboard(generatedCredentials.password)"
|
||||
class="shrink-0"
|
||||
>
|
||||
<Button variant="outline" size="sm" @click="copyToClipboard(generatedCredentials.password)"
|
||||
class="shrink-0">
|
||||
Copy
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -96,23 +82,19 @@
|
|||
</div>
|
||||
|
||||
<!-- Create Account Button -->
|
||||
<Button
|
||||
@click="createFakeAccount"
|
||||
:disabled="isLoading"
|
||||
class="w-full h-12 text-lg font-medium"
|
||||
size="lg"
|
||||
>
|
||||
<Button @click="createFakeAccount" :disabled="isLoading"
|
||||
class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
|
||||
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
|
||||
{{ isLoading ? 'Creating Demo Account...' : 'Create Demo Account' }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Login Mode Content -->
|
||||
<div v-else class="space-y-6">
|
||||
<div v-else class="space-y-4 sm:space-y-6">
|
||||
<!-- Login Info -->
|
||||
<div class="text-center space-y-3">
|
||||
<h2 class="text-2xl font-semibold">Sign In</h2>
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
||||
<div class="text-center space-y-2 sm:space-y-3">
|
||||
<h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Sign In</h2>
|
||||
<p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
|
||||
Sign in to your existing account
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -121,32 +103,19 @@
|
|||
<div class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="login-username">Username or Email</Label>
|
||||
<Input
|
||||
id="login-username"
|
||||
v-model="loginForm.username"
|
||||
placeholder="Enter your username or email"
|
||||
@keydown.enter="handleLogin"
|
||||
/>
|
||||
<Input id="login-username" v-model="loginForm.username" placeholder="Enter your username or email"
|
||||
@keydown.enter="handleLogin" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="login-password">Password</Label>
|
||||
<Input
|
||||
id="login-password"
|
||||
type="password"
|
||||
v-model="loginForm.password"
|
||||
placeholder="Enter your password"
|
||||
@keydown.enter="handleLogin"
|
||||
/>
|
||||
<Input id="login-password" type="password" v-model="loginForm.password"
|
||||
placeholder="Enter your password" @keydown.enter="handleLogin" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Login Button -->
|
||||
<Button
|
||||
@click="handleLogin"
|
||||
:disabled="isLoading || !canLogin"
|
||||
class="w-full h-12 text-lg font-medium"
|
||||
size="lg"
|
||||
>
|
||||
<Button @click="handleLogin" :disabled="isLoading || !canLogin"
|
||||
class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
|
||||
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
|
||||
{{ isLoading ? 'Signing In...' : 'Sign In' }}
|
||||
</Button>
|
||||
|
|
@ -158,7 +127,8 @@
|
|||
</p>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div v-if="successMessage" class="text-sm text-green-600 dark:text-green-400 text-center bg-green-50 dark:bg-green-950/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
|
||||
<div v-if="successMessage"
|
||||
class="text-sm text-green-600 dark:text-green-400 text-center bg-green-50 dark:bg-green-950/20 p-3 rounded-lg border border-green-200 dark:border-green-800">
|
||||
{{ successMessage }}
|
||||
</div>
|
||||
|
||||
|
|
@ -169,7 +139,9 @@
|
|||
</p>
|
||||
<div class="flex items-center justify-center gap-1 text-xs text-amber-600 dark:text-amber-400">
|
||||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
<path fill-rule="evenodd"
|
||||
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="font-medium">Demo data may be erased at any time</span>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue