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 Depth Preference</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #213F4A; /* deep blue-green */20    color: #EAF3F6;21  }22 23  /* Status bar */24  .status-bar {25    height: 110px;26    padding: 0 40px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #ffffff;31    opacity: 0.95;32    font-weight: 600;33    letter-spacing: 0.5px;34  }35  .status-left {36    font-size: 40px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 28px;42  }43  .icon {44    width: 40px;45    height: 40px;46  }47 48  /* Title */49  .title {50    text-align: center;51    font-weight: 800;52    font-size: 64px;53    line-height: 78px;54    margin: 40px 80px 30px 80px;55  }56 57  /* Cards */58  .cards {59    padding: 20px 60px;60  }61  .card {62    background: #2B4B57;63    border-radius: 28px;64    padding: 40px;65    margin-bottom: 36px;66    display: flex;67    align-items: center;68    justify-content: space-between;69    box-shadow: 0 8px 20px rgba(0,0,0,0.18);70  }71  .card.active {72    border: 4px solid #1EECC7;73    box-shadow: 0 0 0 4px rgba(30,236,199,0.18) inset;74  }75  .card .text {76    width: 58%;77  }78  .card .title-line {79    font-size: 40px;80    font-weight: 800;81    margin-bottom: 20px;82  }83  .card .desc {84    font-size: 34px;85    line-height: 44px;86    color: #C4D2D7;87  }88  .card .img {89    width: 360px;90    height: 180px;91    background: #E0E0E0;92    border: 1px solid #BDBDBD;93    border-radius: 12px;94    display: flex;95    align-items: center;96    justify-content: center;97    color: #757575;98    font-size: 30px;99  }100 101  /* Button */102  .confirm-wrap {103    position: absolute;104    left: 60px;105    right: 60px;106    bottom: 190px;107  }108  .btn {109    width: 100%;110    height: 120px;111    background: #1EF0C8;112    border-radius: 32px;113    color: #0E2C33;114    font-size: 44px;115    font-weight: 800;116    letter-spacing: 0.3px;117    display: flex;118    align-items: center;119    justify-content: center;120  }121 122  /* Home indicator */123  .home-indicator {124    position: absolute;125    bottom: 72px;126    left: 50%;127    transform: translateX(-50%);128    width: 280px;129    height: 12px;130    background: #E6EBED;131    border-radius: 12px;132    opacity: 0.9;133  }134</style>135</head>136<body>137<div id="render-target">138  <!-- Status Bar -->139  <div class="status-bar">140    <div class="status-left">10:07</div>141    <div class="status-right">142      <!-- simple glyphs -->143      <svg class="icon" viewBox="0 0 24 24" fill="none">144        <path d="M3 9l9-6 9 6v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z" stroke="#fff" stroke-width="2"/>145        <circle cx="12" cy="14" r="3" stroke="#fff" stroke-width="2"/>146      </svg>147      <svg class="icon" viewBox="0 0 24 24" fill="none">148        <path d="M2 18c5-6 15-6 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>149        <path d="M6 14c3-4 9-4 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>150        <circle cx="12" cy="8" r="1.5" fill="#fff"/>151      </svg>152      <svg class="icon" viewBox="0 0 24 24" fill="none">153        <path d="M7 14l5-5 5 5" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>154      </svg>155      <svg class="icon" viewBox="0 0 24 24" fill="none">156        <circle cx="12" cy="12" r="2" fill="#fff"/>157      </svg>158      <svg class="icon" viewBox="0 0 24 24" fill="none">159        <path d="M3 7h18" stroke="#fff" stroke-width="2" stroke-linecap="round"/>160        <path d="M6 7v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7" stroke="#fff" stroke-width="2"/>161        <rect x="9" y="4" width="6" height="3" fill="#fff"/>162      </svg>163    </div>164  </div>165 166  <!-- Title -->167  <div class="title">168    How deep do you go when you check the weather?169  </div>170 171  <!-- Cards -->172  <div class="cards">173    <div class="card active">174      <div class="text">175        <div class="title-line" style="color:#1EECC7;">General</div>176        <div class="desc">I quickly check the essential parameters</div>177      </div>178      <div class="img">[IMG: Chart Illustration]</div>179    </div>180 181    <div class="card">182      <div class="text">183        <div class="title-line" style="color:#1EECC7;">Intermediate</div>184        <div class="desc">I review forecasts from several models</div>185      </div>186      <div class="img">[IMG: Multiple Model Waves]</div>187    </div>188 189    <div class="card" style="background:#2F505C;">190      <div class="text">191        <div class="title-line" style="color:#FFA64D;">Advanced</div>192        <div class="desc">Compare multiple weather sources and hyperlocal forecasts</div>193      </div>194      <div class="img">[IMG: Advanced Multi-Source Lines]</div>195    </div>196  </div>197 198  <!-- Confirm Button -->199  <div class="confirm-wrap">200    <div class="btn">Confirm</div>201  </div>202 203  <!-- Home Indicator -->204  <div class="home-indicator"></div>205</div>206</body>207</html>