GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Origin Screen</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #161616; /* outer device background */12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 90px;17 background: #0f0f10; color: #ffffff;18 display: flex; align-items: center; justify-content: space-between;19 padding: 0 36px; font-size: 36px;20 }21 .status-left, .status-right { display: flex; align-items: center; gap: 22px; }22 .status-right span { opacity: 0.9; }23 .status-icon svg { width: 40px; height: 40px; }24 25 /* Header */26 .header {27 position: absolute; top: 90px; left: 0; width: 100%; height: 170px;28 background: #242326; color: #fff; display: flex; align-items: center;29 padding: 0 32px;30 box-sizing: border-box;31 }32 .back-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 16px; }33 .header-title { font-size: 72px; font-weight: 700; letter-spacing: 1px; }34 35 /* Content area */36 .content {37 position: absolute; top: 260px; left: 0; width: 100%; height: 1440px;38 background: #ffffff; color: #222;39 box-sizing: border-box;40 }41 42 .list {43 width: 100%;44 }45 .list-item {46 display: flex; align-items: center;47 padding: 38px 40px;48 border-bottom: 1px solid #e9e9e9;49 font-size: 46px;50 }51 .clock-icon {52 width: 70px; height: 70px; margin-right: 36px; flex: 0 0 auto;53 }54 .clock-icon svg { width: 70px; height: 70px; }55 56 /* Location row */57 .location-row {58 display: flex; width: 100%; border-top: 1px solid #eee; border-bottom: 1px solid #eee;59 height: 140px;60 }61 .loc-option {62 flex: 1; display: flex; align-items: center; justify-content: center; gap: 22px;63 color: #d81b60; font-size: 44px; font-weight: 600;64 }65 .loc-option svg { width: 56px; height: 56px; }66 .divider { width: 1px; background: #e7e7e7; }67 68 /* Search row */69 .search-row {70 display: flex; align-items: center; padding: 30px 40px; font-size: 44px; color: #888;71 }72 .search-dot {73 width: 30px; height: 30px; background: #d81b60; border-radius: 50%; margin-right: 28px;74 }75 .search-input {76 flex: 1; border: none; border-bottom: 1px solid #efefef; padding: 28px 0; font-size: 48px;77 outline: none; color: #444;78 }79 80 /* Keyboard */81 .keyboard {82 position: absolute; left: 0; bottom: 90px; width: 100%; height: 900px;83 background: #111416; color: #cfd3d7; box-sizing: border-box; padding: 28px 28px 24px;84 }85 .kb-top-icons { display: flex; align-items: center; gap: 42px; padding: 10px 8px 24px; }86 .kb-top-icons .icon {87 width: 64px; height: 64px; border-radius: 14px; background: #23282b; display: flex; align-items: center; justify-content: center;88 }89 .kb-rows { display: flex; flex-direction: column; gap: 22px; margin-top: 10px; }90 .kb-row { display: flex; align-items: center; justify-content: center; gap: 14px; }91 .key {92 height: 120px; min-width: 86px; padding: 0 22px;93 background: #2a2f33; border-radius: 20px; display: flex; align-items: center; justify-content: center;94 font-size: 48px; color: #e7ebef;95 }96 .key.wide { min-width: 140px; }97 .space { flex: 1; height: 120px; background: #2a2f33; border-radius: 20px; }98 .send-btn {99 width: 140px; height: 140px; border-radius: 70px; background: #a8ebc4;100 display: flex; align-items: center; justify-content: center;101 }102 .send-btn svg { width: 60px; height: 60px; }103 .kb-bottom { display: flex; align-items: center; gap: 16px; padding-top: 16px; }104 105 /* Home bar */106 .home-indicator {107 position: absolute; left: 50%; transform: translateX(-50%);108 bottom: 22px; width: 640px; height: 16px; border-radius: 10px; background: #d6d6d6; opacity: 0.8;109 }110</style>111</head>112<body>113<div id="render-target">114 115 <!-- Status Bar -->116 <div class="status-bar">117 <div class="status-left">118 <span>8:51</span>119 <span class="status-icon">120 <!-- Warning icon -->121 <svg viewBox="0 0 24 24">122 <path d="M12 3 L2 21 H22 Z" fill="none" stroke="#ffffff" stroke-width="2"></path>123 <rect x="11" y="9" width="2" height="6" fill="#ffffff"></rect>124 <rect x="11" y="16.5" width="2" height="2" fill="#ffffff"></rect>125 </svg>126 </span>127 </div>128 <div class="status-right">129 <!-- WiFi -->130 <span class="status-icon">131 <svg viewBox="0 0 24 24">132 <path d="M2 9 C8 4,16 4,22 9" stroke="#ffffff" stroke-width="2" fill="none" />133 <path d="M5 12 C10 8,14 8,19 12" stroke="#ffffff" stroke-width="2" fill="none" />134 <path d="M8 15 C12 12,12 12,16 15" stroke="#ffffff" stroke-width="2" fill="none" />135 <circle cx="12" cy="18" r="2" fill="#ffffff"></circle>136 </svg>137 </span>138 <!-- Battery -->139 <span class="status-icon">140 <svg viewBox="0 0 36 24">141 <rect x="2" y="4" width="26" height="16" rx="3" ry="3" fill="none" stroke="#ffffff" stroke-width="2"></rect>142 <rect x="29" y="8" width="5" height="8" rx="2" fill="#ffffff"></rect>143 </svg>144 </span>145 <span>100%</span>146 </div>147 </div>148 149 <!-- Header -->150 <div class="header">151 <div class="back-btn">152 <svg viewBox="0 0 24 24">153 <path d="M15 5 L7 12 L15 19" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>154 </svg>155 </div>156 <div class="header-title">Origin</div>157 </div>158 159 <!-- Content -->160 <div class="content">161 162 <div class="list">163 <div class="list-item">164 <div class="clock-icon">165 <!-- clock -->166 <svg viewBox="0 0 24 24">167 <circle cx="12" cy="12" r="9" fill="none" stroke="#9fa2a6" stroke-width="2"></circle>168 <path d="M12 7 V12 L16 14" stroke="#9fa2a6" stroke-width="2" fill="none" stroke-linecap="round"></path>169 </svg>170 </div>171 <div>Washington, DC, USA</div>172 </div>173 174 <div class="list-item">175 <div class="clock-icon">176 <svg viewBox="0 0 24 24">177 <circle cx="12" cy="12" r="9" fill="none" stroke="#9fa2a6" stroke-width="2"></circle>178 <path d="M12 7 V12 L16 14" stroke="#9fa2a6" stroke-width="2" fill="none" stroke-linecap="round"></path>179 </svg>180 </div>181 <div>Hungary</div>182 </div>183 184 <div class="list-item">185 <div class="clock-icon">186 <svg viewBox="0 0 24 24">187 <circle cx="12" cy="12" r="9" fill="none" stroke="#9fa2a6" stroke-width="2"></circle>188 <path d="M12 7 V12 L16 14" stroke="#9fa2a6" stroke-width="2" fill="none" stroke-linecap="round"></path>189 </svg>190 </div>191 <div>Berlin, Germany</div>192 </div>193 194 <div class="list-item">195 <div class="clock-icon">196 <svg viewBox="0 0 24 24">197 <circle cx="12" cy="12" r="9" fill="none" stroke="#9fa2a6" stroke-width="2"></circle>198 <path d="M12 7 V12 L16 14" stroke="#9fa2a6" stroke-width="2" fill="none" stroke-linecap="round"></path>199 </svg>200 </div>201 <div>Ulm, Germany</div>202 </div>203 204 <div class="list-item">205 <div class="clock-icon">206 <svg viewBox="0 0 24 24">207 <circle cx="12" cy="12" r="9" fill="none" stroke="#9fa2a6" stroke-width="2"></circle>208 <path d="M12 7 V12 L16 14" stroke="#9fa2a6" stroke-width="2" fill="none" stroke-linecap="round"></path>209 </svg>210 </div>211 <div>Dubai, United Arab Emirates</div>212 </div>213 </div>214 215 <!-- Location row -->216 <div class="location-row">217 <div class="loc-option">218 <svg viewBox="0 0 24 24">219 <circle cx="12" cy="12" r="8" fill="none" stroke="#d81b60" stroke-width="2"></circle>220 <path d="M12 4 V2 M12 22 V20 M4 12 H2 M22 12 H20" stroke="#d81b60" stroke-width="2" />221 <circle cx="12" cy="12" r="2" fill="#d81b60"></circle>222 </svg>223 <span>Current Location</span>224 </div>225 <div class="divider"></div>226 <div class="loc-option">227 <svg viewBox="0 0 24 24">228 <path d="M12 3 C8 3,6 6,6 9 C6 14,12 21,12 21 C12 21,18 14,18 9 C18 6,16 3,12 3 Z" fill="none" stroke="#d81b60" stroke-width="2"></path>229 <circle cx="12" cy="9" r="3" fill="#d81b60"></circle>230 </svg>231 <span>Select on map</span>232 </div>233 </div>234 235 <!-- Search row -->236 <div class="search-row">237 <div class="search-dot"></div>238 <input class="search-input" type="text" placeholder="Search">239 </div>240 241 </div>242 243 <!-- Keyboard -->244 <div class="keyboard">245 <div class="kb-top-icons">246 <div class="icon"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="6" height="6" fill="#c5c9cd"/><rect x="15" y="3" width="6" height="6" fill="#c5c9cd"/><rect x="3" y="15" width="6" height="6" fill="#c5c9cd"/><rect x="15" y="15" width="6" height="6" fill="#c5c9cd"/></svg></div>247 <div class="icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="9" r="5" fill="#c5c9cd"/><rect x="7" y="14" width="10" height="7" rx="3" fill="#c5c9cd"/></svg></div>248 <div class="icon"><svg viewBox="0 0 24 24"><text x="3" y="16" font-size="12" fill="#c5c9cd">GIF</text></svg></div>249 <div class="icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#c5c9cd" stroke-width="2" fill="none"/><path d="M12 6 V12 L16 14" stroke="#c5c9cd" stroke-width="2"/></svg></div>250 <div class="icon"><svg viewBox="0 0 24 24"><path d="M5 5 H19 V9 H5 Z M5 11 H19 V19 H5 Z" fill="#c5c9cd"/></svg></div>251 <div class="icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#c5c9cd" stroke-width="2"/><path d="M12 7 V15" stroke="#c5c9cd" stroke-width="2"/><path d="M8 11 H16" stroke="#c5c9cd" stroke-width="2"/></svg></div>252 </div>253 254 <div class="kb-rows">255 <div class="kb-row">256 <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>257 </div>258 <div class="kb-row">259 <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>260 </div>261 <div class="kb-row">262 <div class="key wide">⇧</div>263 <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>264 <div class="key wide">⌫</div>265 </div>266 <div class="kb-row kb-bottom">267 <div class="key wide">?123</div>268 <div class="key">,</div>269 <div class="key">☺</div>270 <div class="space"></div>271 <div class="key">.</div>272 <div class="send-btn">273 <svg viewBox="0 0 24 24">274 <path d="M3 12 L21 5 L14 12 L21 19 Z" fill="#0c5130"></path>275 </svg>276 </div>277 </div>278 </div>279 </div>280 281 <!-- Home Indicator -->282 <div class="home-indicator"></div>283 284</div>285</body>286</html>