GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Prepare Screen</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: Arial, Helvetica, sans-serif;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #ffffff;19 }20 /* Top red header */21 .header {22 position: absolute;23 top: 0;24 left: 0;25 width: 1080px;26 height: 430px;27 background: #e60000;28 color: #fff;29 }30 .status-bar {31 height: 90px;32 padding: 0 40px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 color: #ffffff;37 font-size: 40px;38 font-weight: 600;39 }40 .status-right {41 display: flex;42 align-items: center;43 gap: 24px;44 }45 .header-title {46 margin-left: 40px;47 margin-top: 140px;48 font-size: 86px;49 font-weight: 700;50 letter-spacing: 0.5px;51 }52 53 /* List */54 .list {55 position: absolute;56 top: 430px;57 left: 0;58 right: 0;59 bottom: 220px; /* leave space for bottom nav */60 overflow: hidden;61 background: #efefef;62 }63 .list-item {64 height: 170px;65 border-bottom: 2px solid #c9c9c9;66 display: flex;67 align-items: center;68 background: #eeeeee;69 }70 .icon-box {71 width: 120px;72 height: 120px;73 background: #ffffff;74 margin-left: 40px;75 margin-right: 30px;76 display: flex;77 align-items: center;78 justify-content: center;79 }80 .item-text {81 font-size: 54px;82 font-weight: 700;83 color: #ffffff;84 opacity: 0.92;85 }86 87 /* Bottom navigation */88 .bottom-nav {89 position: absolute;90 left: 0;91 right: 0;92 bottom: 100px;93 height: 180px;94 background: #ffffff;95 border-top: 2px solid #cfcfcf;96 display: flex;97 }98 .nav-item {99 width: 20%;100 display: flex;101 flex-direction: column;102 align-items: center;103 justify-content: center;104 color: #9e9e9e;105 gap: 18px;106 }107 .nav-item .label {108 font-size: 34px;109 }110 .nav-item.active {111 color: #e60000;112 }113 114 /* Home indicator area */115 .home-area {116 position: absolute;117 left: 0;118 right: 0;119 bottom: 0;120 height: 100px;121 background: #000000;122 display: flex;123 align-items: center;124 justify-content: center;125 }126 .home-pill {127 width: 280px;128 height: 14px;129 background: #d6d6d6;130 border-radius: 14px;131 opacity: 0.8;132 }133 134 /* Simple SVG sizing helpers */135 svg {136 display: block;137 }138</style>139</head>140<body>141<div id="render-target">142 143 <!-- Top Red Header -->144 <div class="header">145 <div class="status-bar">146 <div>8:12</div>147 <div class="status-right">148 <!-- Wi-Fi icon -->149 <svg width="44" height="44" viewBox="0 0 44 44">150 <path d="M4 16c8-6 28-6 36 0" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round"/>151 <path d="M10 24c6-4 18-4 24 0" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round"/>152 <circle cx="22" cy="30" r="3" fill="#ffffff"/>153 </svg>154 <!-- Battery icon -->155 <svg width="44" height="44" viewBox="0 0 44 44">156 <rect x="6" y="12" width="28" height="20" rx="3" stroke="#ffffff" stroke-width="3" fill="none"/>157 <rect x="34" y="18" width="4" height="8" fill="#ffffff"/>158 <rect x="10" y="16" width="20" height="12" fill="#ffffff"/>159 </svg>160 </div>161 </div>162 <div class="header-title">Prepare</div>163 </div>164 165 <!-- List -->166 <div class="list">167 <!-- Item 1 -->168 <div class="list-item">169 <div class="icon-box">170 <svg width="100" height="100" viewBox="0 0 100 100">171 <circle cx="50" cy="50" r="42" stroke="#e60000" stroke-width="8" fill="none"/>172 <line x1="30" y1="50" x2="70" y2="50" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>173 <line x1="50" y1="30" x2="50" y2="70" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>174 </svg>175 </div>176 <div class="item-text">Landslide</div>177 </div>178 <!-- Item 2 -->179 <div class="list-item">180 <div class="icon-box">181 <svg width="100" height="100" viewBox="0 0 100 100">182 <circle cx="50" cy="50" r="42" stroke="#e60000" stroke-width="8" fill="none"/>183 <line x1="30" y1="50" x2="70" y2="50" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>184 <line x1="50" y1="30" x2="50" y2="70" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>185 </svg>186 </div>187 <div class="item-text">Power outage</div>188 </div>189 <!-- Item 3 -->190 <div class="list-item">191 <div class="icon-box">192 <svg width="100" height="100" viewBox="0 0 100 100">193 <circle cx="50" cy="50" r="42" stroke="#e60000" stroke-width="8" fill="none"/>194 <line x1="30" y1="50" x2="70" y2="50" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>195 <line x1="50" y1="30" x2="50" y2="70" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>196 </svg>197 </div>198 <div class="item-text">Pet preparedness</div>199 </div>200 <!-- Item 4 -->201 <div class="list-item">202 <div class="icon-box">203 <svg width="100" height="100" viewBox="0 0 100 100">204 <circle cx="50" cy="50" r="42" stroke="#e60000" stroke-width="8" fill="none"/>205 <line x1="30" y1="50" x2="70" y2="50" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>206 <line x1="50" y1="30" x2="50" y2="70" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>207 </svg>208 </div>209 <div class="item-text">Psychological First Aid</div>210 </div>211 <!-- Item 5 -->212 <div class="list-item">213 <div class="icon-box">214 <svg width="100" height="100" viewBox="0 0 100 100">215 <circle cx="50" cy="50" r="42" stroke="#e60000" stroke-width="8" fill="none"/>216 <line x1="30" y1="50" x2="70" y2="50" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>217 <line x1="50" y1="30" x2="50" y2="70" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>218 </svg>219 </div>220 <div class="item-text">Tornado</div>221 </div>222 <!-- Item 6 -->223 <div class="list-item">224 <div class="icon-box">225 <svg width="100" height="100" viewBox="0 0 100 100">226 <circle cx="50" cy="50" r="42" stroke="#e60000" stroke-width="8" fill="none"/>227 <line x1="30" y1="50" x2="70" y2="50" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>228 <line x1="50" y1="30" x2="50" y2="70" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>229 </svg>230 </div>231 <div class="item-text">Tsunami</div>232 </div>233 <!-- Item 7 -->234 <div class="list-item">235 <div class="icon-box">236 <svg width="100" height="100" viewBox="0 0 100 100">237 <circle cx="50" cy="50" r="42" stroke="#e60000" stroke-width="8" fill="none"/>238 <line x1="30" y1="50" x2="70" y2="50" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>239 <line x1="50" y1="30" x2="50" y2="70" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>240 </svg>241 </div>242 <div class="item-text">Volcano</div>243 </div>244 <!-- Item 8 -->245 <div class="list-item">246 <div class="icon-box">247 <svg width="100" height="100" viewBox="0 0 100 100">248 <circle cx="50" cy="50" r="42" stroke="#e60000" stroke-width="8" fill="none"/>249 <line x1="30" y1="50" x2="70" y2="50" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>250 <line x1="50" y1="30" x2="50" y2="70" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>251 </svg>252 </div>253 <div class="item-text">Chemical emergencies</div>254 </div>255 <!-- Item 9 -->256 <div class="list-item">257 <div class="icon-box">258 <svg width="100" height="100" viewBox="0 0 100 100">259 <circle cx="50" cy="50" r="42" stroke="#e60000" stroke-width="8" fill="none"/>260 <line x1="30" y1="50" x2="70" y2="50" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>261 <line x1="50" y1="30" x2="50" y2="70" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>262 </svg>263 </div>264 <div class="item-text">Water safety</div>265 </div>266 <!-- Item 10 -->267 <div class="list-item">268 <div class="icon-box">269 <svg width="100" height="100" viewBox="0 0 100 100">270 <circle cx="50" cy="50" r="42" stroke="#e60000" stroke-width="8" fill="none"/>271 <line x1="30" y1="50" x2="70" y2="50" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>272 <line x1="50" y1="30" x2="50" y2="70" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>273 </svg>274 </div>275 <div class="item-text">Drought</div>276 </div>277 <!-- Item 11 -->278 <div class="list-item">279 <div class="icon-box">280 <svg width="100" height="100" viewBox="0 0 100 100">281 <circle cx="50" cy="50" r="42" stroke="#e60000" stroke-width="8" fill="none"/>282 <line x1="30" y1="50" x2="70" y2="50" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>283 <line x1="50" y1="30" x2="50" y2="70" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>284 </svg>285 </div>286 <div class="item-text">Wildfire</div>287 </div>288 <!-- Item 12 -->289 <div class="list-item">290 <div class="icon-box">291 <svg width="100" height="100" viewBox="0 0 100 100">292 <circle cx="50" cy="50" r="42" stroke="#e60000" stroke-width="8" fill="none"/>293 <line x1="30" y1="50" x2="70" y2="50" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>294 <line x1="50" y1="30" x2="50" y2="70" stroke="#e60000" stroke-width="10" stroke-linecap="round"/>295 </svg>296 </div>297 <div class="item-text">Earthquake</div>298 </div>299 </div>300 301 <!-- Bottom Navigation -->302 <div class="bottom-nav">303 <div class="nav-item">304 <svg width="84" height="84" viewBox="0 0 100 100">305 <rect x="8" y="8" width="84" height="84" rx="14" stroke="#9e9e9e" stroke-width="8" fill="none"/>306 <line x1="50" y1="26" x2="50" y2="74" stroke="#9e9e9e" stroke-width="10" stroke-linecap="round"/>307 <line x1="26" y1="50" x2="74" y2="50" stroke="#9e9e9e" stroke-width="10" stroke-linecap="round"/>308 </svg>309 <div class="label">Lear</div>310 </div>311 <div class="nav-item active">312 <svg width="84" height="84" viewBox="0 0 100 100">313 <path d="M20 55 L42 75 L80 25" stroke="#e60000" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"/>314 </svg>315 <div class="label">Prepare</div>316 </div>317 <div class="nav-item">318 <svg width="84" height="84" viewBox="0 0 100 100">319 <polygon points="50,12 92,88 8,88" stroke="#9e9e9e" stroke-width="8" fill="none"/>320 <line x1="50" y1="40" x2="50" y2="64" stroke="#9e9e9e" stroke-width="8" stroke-linecap="round"/>321 <circle cx="50" cy="76" r="5" fill="#9e9e9e"/>322 </svg>323 <div class="label">Emergency</div>324 </div>325 <div class="nav-item">326 <svg width="84" height="84" viewBox="0 0 100 100">327 <circle cx="50" cy="50" r="40" stroke="#9e9e9e" stroke-width="8" fill="none"/>328 <text x="50" y="64" text-anchor="middle" font-size="60" fill="#9e9e9e" font-family="Arial" font-weight="700">?</text>329 </svg>330 <div class="label">About Us</div>331 </div>332 <div class="nav-item">333 <svg width="84" height="84" viewBox="0 0 100 100">334 <circle cx="28" cy="50" r="8" fill="#9e9e9e"/>335 <circle cx="50" cy="50" r="8" fill="#9e9e9e"/>336 <circle cx="72" cy="50" r="8" fill="#9e9e9e"/>337 </svg>338 <div class="label">More</div>339 </div>340 </div>341 342 <!-- Bottom home indicator area -->343 <div class="home-area">344 <div class="home-pill"></div>345 </div>346 347</div>348</body>349</html>