GD-ML/AndroidCode

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>Current Conditions</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #1E82FF;15    font-family: "Segoe UI", Roboto, Arial, sans-serif;16    color: #FFFFFF;17  }18  .status-bar {19    height: 120px;20    padding: 0 40px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    font-weight: 600;25    font-size: 44px;26    opacity: 0.95;27  }28  .status-left { display: flex; align-items: center; gap: 20px; }29  .status-right { display: flex; align-items: center; gap: 28px; }30  .top-title {31    height: 160px;32    display: flex;33    align-items: center;34    justify-content: center;35    position: relative;36    font-size: 58px;37    font-weight: 700;38    letter-spacing: 0.5px;39  }40  .back-btn {41    position: absolute;42    left: 32px;43    top: 50%;44    transform: translateY(-50%);45    width: 72px;46    height: 72px;47    display: flex;48    align-items: center;49    justify-content: center;50    cursor: default;51    opacity: 0.95;52  }53  .divider {54    height: 2px;55    background: rgba(255,255,255,0.25);56    margin: 0 0 10px 0;57  }58  .hero {59    padding: 60px 80px 30px;60    text-align: center;61  }62  .hero-top {63    display: flex;64    align-items: center;65    justify-content: center;66    gap: 40px;67    margin-bottom: 20px;68  }69  .temperature {70    font-size: 170px;71    font-weight: 700;72    line-height: 1;73  }74  .temp-unit {75    font-size: 62px;76    font-weight: 700;77    margin-left: 6px;78    vertical-align: top;79  }80  .summary {81    font-size: 52px;82    font-weight: 500;83    margin-top: 30px;84    opacity: 0.95;85  }86 87  .list {88    margin-top: 40px;89    padding: 0 40px;90  }91  .row {92    display: grid;93    grid-template-columns: 1fr auto;94    align-items: center;95    height: 140px;96    border-bottom: 2px solid rgba(255,255,255,0.25);97    color: #ffffff;98  }99  .label {100    font-size: 48px;101    opacity: 0.95;102  }103  .value {104    font-size: 54px;105    font-weight: 700;106    text-align: right;107  }108  .value.normal {109    font-weight: 600;110  }111  .bottom-section {112    position: absolute;113    left: 0;114    right: 0;115    bottom: 160px;116    height: 220px;117    display: flex;118    align-items: center;119    justify-content: center;120    font-size: 72px;121    font-weight: 800;122  }123  .gesture-area {124    position: absolute;125    left: 0;126    right: 0;127    bottom: 0;128    height: 160px;129    background: #000000;130  }131  .gesture-pill {132    position: absolute;133    left: 50%;134    bottom: 36px;135    transform: translateX(-50%);136    width: 280px;137    height: 16px;138    background: #D0D0D0;139    border-radius: 10px;140    opacity: 0.8;141  }142 143  /* Simple icon styling */144  svg { display: block; }145  .icon { fill: none; stroke: #FFFFFF; stroke-width: 4; }146  .icon-fill { fill: #FFFFFF; }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- Status Bar -->153  <div class="status-bar">154    <div class="status-left">155      <div>9:54</div>156      <!-- small sun icon -->157      <svg width="40" height="40" viewBox="0 0 40 40">158        <circle cx="20" cy="20" r="8" class="icon" />159        <line x1="20" y1="2" x2="20" y2="10" class="icon" />160        <line x1="20" y1="30" x2="20" y2="38" class="icon" />161        <line x1="2" y1="20" x2="10" y2="20" class="icon" />162        <line x1="30" y1="20" x2="38" y2="20" class="icon" />163        <line x1="7" y1="7" x2="12" y2="12" class="icon" />164        <line x1="28" y1="28" x2="33" y2="33" class="icon" />165        <line x1="28" y1="12" x2="33" y2="7" class="icon" />166        <line x1="7" y1="33" x2="12" y2="28" class="icon" />167      </svg>168    </div>169    <div class="status-right">170      <!-- wifi icon -->171      <svg width="44" height="44" viewBox="0 0 44 44">172        <path d="M6 16c8-8 24-8 32 0" class="icon"></path>173        <path d="M12 22c6-6 14-6 20 0" class="icon"></path>174        <path d="M18 28c3-3 5-3 8 0" class="icon"></path>175        <circle cx="22" cy="32" r="2" class="icon-fill"></circle>176      </svg>177      <!-- battery icon -->178      <svg width="48" height="44" viewBox="0 0 60 44">179        <rect x="4" y="8" width="44" height="28" rx="4" ry="4" class="icon"></rect>180        <rect x="8" y="12" width="28" height="20" rx="2" ry="2" class="icon-fill"></rect>181        <rect x="50" y="16" width="6" height="12" rx="2" ry="2" class="icon"></rect>182      </svg>183    </div>184  </div>185 186  <!-- Title -->187  <div class="top-title">188    <div class="back-btn">189      <svg width="56" height="56" viewBox="0 0 56 56">190        <path d="M36 10 L20 28 L36 46" class="icon" stroke-width="6"></path>191      </svg>192    </div>193    <div>Current Conditions</div>194  </div>195  <div class="divider"></div>196 197  <!-- Hero section -->198  <div class="hero">199    <div class="hero-top">200      <!-- Sun + Cloud icon -->201      <svg width="160" height="160" viewBox="0 0 160 160">202        <!-- sun -->203        <circle cx="54" cy="58" r="26" class="icon"></circle>204        <line x1="54" y1="16" x2="54" y2="32" class="icon" stroke-width="6"></line>205        <line x1="54" y1="84" x2="54" y2="100" class="icon" stroke-width="6"></line>206        <line x1="12" y1="58" x2="28" y2="58" class="icon" stroke-width="6"></line>207        <line x1="80" y1="58" x2="96" y2="58" class="icon" stroke-width="6"></line>208        <line x1="24" y1="28" x2="36" y2="40" class="icon" stroke-width="6"></line>209        <line x1="72" y1="76" x2="84" y2="88" class="icon" stroke-width="6"></line>210        <!-- cloud -->211        <path d="M90 116c0-18 16-30 34-26a22 22 0 0 1 40 12h-74z" class="icon" stroke-width="6"></path>212        <path d="M62 116h72" class="icon" stroke-width="6"></path>213      </svg>214 215      <div class="temperature">216        70°217        <span class="temp-unit">F</span>218      </div>219    </div>220 221    <div class="summary">Partly sunny</div>222  </div>223 224  <!-- Details list -->225  <div class="list">226    <div class="row">227      <div class="label">RealFeel®</div>228      <div class="value">67°</div>229    </div>230    <div class="row">231      <div class="label">RealFeel® Shade</div>232      <div class="value">67°</div>233    </div>234    <div class="row">235      <div class="label">Wind</div>236      <div class="value normal">SSW 7 mph</div>237    </div>238    <div class="row">239      <div class="label">Max Wind Gusts</div>240      <div class="value normal">14 mph</div>241    </div>242    <div class="row">243      <div class="label">Humidity</div>244      <div class="value">64%</div>245    </div>246    <div class="row">247      <div class="label">Indoor Humidity</div>248      <div class="value normal">64% (Slightly Humid)</div>249    </div>250    <div class="row">251      <div class="label">Dew Point</div>252      <div class="value">57°</div>253    </div>254    <div class="row">255      <div class="label">Pressure</div>256      <div class="value normal">30.09"</div>257    </div>258    <div class="row">259      <div class="label">Cloud Cover</div>260      <div class="value">31%</div>261    </div>262    <div class="row">263      <div class="label">Visibility</div>264      <div class="value normal">15 mi</div>265    </div>266    <div class="row" style="border-bottom: none;">267      <div class="label">Cloud Ceiling</div>268      <div class="value normal">None</div>269    </div>270  </div>271 272  <!-- Bottom section -->273  <div class="bottom-section">History</div>274 275  <!-- Gesture area -->276  <div class="gesture-area">277    <div class="gesture-pill"></div>278  </div>279 280</div>281</body>282</html>