|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | + <title>Download Crop Health Monitor</title> |
| 7 | + <!-- Tailwind CSS CDN --> |
| 8 | + <script src="https://cdn.tailwindcss.com"></script> |
| 9 | + <!-- Lucide Icons --> |
| 10 | + <script src="https://unpkg.com/lucide@latest"></script> |
| 11 | + <style> |
| 12 | + @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); |
| 13 | + |
| 14 | + body { |
| 15 | + font-family: 'Plus Jakarta Sans', sans-serif; |
| 16 | + background-color: #0b0f19; |
| 17 | + color: #ffffff; |
| 18 | + overflow-x: hidden; |
| 19 | + background-image: radial-gradient(circle at top right, rgba(16, 185, 129, 0.15) 0%, transparent 40%), |
| 20 | + radial-gradient(circle at bottom left, rgba(14, 116, 144, 0.15) 0%, transparent 40%); |
| 21 | + } |
| 22 | + |
| 23 | + .glass-panel { |
| 24 | + background: rgba(15, 23, 42, 0.6); |
| 25 | + backdrop-filter: blur(16px); |
| 26 | + -webkit-backdrop-filter: blur(16px); |
| 27 | + border: 1px solid rgba(255, 255, 255, 0.08); |
| 28 | + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); |
| 29 | + } |
| 30 | + |
| 31 | + /* Animations */ |
| 32 | + @keyframes fadeIn { |
| 33 | + from { opacity: 0; transform: translateY(10px); } |
| 34 | + to { opacity: 1; transform: translateY(0); } |
| 35 | + } |
| 36 | + |
| 37 | + .fade-in { |
| 38 | + animation: fadeIn 0.6s ease-out forwards; |
| 39 | + } |
| 40 | + |
| 41 | + .delay-100 { animation-delay: 100ms; opacity: 0; } |
| 42 | + .delay-200 { animation-delay: 200ms; opacity: 0; } |
| 43 | + .delay-300 { animation-delay: 300ms; opacity: 0; } |
| 44 | + |
| 45 | + .shimmer { |
| 46 | + position: relative; |
| 47 | + overflow: hidden; |
| 48 | + } |
| 49 | + |
| 50 | + .shimmer::after { |
| 51 | + content: ''; |
| 52 | + position: absolute; |
| 53 | + top: -50%; |
| 54 | + left: -50%; |
| 55 | + width: 200%; |
| 56 | + height: 200%; |
| 57 | + background: linear-gradient( |
| 58 | + to right, |
| 59 | + rgba(255,255,255,0) 0%, |
| 60 | + rgba(255,255,255,0.05) 50%, |
| 61 | + rgba(255,255,255,0) 100% |
| 62 | + ); |
| 63 | + transform: rotate(30deg) translate(-100%, -100%); |
| 64 | + transition: all 0.5s; |
| 65 | + } |
| 66 | + |
| 67 | + .shimmer:hover::after { |
| 68 | + transform: rotate(30deg) translate(50%, 50%); |
| 69 | + } |
| 70 | + </style> |
| 71 | +</head> |
| 72 | +<body class="min-h-screen flex items-center justify-center p-4"> |
| 73 | + |
| 74 | + <!-- LOGIN SCREEN --> |
| 75 | + <div id="login-view" class="w-full max-w-md glass-panel rounded-3xl p-8 z-10 transition-all duration-500"> |
| 76 | + <div class="text-center mb-8"> |
| 77 | + <div class="w-16 h-16 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-2xl mx-auto flex items-center justify-center mb-6 shadow-lg shadow-emerald-500/20"> |
| 78 | + <i data-lucide="leaf" class="text-white w-8 h-8"></i> |
| 79 | + </div> |
| 80 | + <h1 class="text-2xl font-bold mb-2">Authorized Access</h1> |
| 81 | + <p class="text-slate-400 text-sm">Please enter the access code to download the application binaries.</p> |
| 82 | + </div> |
| 83 | + |
| 84 | + <form id="login-form" class="space-y-6"> |
| 85 | + <div> |
| 86 | + <label for="code" class="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">Access Code</label> |
| 87 | + <div class="relative"> |
| 88 | + <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"> |
| 89 | + <i data-lucide="lock" class="text-slate-500 w-5 h-5"></i> |
| 90 | + </div> |
| 91 | + <input type="password" id="code" required |
| 92 | + class="block w-full pl-11 pr-4 py-3 bg-slate-900/50 border border-slate-700 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent transition-all" |
| 93 | + placeholder="Enter any code to continue"> |
| 94 | + </div> |
| 95 | + <p id="error-msg" class="text-red-400 text-xs mt-2 hidden">Incorrect code. Please try again.</p> |
| 96 | + </div> |
| 97 | + <button type="submit" |
| 98 | + class="w-full py-3.5 px-4 bg-emerald-500 hover:bg-emerald-400 text-white font-bold rounded-xl transition-colors shadow-lg shadow-emerald-500/20 flex items-center justify-center gap-2"> |
| 99 | + <span>Unlock Downloads</span> |
| 100 | + <i data-lucide="arrow-right" class="w-4 h-4"></i> |
| 101 | + </button> |
| 102 | + </form> |
| 103 | + </div> |
| 104 | + |
| 105 | + <!-- DOWNLOADS SCREEN (Hidden initially) --> |
| 106 | + <div id="downloads-view" class="hidden w-full max-w-5xl z-10"> |
| 107 | + <div class="text-center mb-16 fade-in"> |
| 108 | + <div class="inline-flex items-center justify-center gap-2 bg-emerald-500/10 text-emerald-400 px-4 py-2 rounded-full text-sm font-semibold mb-6 border border-emerald-500/20"> |
| 109 | + <i data-lucide="shield-check" class="w-4 h-4"></i> Access Verified |
| 110 | + </div> |
| 111 | + <h1 class="text-4xl md:text-5xl font-extrabold mb-4 tracking-tight">Crop Health Monitor v1.0</h1> |
| 112 | + <p class="text-slate-400 text-lg max-w-2xl mx-auto">Select your operating system below to download the local inference engine and dashboard.</p> |
| 113 | + </div> |
| 114 | + |
| 115 | + <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto"> |
| 116 | + |
| 117 | + <!-- Mac Download Card --> |
| 118 | + <div class="glass-panel rounded-3xl p-8 fade-in delay-100 flex flex-col relative overflow-hidden group"> |
| 119 | + <div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full blur-3xl -mr-10 -mt-10 transition-all group-hover:bg-white/10"></div> |
| 120 | + |
| 121 | + <div class="flex items-center justify-between mb-8"> |
| 122 | + <div class="w-14 h-14 bg-slate-800 rounded-2xl flex items-center justify-center border border-slate-700"> |
| 123 | + <i data-lucide="monitor" class="text-slate-300 w-7 h-7 hidden group-hover:block transition-all"></i> |
| 124 | + <svg class="w-7 h-7 text-slate-300 group-hover:hidden transition-all" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.188 15.684c-.424.238-.888.423-1.373.548-.485.125-.99.188-1.503.188-.415 0-.82-.047-1.206-.139a5.132 5.132 0 01-1.127-.373c-.021-.01-.036-.021-.052-.036l-.01-.01-.355-.177a.666.666 0 00-.281-.082.68.68 0 00-.312.067l-.374.198c-.011.006-.021.011-.037.016l-.057.021a4.935 4.935 0 01-1.071.218 5.485 5.485 0 01-1.154-.041 5.467 5.467 0 01-1.121-.265 5.512 5.512 0 01-1.018-.458.736.736 0 01-.271-.271c-.068-.125-.098-.26-.088-.396.01-.136.057-.26.136-.364l.021-.026c.406-.52.753-1.096 1.034-1.725.281-.629.49-1.298.624-1.996a8.913 8.913 0 00.198-1.986c0-.5-.047-.999-.14-1.487a5.275 5.275 0 00-.422-1.372 4.095 4.095 0 00-.733-1.139 3.42 3.42 0 00-.998-.718l-.052-.026-.062-.015c-.255-.067-.5-.166-.723-.291.562-.114 1.138-.156 1.716-.124.577.031 1.144.134 1.685.306.904.28 1.745.748 2.479 1.385l.036.031c.364-.479.791-.904 1.269-1.263l.036-.026c.775-.551 1.637-.955 2.545-1.19a8.96 8.96 0 012.636-.213l.052.005c.166.01.327.036.489.078.161.042.317.098.468.166a.711.711 0 01.306.27.702.702 0 01.073.395c-.015.135-.067.26-.15.364-.083.104-.198.187-.328.24l-.062.021c-.493.161-1.002.259-1.52.291-.518.031-1.04-.006-1.554-.109-.514-.104-1.018-.28-1.503-.52a5.495 5.495 0 00-1.242-.451.706.706 0 00-.323-.005.7.7 0 00-.27.104c-.458.291-.873.65-1.227 1.066l-.031.036c-.452.54-.805 1.143-1.05 1.787-.244.644-.384 1.32-.416 2.016a8.887 8.887 0 00.104 2.106c.073.499.208.986.401 1.455.192.469.447.915.759 1.321.312.406.676.77 1.082 1.082.406.312.852.567 1.321.759.469.192.956.327 1.455.401a6.626 6.626 0 001.066.041 6.323 6.323 0 001.014-.145l.053-.016c.15-.052.285-.125.405-.218.12-.094.218-.213.286-.349l.021-.047c.078-.182.093-.38.041-.572a.707.707 0 00-.218-.38l-.052-.047c-.634-.582-1.127-1.304-1.445-2.11-.318-.806-.462-1.673-.427-2.541l.006-.114c0-.187.057-.369.161-.519s.25-.265.426-.333l.115-.036c.863-.208 1.731-.416 2.6-.624.868-.208 1.742-.395 2.615-.556l.115-.021c.176-.021.353 0 .509.062a.702.702 0 01.323.239l.047.052c.265.343.468.733.603 1.15.135.416.208.852.218 1.294.01.442-.042.883-.156 1.31a5.619 5.619 0 01-.447 1.242l-.015.031c-.135.244-.312.463-.52.65-.208.187-.452.338-.718.442l-.125.041c-1.164.333-2.313.728-3.41 1.18l-.119.052c-.171.078-.322.187-.442.322a.728.728 0 00-.182.426l-.005.125c.01.998.421 1.944 1.154 2.646.733.702 1.716 1.076 2.73 1.04h.166c.218-.031.426-.089.624-.172z"/></svg> |
| 125 | + </div> |
| 126 | + <div class="text-right"> |
| 127 | + <span class="inline-block bg-slate-800 text-slate-300 text-xs font-bold px-3 py-1 rounded-full border border-slate-700">macOS (Apple Silicon)</span> |
| 128 | + </div> |
| 129 | + </div> |
| 130 | + |
| 131 | + <h2 class="text-2xl font-bold mb-2">Mac Installer</h2> |
| 132 | + <div class="flex items-center gap-4 text-sm text-slate-400 mb-8 border-b border-slate-800 pb-6"> |
| 133 | + <span class="flex items-center gap-1"><i data-lucide="hard-drive" class="w-4 h-4"></i> 173.1 MB</span> |
| 134 | + <span class="flex items-center gap-1"><i data-lucide="file" class="w-4 h-4"></i> .dmg</span> |
| 135 | + </div> |
| 136 | + |
| 137 | + <div class="flex-grow flex flex-col justify-end"> |
| 138 | + <p class="text-slate-500 text-sm mb-4">Requires macOS 12+ (M1/M2/M3 chips only)</p> |
| 139 | + <a href="Crop Disease Identifier-1.0.0-arm64.dmg" download |
| 140 | + class="w-full py-4 px-4 bg-white hover:bg-slate-200 text-slate-900 font-bold rounded-xl transition-all flex items-center justify-between group shimmer shadow-lg hover:shadow-white/20"> |
| 141 | + <span>Download for Mac</span> |
| 142 | + <i data-lucide="download" class="w-5 h-5 group-hover:translate-y-1 transition-transform"></i> |
| 143 | + </a> |
| 144 | + </div> |
| 145 | + </div> |
| 146 | + |
| 147 | + <!-- Windows Download Card --> |
| 148 | + <div class="glass-panel rounded-3xl p-8 fade-in delay-200 flex flex-col relative overflow-hidden group"> |
| 149 | + <div class="absolute top-0 right-0 w-32 h-32 bg-sky-500/5 rounded-full blur-3xl -mr-10 -mt-10 transition-all group-hover:bg-sky-500/10"></div> |
| 150 | + |
| 151 | + <div class="flex items-center justify-between mb-8"> |
| 152 | + <div class="w-14 h-14 bg-slate-800 rounded-2xl flex items-center justify-center border border-slate-700"> |
| 153 | + <i data-lucide="layout-grid" class="text-sky-400 w-7 h-7"></i> |
| 154 | + </div> |
| 155 | + <div class="text-right"> |
| 156 | + <span class="inline-block bg-slate-800 text-sky-400 text-xs font-bold px-3 py-1 rounded-full border border-slate-700">Windows (x64)</span> |
| 157 | + </div> |
| 158 | + </div> |
| 159 | + |
| 160 | + <h2 class="text-2xl font-bold mb-2">Windows Setup</h2> |
| 161 | + <div class="flex items-center gap-4 text-sm text-slate-400 mb-8 border-b border-slate-800 pb-6"> |
| 162 | + <span class="flex items-center gap-1"><i data-lucide="hard-drive" class="w-4 h-4"></i> 187.0 MB</span> |
| 163 | + <span class="flex items-center gap-1"><i data-lucide="file" class="w-4 h-4"></i> .exe</span> |
| 164 | + </div> |
| 165 | + |
| 166 | + <div class="flex-grow flex flex-col justify-end"> |
| 167 | + <p class="text-slate-500 text-sm mb-4">Requires Windows 10/11 (64-bit)</p> |
| 168 | + <a href="Crop Disease Identifier Setup 1.0.0.exe" download |
| 169 | + class="w-full py-4 px-4 bg-sky-600 hover:bg-sky-500 text-white font-bold rounded-xl transition-all flex items-center justify-between group shimmer shadow-lg shadow-sky-600/20"> |
| 170 | + <span>Download for Windows</span> |
| 171 | + <i data-lucide="download" class="w-5 h-5 group-hover:translate-y-1 transition-transform"></i> |
| 172 | + </a> |
| 173 | + </div> |
| 174 | + </div> |
| 175 | + |
| 176 | + </div> |
| 177 | + |
| 178 | + <div class="mt-16 text-center text-slate-500 text-sm fade-in delay-300"> |
| 179 | + <p>Ensure you have at least 500MB of free disk space for the local AI models.</p> |
| 180 | + </div> |
| 181 | + </div> |
| 182 | + |
| 183 | + <!-- Scripts --> |
| 184 | + <script> |
| 185 | + // Initialize Lucide icons |
| 186 | + lucide.createIcons(); |
| 187 | + |
| 188 | + // Simple auth logic |
| 189 | + document.getElementById('login-form').addEventListener('submit', function(e) { |
| 190 | + e.preventDefault(); |
| 191 | + const code = document.getElementById('code').value; |
| 192 | + |
| 193 | + // In a real app this would be verified via backend. |
| 194 | + // For this basic portal, any non-empty code works as requested. |
| 195 | + if(code.trim() !== '') { |
| 196 | + // Hide login |
| 197 | + const loginView = document.getElementById('login-view'); |
| 198 | + loginView.style.opacity = '0'; |
| 199 | + loginView.style.transform = 'scale(0.95)'; |
| 200 | + |
| 201 | + setTimeout(() => { |
| 202 | + loginView.classList.add('hidden'); |
| 203 | + // Show downloads |
| 204 | + const downloadsView = document.getElementById('downloads-view'); |
| 205 | + downloadsView.classList.remove('hidden'); |
| 206 | + }, 500); |
| 207 | + } |
| 208 | + }); |
| 209 | + </script> |
| 210 | +</body> |
| 211 | +</html> |
0 commit comments