fatihmurat/evcharge
0
1<!DOCTYPE html>2<html lang="tr">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>EV Charge Assistant | Dashboard</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">9 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>12 <style>13 .sidebar {14 transition: all 0.3s ease;15 }16 .map-container {17 height: calc(100vh - 64px);18 }19 .vehicle-card:hover {20 transform: translateY(-2px);21 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);22 }23 </style>24</head>25<body class="font-sans antialiased text-gray-800 bg-gray-100">26 <div class="flex h-screen overflow-hidden">27 <!-- Sidebar -->28 <div class="sidebar hidden md:flex md:flex-shrink-0">29 <div class="flex flex-col w-64 bg-white border-r border-gray-200">30 <div class="flex items-center h-16 px-4 border-b border-gray-200">31 <div class="flex items-center">32 <i data-feather="battery-charging" class="h-8 w-8 text-blue-500"></i>33 <span class="ml-2 text-xl font-bold text-gray-900">EVCharge</span>34 </div>35 </div>36 <div class="flex flex-col flex-grow overflow-y-auto">37 <nav class="flex-1 px-2 py-4 space-y-1">38 <a href="#" class="bg-blue-50 text-blue-600 group flex items-center px-2 py-2 text-sm font-medium rounded-md">39 <i data-feather="home" class="text-blue-500 mr-3 h-5 w-5"></i>40 Dashboard41 </a>42 <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">43 <i data-feather="map" class="text-gray-400 mr-3 h-5 w-5"></i>44 Harita45 </a>46 <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">47 <i data-feather="navigation" class="text-gray-400 mr-3 h-5 w-5"></i>48 Rota Planlama49 </a>50 <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">51 <i data-feather="car" class="text-gray-400 mr-3 h-5 w-5"></i>52 Araçlarım53 </a>54 <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">55 <i data-feather="clock" class="text-gray-400 mr-3 h-5 w-5"></i>56 Geçmiş Şarjlar57 </a>58 <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">59 <i data-feather="settings" class="text-gray-400 mr-3 h-5 w-5"></i>60 Ayarlar61 </a>62 </nav>63 </div>64 <div class="p-4 border-t border-gray-200">65 <div class="flex items-center">66 <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="User profile">67 <div class="ml-3">68 <p class="text-sm font-medium text-gray-700">Ahmet Yılmaz</p>69 <a href="#" class="text-xs font-medium text-blue-600 hover:text-blue-500">Profilini görüntüle</a>70 </div>71 </div>72 <button class="mt-4 w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">73 <i data-feather="log-out" class="mr-2 h-4 w-4"></i> Çıkış Yap74 </button>75 </div>76 </div>77 </div>78 79 <!-- Main Content -->80 <div class="flex flex-col flex-1 overflow-hidden">81 <!-- Top Navigation -->82 <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">83 <div class="flex items-center">84 <button class="md:hidden text-gray-500 hover:text-gray-600">85 <i data-feather="menu"></i>86 </button>87 <h1 class="ml-4 text-lg font-medium text-gray-900">Dashboard</h1>88 </div>89 <div class="flex items-center space-x-4">90 <button class="p-1 text-gray-400 hover:text-gray-500">91 <i data-feather="bell"></i>92 </button>93 <button class="p-1 text-gray-400 hover:text-gray-500">94 <i data-feather="help-circle"></i>95 </button>96 <div class="relative">97 <button class="flex items-center text-sm text-gray-700 hover:text-gray-900">98 <span class="hidden md:inline">TR</span>99 <i data-feather="chevron-down" class="ml-1 h-4 w-4"></i>100 </button>101 </div>102 </div>103 </div>104 105 <!-- Main Content Area -->106 <div class="flex-1 overflow-auto">107 <div class="p-4">108 <!-- Welcome Banner -->109 <div class="bg-blue-50 rounded-lg p-4 mb-6">110 <div class="flex items-center">111 <div class="flex-shrink-0">112 <i data-feather="info" class="h-5 w-5 text-blue-400"></i>113 </div>114 <div class="ml-3">115 <h3 class="text-sm font-medium text-blue-800">Hoş geldiniz, Ahmet Bey!</h3>116 <div class="mt-2 text-sm text-blue-700">117 <p>Son şarj işleminiz 2 gün önce tamamlandı. Bataryanızın %75 doluluk oranıyla yaklaşık 320 km menziliniz bulunuyor.</p>118 </div>119 </div>120 </div>121 </div>122 123 <!-- Vehicle Status -->124 <div class="mb-6">125 <h2 class="text-lg font-medium text-gray-900 mb-4">Araç Durumu</h2>126 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">127 <div class="vehicle-card bg-white rounded-lg shadow p-4 transition-all duration-300">128 <div class="flex items-center">129 <div class="flex-shrink-0 bg-blue-100 rounded-md p-3">130 <i data-feather="battery" class="h-6 w-6 text-blue-600"></i>131 </div>132 <div class="ml-4">133 <p class="text-sm font-medium text-gray-500">Batarya Durumu</p>134 <p class="text-xl font-semibold text-gray-900">%75</p>135 </div>136 </div>137 <div class="mt-4">138 <div class="w-full bg-gray-200 rounded-full h-2.5">139 <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>140 </div>141 </div>142 </div>143 144 <div class="vehicle-card bg-white rounded-lg shadow p-4 transition-all duration-300">145 <div class="flex items-center">146 <div class="flex-shrink-0 bg-green-100 rounded-md p-3">147 <i data-feather="navigation" class="h-6 w-6 text-green-600"></i>148 </div>149 <div class="ml-4">150 <p class="text-sm font-medium text-gray-500">Tahmini Menzil</p>151 <p class="text-xl font-semibold text-gray-900">320 km</p>152 </div>153 </div>154 </div>155 156 <div class="vehicle-card bg-white rounded-lg shadow p-4 transition-all duration-300">157 <div class="flex items-center">158 <div class="flex-shrink-0 bg-yellow-100 rounded-md p-3">159 <i data-feather="zap" class="h-6 w-6 text-yellow-600"></i>160 </div>161 <div class="ml-4">162 <p class="text-sm font-medium text-gray-500">Ort. Tüketim</p>163 <p class="text-xl font-semibold text-gray-900">15 kWh/100km</p>164 </div>165 </div>166 </div>167 168 <div class="vehicle-card bg-white rounded-lg shadow p-4 transition-all duration-300">169 <div class="flex items-center">170 <div class="flex-shrink-0 bg-purple-100 rounded-md p-3">171 <i data-feather="clock" class="h-6 w-6 text-purple-600"></i>172 </div>173 <div class="ml-4">174 <p class="text-sm font-medium text-gray-500">Son Şarj</p>175 <p class="text-xl font-semibold text-gray-900">2 gün önce</p>176 </div>177 </div>178 </div>179 </div>180 </div>181 182 <!-- Quick Actions -->183 <div class="mb-6">184 <h2 class="text-lg font-medium text-gray-900 mb-4">Hızlı Erişim</h2>185 <div class="grid grid-cols-2 md:grid-cols-4 gap-4">186 <a href="#" class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center hover:bg-gray-50">187 <div class="bg-blue-100 rounded-full p-3 mb-2">188 <i data-feather="map-pin" class="h-6 w-6 text-blue-600"></i>189 </div>190 <span class="text-sm font-medium text-gray-700">Yakındaki İstasyonlar</span>191 </a>192 <a href="#" class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center hover:bg-gray-50">193 <div class="bg-green-100 rounded-full p-3 mb-2">194 <i data-feather="navigation" class="h-6 w-6 text-green-600"></i>195 </div>196 <span class="text-sm font-medium text-gray-700">Rota Planla</span>197 </a>198 <a href="#" class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center hover:bg-gray-50">199 <div class="bg-yellow-100 rounded-full p-3 mb-2">200 <i data-feather="calendar" class="h-6 w-6 text-yellow-600"></i>201 </div>202 <span class="text-sm font-medium text-gray-700">Rezervasyon Yap</span>203 </a>204 <a href="#" class="bg-white rounded-lg shadow p-4 flex flex-col items-center justify-center hover:bg-gray-50">205 <div class="bg-purple-100 rounded-full p-3 mb-2">206 <i data-feather="car" class="h-6 w-6 text-purple-600"></i>207 </div>208 <span class="text-sm font-medium text-gray-700">Araç Ekle</span>209 </a>210 </div>211 </div>212 213 <!-- Recent Activity & Map -->214 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">215 <!-- Recent Activity -->216 <div class="lg:col-span-2">217 <h2 class="text-lg font-medium text-gray-900 mb-4">Son Etkinlikler</h2>218 <div class="bg-white rounded-lg shadow overflow-hidden">219 <ul class="divide-y divide-gray-200">220 <li class="p-4 hover:bg-gray-50">221 <div class="flex items-center">222 <div class="flex-shrink-0 bg-blue-100 rounded-md p-2">223 <i data-feather="zap" class="h-5 w-5 text-blue-600"></i>224 </div>225 <div class="ml-3">226 <p class="text-sm font-medium text-gray-900">Şarj oturumu tamamlandı</p>227 <p class="text-sm text-gray-500">Tesla Supercharger • 45 kWh • ₺120</p>228 <p class="text-xs text-gray-400">2 gün önce</p>229 </div>230 </div>231 </li>232 <li class="p-4 hover:bg-gray-50">233 <div class="flex items-center">234 <div class="flex-shrink-0 bg-green-100 rounded-md p-2">235 <i data-feather="map-pin" class="h-5 w-5 text-green-600"></i>236 </div>237 <div class="ml-3">238 <p class="text-sm font-medium text-gray-900">Yeni istasyon eklendi</p>239 <p class="text-sm text-gray-500">Shell Recharge • İstanbul</p>240 <p class="text-xs text-gray-400">3 gün önce</p>241 </div>242 </div>243 </li>244 <li class="p-4 hover:bg-gray-50">245 <div class="flex items-center">246 <div class="flex-shrink-0 bg-yellow-100 rounded-md p-2">247 <i data-feather="navigation" class="h-5 w-5 text-yellow-600"></i>248 </div>249 <div class="ml-3">250 <p class="text-sm font-medium text-gray-900">Rota kaydedildi</p>251 <p class="text-sm text-gray-500">İstanbul → Ankara • 2 şarj durağı</p>252 <p class="text-xs text-gray-400">5 gün önce</p>253 </div>254 </div>255 </li>256 <li class="p-4 hover:bg-gray-50">257 <div class="flex items-center">258 <div class="flex-shrink-0 bg-purple-100 rounded-md p-2">259 <i data-feather="user" class="h-5 w-5 text-purple-600"></i>260 </div>261 <div class="ml-3">262 <p class="text-sm font-medium text-gray-900">Profil bilgileri güncellendi</p>263 <p class="text-sm text-gray-500">Araç bilgileri eklendi</p>264 <p class="text-xs text-gray-400">1 hafta önce</p>265 </div>266 </div>267 </li>268 </ul>269 <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">270 <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">Tümünü Görüntüle</a>271 </div>272 </div>273 </div>274 275 <!-- Nearby Stations -->276 <div>277 <h2 class="text-lg font-medium text-gray-900 mb-4">Yakındaki İstasyonlar</h2>278 <div class="bg-white rounded-lg shadow overflow-hidden">279 <div class="p-4 border-b border-gray-200">280 <div class="relative rounded-md shadow-sm">281 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">282 <i data-feather="search" class="h-4 w-4 text-gray-400"></i>283 </div>284 <input type="text" class="focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-md py-2" placeholder="İstasyon ara...">285 </div>286 </div>287 <ul class="divide-y divide-gray-200 max-h-96 overflow-y-auto">288 <li class="p-4 hover:bg-gray-50 cursor-pointer">289 <div class="flex items-start">290 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">291 <i data-feather="battery" class="h-5 w-5 text-green-600"></i>292 </div>293 <div class="ml-3">294 <p class="text-sm font-medium text-gray-900">Tesla Supercharger</p>295 <p class="text-sm text-gray-500">1.2 km • 4/8 boş</p>296 <div class="mt-1 flex items-center text-xs text-gray-500">297 <i data-feather="clock" class="mr-1 h-3 w-3"></i> 30 dk tahmini bekleme298 </div>299 </div>300 </div>301 </li>302 <li class="p-4 hover:bg-gray-50 cursor-pointer">303 <div class="flex items-start">304 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center">305 <i data-feather="battery" class="h-5 w-5 text-yellow-600"></i>306 </div>307 <div class="ml-3">308 <p class="text-sm font-medium text-gray-900">Shell Recharge</p>309 <p class="text-sm text-gray-500">2.5 km • 2/6 boş</p>310 <div class="mt-1 flex items-center text-xs text-gray-500">311 <i data-feather="clock" class="mr-1 h-3 w-3"></i> 45 dk tahmini bekleme312 </div>313 </div>314 </div>315 </li>316 <li class="p-4 hover:bg-gray-50 cursor-pointer">317 <div class="flex items-start">318 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center">319 <i data-feather="battery" class="h-5 w-5 text-red-600"></i>320 </div>321 <div class="ml-3">322 <p class="text-sm font-medium text-gray-900">Eşarj</p>323 <p class="text-sm text-gray-500">3.1 km • 0/4 boş</p>324 <div class="mt-1 flex items-center text-xs text-gray-500">325 <i data-feather="clock" class="mr-1 h-3 w-3"></i> 1 saat tahmini bekleme326 </div>327 </div>328 </div>329 </li>330 <li class="p-4 hover:bg-gray-50 cursor-pointer">331 <div class="flex items-start">332 <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">333 <i data-feather="battery" class="h-5 w-5 text-green-600"></i>334 </div>335 <div class="ml-3">336 <p class="text-sm font-medium text-gray-900">ZES</p>337 <p class="text-sm text-gray-500">4.7 km • 3/4 boş</p>338 <div class="mt-1 flex items-center text-xs text-gray-500">339 <i data-feather="clock" class="mr-1 h-3 w-3"></i> 15 dk tahmini bekleme340 </div>341 </div>342 </div>343 </li>344 </ul>345 <div class="px-4 py-3 bg-gray-50 text346</body>347</html>