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>Search - Music App</title>7<style>8 :root{9 --bg:#121212;10 --card:#1E1E1E;11 --muted:#B3B3B3;12 --chip:#2A2A2A;13 --chip-active:#1DB954;14 --key:#2C2C2E;15 --key-dark:#1F1F21;16 --border:#3A3A3A;17 }18 body{ margin:0; padding:0; background:transparent; }19 #render-target{20 width:1080px; height:2400px;21 position:relative; overflow:hidden;22 background:var(--bg); color:#fff;23 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;24 }25 /* Status bar */26 .statusbar{27 position:absolute; top:0; left:0; right:0; height:84px;28 display:flex; align-items:center; justify-content:space-between;29 padding:0 32px; color:#fff; font-weight:600; font-size:36px;30 }31 .status-icons{ display:flex; align-items:center; gap:24px; }32 .circle-icon{ width:24px; height:24px; border:2px solid #fff; border-radius:50%; opacity:.9; }33 .battery{ width:44px; height:22px; border:2px solid #fff; border-radius:4px; position:relative; }34 .battery::after{ content:""; position:absolute; right:-6px; top:6px; width:6px; height:10px; background:#fff; border-radius:2px; }35 .battery .level{ position:absolute; left:2px; top:2px; bottom:2px; width:28px; background:#fff; }36 37 /* Search header */38 .search-header{39 position:absolute; top:84px; left:0; right:0; height:120px;40 display:flex; align-items:center; gap:24px; padding:0 24px;41 }42 .back-btn{43 width:90px; height:90px; display:flex; align-items:center; justify-content:center;44 }45 .search-box{46 flex:1; height:90px; background:#2A2A2A; border-radius:18px;47 display:flex; align-items:center; padding:0 24px; gap:18px; color:#fff;48 font-size:36px;49 }50 .search-text{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }51 .close-btn{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; opacity:.9; }52 53 /* Chips */54 .chips{55 position:absolute; top:204px; left:0; right:0; height:100px;56 padding:0 24px; display:flex; align-items:center; gap:18px;57 }58 .chip{59 padding:18px 28px; border-radius:999px; background:var(--chip);60 color:#fff; font-weight:600; font-size:32px; border:1px solid #333;61 }62 .chip.active{ background:var(--chip-active); color:#000; border-color:#0e7c38; }63 64 /* Content */65 .content{66 position:absolute; top:304px; left:0; right:0; bottom:760px; /* leave room for keyboard */67 padding:16px 24px; overflow:hidden;68 }69 .artist-row{70 display:flex; align-items:center; gap:24px; padding:18px 0;71 }72 .avatar{73 width:120px; height:120px; border-radius:60px; background:#E0E0E0; border:1px solid #BDBDBD;74 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;75 }76 .artist-meta{ display:flex; flex-direction:column; gap:6px; }77 .artist-name{ display:flex; align-items:center; gap:10px; font-size:44px; font-weight:700; }78 .badge{ color:#3da1ff; font-size:34px; }79 .artist-type{ color:var(--muted); font-size:30px; }80 81 .section-title{ margin:28px 0 18px; font-size:40px; font-weight:800; }82 .cards{ display:flex; gap:24px; }83 .card{84 width:320px;85 }86 .thumb{87 width:320px; height:320px; background:#E0E0E0; border:1px solid #BDBDBD;88 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;89 }90 .card-title{ margin-top:14px; font-size:30px; font-weight:600; }91 92 .song-row{93 margin-top:28px; display:flex; align-items:center; justify-content:space-between;94 }95 .song-info{ display:flex; align-items:center; gap:24px; }96 .song-meta{ display:flex; flex-direction:column; gap:6px; }97 .song-title{ font-size:38px; font-weight:700; }98 .song-sub{ color:var(--muted); font-size:28px; }99 .kebab{ width:54px; height:54px; display:flex; align-items:center; justify-content:center; }100 101 /* Suggestion bar above keyboard */102 .suggestions{103 position:absolute; left:0; right:0; bottom:760px; height:70px;104 display:flex; align-items:center; padding:0 24px; color:#fff; font-size:30px;105 background:linear-gradient(180deg, rgba(18,18,18,0.4), rgba(18,18,18,0.0));106 }107 .suggest-pill{108 background:#2A2A2A; border:1px solid #333; border-radius:999px;109 padding:12px 22px; margin-right:12px;110 }111 112 /* Keyboard mock */113 .keyboard{114 position:absolute; left:0; right:0; bottom:48px; height:680px;115 background:#111; border-top:1px solid var(--border); padding:18px 18px 10px;116 display:flex; flex-direction:column; gap:16px;117 }118 .keys-row{ display:flex; gap:16px; justify-content:center; }119 .key{120 background:var(--key); color:#eee; font-weight:600; font-size:40px;121 border-radius:14px; height:110px; min-width:88px; display:flex; align-items:center; justify-content:center;122 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);123 }124 .key.wide{ min-width:140px; }125 .key.extra-wide{ min-width:200px; }126 .key.dark{ background:var(--key-dark); }127 .space{ flex:1; min-width:480px; }128 /* Gesture bar */129 .gesture{130 position:absolute; left:40%; right:40%; bottom:14px; height:10px; background:#666; border-radius:6px; opacity:.8;131 }132 133 /* Simple helpers for SVGs */134 .icon{ width:44px; height:44px; fill:#fff; opacity:.9; }135 .icon.small{ width:36px; height:36px; }136</style>137</head>138<body>139<div id="render-target">140 <!-- Status Bar -->141 <div class="statusbar">142 <div>5:30</div>143 <div class="status-icons">144 <div class="circle-icon"></div>145 <svg class="icon small" viewBox="0 0 24 24"><path d="M3 18h18v2H3zM3 4h18v2H3zM3 11h18v2H3z"/></svg>146 <div class="battery"><div class="level"></div></div>147 </div>148 </div>149 150 <!-- Search Header -->151 <div class="search-header">152 <div class="back-btn" aria-label="Back">153 <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 3.5 7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9z"/></svg>154 </div>155 <div class="search-box" role="search">156 <svg class="icon small" viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm11 20-6-6"/></svg>157 <div class="search-text">Martin Garrix</div>158 <div class="close-btn" aria-label="Clear">159 <svg class="icon small" viewBox="0 0 24 24"><path d="M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3z"/></svg>160 </div>161 </div>162 </div>163 164 <!-- Chips -->165 <div class="chips">166 <div class="chip active">Top</div>167 <div class="chip">Songs</div>168 <div class="chip">Artists</div>169 <div class="chip">Playlists</div>170 <div class="chip">Profiles</div>171 </div>172 173 <!-- Content -->174 <div class="content">175 <div class="artist-row">176 <div class="avatar">[IMG: Artist Avatar]</div>177 <div class="artist-meta">178 <div class="artist-name">179 <span>Martin Garrix</span>180 <span class="badge" title="Verified">181 <svg class="icon small" viewBox="0 0 24 24"><path d="M12 2 2 7v10l10 5 10-5V7L12 2zm-1 13-3-3 1.4-1.4L11 12.2l4.6-4.6L17 9l-6 6z"/></svg>182 </span>183 </div>184 <div class="artist-type">Artist</div>185 </div>186 </div>187 188 <div class="section-title">Featuring Martin Garrix</div>189 <div class="cards">190 <div class="card">191 <div class="thumb">[IMG: Dance Hits of 2015 Cover]</div>192 <div class="card-title">Dance Hits of 2015</div>193 </div>194 <div class="card">195 <div class="thumb">[IMG: Martin Garrix Radio Cover]</div>196 <div class="card-title">Martin Garrix Radio</div>197 </div>198 <div class="card">199 <div class="thumb">[IMG: Dance Hits of 2014 Cover]</div>200 <div class="card-title">Dance Hits of 2014</div>201 </div>202 </div>203 204 <div class="song-row">205 <div class="song-info">206 <div class="thumb" style="width:120px;height:120px;">[IMG: Song Cover]</div>207 <div class="song-meta">208 <div class="song-title">Animals</div>209 <div class="song-sub">Song • Martin Garrix</div>210 </div>211 </div>212 <div class="kebab" aria-label="More">213 <svg class="icon small" viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>214 </div>215 </div>216 </div>217 218 <!-- Suggestions -->219 <div class="suggestions">220 <div class="suggest-pill">Garrix</div>221 </div>222 223 <!-- Keyboard -->224 <div class="keyboard" aria-label="On-screen keyboard">225 <div class="keys-row">226 <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>227 </div>228 <div class="keys-row">229 <div class="key" style="margin-left:44px">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>230 </div>231 <div class="keys-row">232 <div class="key wide dark">⇧</div>233 <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>234 <div class="key wide dark">235 <svg class="icon small" viewBox="0 0 24 24"><path d="M3 3h18v2H3zM17 9l-5 5-5-5h10z"/></svg>236 </div>237 </div>238 <div class="keys-row">239 <div class="key wide dark">?123</div>240 <div class="key wide">,</div>241 <div class="key space">space</div>242 <div class="key wide">.</div>243 <div class="key extra-wide" style="background:#9fb7d7; color:#000;">244 <svg class="icon small" viewBox="0 0 24 24"><path d="M21 20H8l5.5-6-5.5-6H21v12zM3 4h2v16H3z"/></svg>245 </div>246 </div>247 </div>248 249 <!-- Gesture bar -->250 <div class="gesture"></div>251</div>252</body>253</html>