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>Weather UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #2E6CCF 0%, #4E8DCE 45%, #66A9D9 100%);15    border-radius: 32px;16    box-shadow: 0 20px 40px rgba(0,0,0,0.25);17    color: #EAF2FF;18  }19 20  .top-area {21    position: relative;22    padding: 60px 48px 24px;23  }24  .city-title {25    text-align: center;26    font-weight: 800;27    font-size: 64px;28    letter-spacing: 0.3px;29    margin-top: 40px;30  }31  .subtitle {32    text-align: center;33    font-size: 34px;34    opacity: 0.85;35    margin-top: 10px;36  }37  .icon-btn {38    position: absolute;39    top: 72px;40    width: 72px;41    height: 72px;42    border-radius: 18px;43    display: flex;44    align-items: center;45    justify-content: center;46    background: rgba(255,255,255,0.12);47  }48  .icon-left { left: 36px; }49  .icon-right { right: 36px; }50 51  .map {52    width: 984px;53    height: 340px;54    margin: 32px auto 24px;55    background: #E0E0E0;56    border: 1px solid #BDBDBD;57    border-radius: 28px;58    display: flex;59    align-items: center;60    justify-content: center;61    color: #757575;62    font-size: 30px;63    font-weight: 600;64  }65 66  .section {67    padding: 24px 48px;68  }69  .section-header {70    display: flex;71    align-items: center;72    justify-content: space-between;73    margin: 12px 0 18px;74  }75  .section-title {76    font-size: 44px;77    font-weight: 700;78    letter-spacing: 0.2px;79  }80  .more {81    font-size: 36px;82    display: flex;83    align-items: center;84    gap: 16px;85    opacity: 0.95;86  }87  .card {88    background: linear-gradient(180deg, rgba(36,98,166,0.65), rgba(82,136,186,0.65));89    border-radius: 30px;90    padding: 32px 28px;91    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);92  }93 94  .row {95    display: grid;96    grid-template-columns: 120px 1fr;97    gap: 32px;98    align-items: center;99    padding: 26px 18px;100    border-radius: 24px;101  }102  .row + .row { margin-top: 10px; }103  .icon-box {104    width: 100px;105    height: 100px;106    border-radius: 22px;107    background: rgba(24,78,136,0.45);108    display: flex;109    align-items: center;110    justify-content: center;111  }112  .row-text {113    font-size: 34px;114    line-height: 1.4;115    color: #F0F6FF;116  }117 118  .allergy-row {119    grid-template-columns: 120px 1fr 180px;120  }121  .badge {122    justify-self: end;123    padding: 12px 24px;124    border-radius: 14px;125    font-weight: 800;126    font-size: 30px;127    color: #fff;128  }129  .badge.high { background: #F07C1A; }130  .badge.low { background: #39A448; }131 132  .divider {133    height: 2px;134    background: rgba(255,255,255,0.28);135    margin: 26px 48px 12px;136  }137 138  .provider {139    width: 720px;140    margin: 24px auto;141    padding: 24px 32px;142    background: rgba(255,255,255,0.18);143    border-radius: 28px;144    display: flex;145    align-items: center;146    gap: 18px;147    color: #EAF2FF;148    font-size: 34px;149    font-weight: 700;150  }151  .provider .brand {152    color: #F36D21;153    font-weight: 800;154  }155 156  /* Simple SVG icons styling */157  svg { display: block; }158</style>159</head>160<body>161<div id="render-target">162 163  <div class="top-area">164    <div class="icon-btn icon-left">165      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">166        <rect x="3" y="5" width="18" height="2" rx="1" fill="#FFFFFF"/>167        <rect x="3" y="11" width="14" height="2" rx="1" fill="#FFFFFF"/>168        <rect x="3" y="17" width="18" height="2" rx="1" fill="#FFFFFF"/>169      </svg>170    </div>171    <div class="icon-btn icon-right">172      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">173        <circle cx="12" cy="12" r="11" stroke="rgba(255,255,255,0.7)" stroke-width="2"/>174        <rect x="11" y="5" width="2" height="14" fill="#FFFFFF"/>175        <rect x="5" y="11" width="14" height="2" fill="#FFFFFF"/>176      </svg>177    </div>178 179    <div class="city-title">Ulm</div>180    <div class="subtitle">Mon 14:22</div>181 182    <div class="map">[IMG: Google Map of Central Europe with pin]</div>183  </div>184 185  <div class="section">186    <div class="section-header">187      <div class="section-title">Indices</div>188      <div class="more">189        More190        <svg width="28" height="28" viewBox="0 0 24 24" fill="none">191          <path d="M8 4l8 8-8 8" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>192        </svg>193      </div>194    </div>195    <div class="card">196      <div class="row">197        <div class="icon-box">198          <svg width="56" height="56" viewBox="0 0 24 24">199            <circle cx="15" cy="5" r="3" fill="#FFFFFF"/>200            <path d="M6 13l4-3 4 2 3-2 2 2-3 3-3-1-3 3" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>201          </svg>202        </div>203        <div class="row-text">Conditions are good for running outdoors.</div>204      </div>205 206      <div class="row">207        <div class="icon-box">208          <svg width="56" height="56" viewBox="0 0 24 24">209            <rect x="4" y="6" width="8" height="12" rx="3" fill="#FFFFFF" opacity="0.9"/>210            <rect x="12" y="8" width="8" height="8" rx="3" fill="#FFFFFF"/>211          </svg>212        </div>213        <div class="row-text">Weather conditions create a lowered risk of catching a cold, and will help to make colds less severe and of shorter duration.</div>214      </div>215 216      <div class="row">217        <div class="icon-box">218          <svg width="56" height="56" viewBox="0 0 24 24">219            <circle cx="12" cy="12" r="4" fill="#FFFFFF"/>220            <path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M19 5l-3 3M5 19l3-3" stroke="#FFFFFF" stroke-width="2"/>221          </svg>222        </div>223        <div class="row-text">Conditions will be good for outdoor activities.</div>224      </div>225 226      <div class="row">227        <div class="icon-box">228          <svg width="56" height="56" viewBox="0 0 24 24">229            <path d="M2 13l20 0-5-3-7 1-2-5" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>230            <rect x="3" y="14" width="18" height="2" fill="#FFFFFF"/>231          </svg>232        </div>233        <div class="row-text">Conditions are excellent for flying!</div>234      </div>235 236      <div class="row">237        <div class="icon-box">238          <svg width="56" height="56" viewBox="0 0 24 24">239            <rect x="5" y="10" width="14" height="6" rx="2" fill="#FFFFFF"/>240            <circle cx="8" cy="18" r="2" fill="#FFFFFF"/>241            <circle cx="16" cy="18" r="2" fill="#FFFFFF"/>242            <rect x="9" y="7" width="6" height="3" rx="1.5" fill="#FFFFFF"/>243          </svg>244        </div>245        <div class="row-text">Driving conditions are fair.</div>246      </div>247    </div>248  </div>249 250  <div class="section">251    <div class="section-header">252      <div class="section-title">Allergy Outlook</div>253      <div class="more">254        More255        <svg width="28" height="28" viewBox="0 0 24 24" fill="none">256          <path d="M8 4l8 8-8 8" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>257        </svg>258      </div>259    </div>260 261    <div class="card">262      <div class="row allergy-row">263        <div class="icon-box">264          <svg width="56" height="56" viewBox="0 0 24 24">265            <path d="M12 3c-2 3-3 4-3 6 0 2 1 3 3 3s3-1 3-3c0-2-1-3-3-6z" fill="#FFFFFF"/>266            <rect x="11" y="13" width="2" height="6" fill="#FFFFFF"/>267          </svg>268        </div>269        <div class="row-text">Dust & Dander Forecast</div>270        <div class="badge high">High</div>271      </div>272 273      <div class="row allergy-row">274        <div class="icon-box">275          <svg width="56" height="56" viewBox="0 0 24 24">276            <path d="M6 18c6-2 10-7 10-13 2 2 2 6 1 8-2 4-6 6-11 5z" fill="#FFFFFF"/>277            <circle cx="7" cy="18" r="1" fill="#FFFFFF"/>278            <circle cx="10" cy="17" r="1" fill="#FFFFFF"/>279          </svg>280        </div>281        <div class="row-text">Ragweed Pollen</div>282        <div class="badge low">Low</div>283      </div>284    </div>285 286    <div class="divider"></div>287 288    <div class="provider">289      <span>Data provider:</span>290      <svg width="30" height="30" viewBox="0 0 24 24">291        <circle cx="12" cy="12" r="6" stroke="#F36D21" stroke-width="2" fill="none"/>292        <path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M5 19l2-2" stroke="#F36D21" stroke-width="2"/>293      </svg>294      <span class="brand">AccuWeather</span>295    </div>296  </div>297 298</div>299</body>300</html>