78 lines
5.6 KiB
Vue
78 lines
5.6 KiB
Vue
<script setup lang="ts">
|
|
import { Head } from '@inertiajs/vue3';
|
|
import RegisterForm from '@/components/auth/RegisterForm.vue';
|
|
import UserLayout from '@/layouts/user/userlayout.vue';
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UserLayout>
|
|
<Head title="Register" />
|
|
<div class="register-container">
|
|
<div class="glow-orb orb-1"></div>
|
|
<div class="glow-orb orb-2"></div>
|
|
<div class="register-card">
|
|
<div class="card-header">
|
|
<h1 class="title">CREATE <span class="highlight">ACCOUNT</span></h1>
|
|
<p class="subtitle">Join the ultimate crypto protocol</p>
|
|
</div>
|
|
|
|
<div class="form-content">
|
|
<RegisterForm />
|
|
</div>
|
|
|
|
<div class="card-footer">
|
|
<p class="footer-text">
|
|
Already have an account?
|
|
<button @click="() => window.dispatchEvent(new Event('require-login'))" class="link-btn">Log in here</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UserLayout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Styles remain largely the same, but are now more robust due to API-first approach */
|
|
.register-container { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 100px); padding: 20px; position: relative; overflow: hidden; }
|
|
.register-card { width: 100%; max-width: 500px; background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 40px; position: relative; z-index: 10; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
|
|
.progress-container { margin-bottom: 30px; }
|
|
.progress-bar { height: 4px; background: #1a1a1a; border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
|
|
.progress-fill { height: 100%; background: #00f2ff; box-shadow: 0 0 10px #00f2ff; transition: width 0.4s ease; }
|
|
.steps-indicator { display: flex; justify-content: space-between; font-size: 10px; text-transform: uppercase; color: #444; font-weight: 700; }
|
|
.steps-indicator span.active { color: #00f2ff; text-shadow: 0 0 5px rgba(0, 242, 255, 0.5); }
|
|
.card-header { text-align: center; margin-bottom: 30px; }
|
|
.title { font-size: 1.8rem; font-weight: 900; color: white; letter-spacing: 2px; margin: 0; }
|
|
.highlight { color: #ff007a; text-shadow: 0 0 20px rgba(255, 0, 122, 0.5); }
|
|
.subtitle { color: #888; font-size: 0.8rem; margin-top: 5px; text-transform: uppercase; letter-spacing: 1px; }
|
|
.step-content { display: flex; flex-direction: column; gap: 20px; }
|
|
.input-group { display: flex; flex-direction: column; gap: 8px; position: relative; }
|
|
.input-wrapper { position: relative; }
|
|
.status-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 10; }
|
|
.input-group.invalid :deep(input) { border-color: #ef4444; animation: shake 0.4s ease-in-out; }
|
|
.input-group.valid :deep(input) { border-color: #22c55e; }
|
|
.error-msg { font-size: 11px; color: #ef4444; font-weight: 600; margin-top: -4px; }
|
|
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
|
|
.cyber-checkbox-wrapper { display: flex; align-items: center; gap: 15px; background: rgba(0, 0, 0, 0.4); border: 1px solid #222; padding: 15px; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; }
|
|
.cyber-checkbox-wrapper:hover { border-color: #333; background: rgba(255, 255, 255, 0.02); }
|
|
.cyber-checkbox-wrapper.checked { border-color: #00f2ff; background: rgba(0, 242, 255, 0.05); box-shadow: 0 0 20px rgba(0, 242, 255, 0.1); }
|
|
.cyber-box { width: 24px; height: 24px; background: #000; border: 2px solid #333; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
|
|
.cyber-checkbox-wrapper.checked .cyber-box { border-color: #00f2ff; box-shadow: 0 0 10px #00f2ff; }
|
|
.cyber-tick { width: 12px; height: 12px; background: #00f2ff; border-radius: 2px; box-shadow: 0 0 10px #00f2ff; animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
|
|
.cyber-label { display: flex; flex-direction: column; }
|
|
.neon-button { background: linear-gradient(90deg, #ff007a, #be005b); border: none; position: relative; overflow: hidden; transition: all 0.3s ease; }
|
|
.neon-button:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(255, 0, 122, 0.6); filter: brightness(1.1); }
|
|
.neon-button:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(1); }
|
|
.glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4; z-index: 0; animation: float 10s infinite ease-in-out; }
|
|
.orb-1 { width: 300px; height: 300px; background: #ff007a; top: -50px; left: -100px; }
|
|
.orb-2 { width: 400px; height: 400px; background: #00f2ff; bottom: -100px; right: -100px; animation-delay: -5s; }
|
|
@keyframes slideUp { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
|
|
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
|
|
@keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, 30px); } }
|
|
.fade-slide-enter-active, .fade-slide-leave-active { transition: all 0.3s ease; }
|
|
.fade-slide-enter-from { opacity: 0; transform: translateX(20px); }
|
|
.fade-slide-leave-to { opacity: 0; transform: translateX(-20px); }
|
|
:deep(input[type="date"]::-webkit-calendar-picker-indicator) { filter: invert(1); cursor: pointer; opacity: 0.6; transition: 0.2s; }
|
|
:deep(input[type="date"]::-webkit-calendar-picker-indicator:hover) { opacity: 1; }
|
|
</style>
|