GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Weather App Intro</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #cfd8dc;15    border-radius: 32px;16    box-shadow: 0 10px 30px rgba(0,0,0,0.12);17  }18 19  /* Top map area */20  .map {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 1150px;26    background: #E0E0E0;27    border: 1px solid #BDBDBD;28    display: flex;29    justify-content: center;30    align-items: center;31    color: #757575;32    font-size: 36px;33    letter-spacing: 0.2px;34  }35 36  /* Status bar */37  .statusbar {38    position: absolute;39    top: 36px;40    left: 36px;41    right: 36px;42    height: 48px;43    display: flex;44    align-items: center;45    justify-content: space-between;46    color: #ffffff;47    pointer-events: none;48  }49  .status-left { display: flex; align-items: center; gap: 28px; }50  .status-left .time { font-size: 36px; font-weight: 700; }51  .status-icons { display: flex; align-items: center; gap: 26px; }52  .statusbar svg { width: 40px; height: 40px; stroke: #ffffff; stroke-width: 3; fill: none; }53  .dots svg { stroke: none; fill: #ffffff; }54 55  .status-right { display: flex; align-items: center; gap: 20px; }56  .status-right svg { width: 42px; height: 42px; }57 58  /* Bottom panel card */59  .panel {60    position: absolute;61    left: 0;62    right: 0;63    top: 950px;64    height: 1450px;65    background: #243C49;66    border-top-left-radius: 40px;67    border-top-right-radius: 40px;68    color: #ffffff;69  }70  .panel .title {71    text-align: center;72    font-weight: 800;73    font-size: 78px;74    line-height: 98px;75    margin: 200px 80px 40px;76    letter-spacing: 0.2px;77  }78  .panel .subtitle {79    text-align: center;80    color: #9fb3bf;81    font-size: 36px;82    margin-top: 16px;83  }84 85  .org {86    margin-top: 40px;87    display: flex;88    justify-content: center;89    align-items: center;90    gap: 40px;91  }92  .org .logo {93    width: 180px;94    height: 180px;95    background: #E0E0E0;96    border: 1px solid #BDBDBD;97    display: flex;98    justify-content: center;99    align-items: center;100    color: #757575;101    font-size: 22px;102    text-align: center;103    border-radius: 8px;104    padding: 8px;105  }106  .org .name {107    font-size: 44px;108    line-height: 54px;109    font-weight: 700;110    letter-spacing: 0.4px;111    text-transform: uppercase;112  }113 114  .btn {115    width: 940px;116    height: 120px;117    margin: 120px auto 24px;118    background: #22F4A9;119    color: #0c2c34;120    border-radius: 28px;121    display: flex;122    justify-content: center;123    align-items: center;124    font-size: 52px;125    font-weight: 800;126    letter-spacing: 0.4px;127  }128 129  .disclaimer {130    width: 940px;131    margin: 12px auto 0;132    text-align: center;133    color: #b9c8d1;134    font-size: 30px;135    line-height: 42px;136  }137  .disclaimer .link { color: #d1e4eb; text-decoration: underline; }138 139  .home-indicator {140    position: absolute;141    left: 50%;142    bottom: 40px;143    transform: translateX(-50%);144    width: 220px;145    height: 12px;146    background: #d9dee2;147    border-radius: 6px;148  }149</style>150</head>151<body>152<div id="render-target">153  <!-- Weather map placeholder -->154  <div class="map">[IMG: Weather Map / Wind Heatmap]</div>155 156  <!-- Status bar -->157  <div class="statusbar">158    <div class="status-left">159      <div class="time">10:06</div>160      <div class="status-icons">161        <!-- dotted grid icon -->162        <div class="dots">163          <svg viewBox="0 0 24 24">164            <circle cx="4" cy="4" r="2"></circle>165            <circle cx="12" cy="4" r="2"></circle>166            <circle cx="20" cy="4" r="2"></circle>167            <circle cx="4" cy="12" r="2"></circle>168            <circle cx="12" cy="12" r="2"></circle>169            <circle cx="20" cy="12" r="2"></circle>170            <circle cx="4" cy="20" r="2"></circle>171            <circle cx="12" cy="20" r="2"></circle>172            <circle cx="20" cy="20" r="2"></circle>173          </svg>174        </div>175        <!-- upload arrow icon -->176        <svg viewBox="0 0 24 24">177          <path d="M12 20V8"></path>178          <path d="M6 12l6-6 6 6"></path>179        </svg>180        <!-- caret up icon -->181        <svg viewBox="0 0 24 24">182          <path d="M6 15l6-6 6 6"></path>183        </svg>184      </div>185    </div>186    <div class="status-right">187      <!-- simple bell icon -->188      <svg viewBox="0 0 24 24">189        <path d="M12 3c-3 0-5 2-5 5v3c0 2-1 3-2 4h14c-1-1-2-2-2-4V8c0-3-2-5-5-5z"></path>190        <path d="M9 19c1 1 3 1 4 0"></path>191      </svg>192      <!-- round user icon -->193      <svg viewBox="0 0 24 24">194        <circle cx="12" cy="8" r="4"></circle>195        <path d="M4 21c2-4 6-5 8-5s6 1 8 5"></path>196      </svg>197    </div>198  </div>199 200  <!-- Bottom content panel -->201  <div class="panel">202    <div class="title">203      Best Weather<br>204      Forecast App for<br>205      Outdoor206    </div>207    <div class="subtitle">Rated by</div>208 209    <div class="org">210      <div class="logo">[IMG: WMO Emblem]</div>211      <div class="name">212        WORLD<br>213        METEOROLOGICAL<br>214        ORGANIZATION215      </div>216    </div>217 218    <div class="btn">Next</div>219 220    <div class="disclaimer">221      By proceeding, you confirm that you have read the Privacy Policy,222      User Agreement and accepted their terms and conditions.223      <span class="link">Click to read.</span>224    </div>225  </div>226 227  <div class="home-indicator"></div>228</div>229</body>230</html>