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 App Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: linear-gradient(#0f3a4a, #3f6f88 280px, #5d86a1 600px, #5b84a0);13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; width: 1080px; height: 120px;18    background: #0b3342;19    color: #fff; display: flex; align-items: center; padding: 0 36px; box-sizing: border-box;20    font-weight: 600;21  }22  .status-time { font-size: 44px; letter-spacing: 1px; }23  .status-icons { margin-left: 32px; display: flex; gap: 18px; }24  .status-dot { width: 18px; height: 18px; background: #fff; opacity: 0.85; border-radius: 50%; }25  .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }26  .status-ico {27    width: 36px; height: 36px; border-radius: 4px; background: rgba(255,255,255,0.9);28  }29 30  /* App bar */31  .app-bar {32    position: absolute; top: 120px; left: 0; width: 1080px; height: 152px;33    background: #156e88; color: #fff; display: flex; align-items: center;34    box-shadow: 0 2px 0 rgba(0,0,0,0.15);35  }36  .app-bar .left, .app-bar .right {37    width: 160px; display: flex; align-items: center; justify-content: center;38  }39  .app-title { flex: 1; text-align: center; font-size: 64px; font-weight: 600; letter-spacing: 0.5px; }40  .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }41  .icon-btn svg { width: 56px; height: 56px; fill: #ffffff; }42 43  /* Info chips row */44  .info-row {45    position: absolute; top: 300px; left: 40px; right: 40px;46    display: flex; gap: 40px; color: #e9f3f6;47  }48  .info-chip {49    display: flex; align-items: center; gap: 16px;50    padding: 12px 20px; border-radius: 28px;51    background: rgba(255,255,255,0.08);52    border: 1px solid rgba(255,255,255,0.18);53    font-size: 38px;54  }55  .chip-ico {56    width: 52px; height: 52px; border: 2px solid #e9f3f6; border-radius: 50%;57    display: inline-flex; align-items: center; justify-content: center;58  }59  .chip-ico svg { width: 34px; height: 34px; fill: #e9f3f6; opacity: 0.9; }60 61  /* Ad card */62  .card {63    position: absolute; left: 60px; width: 960px; border-radius: 8px;64    background: #ffffff; box-shadow: 0 6px 0 rgba(0,0,0,0.18);65    border: 1px solid #cfd8dc; overflow: hidden;66  }67  .ad-card { top: 520px; }68  .ad-label {69    position: absolute; right: 18px; top: 12px; font-size: 40px; color: #616161;70  }71  .ad-content { padding: 36px; box-sizing: border-box; }72  .img-ph {73    width: 100%; height: 420px; background: #E0E0E0;74    border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center;75    color: #757575; font-size: 42px; border-radius: 6px;76  }77  .ad-text { margin-top: 32px; font-size: 42px; color: #333; }78  .ad-footer {79    margin-top: 24px; display: flex; align-items: center; justify-content: space-between;80  }81  .ad-meta { color: #9e9e9e; font-size: 32px; }82  .btn-green {83    background: #5cb85c; color: #fff; border: none; border-radius: 4px;84    font-size: 40px; padding: 18px 32px; cursor: default;85  }86 87  /* WeatherRadar card */88  .radar-card { top: 1160px; }89  .radar-header {90    height: 104px; background: #156e88; color: #fff; display: flex; align-items: center;91    padding: 0 24px; box-sizing: border-box; border-bottom: 1px solid #cfd8dc;92  }93  .radar-title {94    display: flex; align-items: center; gap: 18px; font-size: 44px; font-weight: 600;95  }96  .radar-share { margin-left: auto; }97  .radar-share svg { width: 48px; height: 48px; fill: #fff; }98  .radar-body { padding: 18px; }99  .map-ph {100    width: 100%; height: 760px; background: #E0E0E0;101    border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center;102    color: #757575; font-size: 44px; border-radius: 6px;103  }104  .radar-actions {105    position: absolute; bottom: 20px; left: 26px; display: flex; gap: 24px;106  }107  .pill {108    background: #0f5671; color: #fff; font-size: 40px; padding: 18px 30px;109    border-radius: 12px; box-shadow: 0 2px 0 rgba(0,0,0,0.2);110  }111  .play-btn {112    margin-left: 18px; background: #0f5671; width: 90px; height: 72px; border-radius: 10px;113    display: flex; align-items: center; justify-content: center;114  }115  .play-btn svg { width: 40px; height: 40px; fill: #fff; }116 117  /* Bottom gesture bar */118  .gesture {119    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);120    width: 360px; height: 12px; background: #f2f2f2; border-radius: 12px;121    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);122  }123</style>124</head>125<body>126<div id="render-target">127  <!-- Status bar -->128  <div class="status-bar">129    <div class="status-time">6:09</div>130    <div class="status-icons">131      <div class="status-dot"></div>132      <div class="status-dot"></div>133      <div class="status-dot"></div>134      <div class="status-dot"></div>135      <div class="status-dot"></div>136      <div class="status-dot"></div>137    </div>138    <div class="status-right">139      <div class="status-ico"></div>140      <div class="status-ico"></div>141    </div>142  </div>143 144  <!-- App bar -->145  <div class="app-bar">146    <div class="left">147      <div class="icon-btn">148        <svg viewBox="0 0 24 24">149          <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3"></path>150        </svg>151      </div>152    </div>153    <div class="app-title">Ivrea</div>154    <div class="right">155      <div class="icon-btn">156        <svg viewBox="0 0 24 24">157          <path d="M18 8a3 3 0 1 0-2.9-3.6L8.6 9a3 3 0 0 0 0 6l6.5 4.6A3 3 0 1 0 17 17.1L10.5 12 17 6.9A3 3 0 0 0 18 8z"></path>158        </svg>159      </div>160    </div>161  </div>162 163  <!-- Info chips -->164  <div class="info-row">165    <div class="info-chip">166      <div class="chip-ico">167        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2z"></path></svg>168      </div>169      <div>humidity: 45 % • dew point: 10°</div>170    </div>171    <div class="info-chip">172      <div class="chip-ico">173        <svg viewBox="0 0 24 24"><path d="M4 12l8-6v4h8v4H12v4z"></path></svg>174      </div>175      <div>light wind from S (5 kph)</div>176    </div>177  </div>178 179  <!-- Ad card -->180  <div class="card ad-card">181    <div class="ad-label">Ad</div>182    <div class="ad-content">183      <div class="img-ph">[IMG: Yolla - International Calling Ad]</div>184      <div class="ad-text">Yolla: International Calling</div>185      <div class="ad-footer">186        <div class="ad-meta">FREE · UTILITY & PRODUCTIVITY</div>187        <button class="btn-green">Use app</button>188      </div>189    </div>190  </div>191 192  <!-- WeatherRadar card -->193  <div class="card radar-card">194    <div class="radar-header">195      <div class="radar-title">196        <svg viewBox="0 0 24 24" width="44" height="44" style="fill:#fff">197          <path d="M12 6a5 5 0 1 0 4.9 6H22v2h-5.1A5 5 0 0 0 12 6zM3 16h6v2H3z"></path>198        </svg>199        WeatherRadar200      </div>201      <div class="radar-share">202        <svg viewBox="0 0 24 24">203          <path d="M18 8a3 3 0 1 0-2.9-3.6L8.6 9a3 3 0 0 0 0 6l6.5 4.6A3 3 0 1 0 17 17.1L10.5 12 17 6.9A3 3 0 0 0 18 8z"></path>204        </svg>205      </div>206    </div>207    <div class="radar-body">208      <div class="map-ph">[IMG: Weather Radar Map - Turin Region]</div>209    </div>210    <div class="radar-actions">211      <div class="pill">now</div>212      <div class="pill">today</div>213      <div class="pill">tomorrow</div>214      <div class="play-btn">215        <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>216      </div>217    </div>218  </div>219 220  <!-- Bottom gesture bar -->221  <div class="gesture"></div>222</div>223</body>224</html>