GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Drive Search UI - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121212; color: #EDEDED;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 96px; display: flex; align-items: center; justify-content: space-between;19 padding: 0 32px; font-size: 36px; color: #F5F5F5;20 }21 .sb-left, .sb-right { display: flex; align-items: center; gap: 18px; }22 .sb-icon {23 width: 28px; height: 28px; border-radius: 50%; background: #DADADA20; border: 1px solid #77777755;24 }25 26 /* App bar with search */27 .appbar {28 position: absolute; top: 96px; left: 0; right: 0;29 height: 140px; background: #1F1F1F; display: flex; align-items: center;30 padding: 0 24px; box-sizing: border-box;31 }32 .back-btn {33 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; margin-right: 16px;34 }35 .search-field {36 height: 88px; width: 960px; background: #2A2D31; border-radius: 14px;37 display: flex; align-items: center; padding: 0 24px; box-sizing: border-box;38 color: #B0BEC5; font-size: 36px;39 }40 41 /* Chips */42 .chips {43 position: absolute; top: 256px; left: 24px; right: 24px;44 display: flex; gap: 18px; align-items: center;45 }46 .chip {47 display: inline-flex; align-items: center; gap: 14px;48 padding: 16px 22px; border: 1px solid #424242; border-radius: 28px;49 background: #1A1A1A; color: #DADADA; font-size: 30px;50 }51 .chip-icon {52 width: 42px; height: 42px; border-radius: 8px; display: flex; align-items: center; justify-content: center;53 background: #2E2E2E;54 }55 .chip .doc { background:#1976D2; }56 .chip .pdf { background:#D32F2F; }57 .chip .img { background:#E91E63; }58 .chip .fold { background:#FFC107; }59 60 /* Main content (empty area) */61 .content {62 position: absolute; top: 340px; left: 0; right: 0; bottom: 970px;63 background: #121212;64 }65 66 /* Keyboard */67 .keyboard {68 position: absolute; left: 0; right: 0; bottom: 0; height: 970px;69 background: #1A1A1A; box-sizing: border-box; border-top: 1px solid #2C2C2C;70 }71 .kbd-toolbar {72 height: 96px; display: flex; align-items: center; gap: 36px; padding: 0 28px; color: #CFCFCF;73 border-bottom: 1px solid #2C2C2C;74 }75 .tb-icon { width: 48px; height: 48px; display:flex; align-items:center; justify-content:center; background:#2A2A2A; border-radius:12px; }76 .keys { padding: 22px 24px; }77 .row { display: flex; gap: 14px; margin-bottom: 24px; }78 .key {79 flex: 1; height: 120px; background: #2A2A2A; border-radius: 16px; display: flex; align-items: center; justify-content: center;80 color: #ECECEC; font-size: 42px;81 }82 .key.small { flex: 0 0 84px; }83 .key.wide { flex: 2; }84 .key.space { flex: 5; font-size: 32px; color: #BDBDBD; }85 .key.icon { font-size: 36px; }86 .key.special { background: #272727; color: #E0E0E0; }87 .key.search {88 flex: 0 0 140px; height: 140px; border-radius: 70px; background: #BBD5EA; color: #0A3556;89 align-self: center;90 }91 .bottom-pill {92 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);93 width: 180px; height: 9px; background: #EAEAEA; border-radius: 5px; opacity: 0.9;94 }95 96 /* Simple svg helpers */97 svg { display:block; }98</style>99</head>100<body>101<div id="render-target">102 103 <!-- Status bar -->104 <div class="status-bar">105 <div class="sb-left">106 <div style="font-weight:500;">10:25</div>107 <div class="sb-icon"></div>108 <div class="sb-icon"></div>109 <div class="sb-icon"></div>110 <div class="sb-icon"></div>111 <div class="sb-icon"></div>112 </div>113 <div class="sb-right">114 <!-- WiFi -->115 <svg width="36" height="36" viewBox="0 0 36 36">116 <path d="M18 26c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z" fill="#FFFFFF"/>117 <path d="M7 17c6.7-5.3 15.3-5.3 22 0" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round"/>118 <path d="M11 21c4.4-3.3 9.6-3.3 14 0" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round"/>119 </svg>120 <!-- Battery -->121 <svg width="44" height="24" viewBox="0 0 44 24">122 <rect x="1" y="2" width="36" height="20" rx="4" stroke="#FFFFFF" stroke-width="2" fill="none"/>123 <rect x="4" y="5" width="30" height="14" rx="3" fill="#FFFFFF"/>124 <rect x="38" y="7" width="5" height="10" rx="2" fill="#FFFFFF"/>125 </svg>126 </div>127 </div>128 129 <!-- App bar -->130 <div class="appbar">131 <div class="back-btn">132 <svg width="40" height="40" viewBox="0 0 24 24">133 <path d="M15 18l-6-6 6-6" stroke="#FFFFFF" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>134 </svg>135 </div>136 <div class="search-field">Search in Drive</div>137 </div>138 139 <!-- Chips row -->140 <div class="chips">141 <div class="chip">142 <div class="chip-icon doc">143 <svg width="26" height="26" viewBox="0 0 24 24">144 <rect x="3" y="3" width="14" height="18" rx="2" fill="#FFFFFF"/>145 <rect x="6" y="7" width="8" height="2" fill="#1976D2"/>146 <rect x="6" y="11" width="8" height="2" fill="#1976D2"/>147 </svg>148 </div>149 <span>Documents</span>150 </div>151 152 <div class="chip">153 <div class="chip-icon pdf">154 <svg width="26" height="26" viewBox="0 0 24 24">155 <rect x="3" y="4" width="18" height="16" rx="3" fill="#FFFFFF"/>156 <text x="6" y="16" font-size="10" font-family="Arial" fill="#D32F2F">PDF</text>157 </svg>158 </div>159 <span>PDFs</span>160 </div>161 162 <div class="chip">163 <div class="chip-icon img">164 <svg width="26" height="26" viewBox="0 0 24 24">165 <rect x="3" y="4" width="18" height="16" rx="3" fill="#FFFFFF"/>166 <circle cx="9" cy="10" r="2.2" fill="#E91E63"/>167 <path d="M6 17l4-4 3 3 4-4 3 5H6z" fill="#E91E63"/>168 </svg>169 </div>170 <span>Photos & images</span>171 </div>172 173 <div class="chip">174 <div class="chip-icon fold">175 <svg width="26" height="26" viewBox="0 0 24 24">176 <path d="M3 6h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="#FFFFFF"/>177 </svg>178 </div>179 <span>Folders</span>180 </div>181 </div>182 183 <!-- Main content area (empty dark list space) -->184 <div class="content"></div>185 186 <!-- Keyboard mock -->187 <div class="keyboard">188 <div class="kbd-toolbar">189 <div class="tb-icon">190 <svg width="28" height="28" viewBox="0 0 24 24">191 <rect x="3" y="3" width="7" height="7" fill="#CFCFCF"/>192 <rect x="14" y="3" width="7" height="7" fill="#CFCFCF"/>193 <rect x="3" y="14" width="7" height="7" fill="#CFCFCF"/>194 <rect x="14" y="14" width="7" height="7" fill="#CFCFCF"/>195 </svg>196 </div>197 <div class="tb-icon">198 <svg width="28" height="28" viewBox="0 0 24 24">199 <circle cx="12" cy="9" r="4" fill="#CFCFCF"/>200 <path d="M4 20c2.5-4 13.5-4 16 0" stroke="#CFCFCF" stroke-width="2" fill="none" stroke-linecap="round"/>201 </svg>202 </div>203 <div style="color:#E0E0E0; font-weight:600;">GIF</div>204 <div class="tb-icon">205 <svg width="28" height="28" viewBox="0 0 24 24">206 <circle cx="12" cy="12" r="10" stroke="#CFCFCF" stroke-width="2" fill="none"/>207 <rect x="10" y="6" width="4" height="8" fill="#CFCFCF"/>208 </svg>209 </div>210 <div class="tb-icon">211 <svg width="28" height="28" viewBox="0 0 24 24">212 <path d="M4 12h16" stroke="#CFCFCF" stroke-width="2"/>213 <path d="M8 4h8M6 20h12" stroke="#CFCFCF" stroke-width="2"/>214 </svg>215 </div>216 <div class="tb-icon">217 <svg width="28" height="28" viewBox="0 0 24 24">218 <circle cx="12" cy="12" r="10" fill="#CFCFCF"/>219 </svg>220 </div>221 <div class="tb-icon">222 <svg width="28" height="28" viewBox="0 0 24 24">223 <path d="M12 18c3.9 0 7-3.1 7-7V5h-3v6c0 2.2-1.8 4-4 4s-4-1.8-4-4V5H5v6c0 3.9 3.1 7 7 7z" fill="#CFCFCF"/>224 </svg>225 </div>226 </div>227 228 <div class="keys">229 <div class="row">230 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>231 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>232 </div>233 <div class="row">234 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>235 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>236 </div>237 <div class="row">238 <div class="key special" style="flex:1.5">239 <svg width="36" height="36" viewBox="0 0 24 24">240 <path d="M12 5l5 7h-4v7h-2v-7H7l5-7z" fill="#E0E0E0"/>241 </svg>242 </div>243 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>244 <div class="key special" style="flex:1.5">245 <svg width="40" height="40" viewBox="0 0 24 24">246 <path d="M21 7l-9 0 0-3-9 8 9 8 0-3 9 0z" fill="#E0E0E0"/>247 </svg>248 </div>249 </div>250 <div class="row" style="align-items:center;">251 <div class="key special" style="flex:1.3">?123</div>252 <div class="key icon" style="flex:1">,</div>253 <div class="key icon" style="flex:1">254 <svg width="32" height="32" viewBox="0 0 24 24">255 <circle cx="12" cy="12" r="9" stroke="#E0E0E0" stroke-width="2" fill="none"/>256 <circle cx="9" cy="10" r="1.2" fill="#E0E0E0"/>257 <circle cx="15" cy="10" r="1.2" fill="#E0E0E0"/>258 <path d="M8 14c2.5 2 5.5 2 8 0" stroke="#E0E0E0" stroke-width="1.6" fill="none"/>259 </svg>260 </div>261 <div class="key space">space</div>262 <div class="key icon" style="flex:1">.</div>263 <div class="key search">264 <svg width="44" height="44" viewBox="0 0 24 24">265 <circle cx="11" cy="11" r="7" stroke="#0A3556" stroke-width="2.4" fill="none"/>266 <path d="M16 16l5 5" stroke="#0A3556" stroke-width="2.4" stroke-linecap="round"/>267 </svg>268 </div>269 </div>270 </div>271 272 <div class="bottom-pill"></div>273 </div>274 275</div>276</body>277</html>