GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Weather UI Mock</title>6<style>7 body{margin:0;padding:0;background:transparent;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#ffffff;}8 #render-target{9 position:relative; overflow:hidden;10 width:1080px; height:2400px;11 background: linear-gradient(180deg,#87a9cf 0%, #a9c4e0 30%, #b9d3ea 55%, #cfe3f1 80%, #e6f0f7 100%);12 }13 /* Subtle vignette for depth */14 #render-target:after{15 content:""; position:absolute; inset:0;16 box-shadow: inset 0 0 240px rgba(0,0,0,0.15);17 pointer-events:none;18 }19 .status-bar{20 position:absolute; top:0; left:0; right:0; height:84px;21 padding:20px 28px 0 28px; font-size:36px; color:#eaf3ff; opacity:0.95;22 display:flex; align-items:center; justify-content:space-between;23 }24 .status-right{display:flex; gap:20px; align-items:center; font-size:32px;}25 .header{26 position:absolute; top:92px; left:28px; right:28px;27 display:flex; align-items:center; justify-content:space-between;28 color:#eef6ff;29 }30 .loc-left{display:flex; align-items:center; gap:16px;}31 .title{font-size:60px; font-weight:700; letter-spacing:0.5px;}32 .top-icons{display:flex; gap:26px; align-items:center;}33 .icon{width:48px; height:48px; opacity:0.95;}34 /* Forecast strip */35 .forecast{36 position:absolute; top:200px; left:20px; right:20px;37 display:flex; gap:16px; color:#f5fbff;38 }39 .day-card{40 flex:1; background:rgba(255,255,255,0.15);41 border-radius:22px; padding:22px 20px; backdrop-filter: blur(2px);42 min-height:150px;43 }44 .day-label{font-size:38px; opacity:0.95;}45 .day-temp{font-size:54px; font-weight:700; margin-top:10px;}46 .mini-row{47 position:absolute; top:388px; left:28px; right:28px;48 display:flex; gap:24px; color:#eef6ff; align-items:flex-end;49 }50 .mini{51 flex:1; text-align:center;52 }53 .mini .t{font-size:46px; font-weight:700;}54 .mini .tm{font-size:32px; opacity:0.9; margin-top:6px;}55 /* Main card */56 .main-card{57 position:absolute; top:502px; left:20px; right:20px;58 background:rgba(255,255,255,0.22); color:#f7fbff;59 border-radius:26px; padding:32px; display:flex; gap:24px;60 align-items:flex-start; backdrop-filter: blur(3px);61 }62 .main-left{flex:1;}63 .time{font-size:64px; opacity:0.95;}64 .temp{font-size:140px; font-weight:800; line-height:1; margin-top:8px;}65 .meta{margin-top:18px; font-size:44px;}66 .press{margin-top:6px; font-size:44px; display:flex; align-items:center; gap:16px;}67 .main-right{width:420px; text-align:right;}68 .wind{font-size:46px;}69 .feels{margin-top:24px; font-size:46px;}70 .humid{margin-top:10px; font-size:46px;}71 .quick-actions{72 position:absolute; top:776px; left:620px;73 display:flex; gap:24px;74 }75 .qa{76 width:120px; height:120px; background:rgba(255,255,255,0.25); border-radius:20px;77 display:flex; align-items:center; justify-content:center;78 }79 /* Decorative clouds */80 .cloud{position:absolute;background:#ffffff;border-radius:50px;filter:blur(1px);opacity:0.65;}81 .c1{width:520px;height:180px;top:930px;left:120px;}82 .c2{width:420px;height:160px;top:1040px;right:120px;}83 .c3{width:560px;height:190px;top:1200px;left:60px;}84 /* Landscape placeholder */85 .land-wrap{86 position:absolute; left:0; right:0; bottom:240px; height:640px;87 display:flex; align-items:center; justify-content:center;88 }89 .img-ph{90 width:1000px; height:560px; background:#E0E0E0; border:1px solid #BDBDBD;91 color:#555; display:flex; align-items:center; justify-content:center;92 font-size:40px; border-radius:12px;93 }94 /* Caption bar */95 .caption{96 position:absolute; left:0; right:0; bottom:880px; height:64px;97 background:rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:space-between;98 padding:0 24px; font-size:44px;99 }100 /* Bottom ad */101 .ad-bar{102 position:absolute; left:0; right:0; bottom:0; height:220px;103 background:#ffffff; color:#222; display:flex; align-items:center; gap:24px;104 padding:22px 24px; border-top-left-radius:18px; border-top-right-radius:18px;105 box-shadow:0 -8px 24px rgba(0,0,0,0.16);106 }107 .ad-thumb{width:240px;height:160px;background:#E0E0E0;border:1px solid #BDBDBD;display:flex;align-items:center;justify-content:center;color:#666;font-size:30px;border-radius:10px;}108 .ad-title{font-size:54px;font-weight:700;}109 .ad-col{display:flex;flex-direction:column;gap:10px;}110 .install{111 margin-left:auto; background:#16a667; color:#fff; font-size:46px; padding:22px 36px; border-radius:60px;112 }113 .kebab{display:inline-block;width:8px;height:8px;border-radius:50%;background:#eef6ff;box-shadow:0 14px 0 #eef6ff,0 -14px 0 #eef6ff;}114 .dot{115 width:14px;height:14px;border-radius:50%;background:#fff;display:inline-block;opacity:0.6;margin-left:10px;116 }117</style>118</head>119<body>120<div id="render-target">121 122 <!-- Status bar -->123 <div class="status-bar">124 <div>8:02</div>125 <div class="status-right">126 <span>0°</span>127 <span>31°</span>128 <svg class="icon" viewBox="0 0 24 24" fill="#eaf3ff"><path d="M12 2a9 9 0 1 0 9 9H19a7 7 0 1 1-7-7V2z"/></svg>129 <svg class="icon" viewBox="0 0 24 24" fill="#eaf3ff"><path d="M20 6H4v12h16V6zm2-2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"/></svg>130 <span>93%</span>131 </div>132 </div>133 134 <!-- Header with location -->135 <div class="header">136 <div class="loc-left">137 <svg class="icon" viewBox="0 0 24 24" fill="#eef6ff"><path d="M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3 3-7z"/></svg>138 <div class="title">Dera Mandi</div>139 </div>140 <div class="top-icons">141 <svg class="icon" viewBox="0 0 24 24" fill="#eef6ff"><path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm11 19-5.2-5.2-1.6 1.6L19.4 22 21 21z"/></svg>142 <span class="kebab"></span>143 </div>144 </div>145 146 <!-- Day forecast (top strip) -->147 <div class="forecast">148 <div class="day-card">149 <div class="day-label">Th 10</div>150 <div style="margin-top:4px; font-size:30px; opacity:0.9;">Today</div>151 <div class="day-temp" style="margin-top:12px;">—</div>152 </div>153 <div class="day-card">154 <div class="day-label">Fr 11</div>155 <div style="margin-top:4px;">156 <svg width="50" height="50" viewBox="0 0 24 24" fill="#fff"><path d="M6 15h9a4 4 0 1 0-1.2-7.8A5 5 0 0 0 5 10a3 3 0 0 0 1 5z"/></svg>157 </div>158 <div class="day-temp">35°</div>159 </div>160 <div class="day-card">161 <div class="day-label">Sa 12</div>162 <div>163 <svg width="50" height="50" viewBox="0 0 24 24" fill="#ffd562"><path d="M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0-5h2v3h-2V2zm0 20h2v3h-2v-3zM2 12h3v2H2v-2zm17 0h3v2h-3v-2zM4.2 4.2l2.1 2.1-1.4 1.4-2.1-2.1 1.4-1.4zm12.9 12.9 2.1 2.1-1.4 1.4-2.1-2.1 1.4-1.4zM4.2 19.8l-1.4-1.4 2.1-2.1 1.4 1.4-2.1 2.1zM19.8 4.2l1.4 1.4-2.1 2.1-1.4-1.4 2.1-2.1z"/></svg>164 </div>165 <div class="day-temp">35°</div>166 </div>167 <div class="day-card">168 <div class="day-label">Su 13</div>169 <div>170 <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff"><path d="M6 15h9a4 4 0 1 0-1.2-7.8A5 5 0 0 0 5 10a3 3 0 0 0 1 5z"/></svg>171 </div>172 <div class="day-temp">35°</div>173 </div>174 <div class="day-card">175 <div class="day-label">Mo</div>176 <div>177 <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff"><circle cx="8" cy="14" r="4"/><circle cx="16" cy="10" r="4"/></svg>178 </div>179 <div class="day-temp">—</div>180 </div>181 </div>182 183 <!-- Hourly small row -->184 <div class="mini-row">185 <div class="mini">186 <div class="t">33°</div>187 <div class="tm">10 am</div>188 </div>189 <div class="mini">190 <div class="t">35°</div>191 <div class="tm">12:00</div>192 </div>193 <div class="mini">194 <div class="t">35°</div>195 <div class="tm">3:00</div>196 </div>197 <div class="mini">198 <div class="t">31°</div>199 <div class="tm">6:00</div>200 </div>201 <div class="mini">202 <div class="t">30°</div>203 <div class="tm">9:00</div>204 </div>205 <div class="mini">206 <div class="t">30°</div>207 <div class="tm">12 am</div>208 </div>209 </div>210 211 <!-- Main weather card -->212 <div class="main-card">213 <div class="main-left">214 <div class="time">8:02 am</div>215 <div class="temp">28°</div>216 <div class="meta">Mist</div>217 <div class="press">218 Pressure 29.68"219 <span class="dot"></span><span class="dot" style="opacity:0.3;"></span>220 </div>221 </div>222 <div class="main-right">223 <div class="wind">224 <span style="transform:rotate(45deg);display:inline-block;">➚</span>225 6 W mph226 </div>227 <div class="feels">Feels like 32°</div>228 <div class="humid">Humidity 79%</div>229 </div>230 </div>231 232 <!-- Quick action icons -->233 <div class="quick-actions">234 <div class="qa">235 <svg width="70" height="70" viewBox="0 0 24 24" fill="#124b79"><path d="M4 18l5-6 4 5 3-4 4 5H4zM4 6h16v2H4z"/></svg>236 </div>237 <div class="qa">238 <svg width="70" height="70" viewBox="0 0 24 24" fill="#124b79"><path d="M6 16h9a4 4 0 1 0-1.2-7.8A5 5 0 0 0 5 11a3 3 0 0 0 1 5z"/></svg>239 </div>240 <div class="qa">241 <svg width="70" height="70" viewBox="0 0 24 24" fill="#124b79"><path d="M3 6h18v12H3V6zm2 2v8h14V8H5zm3 1h4v3H8V9z"/></svg>242 </div>243 </div>244 245 <!-- Decorative clouds -->246 <div class="cloud c1"></div>247 <div class="cloud c2"></div>248 <div class="cloud c3"></div>249 250 <!-- Caption strip above landscape -->251 <div class="caption">252 <div>Instagram/Yo</div>253 <div>Forecast from MET Norway</div>254 </div>255 256 <!-- Landscape placeholder -->257 <div class="land-wrap">258 <div class="img-ph">[IMG: Pastoral farm landscape illustration]</div>259 </div>260 261 <!-- Bottom advertisement -->262 <div class="ad-bar">263 <div class="ad-thumb">[IMG: App Promo]</div>264 <div class="ad-col">265 <div class="ad-title">Trip.com</div>266 <div style="font-size:36px;color:#6a6a6a;">4.5 FREE</div>267 </div>268 <div class="install">INSTALL</div>269 </div>270 271</div>272</body>273</html>