GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Weather App Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: linear-gradient(#134a56 0%, #0e7c98 30%, #0fa0c0 70%, #17b8d2 100%);11    font-family: "Segoe UI", Roboto, Arial, sans-serif;12    color: rgba(255,255,255,0.9);13  }14 15  /* Status bar */16  .statusbar {17    position: absolute; top: 0; left: 0; right: 0; height: 120px;18    background: rgba(20,40,50,0.65);19    display: flex; align-items: center; padding: 0 40px;20    font-size: 34px; letter-spacing: 1px; color: #e8f6fa;21  }22  .statusbar .spacer { flex: 1; }23  .status-icons { display: flex; gap: 26px; align-items: center; font-size: 28px; opacity: 0.85; }24 25  /* Decorative sun */26  .sun {27    position: absolute; top: 180px; right: 100px;28    width: 520px; height: 520px; border-radius: 50%;29    background:30      radial-gradient(closest-side, rgba(255,255,255,0.9) 0%, rgba(255,243,170,0.9) 35%, rgba(255,243,170,0.0) 70%),31      radial-gradient(closest-side, rgba(255,243,170,0.55) 0%, rgba(255,243,170,0.0) 75%);32    filter: blur(1px);33  }34 35  /* Top actions (gear, target, star, search) */36  .top-actions {37    position: absolute; top: 180px; left: 50px; right: 50px; height: 150px;38    display: flex; align-items: center; justify-content: space-between;39    color: rgba(255,255,255,0.85);40  }41  .top-left, .top-right { display: flex; gap: 60px; align-items: center; }42  .icon { width: 70px; height: 70px; opacity: 0.65; }43  .icon svg { width: 100%; height: 100%; stroke: #cfe8ee; fill: none; stroke-width: 8; }44  .unicode { font-size: 64px; opacity: 0.6; }45 46  /* Main content */47  .content {48    position: absolute; left: 70px; right: 70px; top: 760px;49  }50  .temp {51    font-size: 170px; font-weight: 800; letter-spacing: 2px;52    color: rgba(255,255,255,0.85);53  }54 55  .location-row {56    display: flex; align-items: center; gap: 22px; margin-top: 30px;57    font-size: 56px; font-weight: 700; color: #d3eef4;58  }59  .location-row .chev { width: 40px; height: 40px; opacity: 0.5; }60  .location-row .pin { width: 56px; height: 56px; }61  .location-row .right-chev { margin-left: auto; width: 40px; height: 40px; opacity: 0.7; }62 63  .current-time {64    margin-top: 24px; font-size: 44px; color: #e6f7fb; opacity: 0.85;65  }66 67  /* Details section */68  .details {69    margin-top: 60px; display: grid; grid-template-columns: 150px 1fr 100px; gap: 30px; align-items: start;70  }71  .detail-icons { display: grid; gap: 40px; }72  .img-ph {73    width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;74    display: flex; justify-content: center; align-items: center; color: #757575; font-size: 22px; text-align: center; border-radius: 10px;75  }76  .detail-text h3 { margin: 0 0 14px; font-size: 54px; color: #eaf6fb; }77  .detail-text p { margin: 8px 0; font-size: 40px; color: #d7eef4; }78 79  .side-actions { display: grid; gap: 46px; justify-items: center; }80  .round {81    width: 92px; height: 92px; border-radius: 50%;82    background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center;83    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35);84  }85  .round svg { width: 58px; height: 58px; stroke: #e6f7fb; fill: none; stroke-width: 6; }86 87  /* Forecast cards */88  .forecast {89    margin-top: 50px; display: grid; gap: 20px;90  }91  .card {92    background: rgba(0,80,110,0.45); border-radius: 10px;93    display: grid; grid-template-columns: 140px 1fr 60px; align-items: center;94    padding: 24px 26px; color: #d9f3f8;95  }96  .card .img-ph { width: 120px; height: 100px; }97  .card .text { font-size: 44px; }98  .card .text .title { font-weight: 600; }99  .card .chev { width: 40px; height: 40px; justify-self: end; opacity: 0.75; }100 101  /* Bottom banner */102  .ad-banner {103    position: absolute; bottom: 120px; left: 0; right: 0; height: 160px;104    background: #0a0a0a; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;105    font-size: 50px; font-weight: 800;106  }107  .ad-banner span { font-size: 36px; font-weight: 500; opacity: 0.85; margin-top: 12px; }108 109  /* Home indicator */110  .home-indicator {111    position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);112    width: 360px; height: 14px; border-radius: 14px; background: rgba(255,255,255,0.85);113  }114</style>115</head>116<body>117<div id="render-target">118 119  <div class="statusbar">120    9:58121    <div class="spacer"></div>122    <div class="status-icons">• ◤ ◉ ⌁</div>123  </div>124 125  <div class="sun"></div>126 127  <div class="top-actions">128    <div class="top-left">129      <div class="unicode" aria-label="settings">⚙</div>130      <div class="icon" aria-label="target">131        <svg viewBox="0 0 100 100">132          <circle cx="50" cy="50" r="35"></circle>133          <circle cx="50" cy="50" r="8"></circle>134          <line x1="50" y1="5" x2="50" y2="25"></line>135          <line x1="50" y1="75" x2="50" y2="95"></line>136          <line x1="5" y1="50" x2="25" y2="50"></line>137          <line x1="75" y1="50" x2="95" y2="50"></line>138        </svg>139      </div>140    </div>141    <div class="top-right">142      <div class="icon" aria-label="star">143        <svg viewBox="0 0 100 100">144          <polygon points="50,8 60,38 92,38 66,56 76,88 50,70 24,88 34,56 8,38 40,38"></polygon>145        </svg>146      </div>147      <div class="icon" aria-label="search">148        <svg viewBox="0 0 100 100">149          <circle cx="40" cy="40" r="28"></circle>150          <line x1="62" y1="62" x2="92" y2="92"></line>151        </svg>152      </div>153    </div>154  </div>155 156  <div class="content">157    <div class="temp">87°F</div>158 159    <div class="location-row">160      <div class="chev">161        <svg viewBox="0 0 40 40"><polyline points="26,6 12,20 26,34" stroke="#cfe8ee" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>162      </div>163      <div class="pin">164        <svg viewBox="0 0 60 60">165          <path d="M30 6c-10 0-18 8-18 18 0 12 18 30 18 30s18-18 18-30c0-10-8-18-18-18z" stroke="#cfe8ee" stroke-width="5" fill="none"/>166          <circle cx="30" cy="24" r="6" stroke="#cfe8ee" stroke-width="5" fill="none"/>167        </svg>168      </div>169      <div>Bandhwari Haryana, IN</div>170      <div class="right-chev">171        <svg viewBox="0 0 40 40"><polyline points="14,6 28,20 14,34" stroke="#cfe8ee" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>172      </div>173    </div>174 175    <div class="current-time">Currently: 9:58 AM</div>176 177    <div class="details">178      <div class="detail-icons">179        <div class="img-ph">[IMG: Sunny icon]</div>180        <div class="img-ph">[IMG: Wind gauge]</div>181        <div class="img-ph" style="height:110px;">[IMG: Umbrella]</div>182      </div>183 184      <div class="detail-text">185        <h3>Sunny</h3>186        <p>Cloud cover: 5%</p>187        <p>Gentle breeze W<br>13 mp/h Gusts: 25 mp/h<br>Prob. precipitation: 11%</p>188        <p>Feels like: 96°<br>Max: 93° Min: 82°<br>Humidity: 68%</p>189      </div>190 191      <div class="side-actions">192        <div class="round">193          <svg viewBox="0 0 60 60">194            <line x1="10" y1="18" x2="50" y2="18"></line>195            <line x1="10" y1="30" x2="50" y2="30"></line>196            <line x1="10" y1="42" x2="50" y2="42"></line>197          </svg>198        </div>199        <div class="round">200          <svg viewBox="0 0 60 60">201            <circle cx="30" cy="30" r="22"></circle>202            <line x1="8" y1="30" x2="52" y2="30"></line>203            <line x1="30" y1="8" x2="30" y2="52"></line>204          </svg>205        </div>206        <div class="round">207          <svg viewBox="0 0 60 60">208            <circle cx="18" cy="40" r="6"></circle>209            <circle cx="42" cy="30" r="6"></circle>210            <circle cx="18" cy="20" r="6"></circle>211            <line x1="23" y1="36" x2="37" y2="32"></line>212            <line x1="23" y1="24" x2="37" y2="28"></line>213          </svg>214        </div>215      </div>216    </div>217 218    <div class="forecast">219      <div class="card">220        <div class="img-ph">[IMG: Sun + Cloud + Raindrop]</div>221        <div class="text"><span class="title">From 12:00 PM</span><br>89° Scattered rain</div>222        <div class="chev">223          <svg viewBox="0 0 40 40"><polyline points="14,6 28,20 14,34" stroke="#d8f4fb" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>224        </div>225      </div>226      <div class="card">227        <div class="img-ph">[IMG: Sun + Cloud]</div>228        <div class="text"><span class="title">Tomorrow, Tuesday 8 August</span><br>93° / 82° Partly Cloudy</div>229        <div class="chev">230          <svg viewBox="0 0 40 40"><polyline points="14,6 28,20 14,34" stroke="#d8f4fb" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>231        </div>232      </div>233    </div>234  </div>235 236  <div class="ad-banner">237    Get the PRO version!238    <span>Remove the ads</span>239  </div>240 241  <div class="home-indicator"></div>242</div>243</body>244</html>