GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Explorer Map with Search and Keyboard</title>6<style>7 body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background: linear-gradient(180deg, #2b1e2a 0%, #3a2a40 60%, #221c22 100%);11 border-radius: 24px;12 box-shadow: 0 30px 60px rgba(0,0,0,0.35);13 }14 15 /* Status bar */16 .status-bar {17 position:absolute; top:0; left:0; width:100%; height:120px;18 color:#fff; padding:0 36px;19 display:flex; align-items:center; justify-content:space-between;20 background: rgba(20, 10, 25, 0.6);21 }22 .status-left { display:flex; align-items:center; gap:24px; font-weight:600; }23 .status-right { display:flex; align-items:center; gap:22px; }24 .status-icon { width:32px; height:32px; opacity:0.85; }25 .wifi svg, .battery svg { display:block; width:42px; height:42px; }26 27 /* Header under status bar */28 .app-header {29 position:absolute; top:140px; left:40px; display:flex; align-items:center; gap:22px; color:#d7d7d7;30 }31 .chevron {32 width:54px; height:54px; border-radius:14px; background: rgba(255,255,255,0.08);33 display:flex; align-items:center; justify-content:center;34 }35 .chevron svg { width:28px; height:28px; }36 .title-wrap { display:flex; align-items:center; gap:16px; }37 .ti-badge {38 width:54px; height:54px; border-radius:10px; background: rgba(255,255,255,0.1);39 color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center;40 }41 .app-title { font-size:64px; font-weight:700; letter-spacing:1px; color:#cfcfcf; text-shadow: 0 2px 3px rgba(0,0,0,0.4); }42 .pin-icon { margin-left:8px; width:38px; height:38px; opacity:0.9; }43 44 /* Map placeholder (image) */45 .map-area {46 position:absolute; top:240px; left:40px; right:40px; bottom:1060px;47 background:#E0E0E0; border:1px solid #BDBDBD; border-radius:24px;48 display:flex; align-items:center; justify-content:center; color:#757575; font-size:40px; font-weight:600;49 }50 51 /* Map markers */52 .marker {53 position:absolute; width:180px; height:180px; border-radius:24px; background:#f8f8f8;54 box-shadow: 0 8px 18px rgba(0,0,0,0.25);55 display:flex; align-items:center; justify-content:center;56 }57 .marker:after {58 content:""; position:absolute; bottom:-34px; left:50%; transform:translateX(-50%);59 width:90px; height:90px; border-radius:50% 50% 50% 0; background:rgba(255,255,255,0.8);60 clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);61 opacity:0.7;62 }63 .marker .img {64 width:150px; height:150px; background:#E0E0E0; border:1px solid #BDBDBD;65 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; text-align:center; border-radius:18px;66 }67 68 /* Search bar */69 .search-bar {70 position:absolute; left:60px; right:60px; bottom:1000px; height:140px;71 background:#ffffff; border-radius:80px; box-shadow: 0 14px 40px rgba(0,0,0,0.35);72 display:flex; align-items:center; padding:0 46px; gap:28px;73 }74 .search-icon, .close-icon { width:52px; height:52px; }75 .search-text { font-size:54px; color:#8b8b8b; flex:1; }76 77 /* Keyboard */78 .keyboard {79 position:absolute; left:0; right:0; bottom:0; height:980px;80 background:#1b1717; border-top-left-radius:30px; border-top-right-radius:30px;81 box-shadow: 0 -20px 40px rgba(0,0,0,0.5);82 }83 .kbd-toolbar {84 height:120px; display:flex; align-items:center; gap:60px; padding:0 40px; color:#eae0d0;85 }86 .kbd-tool {87 width:84px; height:84px; border-radius:24px; background:#2a2525;88 display:flex; align-items:center; justify-content:center;89 }90 .keys { padding:20px 34px; display:flex; flex-direction:column; gap:26px; }91 .row { display:flex; justify-content:center; gap:18px; }92 .key {93 width:88px; height:118px; border-radius:20px; background:#2a2525; color:#e8ddcf;94 display:flex; align-items:center; justify-content:center; font-size:52px; font-weight:600;95 box-shadow: inset 0 -6px 0 rgba(0,0,0,0.35);96 }97 .key.wide { width:160px; }98 .space { width:540px; }99 .shift, .backspace, .enter { background:#2a2525; }100 .enter { width:120px; height:120px; border-radius:60px; background:#e9c878; color:#2b2424; }101 .special {102 width:160px; height:120px; border-radius:60px; background:#cbb792; color:#2b2424; font-weight:700;103 }104 105 /* Small down-caret above the home indicator */106 .kbd-caret {107 position:absolute; bottom:66px; left:50%; transform:translateX(-50%);108 width:28px; height:18px; opacity:0.7;109 }110 111 /* Home indicator */112 .home-indicator {113 position:absolute; bottom:18px; left:50%; transform:translateX(-50%);114 width:300px; height:12px; border-radius:12px; background:#ffffff; opacity:0.85;115 }116</style>117</head>118<body>119<div id="render-target">120 121 <!-- Status Bar -->122 <div class="status-bar">123 <div class="status-left">124 <div style="font-size:48px;">12:56</div>125 <div class="status-icon">126 <svg viewBox="0 0 24 24" fill="#fff"><path d="M12 2a8 8 0 0 0 0 20 9 9 0 0 1 0-20z"/></svg>127 </div>128 <div class="status-icon">129 <svg viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10" opacity="0.6"/></svg>130 </div>131 <div class="status-icon">132 <svg viewBox="0 0 24 24" fill="#fff"><rect x="5" y="5" width="14" height="14" rx="3"/></svg>133 </div>134 <div class="status-icon">135 <svg viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="2"/><circle cx="6" cy="12" r="2"/><circle cx="18" cy="12" r="2"/></svg>136 </div>137 </div>138 <div class="status-right">139 <div class="wifi">140 <svg viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none">141 <path d="M3 8c4-3 14-3 18 0"/>142 <path d="M6 12c3-2 9-2 12 0"/>143 <path d="M9 16c2-1 4-1 6 0"/>144 <circle cx="12" cy="19" r="1.5" fill="#fff"/>145 </svg>146 </div>147 <div class="battery">148 <svg viewBox="0 0 36 24" fill="none" stroke="#fff" stroke-width="2">149 <rect x="2" y="4" width="28" height="16" rx="3" />150 <rect x="31" y="9" width="3" height="6" rx="1" fill="#fff"/>151 <rect x="5" y="7" width="22" height="10" fill="#fff"/>152 </svg>153 </div>154 </div>155 </div>156 157 <!-- App Header -->158 <div class="app-header">159 <div class="chevron">160 <svg viewBox="0 0 24 24" fill="#cfcfcf"><path d="M6 9l6 6 6-6"/></svg>161 </div>162 <div class="title-wrap">163 <div class="ti-badge">TI</div>164 <div class="app-title">Explorer</div>165 <div class="pin-icon">166 <svg viewBox="0 0 24 24" fill="#cfcfcf">167 <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>168 </svg>169 </div>170 </div>171 </div>172 173 <!-- Map Image Placeholder -->174 <div class="map-area">[IMG: World Map - Central Asia]</div>175 176 <!-- Map Markers -->177 <div class="marker" style="top:1320px; left:420px;">178 <div class="img">[IMG: Badge]</div>179 </div>180 <div class="marker" style="top:1480px; left:760px;">181 <div class="img">[IMG: Radio Logo]</div>182 </div>183 184 <!-- Search Bar -->185 <div class="search-bar">186 <div class="search-icon">187 <svg viewBox="0 0 24 24" stroke="#8aa0b2" stroke-width="2" fill="none">188 <circle cx="11" cy="11" r="7"/>189 <path d="M21 21l-4.3-4.3"/>190 </svg>191 </div>192 <div class="search-text">Search</div>193 <div class="close-icon">194 <svg viewBox="0 0 24 24" stroke="#6b6b6b" stroke-width="2" fill="none">195 <path d="M6 6l12 12M18 6l-12 12"/>196 </svg>197 </div>198 </div>199 200 <!-- Keyboard -->201 <div class="keyboard">202 <div class="kbd-toolbar">203 <div class="kbd-tool"><svg viewBox="0 0 24 24" fill="#d9cfc1"><rect x="4" y="4" width="6" height="6"/><rect x="14" y="4" width="6" height="6"/><rect x="4" y="14" width="6" height="6"/><rect x="14" y="14" width="6" height="6"/></svg></div>204 <div class="kbd-tool"><svg viewBox="0 0 24 24" fill="#d9cfc1"><circle cx="12" cy="9" r="4"/><path d="M4 20c2.5-4 12.5-4 15 0" fill="none" stroke="#d9cfc1" stroke-width="2"/></svg></div>205 <div class="kbd-tool"><svg viewBox="0 0 24 24" fill="#d9cfc1"><text x="4" y="16" font-size="10" font-weight="700">GIF</text></svg></div>206 <div class="kbd-tool"><svg viewBox="0 0 24 24" fill="#d9cfc1"><circle cx="12" cy="12" r="10"/><path d="M12 6v12M6 12h12" stroke="#1b1717" stroke-width="2"/></svg></div>207 <div class="kbd-tool"><svg viewBox="0 0 24 24" fill="none" stroke="#d9cfc1" stroke-width="2"><path d="M4 8h9M4 12h12M4 16h14"/></svg></div>208 <div class="kbd-tool"><svg viewBox="0 0 24 24" fill="#d9cfc1"><circle cx="12" cy="12" r="8"/><path d="M12 4v16M4 12h16" stroke="#1b1717" stroke-width="2"/></svg></div>209 <div class="kbd-tool"><svg viewBox="0 0 24 24" fill="#d9cfc1"><path d="M12 4a4 4 0 0 0-4 4v5a4 4 0 0 0 8 0V8a4 4 0 0 0-4-4z"/><rect x="10" y="18" width="4" height="3"/></svg></div>210 </div>211 212 <div class="keys">213 <div class="row">214 <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><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>215 </div>216 <div class="row" style="padding-left:50px;">217 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>218 </div>219 <div class="row" style="padding-left:120px;">220 <div class="key shift"><svg viewBox="0 0 24 24" width="40" height="40" fill="#e8ddcf"><path d="M12 5l7 8H5l7-8z"/><rect x="10" y="13" width="4" height="6"/></svg></div>221 <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>222 <div class="key backspace"><svg viewBox="0 0 24 24" width="44" height="44" stroke="#e8ddcf" stroke-width="2" fill="none"><path d="M6 6l-4 6 4 6h14a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6z"/><path d="M12 9l4 4-4 4"/></svg></div>223 </div>224 <div class="row">225 <div class="special">?123</div>226 <div class="key" style="width:120px;">,</div>227 <div class="key space">space</div>228 <div class="key" style="width:120px;">.</div>229 <div class="enter">230 <svg viewBox="0 0 24 24" stroke="#2b2424" stroke-width="2" fill="none">231 <circle cx="10" cy="10" r="6" fill="none"/>232 <path d="M16 16l5 5"/>233 </svg>234 </div>235 </div>236 </div>237 238 <div class="kbd-caret">239 <svg viewBox="0 0 24 24" fill="#cfcfcf"><path d="M6 8l6 8 6-8"/></svg>240 </div>241 </div>242 243 <!-- Home Indicator -->244 <div class="home-indicator"></div>245 246</div>247</body>248</html>