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 UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;13    color: #FFFFFF;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: linear-gradient(180deg, #1f3f4b 0%, #163742 100%);21    border-radius: 24px;22    box-shadow: 0 20px 60px rgba(0,0,0,0.35);23  }24 25  /* Status bar */26  .status-bar {27    height: 96px;28    padding: 0 36px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    color: rgba(255,255,255,0.9);33    font-weight: 600;34    font-size: 30px;35    letter-spacing: 0.3px;36  }37  .status-right {38    display: flex;39    align-items: center;40    gap: 22px;41  }42  .status-dot {43    width: 8px;44    height: 8px;45    background: rgba(255,255,255,0.7);46    border-radius: 50%;47    margin: 0 4px;48  }49 50  /* Title */51  .title {52    margin: 60px 40px 40px;53    text-align: center;54    font-size: 54px;55    line-height: 66px;56    font-weight: 800;57    color: #F5F9FB;58  }59 60  /* Cards */61  .cards {62    padding: 0 40px;63  }64  .card {65    background: rgba(54, 78, 90, 0.85);66    border-radius: 28px;67    padding: 34px 36px;68    display: flex;69    align-items: center;70    justify-content: space-between;71    margin-bottom: 36px;72    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);73  }74  .card-text {75    max-width: 600px;76  }77  .card-title {78    font-size: 38px;79    font-weight: 800;80    margin-bottom: 16px;81  }82  .card-title.general,83  .card-title.intermediate {84    color: #1fd0a2;85  }86  .card-title.advanced {87    color: #f5a623;88  }89  .card-desc {90    font-size: 30px;91    line-height: 40px;92    color: rgba(220,235,240,0.9);93  }94  .card-img {95    width: 420px;96    height: 160px;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    border-radius: 12px;100    display: flex;101    justify-content: center;102    align-items: center;103    color: #757575;104    font-size: 26px;105    text-align: center;106  }107 108  /* Confirm button */109  .confirm-btn {110    position: absolute;111    left: 40px;112    right: 40px;113    bottom: 190px;114    height: 120px;115    background: rgba(64, 88, 100, 0.7);116    border-radius: 28px;117    display: flex;118    align-items: center;119    justify-content: center;120    color: #2C3F48;121    font-size: 40px;122    font-weight: 800;123  }124 125  /* Home indicator */126  .home-indicator {127    position: absolute;128    bottom: 80px;129    left: 50%;130    transform: translateX(-50%);131    width: 300px;132    height: 10px;133    background: rgba(255,255,255,0.9);134    border-radius: 6px;135  }136</style>137</head>138<body>139<div id="render-target">140  <div class="status-bar">141    <div class="status-left">10:06</div>142    <div class="status-right">143      <!-- WiFi Icon -->144      <svg width="40" height="26" viewBox="0 0 36 24" xmlns="http://www.w3.org/2000/svg">145        <path d="M2 6c8-7 24-7 32 0l-2.3 2.3c-6.7-5.7-20.7-5.7-27.4 0L2 6zm6 6c5.4-4.2 14.6-4.2 20 0l-2.2 2.2c-4-3.1-11.6-3.1-15.6 0L8 12zm8 6a4 4 0 0 1 4 4h-8a4 4 0 0 1 4-4z" fill="#fff" opacity="0.85"/>146      </svg>147      <!-- Battery Icon -->148      <svg width="40" height="26" viewBox="0 0 36 24" xmlns="http://www.w3.org/2000/svg">149        <rect x="3" y="5" width="26" height="14" rx="3" ry="3" stroke="#fff" stroke-width="2" fill="none"/>150        <rect x="31" y="9" width="4" height="6" fill="#fff"/>151        <rect x="6" y="9" width="17" height="6" fill="#fff" opacity="0.8"/>152      </svg>153    </div>154  </div>155 156  <h1 class="title">How deep do you go when you check the weather?</h1>157 158  <div class="cards">159    <div class="card">160      <div class="card-text">161        <div class="card-title general">General</div>162        <div class="card-desc">I quickly check the essential parameters</div>163      </div>164      <div class="card-img">[IMG: Wavy graph - basic]</div>165    </div>166 167    <div class="card">168      <div class="card-text">169        <div class="card-title intermediate">Intermediate</div>170        <div class="card-desc">I review forecasts from several models</div>171      </div>172      <div class="card-img">[IMG: Wavy graph - multiple models]</div>173    </div>174 175    <div class="card">176      <div class="card-text">177        <div class="card-title advanced">Advanced</div>178        <div class="card-desc">Compare multiple weather sources and hyperlocal forecasts</div>179      </div>180      <div class="card-img">[IMG: Wavy graph - detailed comparisons]</div>181    </div>182  </div>183 184  <div class="confirm-btn">Confirm</div>185  <div class="home-indicator"></div>186</div>187</body>188</html>