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">6<title>UI Screenshot Replica</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#d7dde9; /* main light bluish background */12 color:#1f2937;13 }14 15 /* Top bars */16 .statusbar {17 position:absolute; top:0; left:0; right:0; height:120px;18 background:#3e556f; color:#fff; padding:0 28px; display:flex; align-items:center; justify-content:space-between; font-size:42px;19 }20 .status-left { display:flex; align-items:center; gap:24px; }21 .status-right { display:flex; align-items:center; gap:26px; opacity:0.9; }22 .icon { display:inline-flex; align-items:center; justify-content:center; }23 24 .toolbar {25 position:absolute; top:120px; left:0; right:0; height:160px;26 background:#3e556f; color:#fff; display:flex; align-items:center; padding:0 28px; gap:24px;27 }28 .toolbar .title { font-size:56px; font-weight:500; letter-spacing:0.5px; margin-left:12px; }29 .toolbar .spacer { flex:1; }30 .toolbar .close { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; }31 32 .filters {33 position:absolute; top:280px; left:0; right:0; height:160px;34 background:#3e556f; padding:0 28px; display:flex; align-items:center; gap:22px;35 }36 .chip {37 padding:22px 36px; border-radius:32px; font-size:40px;38 color:#cfe0ef; background:#435a73; border:1px solid rgba(255,255,255,0.15);39 box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);40 }41 .chip.active { color:#ffffff; border:3px solid #e6db7a; font-weight:600; }42 43 /* Content */44 .content {45 position:absolute; top:440px; left:0; right:0; bottom:800px;46 padding:0 28px;47 }48 .ad-banner {49 height:150px; margin:0 0 24px 0; border-radius:12px;50 background:#E0E0E0; border:1px solid #BDBDBD;51 display:flex; align-items:center; justify-content:center; color:#757575; font-size:38px;52 }53 .card {54 background:transparent; border-top:1px solid rgba(0,0,0,0.08);55 padding:34px 8px 26px 8px;56 }57 .card-row { display:flex; justify-content:space-between; align-items:flex-start; }58 .card-title { font-size:54px; color:#1f2937; margin-bottom:18px; }59 .card-meta { font-size:38px; color:#6b7280; line-height:1.4; }60 .card-right { font-size:40px; color:#6b7280; padding-top:10px; }61 62 /* Bottom tabs above keyboard */63 .bottom-tabs {64 position:absolute; left:0; right:0; bottom:800px; height:120px;65 border-top:1px solid rgba(0,0,0,0.12);66 display:flex; align-items:center; justify-content:space-around;67 color:#2f3c4a; font-weight:700; letter-spacing:1px; font-size:40px;68 background:rgba(255,255,255,0.15);69 }70 71 /* Floating action button */72 .fab {73 position:absolute; right:60px; bottom:920px;74 width:160px; height:160px; border-radius:50%;75 background:#3e556f; box-shadow:0 18px 30px rgba(0,0,0,0.3);76 display:flex; align-items:center; justify-content:center;77 }78 79 /* Keyboard (simplified) */80 .keyboard {81 position:absolute; left:0; right:0; bottom:0; height:800px;82 background:#1e1e1f; color:#fff; padding:30px 24px;83 box-sizing:border-box;84 }85 .kb-suggestions { display:flex; gap:28px; margin-bottom:22px; }86 .suggest {87 background:#2a2a2b; padding:16px 24px; border-radius:18px; font-size:40px;88 }89 .kb-row { display:flex; gap:14px; margin-bottom:18px; }90 .key {91 flex:1; height:100px; background:#2b2b2c; border-radius:18px;92 display:flex; align-items:center; justify-content:center; font-size:44px;93 }94 .key.wide { flex:1.8; }95 .key.extra-wide { flex:4.5; }96 .kb-bottom { display:flex; gap:14px; align-items:center; }97 .round-btn {98 width:120px; height:120px; border-radius:60px; background:#2b2b2c;99 display:flex; align-items:center; justify-content:center; font-size:42px;100 }101</style>102</head>103<body>104<div id="render-target">105 106 <!-- Status bar -->107 <div class="statusbar">108 <div class="status-left">109 <div>3:54</div>110 <!-- simple status icons -->111 <svg class="icon" width="42" height="42" viewBox="0 0 24 24" fill="none">112 <path d="M2 12h4l3 5 4-8 3 3h6" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>113 </svg>114 <svg class="icon" width="42" height="42" viewBox="0 0 24 24" fill="none">115 <path d="M3 10h18v4H3z" fill="#ffffff"/>116 </svg>117 <svg class="icon" width="42" height="42" viewBox="0 0 24 24" fill="none">118 <rect x="2" y="6" width="20" height="12" rx="2" stroke="#ffffff" stroke-width="2"/>119 <rect x="3" y="7" width="12" height="10" fill="#ffffff"/>120 </svg>121 <div style="width:8px; height:8px; background:#fff; border-radius:50%;"></div>122 </div>123 <div class="status-right">124 <svg class="icon" width="40" height="40" viewBox="0 0 24 24" fill="none">125 <path d="M4 10c3-3 13-3 16 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>126 <path d="M7 13c2-2 8-2 10 0" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>127 <circle cx="12" cy="16" r="1.5" fill="#ffffff"/>128 </svg>129 <svg class="icon" width="40" height="40" viewBox="0 0 24 24" fill="none">130 <path d="M4 7h14a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4V7z" stroke="#ffffff" stroke-width="2"/>131 <rect x="5" y="8" width="10" height="8" fill="#ffffff"/>132 </svg>133 </div>134 </div>135 136 <!-- Toolbar -->137 <div class="toolbar">138 <!-- back arrow -->139 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">140 <path d="M15 6l-6 6 6 6" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>141 </svg>142 <div class="title">nbc</div>143 <div class="spacer"></div>144 <!-- close (X) -->145 <div class="close">146 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">147 <path d="M6 6l12 12M18 6l-12 12" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>148 </svg>149 </div>150 </div>151 152 <!-- Filter chips -->153 <div class="filters">154 <div class="chip active">All</div>155 <div class="chip">Default</div>156 <div class="chip">Critical</div>157 <div class="chip">Important</div>158 <div class="chip">Favorites</div>159 </div>160 161 <!-- Main content -->162 <div class="content">163 <div class="ad-banner">[IMG: Ad Banner]</div>164 165 <div class="card">166 <div class="card-row">167 <div>168 <div class="card-title">Nbc News</div>169 <div class="card-meta">19/06/2023 8:00 am</div>170 <div class="card-meta">One Time</div>171 </div>172 <div class="card-right">in 7 days</div>173 </div>174 </div>175 </div>176 177 <!-- Bottom tabs -->178 <div class="bottom-tabs">179 <div style="text-decoration:underline;">ACTIVE</div>180 <div>COMPLETED</div>181 </div>182 183 <!-- Floating action button -->184 <div class="fab">185 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">186 <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>187 </svg>188 </div>189 190 <!-- Keyboard (simplified representation) -->191 <div class="keyboard">192 <div class="kb-suggestions">193 <div class="round-btn" style="background:#3b2e2e; color:#f7c9c9;">›</div>194 <div class="suggest">nbc</div>195 <div class="suggest">NBC</div>196 <div class="suggest">BBC</div>197 <div class="round-btn" style="margin-left:auto; background:#3b2e2e; color:#f7c9c9;">198 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">199 <circle cx="11" cy="11" r="6" stroke="#fce1e1" stroke-width="2"/>200 <path d="M20 20l-4-4" stroke="#fce1e1" stroke-width="2" stroke-linecap="round"/>201 </svg>202 </div>203 </div>204 205 <!-- rows of keys -->206 <div class="kb-row">207 <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>208 </div>209 <div class="kb-row">210 <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>211 </div>212 <div class="kb-row">213 <div class="key wide">⇧</div>214 <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>215 <div class="key wide">216 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">217 <path d="M6 6l12 12M18 6l-12 12" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>218 </svg>219 </div>220 </div>221 <div class="kb-bottom">222 <div class="round-btn" style="background:#3b2e2e; color:#f7c9c9;">?123</div>223 <div class="round-btn" style="background:#2b2b2c;">,</div>224 <div class="round-btn" style="background:#2b2b2c;">☺</div>225 <div class="key extra-wide"></div>226 <div class="round-btn" style="background:#2b2b2c;">.</div>227 <div class="round-btn" style="background:#3b2e2e; color:#f7c9c9;">228 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">229 <circle cx="11" cy="11" r="6" stroke="#fce1e1" stroke-width="2"/>230 <path d="M20 20l-4-4" stroke="#fce1e1" stroke-width="2" stroke-linecap="round"/>231 </svg>232 </div>233 </div>234 </div>235 236</div>237</body>238</html>