| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta name="description" content="Class of Learners - Ati. An educational tool and resource." /> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>ATI | Advanced Typing Instructor</title> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" /> |
| <style> |
| |
| :root, |
| body { |
| --bg-1: #0a0f1a; |
| --bg-2: #020617; |
| --primary: #38bdf8; |
| --primary-glow: rgba(56, 189, 248, 0.4); |
| --card-bg: #0f172a; |
| --text-main: #f8fafc; |
| --nav-bg: rgba(2, 6, 23, 0.95); |
| --border-light: #1e293b; |
| --text-muted: #cbd5e1; |
| --ati-err: #ef4444; |
| } |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| body { |
| background-color: var(--bg-2); |
| color: var(--text-main); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| min-height: 100vh; |
| overflow-x: hidden; |
| background-image: radial-gradient(circle at top center, var(--bg-1) 0%, var(--bg-2) 100%); |
| font-family: 'Inter', sans-serif; |
| } |
| code, |
| pre, |
| .tech-tag, |
| kbd, |
| .brand, |
| [style*='monospace'], |
| .term-dot { |
| text-transform: none; |
| } |
| |
| ::-webkit-scrollbar { |
| width: 12px; |
| } |
| ::-webkit-scrollbar-track { |
| background: var(--bg-1); |
| border-left: 1px solid var(--border-light); |
| } |
| ::-webkit-scrollbar-thumb { |
| background: rgba(56, 189, 248, 0.2); |
| border-radius: 10px; |
| border: 3px solid var(--bg-1); |
| transition: 0.3s; |
| } |
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--primary); |
| } |
| |
| |
| .top-nav { |
| width: 100%; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 20px 50px; |
| background: var(--nav-bg); |
| backdrop-filter: blur(10px); |
| border-bottom: 1px solid var(--border-light); |
| position: sticky; |
| top: 0; |
| z-index: 1000; |
| flex-wrap: wrap; |
| gap: 15px; |
| transition: 0.3s; |
| } |
| .nav-brand { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| font-weight: 800; |
| font-size: 1.2rem; |
| text-decoration: none; |
| color: var(--text-main); |
| font-family: 'Inter', sans-serif; |
| } |
| .brand-logo { |
| height: 40px; |
| width: auto; |
| object-fit: contain; |
| filter: drop-shadow(0 0 8px var(--primary-glow)); |
| } |
| |
| .nav-links { |
| display: flex; |
| gap: 20px; |
| flex-wrap: wrap; |
| align-items: center; |
| } |
| .nav-link { |
| color: var(--text-muted); |
| text-decoration: none; |
| font-weight: 600; |
| font-size: 0.95rem; |
| transition: 0.2s; |
| } |
| .nav-link:hover { |
| color: var(--primary); |
| } |
| |
| .dropdown { |
| position: relative; |
| display: inline-block; |
| } |
| .dropdown-btn { |
| color: var(--text-muted); |
| background: none; |
| border: none; |
| font-size: 0.95rem; |
| font-weight: 600; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| font-family: 'Inter', sans-serif; |
| transition: 0.2s ease; |
| padding: 0; |
| } |
| .dropdown-btn:hover, |
| .dropdown.active .dropdown-btn, |
| .dropdown-btn.act { |
| color: var(--primary); |
| } |
| .dropdown-btn span { |
| font-size: 0.7rem; |
| transition: transform 0.3s ease; |
| } |
| .dropdown.active .dropdown-btn span { |
| transform: rotate(180deg); |
| } |
| .dropdown-content { |
| display: flex; |
| flex-direction: column; |
| position: absolute; |
| top: 100%; |
| left: 50%; |
| transform: translateX(-50%) translateY(10px); |
| background: transparent; |
| min-width: 220px; |
| z-index: 1001; |
| padding-top: 15px; |
| opacity: 0; |
| visibility: hidden; |
| pointer-events: none; |
| transition: 0.3s ease; |
| } |
| .dropdown-content-inner { |
| background: var(--card-bg); |
| border-radius: 12px; |
| border: 1px solid var(--border-light); |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6); |
| overflow: hidden; |
| display: flex; |
| flex-direction: column; |
| padding: 10px 0; |
| } |
| .dropdown.active .dropdown-content { |
| opacity: 1; |
| visibility: visible; |
| pointer-events: auto; |
| transform: translateX(-50%) translateY(0); |
| } |
| .dropdown-content a { |
| color: var(--text-muted); |
| padding: 12px 20px; |
| text-decoration: none; |
| font-size: 0.9rem; |
| font-weight: 600; |
| transition: 0.2s; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
| .dropdown-content a:hover { |
| background: rgba(56, 189, 248, 0.08); |
| color: var(--primary); |
| padding-left: 25px; |
| } |
| |
| .theme-switch-wrapper { |
| display: none; |
| } |
| |
| .nav-dl-btn { |
| background: var(--primary); |
| color: #000; |
| padding: 10px 24px; |
| border-radius: 30px; |
| text-decoration: none; |
| font-weight: 800; |
| transition: 0.2s; |
| box-shadow: 0 0 15px var(--primary-glow); |
| font-size: 0.9rem; |
| } |
| .nav-dl-btn:hover { |
| background: #fff; |
| box-shadow: 0 0 25px var(--primary); |
| } |
| .mobile-menu-btn { |
| display: none; |
| background: none; |
| border: none; |
| font-size: 1.5rem; |
| cursor: pointer; |
| color: var(--text-main); |
| } |
| .mobile-dl { |
| display: none; |
| } |
| |
| .nav-login-btn { |
| background: rgba(56, 189, 248, 0.1); |
| color: var(--primary); |
| border: 1px solid var(--primary); |
| padding: 8px 20px; |
| border-radius: 30px; |
| font-weight: 800; |
| font-size: 0.85rem; |
| cursor: pointer; |
| transition: 0.3s; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| text-decoration: none; |
| } |
| body.dark-mode .nav-login-btn { |
| color: #34d399; |
| border-color: #34d399; |
| } |
| body.dark-mode .nav-login-btn:hover { |
| background: #34d399; |
| color: #000; |
| box-shadow: 0 0 20px rgba(52, 211, 153, 0.4); |
| } |
| .nav-login-btn:hover { |
| background: var(--primary); |
| color: #000; |
| box-shadow: 0 0 20px var(--primary-glow); |
| } |
| .nav-user-profile { |
| display: none; |
| align-items: center; |
| gap: 10px; |
| padding: 5px 15px 5px 5px; |
| background: transparent; |
| border: 1px solid var(--border-light); |
| border-radius: 30px; |
| cursor: pointer; |
| transition: 0.3s; |
| } |
| .nav-user-profile:hover { |
| border-color: var(--primary); |
| } |
| .nav-user-avatar { |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| background: var(--primary); |
| color: #000; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| font-weight: 800; |
| overflow: hidden; |
| } |
| |
| |
| .game-hero { |
| width: 100%; |
| padding: 120px 20px 100px; |
| text-align: center; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| border-bottom: 1px solid var(--border-light); |
| background: linear-gradient(180deg, var(--bg-2) 0%, rgba(56, 189, 248, 0.05) 100%); |
| position: relative; |
| overflow: hidden; |
| z-index: 1; |
| } |
| |
| |
| #cyberCanvas { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| opacity: 0.6; |
| } |
| |
| .hero-badge { |
| display: inline-block; |
| padding: 6px 16px; |
| border-radius: 20px; |
| background: rgba(56, 189, 248, 0.1); |
| border: 1px solid rgba(56, 189, 248, 0.3); |
| color: var(--primary); |
| font-weight: 800; |
| font-size: 0.8rem; |
| text-transform: uppercase; |
| letter-spacing: 1.5px; |
| margin-bottom: 20px; |
| box-shadow: 0 0 20px rgba(56, 189, 248, 0.2); |
| } |
| |
| |
| .game-hero h1 { |
| font-size: 4.5rem; |
| font-weight: 800; |
| color: var(--text-main); |
| margin-bottom: 20px; |
| letter-spacing: -2px; |
| font-family: 'Space Mono', monospace; |
| text-shadow: 0 0 10px rgba(56, 189, 248, 0.3); |
| animation: subtleFlicker 4s infinite; |
| } |
| @keyframes subtleFlicker { |
| 0%, |
| 19%, |
| 21%, |
| 23%, |
| 25%, |
| 54%, |
| 56%, |
| 100% { |
| text-shadow: |
| 0 0 10px rgba(56, 189, 248, 0.3), |
| 0 0 20px rgba(56, 189, 248, 0.1); |
| opacity: 1; |
| } |
| 20%, |
| 24%, |
| 55% { |
| text-shadow: none; |
| opacity: 0.8; |
| } |
| } |
| |
| .game-hero p { |
| font-size: 1.25rem; |
| color: var(--text-muted); |
| max-width: 800px; |
| line-height: 1.6; |
| margin-bottom: 35px; |
| } |
| .hero-cta { |
| display: flex; |
| gap: 15px; |
| justify-content: center; |
| flex-wrap: wrap; |
| } |
| |
| .btn-download { |
| background: var(--primary); |
| color: #000; |
| padding: 16px 32px; |
| border-radius: 12px; |
| font-weight: 800; |
| font-size: 1.1rem; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| transition: 0.3s; |
| box-shadow: 0 10px 30px var(--primary-glow); |
| border: none; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| .btn-download:hover { |
| background: #fff; |
| transform: translateY(-2px); |
| box-shadow: 0 15px 40px var(--primary-glow); |
| } |
| .btn-demo { |
| background: rgba(56, 189, 248, 0.05); |
| color: var(--primary); |
| border: 2px solid var(--primary); |
| padding: 16px 32px; |
| border-radius: 12px; |
| font-weight: 800; |
| font-size: 1.1rem; |
| text-decoration: none; |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| transition: 0.3s; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| backdrop-filter: blur(5px); |
| } |
| .btn-demo:hover { |
| background: var(--primary); |
| color: #000; |
| transform: translateY(-2px); |
| box-shadow: 0 10px 30px var(--primary-glow); |
| } |
| |
| |
| .features-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 30px; |
| width: 90%; |
| max-width: 1200px; |
| margin: 150px auto 80px; |
| z-index: 10; |
| position: relative; |
| } |
| .feature-card { |
| background: linear-gradient(110deg, rgba(15, 23, 42, 0.7) 0%, rgba(15, 23, 42, 0.7) 40%, rgba(56, 189, 248, 0.12) 50%, rgba(15, 23, 42, 0.7) 60%, rgba(15, 23, 42, 0.7) 100%); |
| background-size: 250% 100%; |
| background-position: 100% 0; |
| border: 1px solid rgba(56, 189, 248, 0.15); |
| border-radius: 16px; |
| padding: 40px 30px; |
| position: relative; |
| overflow: hidden; |
| backdrop-filter: blur(10px); |
| box-shadow: |
| inset 0 0 20px rgba(0, 0, 0, 0.5), |
| 0 15px 30px rgba(0, 0, 0, 0.6); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| text-align: center; |
| transition: |
| transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), |
| background-position 0.6s ease-out, |
| border-color 0.4s, |
| box-shadow 0.4s; |
| } |
| .feature-card::before { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| background: radial-gradient(rgba(56, 189, 248, 0.05) 1px, transparent 1px); |
| background-size: 15px 15px; |
| z-index: 0; |
| opacity: 0.5; |
| transition: opacity 0.3s; |
| } |
| .feature-card:hover { |
| transform: translateY(-12px) scale(1.02) !important; |
| border-color: rgba(56, 189, 248, 0.5); |
| box-shadow: |
| inset 0 0 30px rgba(56, 189, 248, 0.05), |
| 0 20px 40px rgba(56, 189, 248, 0.2); |
| background-position: 0% 0; |
| } |
| .feature-card:hover::before { |
| opacity: 1; |
| } |
| .feature-card::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 3px; |
| background: linear-gradient(90deg, transparent, var(--primary), transparent); |
| opacity: 0; |
| transition: opacity 0.4s; |
| } |
| .feature-card:hover::after { |
| opacity: 1; |
| } |
| .feature-content { |
| position: relative; |
| z-index: 2; |
| } |
| |
| @keyframes cyberPulse { |
| 0% { |
| box-shadow: 0 0 10px rgba(56, 189, 248, 0.1); |
| } |
| 50% { |
| box-shadow: 0 0 25px rgba(56, 189, 248, 0.4); |
| } |
| 100% { |
| box-shadow: 0 0 10px rgba(56, 189, 248, 0.1); |
| } |
| } |
| .icon-wrapper { |
| width: 64px; |
| height: 64px; |
| background: rgba(56, 189, 248, 0.05); |
| border: 1px solid rgba(56, 189, 248, 0.3); |
| border-radius: 12px; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| font-size: 1.8rem; |
| color: var(--primary); |
| font-family: 'Consolas', monospace; |
| font-weight: bold; |
| margin-bottom: 25px; |
| position: relative; |
| animation: cyberPulse 3s infinite ease-in-out; |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| } |
| .icon-wrapper::before, |
| .icon-wrapper::after { |
| transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| } |
| .icon-wrapper::before { |
| content: ''; |
| position: absolute; |
| top: -3px; |
| left: -3px; |
| width: 12px; |
| height: 12px; |
| border-top: 2px solid var(--primary); |
| border-left: 2px solid var(--primary); |
| border-top-left-radius: 4px; |
| } |
| .icon-wrapper::after { |
| content: ''; |
| position: absolute; |
| bottom: -3px; |
| right: -3px; |
| width: 12px; |
| height: 12px; |
| border-bottom: 2px solid var(--primary); |
| border-right: 2px solid var(--primary); |
| border-bottom-right-radius: 4px; |
| } |
| .feature-card:hover .icon-wrapper { |
| background: rgba(56, 189, 248, 0.15); |
| box-shadow: 0 0 40px rgba(56, 189, 248, 0.5); |
| transform: scale(1.1); |
| animation: none; |
| } |
| .feature-card:hover .icon-wrapper::before { |
| top: -8px; |
| left: -8px; |
| transform: rotate(-180deg); |
| border-color: #fff; |
| } |
| .feature-card:hover .icon-wrapper::after { |
| bottom: -8px; |
| right: -8px; |
| transform: rotate(-180deg); |
| border-color: #fff; |
| } |
| .feature-card h3 { |
| font-size: 1.4rem; |
| font-weight: 800; |
| margin-bottom: 12px; |
| color: var(--text-main); |
| letter-spacing: -0.5px; |
| } |
| .feature-card p { |
| font-size: 0.95rem; |
| color: var(--text-muted); |
| line-height: 1.7; |
| margin-bottom: 25px; |
| text-transform: none; |
| } |
| |
| .tech-tags { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| justify-content: center; |
| margin-top: 25px; |
| } |
| .tech-tag { |
| font-family: 'Consolas', monospace; |
| font-size: 0.7rem; |
| padding: 5px 10px; |
| border-radius: 4px; |
| font-weight: bold; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| transition: 0.2s; |
| } |
| .tag-py { |
| background: rgba(234, 179, 8, 0.05); |
| color: #facc15; |
| border: 1px solid rgba(234, 179, 8, 0.2); |
| } |
| .tag-cpp { |
| background: rgba(56, 189, 248, 0.05); |
| color: #38bdf8; |
| border: 1px solid rgba(56, 189, 248, 0.2); |
| } |
| .tag-js { |
| background: rgba(249, 115, 22, 0.05); |
| color: #fb923c; |
| border: 1px solid rgba(249, 115, 22, 0.2); |
| } |
| .feature-card:hover .tag-py { |
| background: rgba(234, 179, 8, 0.15); |
| border-color: #facc15; |
| box-shadow: 0 0 10px rgba(234, 179, 8, 0.2); |
| } |
| .feature-card:hover .tag-cpp { |
| background: rgba(56, 189, 248, 0.15); |
| border-color: #38bdf8; |
| box-shadow: 0 0 10px rgba(56, 189, 248, 0.2); |
| } |
| .feature-card:hover .tag-js { |
| background: rgba(249, 115, 22, 0.15); |
| border-color: #fb923c; |
| box-shadow: 0 0 10px rgba(249, 115, 22, 0.2); |
| } |
| |
| |
| .gallery-title { |
| text-align: center; |
| font-size: 2.5rem; |
| font-weight: 800; |
| color: var(--text-main); |
| margin: 60px 0 30px; |
| letter-spacing: -1px; |
| transition: 0.3s; |
| } |
| |
| .cyber-showcase-container { |
| width: 95%; |
| max-width: 1000px; |
| margin: 0 auto 80px; |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| align-items: center; |
| position: relative; |
| } |
| .main-display { |
| width: 100%; |
| border: 1px solid var(--primary); |
| border-radius: 12px; |
| padding: 10px; |
| background: rgba(15, 23, 42, 0.8); |
| position: relative; |
| box-shadow: 0 0 30px rgba(56, 189, 248, 0.15); |
| overflow: hidden; |
| backdrop-filter: blur(10px); |
| } |
| .main-display img { |
| width: 100%; |
| height: auto; |
| border-radius: 8px; |
| display: block; |
| object-fit: cover; |
| transition: opacity 0.3s ease-in-out; |
| } |
| |
| .display-corner { |
| position: absolute; |
| width: 25px; |
| height: 25px; |
| border: 3px solid var(--primary); |
| z-index: 2; |
| transition: 0.3s; |
| } |
| .display-corner.tl { |
| top: 0; |
| left: 0; |
| border-right: none; |
| border-bottom: none; |
| border-top-left-radius: 12px; |
| } |
| .display-corner.tr { |
| top: 0; |
| right: 0; |
| border-left: none; |
| border-bottom: none; |
| border-top-right-radius: 12px; |
| } |
| .display-corner.bl { |
| bottom: 0; |
| left: 0; |
| border-right: none; |
| border-top: none; |
| border-bottom-left-radius: 12px; |
| } |
| .display-corner.br { |
| bottom: 0; |
| right: 0; |
| border-left: none; |
| border-top: none; |
| border-bottom-right-radius: 12px; |
| } |
| |
| .scanline { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 4px; |
| background: rgba(56, 189, 248, 0.6); |
| box-shadow: 0 0 15px var(--primary); |
| animation: scan 4s linear infinite; |
| z-index: 3; |
| pointer-events: none; |
| opacity: 0.7; |
| } |
| @keyframes scan { |
| 0% { |
| top: 0; |
| opacity: 0; |
| } |
| 10% { |
| opacity: 0.7; |
| } |
| 90% { |
| opacity: 0.7; |
| } |
| 100% { |
| top: 100%; |
| opacity: 0; |
| } |
| } |
| |
| .thumbnail-track { |
| display: flex; |
| gap: 20px; |
| justify-content: center; |
| flex-wrap: wrap; |
| width: 100%; |
| } |
| .thumb-card { |
| width: 180px; |
| cursor: pointer; |
| border: 2px solid var(--border-light); |
| border-radius: 8px; |
| overflow: hidden; |
| transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| opacity: 0.5; |
| background: var(--card-bg); |
| } |
| .thumb-card img { |
| width: 100%; |
| height: auto; |
| display: block; |
| border-radius: 4px; |
| } |
| .thumb-card:hover { |
| opacity: 1; |
| border-color: rgba(56, 189, 248, 0.5); |
| transform: translateY(-3px); |
| } |
| .thumb-card.active { |
| opacity: 1; |
| border-color: var(--primary); |
| box-shadow: 0 10px 20px rgba(56, 189, 248, 0.3); |
| transform: translateY(-8px); |
| } |
| |
| |
| .anim-target { |
| opacity: 0; |
| transform: translateY(30px); |
| transition: 0.6s ease-out; |
| } |
| .animate-in { |
| opacity: 1 !important; |
| transform: translateY(0) !important; |
| } |
| .cursor-blink { |
| animation: blink 1s step-end infinite; |
| color: var(--primary); |
| } |
| @keyframes blink { |
| 0%, |
| 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0; |
| } |
| } |
| .hero-reveal { |
| opacity: 0; |
| transform: translateY(15px); |
| transition: 0.8s ease; |
| } |
| .hero-reveal.visible { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| |
| .site-footer { |
| width: 100%; |
| padding: 40px 20px 30px; |
| text-align: center; |
| border-top: 1px solid var(--border-light); |
| background: var(--nav-bg); |
| backdrop-filter: blur(10px); |
| margin-top: auto; |
| } |
| .footer-links { |
| display: flex; |
| justify-content: center; |
| gap: 25px; |
| margin-bottom: 20px; |
| flex-wrap: wrap; |
| } |
| .footer-links a { |
| color: var(--text-muted); |
| text-decoration: none; |
| font-size: 0.95rem; |
| font-weight: 600; |
| transition: 0.2s; |
| } |
| .footer-links a:hover { |
| color: var(--primary); |
| } |
| .footer-copy { |
| color: var(--text-muted); |
| font-size: 0.85rem; |
| font-weight: 600; |
| } |
| |
| .mo { |
| position: fixed; |
| inset: 0; |
| background: rgba(0, 0, 0, 0.8); |
| backdrop-filter: blur(10px); |
| z-index: 2000; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| opacity: 0; |
| pointer-events: none; |
| transition: 0.3s; |
| } |
| .mo.open { |
| opacity: 1; |
| pointer-events: auto; |
| } |
| .md { |
| background: var(--card-bg, #1e293b); |
| border: 1px solid var(--border-light, #334155); |
| border-radius: 24px; |
| width: 90%; |
| max-width: 450px; |
| overflow: hidden; |
| transform: translateY(30px) scale(0.95); |
| transition: 0.4s; |
| box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8); |
| color: var(--text-main, #f8fafc); |
| } |
| .mo.open .md { |
| transform: translateY(0) scale(1); |
| } |
| .md-hd { |
| padding: 30px; |
| border-bottom: 1px solid var(--border-light, #334155); |
| background: var(--bg-1, #0f172a); |
| text-align: center; |
| } |
| .md-hd h2 { |
| font-size: 1.6rem; |
| font-weight: 800; |
| margin: 0; |
| color: var(--text-main); |
| } |
| .md-hd p { |
| font-size: 0.95rem; |
| color: var(--text-muted, #cbd5e1); |
| margin-top: 5px; |
| } |
| .md-body { |
| padding: 30px; |
| display: flex; |
| flex-direction: column; |
| } |
| .ml { |
| font-size: 0.8rem; |
| font-weight: 800; |
| color: var(--text-muted, #cbd5e1); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| display: block; |
| margin-bottom: 8px; |
| } |
| .mi { |
| width: 100%; |
| padding: 15px; |
| border: 1px solid var(--border-light, #334155); |
| border-radius: 12px; |
| font-size: 1rem; |
| outline: none; |
| margin-bottom: 20px; |
| transition: 0.3s; |
| color: var(--text-main, #f8fafc); |
| background: var(--bg-1, #0f172a); |
| } |
| .mi:focus { |
| border-color: var(--primary, #38bdf8); |
| box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2); |
| } |
| |
| .gbtn { |
| width: 100%; |
| padding: 12px; |
| background: #ffffff; |
| border: 1px solid #dadce0; |
| border-radius: 6px; |
| font-weight: 500; |
| font-size: 14px; |
| cursor: pointer; |
| color: #3c4043; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 12px; |
| margin-bottom: 20px; |
| transition: 0.2s; |
| font-family: 'Inter', sans-serif; |
| } |
| .gbtn { |
| background: #4285f4; |
| border: none; |
| color: #ffffff; |
| } |
| |
| .ms { |
| width: 100%; |
| padding: 15px; |
| background: var(--primary, #38bdf8); |
| border: none; |
| border-radius: 12px; |
| font-weight: 800; |
| font-size: 1rem; |
| cursor: pointer; |
| color: #000; |
| transition: 0.3s; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| margin-bottom: 10px; |
| } |
| .ms:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 20px var(--primary-glow); |
| } |
| |
| .msk { |
| width: 100%; |
| padding: 15px; |
| background: none; |
| border: none; |
| font-size: 0.9rem; |
| font-weight: 700; |
| color: var(--text-muted, #cbd5e1); |
| cursor: pointer; |
| margin-top: 5px; |
| transition: 0.3s; |
| } |
| .msk:hover { |
| color: var(--text-main, #f8fafc); |
| } |
| |
| .msk-danger { |
| width: 100%; |
| padding: 15px; |
| background: transparent; |
| border: 1px solid var(--ati-err, #ef4444); |
| border-radius: 12px; |
| font-size: 1rem; |
| font-weight: 800; |
| color: var(--ati-err, #ef4444); |
| cursor: pointer; |
| transition: 0.3s; |
| margin-bottom: 10px; |
| } |
| .msk-danger:hover { |
| background: rgba(239, 68, 68, 0.1); |
| } |
| |
| .toast { |
| position: fixed; |
| bottom: 30px; |
| right: 30px; |
| background: var(--card-bg, #1e293b); |
| border: 1px solid var(--border-light, #334155); |
| color: var(--text-main, #f8fafc); |
| padding: 15px 25px; |
| border-radius: 12px; |
| font-size: 0.95rem; |
| font-weight: 800; |
| z-index: 3000; |
| transform: translateY(20px); |
| opacity: 0; |
| transition: 0.3s; |
| } |
| .toast.show { |
| transform: translateY(0); |
| opacity: 1; |
| } |
| .toast.green { |
| border-color: var(--primary, #38bdf8); |
| color: var(--primary, #38bdf8); |
| } |
| |
| |
| @media (max-width: 768px) { |
| |
| .top-nav { |
| position: fixed; |
| top: 15px; |
| left: 5%; |
| width: 90%; |
| border-radius: 50px; |
| padding: 12px 20px; |
| border: 1px solid var(--border-light); |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); |
| background: var(--nav-bg); |
| z-index: 1000; |
| } |
| .nav-brand { |
| order: 1; |
| } |
| .nav-brand span { |
| font-size: 0.85rem !important; |
| } |
| .brand-logo { |
| height: 24px !important; |
| } |
| .mobile-menu-btn { |
| display: block; |
| order: 2; |
| font-size: 1.2rem !important; |
| } |
| .desktop-dl { |
| display: none; |
| } |
| |
| |
| .nav-links { |
| display: none !important; |
| position: absolute; |
| top: calc(100% + 15px); |
| left: 0; |
| width: 100%; |
| flex-direction: column; |
| align-items: center; |
| padding: 20px; |
| background: var(--card-bg); |
| border: 1px solid var(--border-light); |
| border-radius: 20px; |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8); |
| } |
| .nav-links.active { |
| display: flex !important; |
| } |
| |
| |
| .nav-link, |
| .dropdown-btn, |
| .dropdown-content a { |
| width: 100%; |
| text-align: center; |
| justify-content: center; |
| font-size: 0.85rem !important; |
| padding: 8px 0 !important; |
| } |
| |
| .mobile-dl { |
| display: flex; |
| justify-content: center; |
| width: 100%; |
| margin-top: 15px; |
| font-size: 0.85rem !important; |
| padding: 8px 20px !important; |
| } |
| |
| .dropdown-content { |
| position: static; |
| transform: none !important; |
| min-width: 100%; |
| box-shadow: none; |
| padding-top: 5px; |
| } |
| .dropdown-content-inner { |
| border: none; |
| background: transparent; |
| padding: 0; |
| align-items: center; |
| } |
| |
| |
| .game-hero { |
| padding: 130px 15px 60px; |
| } |
| .game-hero h1 { |
| font-size: 2.2rem; |
| line-height: 1.2; |
| word-wrap: break-word; |
| } |
| .hero-cta { |
| flex-direction: column; |
| width: 100%; |
| } |
| .btn-download, |
| .btn-demo { |
| width: 100%; |
| justify-content: center; |
| } |
| } |
| </style> |
| <link rel="canonical" href="https://advancedlogiclabs.dpdns.org/ati" /> |
|
|
| <script defer src="col-router.js"></script> |
| <link rel="stylesheet" href="col-ui.css?v=1782446126.5715783" /> |
| <script defer src="col-ui.js"></script> |
| <script defer src="col-auth.js"></script> |
| <meta name="google-site-verification" content="bWaer2b60VA1y3RMV48HYGPv8vlMUcvlFGxY3e6SAqU" /> |
| <link rel="manifest" href="manifest.json" /> |
| <meta name="apple-mobile-web-app-capable" content="yes" /> |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> |
| <link rel="icon" type="image/png" href="Icon.png" /> |
| </head> |
| <body> |
| <div class="cd" id="cDot"></div> |
| <div class="cr" id="cRing"></div> |
|
|
| <nav class="top-nav"> |
| <a href="home" class="nav-brand"> |
| <img src="Class.png" alt="Class Of Learners Logo" class="brand-logo" width="56" height="56" fetchpriority="high" decoding="async" /> |
| <span class="brand-name">Class Of Learners</span> |
| </a> |
| <button class="mmb" id="mmb"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <line x1="3" y1="12" x2="21" y2="12"></line> |
| <line x1="3" y1="6" x2="21" y2="6"></line> |
| <line x1="3" y1="18" x2="21" y2="18"></line> |
| </svg> |
| </button> |
| <div class="nav-links" id="navLinks"> |
| <a href="home" class="nav-link">Home</a> |
| <a href="about" class="nav-link">About</a> |
| <a href="school" class="nav-link">School</a> |
| <a href="sneh-asha" class="nav-link">Sneh Asha</a> |
| <div class="dropdown" onclick="this.classList.toggle('active')"> |
| <button class="dropdown-btn act">Projects <span class="darr">▼</span></button> |
| <div class="dropdown-content"> |
| <div class="dropdown-content-inner"> |
| <a href="ati">Typing Instructor <span>⌨️</span></a> |
| <a href="solar">Solar Engine <span>🌍</span></a> |
| <a href="gesture">Gesture Control <span>🖐️</span></a> |
| <a href="rpg">RPG Game <span>⚔️</span></a> |
| <a href="qr">QR Generator <span>⬛</span></a> |
| </div> |
| </div> |
| </div> |
| <div class="tw"> |
| <span class="tl" id="tLabel">Light</span> |
| <label class="tsb"> |
| <input type="checkbox" id="tsck" onchange="window.toggleTheme(this)" /> |
| <div class="tst"><div class="tsth"></div></div> |
| </label> |
| </div> |
| <button class="nav-login-btn" id="navLoginBtn" onclick="if (window.openGlobalLogin) window.openGlobalLogin()"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> |
| <circle cx="12" cy="7" r="4"></circle> |
| </svg> |
| Sign In |
| </button> |
| <div class="nav-user-profile" id="navUserProfile" onclick="if (window.openGlobalLogin) window.openGlobalLogin()"> |
| <div class="nav-user-avatar" id="navUserAv">?</div> |
| <span class="nun" id="navUserName">User</span> |
| </div> |
| <a href="download" class="nav-dl-btn mobile-dl">Download Hub</a> |
| </div> |
| <a href="download" class="nav-dl-btn desktop-dl">Download Hub</a> |
| </nav> |
|
|
| <script> |
| ;(function () { |
| try { |
| if (localStorage.getItem('theme') === 'dark') { |
| document.body.classList.add('dark-mode') |
| } |
| } catch (e) {} |
| })() |
| </script> |
|
|
| <header class="game-hero"> |
| <canvas id="cyberCanvas"></canvas> |
| <div class="hero-badge anim-target">Syntax Mastery Engine</div> |
| <h1><span id="typewriter-text"></span><span class="cursor-blink">_</span></h1> |
| <div class="hero-reveal" id="heroReveal"> |
| <p>Deploying high-fidelity syntax mastery module. Train your muscle memory for complex coding languages.</p> |
| <div class="hero-cta"> |
| <a href="download" class="btn-download">Initialize Download</a> |
| <a href="ati-demo" class="btn-demo">â–¶ Play Web Demo</a> |
| </div> |
| </div> |
| </header> |
|
|
| <div class="features-grid"> |
| <div class="feature-card anim-target"> |
| <div class="feature-content"> |
| <div class="icon-wrapper">{ }</div> |
| <h3>Syntax Mastery</h3> |
| <p>Practice actual code blocks and learn correct formatting while improving your WPM.</p> |
| <div class="tech-tags"> |
| <span class="tech-tag tag-py">Python</span> |
| <span class="tech-tag tag-cpp">C++</span> |
| <span class="tech-tag tag-js">JavaScript</span> |
| </div> |
| </div> |
| </div> |
| <div class="feature-card anim-target" style="transition-delay: 0.15s"> |
| <div class="feature-content"> |
| <div class="icon-wrapper">++</div> |
| <h3>XP Progression</h3> |
| <p>Earn experience points, level up your profile, and unlock advanced difficulty tiers.</p> |
| </div> |
| </div> |
| <div class="feature-card anim-target" style="transition-delay: 0.3s"> |
| <div class="feature-content"> |
| <div class="icon-wrapper">[⌨]</div> |
| <h3>Mech Simulator</h3> |
| <p>Virtual mechanical keyboard interface with custom switch sounds and visual heatmaps.</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="gallery-title anim-target">System Interfaces</div> |
| <div class="cyber-showcase-container anim-target"> |
| <div class="main-display"> |
| <div class="display-corner tl"></div> |
| <div class="display-corner tr"></div> |
| <div class="display-corner bl"></div> |
| <div class="display-corner br"></div> |
| <img id="mainShowcaseImg" src="ati.webp" alt="ATI Main Interface View" width="800" height="438" loading="lazy" decoding="async" /> |
| <div class="scanline"></div> |
| </div> |
| <div class="thumbnail-track"> |
| <div class="thumb-card active" onclick="updateShowcase(this, 'ati.png')"> |
| <img src="ati.webp" alt="Thumb 1" width="800" height="438" loading="lazy" decoding="async" /> |
| </div> |
| <div class="thumb-card" onclick="updateShowcase(this, 'ati 2.png')"> |
| <img src="ati 2.webp" alt="Thumb 2" width="2437" height="993" loading="lazy" /> |
| </div> |
| <div class="thumb-card" onclick="updateShowcase(this, 'ati 3.png')"> |
| <img src="ati 3.webp" alt="Thumb 3" width="3839" height="2096" loading="lazy" /> |
| </div> |
| </div> |
| </div> |
|
|
| <footer class="site-footer"> |
| <div class="footer-links"> |
| <a href="privacy">Privacy Policy</a> |
| <a href="terms">Terms of Service</a> |
| <a href="feedback">Provide Feedback</a> |
| </div> |
| <div class="footer-copy">© 2026 Class Of Learners. Developed By Neel And Ansh. All Rights Reserved.</div> |
| </footer> |
|
|
| <script> |
| |
| const canvas = document.getElementById('cyberCanvas') |
| const ctx = canvas.getContext('2d') |
| let particles = [] |
| const symbols = ['{ }', '</>', '()', '++;', '=>', '[ ]', '==', 'def'] |
| |
| function resizeCanvas() { |
| canvas.width = window.innerWidth |
| canvas.height = document.querySelector('.game-hero').offsetHeight |
| } |
| |
| class TechParticle { |
| constructor() { |
| this.x = Math.random() * canvas.width |
| this.y = canvas.height + Math.random() * 100 |
| this.speed = Math.random() * 0.5 + 0.2 |
| this.text = symbols[Math.floor(Math.random() * symbols.length)] |
| this.opacity = Math.random() * 0.3 + 0.1 |
| this.size = Math.random() * 10 + 10 |
| } |
| update() { |
| this.y -= this.speed |
| if (this.y < -20) { |
| this.y = canvas.height + 20 |
| this.x = Math.random() * canvas.width |
| } |
| } |
| draw() { |
| ctx.fillStyle = `rgba(56, 189, 248, ${this.opacity})` |
| ctx.font = `${this.size}px 'Space Mono', monospace` |
| ctx.fillText(this.text, this.x, this.y) |
| } |
| } |
| |
| function initParticles() { |
| particles = [] |
| for (let i = 0; i < 40; i++) particles.push(new TechParticle()) |
| } |
| |
| function animateParticles() { |
| ctx.clearRect(0, 0, canvas.width, canvas.height) |
| particles.forEach((p) => { |
| p.update() |
| p.draw() |
| }) |
| requestAnimationFrame(animateParticles) |
| } |
| |
| window.addEventListener('resize', resizeCanvas) |
| |
| |
| function initTiltEffect() { |
| const cards = document.querySelectorAll('.feature-card') |
| cards.forEach((card) => { |
| card.addEventListener('mousemove', (e) => { |
| const rect = card.getBoundingClientRect() |
| const x = e.clientX - rect.left |
| const y = e.clientY - rect.top |
| |
| const centerX = rect.width / 2 |
| const centerY = rect.height / 2 |
| |
| |
| const rotateX = ((y - centerY) / centerY) * -12 |
| const rotateY = ((x - centerX) / centerX) * 12 |
| |
| card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)` |
| card.style.transition = 'none' |
| }) |
| |
| card.addEventListener('mouseleave', () => { |
| card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)` |
| card.style.transition = 'transform 0.5s ease' |
| }) |
| }) |
| } |
| |
| |
| const textToType = '> ADVANCED TYPING INSTRUCTOR_ /' |
| const typeTarget = document.getElementById('typewriter-text') |
| const revealTarget = document.getElementById('heroReveal') |
| let typeIndex = 0 |
| function typeWriter() { |
| if (typeIndex < textToType.length) { |
| typeTarget.innerHTML += textToType.charAt(typeIndex) |
| typeIndex++ |
| setTimeout(typeWriter, 60) |
| } else { |
| setTimeout(() => { |
| revealTarget.classList.add('visible') |
| }, 300) |
| } |
| } |
| |
| function triggerAnimations() { |
| document.querySelectorAll('.anim-target').forEach((t) => t.classList.add('animate-in')) |
| } |
| |
| function updateShowcase(element, imgSrc) { |
| document.querySelectorAll('.thumb-card').forEach((t) => t.classList.remove('active')) |
| element.classList.add('active') |
| const mainImg = document.getElementById('mainShowcaseImg') |
| mainImg.style.opacity = 0 |
| setTimeout(() => { |
| mainImg.src = imgSrc |
| mainImg.style.opacity = 1 |
| }, 200) |
| } |
| |
| if (document.querySelector('.dropdown-btn')) { |
| window.onclick = (e) => { |
| if (!e.target.matches('.dropdown-btn') && !e.target.closest('.dropdown-btn')) document.querySelectorAll('.dropdown').forEach((d) => d.classList.remove('active')) |
| } |
| } |
| |
| window.addEventListener('load', () => { |
| |
| resizeCanvas() |
| initParticles() |
| animateParticles() |
| initTiltEffect() |
| |
| setTimeout(typeWriter, 400) |
| setTimeout(triggerAnimations, 100) |
| }) |
| </script> |
|
|
| <footer class="sf"> |
| <div class="fi"> |
| <div class="fb"><span>CoL</span> · Class Of Learners</div> |
| <div class="fl"> |
| <a href="privacy">Privacy</a> |
| <a href="terms">Terms</a> |
| <a href="feedback">Feedback</a> |
| <a href="download">Downloads</a> |
| </div> |
| <div class="fc">© 2026 Neel, Ansh, Aarush & Yashan.</div> |
| </div> |
| </footer> |
| </body> |
| </html> |
|
|
