Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>AILIXIR Project Timeline</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient( | |
| 135deg, | |
| #0f0c29 0%, | |
| #302b63 50%, | |
| #24243e 100% | |
| ); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 40px; | |
| color: white; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 1400px; | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(20px); | |
| border-radius: 30px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| padding: 50px; | |
| box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); | |
| } | |
| .header { | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .header h1 { | |
| font-size: 48px; | |
| font-weight: 700; | |
| background: linear-gradient(90deg, #00d4ff, #7b2cbf, #ff006e); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: 10px; | |
| letter-spacing: -1px; | |
| } | |
| .header p { | |
| font-size: 18px; | |
| color: rgba(255, 255, 255, 0.6); | |
| font-weight: 300; | |
| } | |
| .timeline-wrapper { | |
| position: relative; | |
| margin-top: 40px; | |
| } | |
| .months-header { | |
| display: flex; | |
| margin-left: 280px; | |
| margin-bottom: 20px; | |
| gap: 8px; | |
| } | |
| .month-chip { | |
| flex: 1; | |
| text-align: center; | |
| padding: 12px; | |
| background: rgba(255, 255, 255, 0.08); | |
| border-radius: 12px; | |
| font-weight: 600; | |
| font-size: 14px; | |
| color: rgba(255, 255, 255, 0.9); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .month-chip:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| transform: translateY(-2px); | |
| } | |
| .task-row { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 12px; | |
| height: 45px; | |
| position: relative; | |
| } | |
| .task-label { | |
| width: 280px; | |
| padding-right: 20px; | |
| text-align: right; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: rgba(255, 255, 255, 0.85); | |
| display: flex; | |
| align-items: center; | |
| justify-content: flex-end; | |
| gap: 10px; | |
| } | |
| .task-icon { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| flex-shrink: 0; | |
| } | |
| .task-bar-area { | |
| flex: 1; | |
| position: relative; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .task-bar { | |
| height: 28px; | |
| border-radius: 14px; | |
| position: absolute; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 15px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: white; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .task-bar:hover { | |
| transform: scaleY(1.2); | |
| z-index: 10; | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); | |
| } | |
| .task-bar::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 50%; | |
| background: linear-gradient( | |
| 180deg, | |
| rgba(255, 255, 255, 0.3) 0%, | |
| transparent 100% | |
| ); | |
| border-radius: 14px 14px 0 0; | |
| } | |
| /* Category Colors */ | |
| .research { | |
| background: linear-gradient(90deg, #3b82f6, #60a5fa); | |
| } | |
| .design { | |
| background: linear-gradient(90deg, #8b5cf6, #a78bfa); | |
| } | |
| .ai-dev { | |
| background: linear-gradient(90deg, #10b981, #34d399); | |
| } | |
| .backend { | |
| background: linear-gradient(90deg, #059669, #10b981); | |
| } | |
| .integration { | |
| background: linear-gradient(90deg, #f59e0b, #fbbf24); | |
| } | |
| .testing { | |
| background: linear-gradient(90deg, #ef4444, #f87171); | |
| } | |
| .deployment { | |
| background: linear-gradient(90deg, #ec4899, #f472b6); | |
| } | |
| .legend { | |
| display: flex; | |
| justify-content: center; | |
| gap: 25px; | |
| margin-top: 40px; | |
| flex-wrap: wrap; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 12px; | |
| color: rgba(255, 255, 255, 0.7); | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .legend-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| } | |
| .footer { | |
| text-align: center; | |
| margin-top: 30px; | |
| padding-top: 20px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| color: rgba(255, 255, 255, 0.5); | |
| font-size: 13px; | |
| } | |
| /* Grid lines */ | |
| .grid-lines { | |
| position: absolute; | |
| top: 0; | |
| left: 280px; | |
| right: 0; | |
| bottom: 0; | |
| display: flex; | |
| pointer-events: none; | |
| } | |
| .grid-line { | |
| flex: 1; | |
| border-right: 1px dashed rgba(255, 255, 255, 0.05); | |
| } | |
| /* Phase separators */ | |
| .phase-separator { | |
| margin: 25px 0 15px 280px; | |
| padding: 8px 20px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 20px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| color: rgba(255, 255, 255, 0.5); | |
| display: inline-block; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateX(-20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| } | |
| .task-row { | |
| animation: slideIn 0.5s ease forwards; | |
| } | |
| .task-row:nth-child(1) { | |
| animation-delay: 0.1s; | |
| } | |
| .task-row:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .task-row:nth-child(3) { | |
| animation-delay: 0.3s; | |
| } | |
| .task-row:nth-child(4) { | |
| animation-delay: 0.4s; | |
| } | |
| .task-row:nth-child(5) { | |
| animation-delay: 0.5s; | |
| } | |
| .task-row:nth-child(6) { | |
| animation-delay: 0.6s; | |
| } | |
| .task-row:nth-child(7) { | |
| animation-delay: 0.7s; | |
| } | |
| .task-row:nth-child(8) { | |
| animation-delay: 0.8s; | |
| } | |
| .task-row:nth-child(9) { | |
| animation-delay: 0.9s; | |
| } | |
| .task-row:nth-child(10) { | |
| animation-delay: 1s; | |
| } | |
| .task-row:nth-child(11) { | |
| animation-delay: 1.1s; | |
| } | |
| .task-row:nth-child(12) { | |
| animation-delay: 1.2s; | |
| } | |
| .task-row:nth-child(13) { | |
| animation-delay: 1.3s; | |
| } | |
| .task-row:nth-child(14) { | |
| animation-delay: 1.4s; | |
| } | |
| .task-row:nth-child(15) { | |
| animation-delay: 1.5s; | |
| } | |
| .task-row:nth-child(16) { | |
| animation-delay: 1.6s; | |
| } | |
| .task-row:nth-child(17) { | |
| animation-delay: 1.7s; | |
| } | |
| .task-row:nth-child(18) { | |
| animation-delay: 1.8s; | |
| } | |
| .task-row:nth-child(19) { | |
| animation-delay: 1.9s; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>AILIXIR Project Timeline</h1> | |
| <p>AI-Driven Drug Discovery Platform | Sep 2025 - Jun 2026</p> | |
| </div> | |
| <div class="timeline-wrapper"> | |
| <div class="months-header"> | |
| <div class="month-chip">Sep</div> | |
| <div class="month-chip">Oct</div> | |
| <div class="month-chip">Nov</div> | |
| <div class="month-chip">Dec</div> | |
| <div class="month-chip">Jan</div> | |
| <div class="month-chip">Feb</div> | |
| <div class="month-chip">Mar</div> | |
| <div class="month-chip">Apr</div> | |
| <div class="month-chip">May</div> | |
| <div class="month-chip">Jun</div> | |
| </div> | |
| <div class="grid-lines"> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| <div class="grid-line"></div> | |
| </div> | |
| <!-- Phase 1: Research --> | |
| <div class="phase-separator">🔬 Research Phase</div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>Literature Review</span> | |
| <div class="task-icon" style="background: #3b82f6"> | |
| 📚 | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar research" | |
| style="left: 0%; width: 20%" | |
| > | |
| Literature Review | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>Problem Definition</span> | |
| <div class="task-icon" style="background: #60a5fa"> | |
| 🎯 | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar research" | |
| style="left: 10%; width: 15%" | |
| > | |
| Problem Definition | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>Dataset Curation</span> | |
| <div class="task-icon" style="background: #93c5fd"> | |
| 🗃️ | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar research" | |
| style="left: 15%; width: 15%" | |
| > | |
| ChEMBL Dataset | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 2: Design --> | |
| <div class="phase-separator">🎨 Design Phase</div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>System Architecture</span> | |
| <div class="task-icon" style="background: #8b5cf6"> | |
| 🏗️ | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar design" | |
| style="left: 20%; width: 15%" | |
| > | |
| Architecture | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>Database Schema</span> | |
| <div class="task-icon" style="background: #a78bfa"> | |
| 🗄️ | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar design" | |
| style="left: 25%; width: 15%" | |
| > | |
| 30+ Tables | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>UI/UX Design</span> | |
| <div class="task-icon" style="background: #c4b5fd"> | |
| 🎨 | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar design" | |
| style="left: 30%; width: 15%" | |
| > | |
| UI/UX Design | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 3: AI Development --> | |
| <div class="phase-separator">🤖 AI Development Phase</div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>REINVENT4 Training</span> | |
| <div class="task-icon" style="background: #10b981"> | |
| 🧬 | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar ai-dev" | |
| style="left: 30%; width: 20%" | |
| > | |
| REINVENT4 Model | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>ADMET Integration</span> | |
| <div class="task-icon" style="background: #34d399"> | |
| ⚗️ | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar ai-dev" | |
| style="left: 40%; width: 15%" | |
| > | |
| ADMET Scoring | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 4: Backend Development --> | |
| <div class="phase-separator">💻 Backend Development Phase</div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>Laravel Backend</span> | |
| <div class="task-icon" style="background: #059669"> | |
| 🚀 | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar backend" | |
| style="left: 40%; width: 20%" | |
| > | |
| Laravel API | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>API Implementation</span> | |
| <div class="task-icon" style="background: #6ee7b7"> | |
| 🔌 | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar backend" | |
| style="left: 45%; width: 20%" | |
| > | |
| 81+ Endpoints | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>Authentication</span> | |
| <div class="task-icon" style="background: #047857"> | |
| 🔐 | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar backend" | |
| style="left: 50%; width: 10%" | |
| > | |
| OTP + OAuth | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 5: Integration --> | |
| <div class="phase-separator">🔗 Integration Phase</div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>AI Microservices</span> | |
| <div class="task-icon" style="background: #f59e0b"> | |
| ⚡ | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar integration" | |
| style="left: 55%; width: 15%" | |
| > | |
| 6+ Services | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>Docking & MD</span> | |
| <div class="task-icon" style="background: #fbbf24"> | |
| 🧪 | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar integration" | |
| style="left: 60%; width: 15%" | |
| > | |
| Vina + OpenMM | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>Visualization</span> | |
| <div class="task-icon" style="background: #fcd34d"> | |
| 👁️ | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar integration" | |
| style="left: 65%; width: 15%" | |
| > | |
| 3D Viewer | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 6: Testing --> | |
| <div class="phase-separator">🧪 Testing Phase</div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>System Testing</span> | |
| <div class="task-icon" style="background: #ef4444"> | |
| ✅ | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar testing" | |
| style="left: 70%; width: 15%" | |
| > | |
| QA & Testing | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>Performance</span> | |
| <div class="task-icon" style="background: #f87171"> | |
| ⚡ | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar testing" | |
| style="left: 75%; width: 10%" | |
| > | |
| Optimization | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Phase 7: Deployment --> | |
| <div class="phase-separator">🚀 Deployment Phase</div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>Cloud Deploy</span> | |
| <div class="task-icon" style="background: #ec4899"> | |
| ☁️ | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar deployment" | |
| style="left: 80%; width: 10%" | |
| > | |
| AWS/Azure | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>Pilot Study</span> | |
| <div class="task-icon" style="background: #f472b6"> | |
| 🔬 | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar deployment" | |
| style="left: 85%; width: 10%" | |
| > | |
| EGFR Study | |
| </div> | |
| </div> | |
| </div> | |
| <div class="task-row"> | |
| <div class="task-label"> | |
| <span>Documentation</span> | |
| <div class="task-icon" style="background: #db2777"> | |
| 📖 | |
| </div> | |
| </div> | |
| <div class="task-bar-area"> | |
| <div | |
| class="task-bar deployment" | |
| style="left: 90%; width: 8%" | |
| > | |
| Docs | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="legend"> | |
| <div class="legend-item"> | |
| <div class="legend-dot" style="background: #3b82f6"></div> | |
| <span>Research</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-dot" style="background: #8b5cf6"></div> | |
| <span>Design</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-dot" style="background: #10b981"></div> | |
| <span>AI Development</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-dot" style="background: #059669"></div> | |
| <span>Backend</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-dot" style="background: #f59e0b"></div> | |
| <span>Integration</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-dot" style="background: #ef4444"></div> | |
| <span>Testing</span> | |
| </div> | |
| <div class="legend-item"> | |
| <div class="legend-dot" style="background: #ec4899"></div> | |
| <span>Deployment</span> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |