Upload 4 files

index.html

@@ -4,208 +4,276 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Byweo - Crypto Trading Platform</title>
-    <link rel="stylesheet" href="styles.css">
     <style>
         * {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
-            font-family: 'Arial', sans-serif;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
         }
         
         body {
-            background-color: #121212;
+            background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
             color: #e0e0e0;
+            min-height: 100vh;
+            overflow-x: hidden;
         }
         
-        .landing-container {
+        .mobile-container {
             max-width: 100%;
             margin: 0 auto;
-            background-color: #1e1e1e;
+            background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
             min-height: 100vh;
+            position: relative;
         }
         
-        .landing-header {
+        .mobile-header {
             padding: 20px;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            border-bottom: 1px solid #333;
+            background: rgba(15, 20, 25, 0.95);
+            backdrop-filter: blur(10px);
+            position: sticky;
+            top: 0;
+            z-index: 100;
         }
         
         .logo {
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 12px;
         }
         
         .logo-icon {
-            width: 36px;
-            height: 36px;
-            background-color: #4fc3f7;
-            color: #121212;
-            border-radius: 8px;
+            width: 40px;
+            height: 40px;
+            background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
+            border-radius: 12px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-weight: bold;
-            font-size: 18px;
+            font-size: 20px;
+            color: white;
+            box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
         }
         
         .logo-text {
-            font-weight: bold;
-            font-size: 20px;
-            color: #e0e0e0;
+            font-weight: 700;
+            font-size: 24px;
+            color: #ffffff;
+            letter-spacing: -0.5px;
         }
         
-        .landing-nav {
+        .header-links {
             display: flex;
-            align-items: center;
+            gap: 20px;
+            font-size: 14px;
         }
         
-        .nav-link {
-            color: #e0e0e0;
+        .header-link {
+            color: #8892b0;
             text-decoration: none;
-            margin-right: 20px;
-            font-size: 16px;
+            transition: color 0.3s ease;
         }
         
-        .nav-link:hover {
-            color: #4fc3f7;
+        .header-link:hover {
+            color: #00d4ff;
         }
         
-        .auth-buttons {
+        .mobile-main {
+            padding: 40px 20px;
             display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: calc(100vh - 80px);
         }
         
-        .btn-login, .btn-signup {
-            padding: 10px 20px;
-            background-color: #2d2d2d;
-            color: #e0e0e0;
-            border: 1px solid #333;
-            border-radius: 6px;
-            font-weight: bold;
-            font-size: 14px;
-            cursor: pointer;
-            transition: background 0.3s;
+        .auth-page {
+            display: none;
+            width: 100%;
+            max-width: 400px;
+            margin: 0 auto;
         }
         
-        .btn-login:hover, .btn-signup:hover {
-            background-color: #333;
+        .auth-page.active {
+            display: block;
         }
         
-        .btn-signup.active {
-            background-color: #4fc3f7;
-            color: #121212;
-            border-color: #4fc3f7;
+        .crypto-visual {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 40px;
         }
         
-        .landing-main {
-            padding: 20px;
+        .crypto-logo {
+            width: 120px;
+            height: 120px;
+            background: linear-gradient(135deg, #00d4ff 0%, #0099cc 50%, #f7931a 100%);
+            border-radius: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            box-shadow: 0 20px 40px rgba(0, 212, 255, 0.3);
+            animation: float 3s ease-in-out infinite;
         }
         
-        .auth-container {
-            display: none;
+        .crypto-logo::before {
+            content: '₿';
+            font-size: 48px;
+            font-weight: bold;
+            color: white;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
         }
         
-        .auth-container.active {
-            display: block;
+        @keyframes float {
+            0%, 100% { transform: translateY(0px) rotate(0deg); }
+            50% { transform: translateY(-10px) rotate(5deg); }
         }
         
-        .crypto-graphics {
-            display: flex;
-            justify-content: center;
-            margin: 30px 0;
+        .auth-form-container {
+            background: rgba(26, 31, 46, 0.8);
+            border: 1px solid #2d3748;
+            border-radius: 20px;
+            padding: 32px;
+            backdrop-filter: blur(20px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
         }
         
-        .crypto-3d {
-            width: 100px;
-            height: 100px;
-            position: relative;
-            transform-style: preserve-3d;
-            animation: rotate 10s infinite linear;
+        .auth-header {
+            text-align: center;
+            margin-bottom: 24px;
         }
         
-        .crypto-coins {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(79, 195, 247, 0.2);
-            color: #4fc3f7;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 40px;
-            border: 2px solid #4fc3f7;
-            opacity: 0.9;
+        .auth-link {
+            color: #8892b0;
+            font-size: 14px;
+            margin-bottom: 16px;
+            display: block;
         }
         
-        .btc-coin { transform: translateZ(50px); }
-        .eth-coin { transform: rotateY(180deg) translateZ(50px); }
+        .link-text {
+            color: #00d4ff;
+            font-weight: 600;
+            text-decoration: none;
+            cursor: pointer;
+            transition: color 0.3s ease;
+        }
         
-        @keyframes rotate {
-            from { transform: rotateX(0deg) rotateY(0deg); }
-            to { transform: rotateX(360deg) rotateY(360deg); }
+        .link-text:hover {
+            color: #0099cc;
         }
         
-        .input-group {
-            margin-bottom: 20px;
+        h2 {
+            text-align: center;
+            margin-bottom: 32px;
+            font-size: 28px;
+            font-weight: 700;
+            color: #ffffff;
+            letter-spacing: -0.5px;
+        }
+        
+        .form-group {
+            margin-bottom: 24px;
         }
         
         label {
             display: block;
             margin-bottom: 8px;
-            font-weight: bold;
+            font-weight: 600;
             font-size: 14px;
-            color: #e0e0e0;
+            color: #ffffff;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
         }
         
         input[type="email"],
-        input[type="password"],
-        input[type="text"] {
+        input[type="password"] {
             width: 100%;
-            padding: 12px 15px;
-            background-color: #2d2d2d;
-            border: 1px solid #333;
-            border-radius: 6px;
+            padding: 16px 20px;
+            background: rgba(45, 55, 72, 0.6);
+            border: 2px solid #2d3748;
+            border-radius: 12px;
             font-size: 16px;
-            color: #e0e0e0;
+            color: #ffffff;
+            transition: all 0.3s ease;
         }
         
         input:focus {
-            border-color: #4fc3f7;
+            border-color: #00d4ff;
             outline: none;
+            background: rgba(45, 55, 72, 0.8);
+            box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
+        }
+        
+        input::placeholder {
+            color: #4a5568;
+        }
+        
+        .password-input {
+            position: relative;
+        }
+        
+        .password-toggle {
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: pointer;
+            user-select: none;
+            color: #00d4ff;
+            font-size: 18px;
+            transition: color 0.3s ease;
+        }
+        
+        .password-toggle:hover {
+            color: #0099cc;
         }
         
         .checkbox-group {
             display: flex;
             align-items: flex-start;
-            margin: 25px 0;
-            font-size: 12px;
-            color: #b0b0b0;
+            margin: 24px 0;
+            font-size: 14px;
+            color: #8892b0;
+            line-height: 1.5;
         }
         
         .checkbox-group input {
-            margin-right: 10px;
-            margin-top: 3px;
-            accent-color: #4fc3f7;
+            margin-right: 12px;
+            margin-top: 2px;
+            accent-color: #00d4ff;
+            width: 18px;
+            height: 18px;
+            flex-shrink: 0;
         }
         
-        .btn-primary {
+        .btn-continue {
             width: 100%;
-            padding: 14px;
-            background-color: #4fc3f7;
-            color: #121212;
+            padding: 18px;
+            background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
+            color: #0f1419;
             border: none;
-            border-radius: 6px;
-            font-weight: bold;
+            border-radius: 12px;
+            font-weight: 700;
             font-size: 16px;
             cursor: pointer;
-            transition: background 0.3s;
+            transition: all 0.3s ease;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
         }
         
-        .btn-primary:hover {
-            background-color: #81d4fa;
+        .btn-continue:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(0, 212, 255, 0.4);
+        }
+        
+        .btn-continue:active {
+            transform: translateY(0);
         }
         
         .notification {
@@ -213,245 +281,139 @@
             top: 20px;
             left: 50%;
             transform: translateX(-50%);
-            padding: 12px 20px;
-            background-color: #4fc3f7;
-            color: #121212;
-            border-radius: 4px;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+            padding: 16px 24px;
+            border-radius: 12px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
             display: none;
             z-index: 1000;
+            font-weight: 600;
+            backdrop-filter: blur(10px);
         }
         
-        .notification.error {
-            background-color: #f44336;
+        .notification.success {
+            background: rgba(16, 185, 129, 0.9);
             color: white;
+            border: 1px solid #10b981;
         }
         
-        .forgot-password {
-            margin-bottom: 20px;
-            text-align: right;
+        .notification.error {
+            background: rgba(239, 68, 68, 0.9);
+            color: white;
+            border: 1px solid #ef4444;
         }
         
-        .link-text {
-            color: #4fc3f7;
-            text-decoration: none;
+        .notification.show {
+            display: block;
+            animation: slideIn 0.3s ease;
         }
         
-        .link-text:hover {
-            text-decoration: underline;
+        @keyframes slideIn {
+            from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
+            to { transform: translateX(-50%) translateY(0); opacity: 1; }
         }
         
         @media (min-width: 768px) {
-            .landing-container {
+            .mobile-container {
                 max-width: 500px;
-                margin: 40px auto;
-                border-radius: 10px;
-                box-shadow: 0 4px 20px rgba(0,0,0,0.3);
-                min-height: auto;
+                margin: 20px auto;
+                border-radius: 20px;
+                box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+                min-height: calc(100vh - 40px);
+                overflow: hidden;
+            }
+            
+            .mobile-main {
+                padding: 60px 40px;
             }
         }
     </style>
 </head>
 <body>
-    <div class="landing-container">
-        <header class="landing-header">
+    <div class="mobile-container">
+        <header class="mobile-header">
             <div class="logo">
-                <div class="logo-icon">
-                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
-                        <rect width="32" height="32" rx="8" fill="url(#gradient1)"/>
-                        <path d="M8 12L16 8L24 12L16 16L8 12Z" fill="white" opacity="0.9"/>
-                        <path d="M8 16L16 12L24 16L16 20L8 16Z" fill="white" opacity="0.7"/>
-                        <path d="M8 20L16 16L24 20L16 24L8 20Z" fill="white" opacity="0.5"/>
-                        <defs>
-                            <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
-                                <stop offset="0%" style="stop-color:#00D4FF"/>
-                                <stop offset="100%" style="stop-color:#0099CC"/>
-                            </linearGradient>
-                        </defs>
-                    </svg>
-                </div>
+                <div class="logo-icon">B</div>
                 <span class="logo-text">Byweo</span>
             </div>
-            <nav class="landing-nav">
-                <a href="#" class="nav-link">Buy Crypto</a>
-                <a href="#" class="nav-link">Terms of Use</a>
-                <a href="#" class="nav-link">Privacy Policy</a>
-                <div class="auth-buttons">
-                    <button class="btn-login" onclick="switchToLogin()">Login</button>
-                    <button class="btn-signup active" onclick="switchToRegister()">Sign up</button>
-                </div>
-            </nav>
+            <div class="header-links">
+                <a href="#" class="header-link">Buy Crypto</a>
+                <a href="#" class="header-link">Terms of Use</a>
+                <a href="#" class="header-link">Privacy Policy</a>
+            </div>
         </header>
 
-        <main class="landing-main">
-            <div class="landing-content">
-                <div class="crypto-graphics">
-                    <div class="crypto-3d">
-                        <div class="crypto-coins">
-                            <div class="btc-coin">₿</div>
-                            <div class="eth-coin">Ξ</div>
-                        </div>
-                    </div>
+        <main class="mobile-main">
+            <!-- Registration Page -->
+            <div id="landingPage" class="auth-page active">
+                <div class="crypto-visual">
+                    <div class="crypto-logo"></div>
                 </div>
 
-                <div class="auth-section">
-                    <!-- Registration/Signup Form -->
-                    <div id="registerForm" class="auth-container form-section active">
-                        <h2>Create Your Account</h2>
-                        <p class="subtitle">Join thousands of traders on Byweo</p>
-                        
-                        <form id="registerFormElement">
-                            <div class="input-group">
-                                <label>EMAIL ADDRESS</label>
-                                <input type="email" id="registerEmail" placeholder="Enter your email address" required>
-                            </div>
-                            <div class="input-group">
-                                <label>PASSWORD</label>
-                                <input type="password" id="registerPassword" placeholder="Create a strong password" required>
-                            </div>
-                            <div class="input-group">
-                                <label>CONFIRM PASSWORD</label>
-                                <input type="password" id="confirmPassword" placeholder="Confirm your password" required>
+                <div class="auth-form-container">
+                    <div class="auth-header">
+                        <span class="auth-link">Already have an account? <span class="link-text" onclick="switchToLogin()">Login</span></span>
+                    </div>
+                    <h2>Sign up</h2>
+                    <form id="registerFormElement">
+                        <div class="form-group">
+                            <label>EMAIL</label>
+                            <input type="email" id="registerEmail" placeholder="Email address" required>
+                        </div>
+                        <div class="form-group">
+                            <label>PASSWORD</label>
+                            <div class="password-input">
+                                <input type="password" id="registerPassword" placeholder="Password" required>
+                                <span class="password-toggle" onclick="togglePassword('registerPassword')">👁</span>
                             </div>
-                            <div class="checkbox-group">
-                                <input type="checkbox" id="termsCheck" required>
-                                <label for="termsCheck">
-                                    By signing up I agree that I'm 18 years of age or older, to the 
-                                    <a href="#" class="link-text">Terms of Use</a>, 
-                                    <a href="#" class="link-text">Privacy Policy</a>
-                                </label>
+                        </div>
+                        <div class="form-group">
+                            <label>CONFIRM PASSWORD</label>
+                            <div class="password-input">
+                                <input type="password" id="confirmPassword" placeholder="Confirm password" required>
+                                <span class="password-toggle" onclick="togglePassword('confirmPassword')">👁</span>
                             </div>
-                            <button type="submit" class="btn-primary">Create Account</button>
-                        </form>
-                        
-                        <div class="switch-form">
-                            Already have an account? <span onclick="switchToLogin()">Sign in here</span>
                         </div>
-                    </div>
+                        <div class="checkbox-group">
+                            <input type="checkbox" id="termsCheck" required>
+                            <label for="termsCheck">By signing up I agree that I'm 18 years of age or older, to the <a href="#" class="link-text">Terms of Use</a>, <a href="#" class="link-text">Privacy Policy</a></label>
+                        </div>
+                        <button type="submit" class="btn-continue">Continue</button>
+                    </form>
+                </div>
+            </div>
 
-                    <!-- Login Form -->
-                    <div id="loginForm" class="auth-container form-section">
-                        <h2>Welcome Back</h2>
-                        <p class="subtitle">Sign in to your Byweo account</p>
-                        
-                        <form id="loginFormElement">
-                            <div class="input-group">
-                                <label>EMAIL ADDRESS</label>
-                                <input type="email" id="loginEmail" placeholder="Enter your email address" required>
-                            </div>
-                            <div class="input-group">
-                                <label>PASSWORD</label>
-                                <input type="password" id="loginPassword" placeholder="Enter your password" required>
-                            </div>
-                            <div class="forgot-password">
-                                <a href="#" class="link-text">Forgot your password?</a>
+            <!-- Login Page -->
+            <div id="loginForm" class="auth-page">
+                <div class="crypto-visual">
+                    <div class="crypto-logo"></div>
+                </div>
+
+                <div class="auth-form-container">
+                    <div class="auth-header">
+                        <span class="auth-link">Don't have an account? <span class="link-text" onclick="switchToRegister()">Sign up</span></span>
+                    </div>
+                    <h2>Login</h2>
+                    <form id="loginFormElement">
+                        <div class="form-group">
+                            <label>EMAIL</label>
+                            <input type="email" id="loginEmail" placeholder="Email address" required>
+                        </div>
+                        <div class="form-group">
+                            <label>PASSWORD</label>
+                            <div class="password-input">
+                                <input type="password" id="loginPassword" placeholder="Password" required>
+                                <span class="password-toggle" onclick="togglePassword('loginPassword')">👁</span>
                             </div>
-                            <button type="submit" class="btn-primary">Sign In</button>
-                        </form>
-                        
-                        <div class="switch-form">
-                            Don't have an account? <span onclick="switchToRegister()">Create one here</span>
                         </div>
-                    </div>
+                        <button type="submit" class="btn-continue">Continue</button>
+                    </form>
                 </div>
             </div>
         </main>
     </div>
 
-    <!-- Notification -->
     <div id="notification" class="notification"></div>
-
-    <script src="script.js"></script>
-    <script>
-        // DOM Elements
-const registerForm = document.getElementById('registerForm');
-const loginFormElement = document.getElementById('loginFormElement');
-const notification = document.getElementById('notification');
-
-// Switch to Login
-function switchToLogin() {
-    registerForm.classList.remove('active');
-    loginFormElement.classList.add('active');
-}
-
-// Switch to Register
-function switchToRegister() {
-    registerForm.classList.add('active');
-    loginFormElement.classList.remove('active');
-}
-
-// Show Notification
-function showNotification(message, isError = false) {
-    notification.textContent = message;
-    notification.style.backgroundColor = isError ? '#f44336' : '#4CAF50';
-    notification.style.display = 'block';
     
-    setTimeout(() => {
-        notification.style.display = 'none';
-    }, 3000);
-}
-
-// Form Validation and Submission
-document.getElementById('registerFormElement').addEventListener('submit', function(e) {
-    e.preventDefault();
-    
-    const email = document.getElementById('registerEmail').value;
-    const password = document.getElementById('registerPassword').value;
-    const confirm = document.getElementById('confirmPassword').value;
-    const termsChecked = document.getElementById('termsCheck').checked;
-    
-    // Simple validation
-    if (!email || !password || !confirm) {
-        showNotification('Please fill in all fields', true);
-        return;
-    }
-    
-    if (password !== confirm) {
-        showNotification('Passwords do not match', true);
-        return;
-    }
-    
-    if (!termsChecked) {
-        showNotification('You must agree to the terms', true);
-        return;
-    }
-    
-    if (password.length < 6) {
-        showNotification('Password must be at least 6 characters', true);
-        return;
-    }
-    
-    // Simulate successful registration
-    showNotification('Registration successful!');
-    setTimeout(() => {
-        switchToLogin();
-    }, 1500);
-});
-
-// Login Form Submission with Dashboard Redirection
-document.getElementById('loginFormElement').addEventListener('submit', function(e) {
-    e.preventDefault();
-    
-    const email = document.getElementById('loginEmail').value;
-    const password = document.getElementById('loginPassword').value;
-    
-    // Simple validation
-    if (!email || !password) {
-        showNotification('Please fill in all fields', true);
-        return;
-    }
-    
-    // Simulate successful login
-    showNotification('Login successful! Redirecting to dashboard...');
-    
-    // Redirect to dashboard after 1.5 seconds
-    setTimeout(() => {
-        window.location.href = 'dashboard.html';
-    }, 1500);
-});
-
-// Initialize with register form active
-switchToRegister();
-    </script>
+    <script src="script.js"></script>
 </body>
 </html>