GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Weather App UI - Ivrea</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(#0e3f4f 0px, #145d6e 150px, #6fa3bd 500px, #78aac2 1200px);15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    height: 90px;24    width: 100%;25    background: #0e3f4f;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 28px;30    box-sizing: border-box;31    font-size: 40px;32    letter-spacing: 1px;33  }34  .status-left { display: flex; align-items: center; gap: 24px; }35  .ghosts { display: flex; gap: 8px; }36  .ghost-dot { width: 18px; height: 18px; background: #ffffffcc; border-radius: 50%; }37  .status-right { display: flex; align-items: center; gap: 26px; }38  .icon-wifi, .icon-battery {39    width: 44px; height: 44px;40  }41 42  /* App bar */43  .app-bar {44    position: absolute;45    top: 90px;46    left: 0;47    height: 140px;48    width: 100%;49    background: #146a7c;50    display: flex;51    align-items: center;52    justify-content: center;53  }54  .app-title { font-size: 64px; font-weight: 500; letter-spacing: 1px; }55  .app-actions {56    position: absolute; top: 90px; left: 0; height: 140px; width: 100%;57    display: flex; align-items: center; justify-content: space-between; padding: 0 34px; box-sizing: border-box;58  }59  .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; cursor: default; }60 61  /* Content info items */62  .content {63    position: absolute;64    top: 230px;65    left: 0;66    right: 0;67    padding: 40px 40px;68    box-sizing: border-box;69  }70  .info-row {71    display: flex;72    justify-content: space-between;73    color: #e9f2f5;74    font-size: 36px;75  }76  .info {77    display: flex; align-items: center; gap: 18px; opacity: 0.95;78  }79  .info .icon-circle { width: 56px; height: 56px; border: 3px solid #d7e7ec; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }80  .ad-label { position: absolute; top: 520px; right: 80px; color: #d0dde4; font-size: 42px; }81 82  /* Center image placeholder (empty banner area) */83  .center-placeholder {84    position: absolute;85    top: 640px;86    left: 50%;87    transform: translateX(-50%);88    width: 500px;89    height: 300px;90    background: #E0E0E0;91    border: 1px solid #BDBDBD;92    color: #757575;93    display: flex; align-items: center; justify-content: center;94    border-radius: 8px;95    box-shadow: inset 0 0 0 0 rgba(0,0,0,0.1);96  }97 98  /* Weather card */99  .card {100    position: absolute;101    left: 32px;102    right: 32px;103    bottom: 340px;104    background: #ffffff;105    border-radius: 16px;106    box-shadow: 0 10px 24px rgba(0,0,0,0.25);107    overflow: hidden;108  }109  .card-header {110    height: 110px;111    background: #136a7b;112    color: #e7f7fb;113    display: flex;114    align-items: center;115    padding: 0 26px;116    box-sizing: border-box;117    border-bottom: 2px solid #e3ad3b;118  }119  .card-header .title {120    font-size: 50px;121    margin-left: 16px;122    flex: 1;123  }124  .card-share { width: 56px; height: 56px; }125  .map-area {126    position: relative;127    height: 980px;128    background: #E0E0E0;129    border-top: 1px solid #BDBDBD;130    border-bottom: 1px solid #BDBDBD;131    display: flex; align-items: center; justify-content: center; color: #757575;132  }133  .map-area .placeholder-text { font-size: 38px; }134 135  .map-controls {136    position: absolute;137    left: 24px;138    bottom: 24px;139    display: flex;140    gap: 24px;141  }142  .pill {143    padding: 28px 36px;144    background: #115a74;145    color: #eaf7fb;146    border-radius: 12px;147    font-size: 42px;148    box-shadow: 0 2px 0 rgba(255,255,255,0.1) inset;149  }150  .play-btn {151    position: absolute;152    right: 24px;153    bottom: 24px;154    width: 96px; height: 80px;155    background: #115a74;156    border-radius: 8px;157    display: flex; align-items: center; justify-content: center;158  }159  /* Gesture bar */160  .gesture {161    position: absolute;162    bottom: 44px;163    left: 50%;164    transform: translateX(-50%);165    width: 420px;166    height: 18px;167    background: #eaeaea;168    border-radius: 9px;169  }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Status Bar -->176  <div class="status-bar">177    <div class="status-left">178      <div>6:14</div>179      <div class="ghosts">180        <div class="ghost-dot"></div>181        <div class="ghost-dot"></div>182        <div class="ghost-dot"></div>183        <div class="ghost-dot"></div>184        <div class="ghost-dot"></div>185      </div>186      <div style="width:10px;height:10px;border-radius:50%;background:#ffffffcc;"></div>187    </div>188    <div class="status-right">189      <!-- WiFi -->190      <svg class="icon-wifi" viewBox="0 0 24 24">191        <path d="M2 8c5-5 15-5 20 0" stroke="#fff" stroke-width="2" fill="none" />192        <path d="M5 11c4-4 10-4 14 0" stroke="#fff" stroke-width="2" fill="none" />193        <path d="M8 14c3-3 5-3 8 0" stroke="#fff" stroke-width="2" fill="none" />194        <circle cx="12" cy="18" r="2" fill="#fff"></circle>195      </svg>196      <!-- Battery -->197      <svg class="icon-battery" viewBox="0 0 28 16">198        <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"></rect>199        <rect x="24" y="5" width="3" height="6" fill="#fff"></rect>200        <rect x="3" y="4" width="16" height="8" fill="#fff"></rect>201      </svg>202    </div>203  </div>204 205  <!-- App Bar -->206  <div class="app-bar">207    <div class="app-title">Ivrea</div>208  </div>209  <div class="app-actions">210    <div class="icon-btn">211      <!-- Hamburger -->212      <svg width="60" height="60" viewBox="0 0 24 24">213        <rect x="3" y="5" width="18" height="2" fill="#eaf7fb"></rect>214        <rect x="3" y="11" width="18" height="2" fill="#eaf7fb"></rect>215        <rect x="3" y="17" width="18" height="2" fill="#eaf7fb"></rect>216      </svg>217    </div>218    <div class="icon-btn" style="justify-content:flex-end;">219      <!-- Share -->220      <svg width="60" height="60" viewBox="0 0 24 24">221        <circle cx="18" cy="5" r="3" fill="#eaf7fb"></circle>222        <circle cx="6" cy="12" r="3" fill="#eaf7fb"></circle>223        <circle cx="18" cy="19" r="3" fill="#eaf7fb"></circle>224        <path d="M8.5 11l7-4M8.5 13l7 4" stroke="#eaf7fb" stroke-width="2" fill="none"></path>225      </svg>226    </div>227  </div>228 229  <!-- Content -->230  <div class="content">231    <div class="info-row">232      <div class="info">233        <div class="icon-circle">234          <svg width="30" height="30" viewBox="0 0 24 24">235            <rect x="6" y="6" width="12" height="12" fill="#d7e7ec"></rect>236          </svg>237        </div>238        <div>239          <div>humidity: 45 %</div>240          <div>dew point: 10°</div>241        </div>242      </div>243      <div class="info">244        <div class="icon-circle">245          <!-- Wind direction icon -->246          <svg width="30" height="30" viewBox="0 0 24 24">247            <circle cx="12" cy="12" r="11" stroke="#d7e7ec" stroke-width="2" fill="none"></circle>248            <polygon points="12,6 16,12 8,12" fill="#d7e7ec"></polygon>249          </svg>250        </div>251        <div>light wind from S (5 kph)</div>252      </div>253    </div>254    <div class="ad-label">Ad</div>255  </div>256 257  <!-- Center placeholder (ad banner / image) -->258  <div class="center-placeholder">[IMG: Ad banner]</div>259 260  <!-- Weather Radar Card -->261  <div class="card">262    <div class="card-header">263      <!-- Weather icon -->264      <svg width="64" height="64" viewBox="0 0 24 24">265        <circle cx="7" cy="9" r="3" fill="#f7d24a"></circle>266        <path d="M13 16h6a3 3 0 0 0 0-6 4 4 0 0 0-7-1 3 3 0 0 0-2 7h3z" fill="#e6f3f7"></path>267      </svg>268      <div class="title">WeatherRadar</div>269      <svg class="card-share" viewBox="0 0 24 24">270        <circle cx="18" cy="5" r="3" fill="#eaf7fb"></circle>271        <circle cx="6" cy="12" r="3" fill="#eaf7fb"></circle>272        <circle cx="18" cy="19" r="3" fill="#eaf7fb"></circle>273        <path d="M8.5 11l7-4M8.5 13l7 4" stroke="#eaf7fb" stroke-width="2" fill="none"></path>274      </svg>275    </div>276    <div class="map-area">277      <div class="placeholder-text">[IMG: Weather map of Northern Italy]</div>278 279      <div class="map-controls">280        <div class="pill">now</div>281        <div class="pill">today</div>282        <div class="pill">tomorrow</div>283      </div>284      <div class="play-btn">285        <svg width="48" height="48" viewBox="0 0 24 24">286          <polygon points="8,5 20,12 8,19" fill="#eaf7fb"></polygon>287        </svg>288      </div>289    </div>290  </div>291 292  <!-- Gesture bar -->293  <div class="gesture"></div>294</div>295</body>296</html>