Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>WhatsApp Clone</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet"> | |
| </head> | |
| <body class="landing-page"> | |
| <div class="container-fluid h-100"> | |
| <div class="row h-100"> | |
| <div class="col-lg-6 d-flex align-items-center justify-content-center"> | |
| <div class="landing-content text-center"> | |
| <div class="logo-container mb-4"> | |
| <img src="{{ url_for('static', filename='images/logo.svg') }}" alt="WhatsApp Clone" class="logo"> | |
| </div> | |
| <h1 class="display-4 fw-bold text-success mb-3">WhatsApp Clone</h1> | |
| <p class="lead mb-4">Connect with friends and family instantly. Send messages, share files, record voice messages, and stay in touch wherever you are.</p> | |
| <div class="features mb-5"> | |
| <div class="feature-item d-flex align-items-center mb-3"> | |
| <i class="fas fa-comments text-success me-3"></i> | |
| <span>Real-time messaging</span> | |
| </div> | |
| <div class="feature-item d-flex align-items-center mb-3"> | |
| <i class="fas fa-users text-success me-3"></i> | |
| <span>Group chats (3-10 members)</span> | |
| </div> | |
| <div class="feature-item d-flex align-items-center mb-3"> | |
| <i class="fas fa-file text-success me-3"></i> | |
| <span>File sharing & downloads</span> | |
| </div> | |
| <div class="feature-item d-flex align-items-center mb-3"> | |
| <i class="fas fa-microphone text-success me-3"></i> | |
| <span>Voice message recording</span> | |
| </div> | |
| <div class="feature-item d-flex align-items-center mb-3"> | |
| <i class="fas fa-check-double text-success me-3"></i> | |
| <span>Message status tracking</span> | |
| </div> | |
| <div class="feature-item d-flex align-items-center mb-3"> | |
| <i class="fas fa-circle text-success me-3"></i> | |
| <span>Online/offline status</span> | |
| </div> | |
| </div> | |
| <button class="btn btn-success btn-lg px-5" onclick="window.location.href='/register'"> | |
| <i class="fas fa-user-plus me-2"></i>Create Account | |
| </button> | |
| </div> | |
| </div> | |
| <div class="col-lg-6 d-none d-lg-flex align-items-center justify-content-center bg-light"> | |
| <div class="chat-preview"> | |
| <div class="phone-mockup"> | |
| <div class="phone-screen"> | |
| <div class="chat-header"> | |
| <div class="d-flex align-items-center"> | |
| <div class="avatar bg-success me-2"></div> | |
| <div> | |
| <div class="fw-bold">John Doe</div> | |
| <small class="text-success">online</small> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-messages"> | |
| <div class="message received"> | |
| <div class="message-bubble">Hello there! 👋</div> | |
| </div> | |
| <div class="message sent"> | |
| <div class="message-bubble">Hi! How are you?</div> | |
| </div> | |
| <div class="message received"> | |
| <div class="message-bubble">📎 document.pdf</div> | |
| </div> | |
| <div class="message sent"> | |
| <div class="message-bubble">🎵 Voice message</div> | |
| </div> | |
| <div class="message received"> | |
| <div class="message-bubble">Thanks for sharing! 😊</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| </body> | |
| </html> | |