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>
|
<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
|
||||||
<div class="flex flex-col items-center justify-center space-y-8 max-w-4xl mx-auto w-full">
|
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 -->
|
<!-- 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">
|
<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>
|
||||||
<div class="space-y-4">
|
<div class="space-y-1 sm:space-y-3">
|
||||||
<h1 class="text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
|
<h1 class="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">Welcome to the Virtual Realm</h1>
|
||||||
<p class="text-xl text-muted-foreground max-w-md mx-auto">
|
<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
|
Your secure platform for events and community management
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -16,10 +17,11 @@
|
||||||
|
|
||||||
<!-- Demo Account Creation Card -->
|
<!-- Demo Account Creation Card -->
|
||||||
<Card class="w-full max-w-md">
|
<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 -->
|
<!-- Demo Badge -->
|
||||||
<div class="flex justify-center">
|
<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>
|
<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>
|
<span class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Demo Mode</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -28,32 +30,24 @@
|
||||||
<!-- Mode Toggle -->
|
<!-- Mode Toggle -->
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
<div class="inline-flex rounded-lg bg-muted p-1">
|
<div class="inline-flex rounded-lg bg-muted p-1">
|
||||||
<Button
|
<Button variant="ghost" size="sm" :class="activeMode === 'demo' ? 'bg-background shadow-sm' : ''"
|
||||||
variant="ghost"
|
@click="activeMode = 'demo'">
|
||||||
size="sm"
|
|
||||||
:class="activeMode === 'demo' ? 'bg-background shadow-sm' : ''"
|
|
||||||
@click="activeMode = 'demo'"
|
|
||||||
>
|
|
||||||
Demo Account
|
Demo Account
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button variant="ghost" size="sm" :class="activeMode === 'login' ? 'bg-background shadow-sm' : ''"
|
||||||
variant="ghost"
|
@click="activeMode = 'login'">
|
||||||
size="sm"
|
|
||||||
:class="activeMode === 'login' ? 'bg-background shadow-sm' : ''"
|
|
||||||
@click="activeMode = 'login'"
|
|
||||||
>
|
|
||||||
Sign In
|
Sign In
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Demo Mode Content -->
|
<!-- 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 -->
|
<!-- Demo Info -->
|
||||||
<div class="text-center space-y-3">
|
<div class="text-center space-y-2 sm:space-y-3">
|
||||||
<h2 class="text-2xl font-semibold">Create Demo Account</h2>
|
<h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Create Demo Account</h2>
|
||||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
<p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
|
||||||
Get instant access with a pre-funded demo account containing
|
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>
|
<span class="font-semibold text-green-600 dark:text-green-400">1,000,000 FAKE satoshis</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -65,12 +59,8 @@
|
||||||
<Label class="text-sm font-medium">Username</Label>
|
<Label class="text-sm font-medium">Username</Label>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<Input :value="generatedCredentials.username" readonly class="font-mono text-sm" />
|
<Input :value="generatedCredentials.username" readonly class="font-mono text-sm" />
|
||||||
<Button
|
<Button variant="outline" size="sm" @click="copyToClipboard(generatedCredentials.username)"
|
||||||
variant="outline"
|
class="shrink-0">
|
||||||
size="sm"
|
|
||||||
@click="copyToClipboard(generatedCredentials.username)"
|
|
||||||
class="shrink-0"
|
|
||||||
>
|
|
||||||
Copy
|
Copy
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -79,12 +69,8 @@
|
||||||
<Label class="text-sm font-medium">Password</Label>
|
<Label class="text-sm font-medium">Password</Label>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<Input :value="generatedCredentials.password" readonly class="font-mono text-sm" />
|
<Input :value="generatedCredentials.password" readonly class="font-mono text-sm" />
|
||||||
<Button
|
<Button variant="outline" size="sm" @click="copyToClipboard(generatedCredentials.password)"
|
||||||
variant="outline"
|
class="shrink-0">
|
||||||
size="sm"
|
|
||||||
@click="copyToClipboard(generatedCredentials.password)"
|
|
||||||
class="shrink-0"
|
|
||||||
>
|
|
||||||
Copy
|
Copy
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -96,23 +82,19 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Create Account Button -->
|
<!-- Create Account Button -->
|
||||||
<Button
|
<Button @click="createFakeAccount" :disabled="isLoading"
|
||||||
@click="createFakeAccount"
|
class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
|
||||||
:disabled="isLoading"
|
|
||||||
class="w-full h-12 text-lg font-medium"
|
|
||||||
size="lg"
|
|
||||||
>
|
|
||||||
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
|
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
|
||||||
{{ isLoading ? 'Creating Demo Account...' : 'Create Demo Account' }}
|
{{ isLoading ? 'Creating Demo Account...' : 'Create Demo Account' }}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Login Mode Content -->
|
<!-- Login Mode Content -->
|
||||||
<div v-else class="space-y-6">
|
<div v-else class="space-y-4 sm:space-y-6">
|
||||||
<!-- Login Info -->
|
<!-- Login Info -->
|
||||||
<div class="text-center space-y-3">
|
<div class="text-center space-y-2 sm:space-y-3">
|
||||||
<h2 class="text-2xl font-semibold">Sign In</h2>
|
<h2 class="text-lg sm:text-xl md:text-2xl font-semibold">Sign In</h2>
|
||||||
<p class="text-muted-foreground text-sm leading-relaxed">
|
<p class="text-muted-foreground text-xs sm:text-sm leading-relaxed">
|
||||||
Sign in to your existing account
|
Sign in to your existing account
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -121,32 +103,19 @@
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<Label for="login-username">Username or Email</Label>
|
<Label for="login-username">Username or Email</Label>
|
||||||
<Input
|
<Input id="login-username" v-model="loginForm.username" placeholder="Enter your username or email"
|
||||||
id="login-username"
|
@keydown.enter="handleLogin" />
|
||||||
v-model="loginForm.username"
|
|
||||||
placeholder="Enter your username or email"
|
|
||||||
@keydown.enter="handleLogin"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<Label for="login-password">Password</Label>
|
<Label for="login-password">Password</Label>
|
||||||
<Input
|
<Input id="login-password" type="password" v-model="loginForm.password"
|
||||||
id="login-password"
|
placeholder="Enter your password" @keydown.enter="handleLogin" />
|
||||||
type="password"
|
|
||||||
v-model="loginForm.password"
|
|
||||||
placeholder="Enter your password"
|
|
||||||
@keydown.enter="handleLogin"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Login Button -->
|
<!-- Login Button -->
|
||||||
<Button
|
<Button @click="handleLogin" :disabled="isLoading || !canLogin"
|
||||||
@click="handleLogin"
|
class="w-full h-10 sm:h-12 text-base sm:text-lg font-medium" size="lg">
|
||||||
:disabled="isLoading || !canLogin"
|
|
||||||
class="w-full h-12 text-lg font-medium"
|
|
||||||
size="lg"
|
|
||||||
>
|
|
||||||
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
|
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
|
||||||
{{ isLoading ? 'Signing In...' : 'Sign In' }}
|
{{ isLoading ? 'Signing In...' : 'Sign In' }}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -158,7 +127,8 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- Success Message -->
|
<!-- 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 }}
|
{{ successMessage }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -169,7 +139,9 @@
|
||||||
</p>
|
</p>
|
||||||
<div class="flex items-center justify-center gap-1 text-xs text-amber-600 dark:text-amber-400">
|
<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">
|
<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>
|
</svg>
|
||||||
<span class="font-medium">Demo data may be erased at any time</span>
|
<span class="font-medium">Demo data may be erased at any time</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue