Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Simple Chat Room</title> | |
| <!-- Importing Phosphor Icons for sleek, minimalist vector graphics --> | |
| <script src="https://unpkg.com/@phosphor-icons/web"></script> | |
| <style> | |
| /* | |
| * MODERN CSS RESET & VARIABLES | |
| */ | |
| :root { | |
| /* iOS System Font Stack */ | |
| --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| /* Glassmorphism Tokens */ | |
| --glass-bg: rgba(255, 255, 255, 0.65); | |
| --glass-border: rgba(255, 255, 255, 0.4); | |
| --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); | |
| --blur-strength: 20px; | |
| /* Vibrant Accents */ | |
| --primary-gradient: linear-gradient(135deg, #007AFF 0%, #5856D6 100%); | |
| --text-main: #1d1d1f; | |
| --text-secondary: #86868b; | |
| /* Spacing & Radius */ | |
| --radius-lg: 24px; | |
| --radius-md: 16px; | |
| --radius-pill: 999px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: var(--font-stack); | |
| background-color: #f2f2f7; /* iOS Light Gray Background */ | |
| color: var(--text-main); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| /* | |
| * STUDIO LIGHTING BACKGROUND | |
| * Creating depth of field with blurred blobs | |
| */ | |
| .ambient-light { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| background: #f2f2f7; | |
| } | |
| .orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.6; | |
| animation: float 10s infinite ease-in-out alternate; | |
| } | |
| .orb-1 { | |
| width: 400px; | |
| height: 400px; | |
| background: #ff9a9e; | |
| top: -100px; | |
| left: -100px; | |
| } | |
| .orb-2 { | |
| width: 500px; | |
| height: 500px; | |
| background: #a18cd1; | |
| bottom: -150px; | |
| right: -100px; | |
| animation-delay: -5s; | |
| } | |
| .orb-3 { | |
| width: 300px; | |
| height: 300px; | |
| background: #fbc2eb; | |
| top: 40%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| opacity: 0.4; | |
| } | |
| @keyframes float { | |
| 0% { transform: translate(0, 0); } | |
| 100% { transform: translate(30px, 50px); } | |
| } | |
| /* | |
| * MAIN GLASS CONTAINER | |
| */ | |
| .container { | |
| width: 90%; | |
| max-width: 1000px; | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(var(--blur-strength)); | |
| -webkit-backdrop-filter: blur(var(--blur-strength)); | |
| border: 1px solid var(--glass-border); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--glass-shadow); | |
| padding: 3rem 2rem; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| @keyframes slideUp { | |
| from { opacity: 0; transform: translateY(40px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Top Header Link */ | |
| .top-bar { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| z-index: 10; | |
| } | |
| .anycoder-link { | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| padding: 6px 12px; | |
| background: rgba(255, 255, 255, 0.5); | |
| border-radius: var(--radius-pill); | |
| transition: all 0.3s ease; | |
| } | |
| .anycoder-link:hover { | |
| color: #007AFF; | |
| background: rgba(255, 255, 255, 0.9); | |
| } | |
| /* | |
| * HERO SECTION | |
| */ | |
| .hero h1 { | |
| font-size: 3rem; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 0.5rem; | |
| background: var(--primary-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| display: inline-block; | |
| } | |
| .subtitle { | |
| font-size: 1.25rem; | |
| color: var(--text-secondary); | |
| font-weight: 400; | |
| margin-bottom: 3rem; | |
| } | |
| /* | |
| * FEATURES SECTION | |
| */ | |
| .features { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .feature { | |
| background: rgba(255, 255, 255, 0.4); | |
| border: 1px solid rgba(255, 255, 255, 0.6); | |
| padding: 2rem; | |
| border-radius: var(--radius-md); | |
| transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .feature:hover { | |
| transform: translateY(-8px); | |
| background: rgba(255, 255, 255, 0.7); | |
| box-shadow: 0 15px 30px rgba(0,0,0,0.05); | |
| } | |
| .icon-wrapper { | |
| width: 60px; | |
| height: 60px; | |
| background: rgba(255, 255, 255, 0.8); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 1.5rem auto; | |
| font-size: 1.75rem; | |
| color: #007AFF; | |
| box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15); | |
| } | |
| .feature h3 { | |
| font-size: 1.1rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--text-main); | |
| } | |
| .feature p { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| line-height: 1.5; | |
| } | |
| /* | |
| * CTA SECTION | |
| */ | |
| .cta { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| padding: 14px 32px; | |
| border-radius: var(--radius-pill); | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| transition: all 0.3s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary { | |
| background: var(--text-main); /* Black/Dark Gray for iOS primary */ | |
| color: white; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.2); | |
| } | |
| .btn-primary:hover { | |
| transform: scale(1.02); | |
| background: #000; | |
| box-shadow: 0 8px 25px rgba(0,0,0,0.3); | |
| } | |
| .btn-secondary { | |
| background: rgba(255, 255, 255, 0.5); | |
| color: var(--text-main); | |
| border: 1px solid rgba(0,0,0,0.05); | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(255, 255, 255, 0.8); | |
| } | |
| /* | |
| * RESPONSIVE DESIGN | |
| */ | |
| @media (max-width: 768px) { | |
| .container { | |
| width: 95%; | |
| padding: 2rem 1.5rem; | |
| } | |
| .hero h1 { | |
| font-size: 2.2rem; | |
| } | |
| .features { | |
| grid-template-columns: 1fr; | |
| } | |
| .cta { | |
| flex-direction: column; | |
| width: 100%; | |
| } | |
| .btn { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Ambient Background Lighting --> | |
| <div class="ambient-light"> | |
| <div class="orb orb-1"></div> | |
| <div class="orb orb-2"></div> | |
| <div class="orb orb-3"></div> | |
| </div> | |
| <div class="container"> | |
| <!-- Mandatory Header Link --> | |
| <div class="top-bar"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| <div class="hero"> | |
| <h1>Simple Chat Room</h1> | |
| <p class="subtitle">A space to connect with friends effortlessly.</p> | |
| </div> | |
| <div class="features"> | |
| <!-- Feature 1 --> | |
| <div class="feature"> | |
| <div class="icon-wrapper"> | |
| <i class="ph ph-lock-key"></i> | |
| </div> | |
| <h3>Easy Registration</h3> | |
| <p>Sign up securely with your mobile number in seconds.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="feature"> | |
| <div class="icon-wrapper"> | |
| <i class="ph ph-users-three"></i> | |
| </div> | |
| <h3>Create Rooms</h3> | |
| <p>Build up to 3 different custom chat rooms for your groups.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="feature"> | |
| <div class="icon-wrapper"> | |
| <i class="ph ph-chat-circle-dots"></i> | |
| </div> | |
| <h3>Live Chat</h3> | |
| <p>Experience fast, real-time messaging with zero latency.</p> | |
| </div> | |
| </div> | |
| <div class="cta"> | |
| <a href="#" class="btn btn-primary"> | |
| Get Started <i class="ph ph-arrow-right"></i> | |
| </a> | |
| <a href="#" class="btn btn-secondary"> | |
| Login | |
| </a> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |