|
|
| <!DOCTYPE html> |
| <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>ORBIT — Educational AI Workspace</title> |
|
|
| <link rel="manifest" href="/manifest.json"> |
| <link rel="icon" type="image/png" href="/static/icon.png"> |
| <link rel="apple-touch-icon" href="/static/icon-192.png" /> |
|
|
| <meta name="theme-color" content="#ffffff"> |
|
|
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" /> |
|
|
| <script src="https://cdn.tailwindcss.com"></script> |
|
|
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'] |
| }, |
| colors: { |
| orbit: { |
| primary: '#2563EB', |
| soft: '#64748B', |
| line: '#E2E8F0', |
| surface: '#F8FAFC' |
| } |
| }, |
| boxShadow: { |
| soft: '0 10px 40px rgba(15,23,42,.06)', |
| glow: '0 0 40px rgba(37,99,235,.08)' |
| } |
| } |
| } |
| } |
| </script> |
|
|
| <style> |
| * { |
| -webkit-tap-highlight-color: transparent; |
| } |
| |
| body { |
| background: |
| radial-gradient(circle at top left, rgba(37,99,235,.05), transparent 25%), |
| radial-gradient(circle at bottom right, rgba(14,165,233,.05), transparent 30%), |
| white; |
| } |
| |
| .grid-pattern { |
| background-image: |
| linear-gradient(rgba(226,232,240,.6) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(226,232,240,.6) 1px, transparent 1px); |
| background-size: 42px 42px; |
| } |
| |
| .glass { |
| background: rgba(255,255,255,.78); |
| backdrop-filter: blur(18px); |
| border: 1px solid rgba(226,232,240,.9); |
| } |
| |
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .fade-in { |
| animation: fadeIn .9s cubic-bezier(.16,1,.3,1) forwards; |
| } |
| </style> |
| </head> |
| <body class="font-sans text-slate-900 antialiased overflow-x-hidden min-h-screen relative"> |
|
|
| <div class="absolute inset-0 grid-pattern opacity-40 pointer-events-none"></div> |
|
|
| <nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-2xl border-b border-slate-200/70"> |
| <div class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between"> |
|
|
| <div class="flex items-center gap-3"> |
| <div class="w-12 h-12 rounded-2xl bg-white shadow-soft border border-slate-200 flex items-center justify-center overflow-hidden"> |
| <img src="/static/icon.png" alt="ORBIT" class="w-8 h-8 object-contain" onerror="this.style.display='none'"> |
| </div> |
|
|
| <div> |
| <h1 class="text-xl font-bold tracking-tight">ORBIT</h1> |
| <p class="text-xs uppercase tracking-[0.22em] text-orbit-soft font-medium"> |
| Educational AI Workspace |
| </p> |
| </div> |
| </div> |
|
|
| <a href="/auth/login" |
| class="group inline-flex items-center gap-3 px-5 py-3 rounded-2xl bg-slate-900 text-white hover:bg-slate-800 transition-all duration-300 shadow-soft"> |
|
|
| <span class="text-sm font-medium tracking-wide"> |
| Sign In |
| </span> |
|
|
| <svg class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" |
| fill="none" |
| stroke="currentColor" |
| viewBox="0 0 24 24"> |
| <path stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M14 5l7 7m0 0l-7 7m7-7H3"></path> |
| </svg> |
| </a> |
| </div> |
| </nav> |
|
|
| <main class="relative z-10 min-h-screen flex items-center px-6 pt-32 pb-20"> |
| <div class="max-w-7xl mx-auto w-full grid lg:grid-cols-2 gap-20 items-center"> |
|
|
| <section> |
| <div class="fade-in inline-flex items-center gap-3 px-4 py-2 rounded-full border border-blue-200 bg-blue-50 text-orbit-primary mb-8"> |
| <div class="w-2 h-2 rounded-full bg-orbit-primary"></div> |
| <span class="text-xs font-semibold uppercase tracking-[0.24em]"> |
| AI For Modern Education |
| </span> |
| </div> |
|
|
| <h2 class="fade-in text-5xl md:text-7xl font-bold leading-[1.02] tracking-tight max-w-3xl text-slate-900"> |
| Clean, |
| intelligent, |
| and built for |
| meaningful research. |
| </h2> |
|
|
| <p class="fade-in mt-8 text-lg md:text-xl text-orbit-soft leading-relaxed max-w-2xl"> |
| ORBIT helps educators, researchers, and students work faster with AI-powered academic assistance designed around clarity, focus, and trustworthy learning experiences. |
| </p> |
|
|
| <div class="fade-in mt-12 flex flex-col sm:flex-row gap-5"> |
|
|
| <a href="/auth/login" |
| class="group inline-flex items-center justify-center gap-4 px-7 py-5 rounded-3xl bg-slate-900 text-white font-semibold hover:scale-[1.02] transition-all duration-300 shadow-soft"> |
|
|
| <svg class="w-6 h-6" viewBox="0 0 24 24"> |
| <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.58c2.1-1.92 3.31-4.74 3.31-8.09z"/> |
| <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/> |
| <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/> |
| <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/> |
| </svg> |
|
|
| <span> |
| Continue with Google |
| </span> |
| </a> |
|
|
| <div class="flex items-center gap-3 px-6 py-5 rounded-3xl border border-slate-200 bg-white shadow-soft"> |
| <div class="w-3 h-3 rounded-full bg-emerald-500"></div> |
| <span class="text-sm text-orbit-soft tracking-wide"> |
| Secure OAuth Authentication |
| </span> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="relative"> |
| <div class="glass rounded-[36px] p-8 md:p-10 shadow-soft overflow-hidden relative"> |
|
|
| <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 via-cyan-400 to-indigo-500"></div> |
|
|
| <div class="mb-10"> |
| <p class="text-xs uppercase tracking-[0.24em] text-orbit-soft mb-3 font-semibold"> |
| Why ORBIT |
| </p> |
|
|
| <h3 class="text-3xl font-bold tracking-tight leading-tight"> |
| Built around how modern academic work actually happens. |
| </h3> |
| </div> |
|
|
| <div class="space-y-5"> |
|
|
| <div class="bg-orbit-surface border border-slate-200 rounded-3xl p-6 hover:shadow-soft transition-all duration-300"> |
| <div class="flex items-start gap-4"> |
| <div class="w-12 h-12 rounded-2xl bg-blue-100 text-blue-600 flex items-center justify-center font-bold"> |
| AI |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-2">Intelligent Research Assistance</h4> |
| <p class="text-sm text-orbit-soft leading-relaxed"> |
| Generate academic insights, summaries, and structured reasoning with contextual AI assistance. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-orbit-surface border border-slate-200 rounded-3xl p-6 hover:shadow-soft transition-all duration-300"> |
| <div class="flex items-start gap-4"> |
| <div class="w-12 h-12 rounded-2xl bg-cyan-100 text-cyan-600 flex items-center justify-center font-bold"> |
| DOI |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-2">Reliable Citation Validation</h4> |
| <p class="text-sm text-orbit-soft leading-relaxed"> |
| Validate references and publication metadata directly within your research workflow. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-orbit-surface border border-slate-200 rounded-3xl p-6 hover:shadow-soft transition-all duration-300"> |
| <div class="flex items-start gap-4"> |
| <div class="w-12 h-12 rounded-2xl bg-indigo-100 text-indigo-600 flex items-center justify-center font-bold"> |
| PDF |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-2">Context-Aware Document Reading</h4> |
| <p class="text-sm text-orbit-soft leading-relaxed"> |
| Upload journals and educational documents to receive grounded AI responses with contextual understanding. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </div> |
| </main> |
|
|
| <footer class="relative z-10 border-t border-slate-200 bg-white/70 backdrop-blur-xl py-8 px-6"> |
| <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-5"> |
|
|
| <div class="flex items-center gap-3 text-sm text-orbit-soft"> |
| <img src="/static/icon.png" alt="ORBIT" class="w-6 h-6 rounded-lg opacity-70"> |
| <span>© 2026 ORBIT. Educational AI Platform.</span> |
| </div> |
|
|
| <div class="flex items-center gap-4 text-sm text-orbit-soft flex-wrap justify-center md:justify-end"> |
| <span>Designed for modern education</span> |
|
|
| <a href="https://www.linkedin.com/in/mridzikv/" |
| target="_blank" |
| rel="noopener noreferrer" |
| class="group inline-flex items-center gap-2 px-4 py-2 rounded-2xl border border-slate-200 bg-white hover:border-[#0A66C2]/30 hover:bg-blue-50 transition-all duration-300 shadow-soft"> |
|
|
| <svg class="w-4 h-4 text-[#0A66C2]" fill="currentColor" viewBox="0 0 24 24"> |
| <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/> |
| </svg> |
|
|
| <span class="group-hover:text-[#0A66C2] transition-colors duration-300"> |
| Muhammad Ridzik Varedho |
| </span> |
| </a> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| if ('serviceWorker' in navigator) { |
| window.addEventListener('load', () => { |
| navigator.serviceWorker.register('/sw.js', { scope: '/' }) |
| .then(reg => console.log('PWA Service Worker registered!', reg)) |
| .catch(err => console.error('PWA Service Worker failed:', err)); |
| }); |
| } |
| </script> |
|
|
| </body> |
| </html> |
|
|
