GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>AccuWeather Drawer UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #262C2F;14  }15 16  /* Right side dimmed main content peek */17  .peek {18    position: absolute;19    right: 0;20    top: 0;21    width: 380px;22    height: 100%;23    background: linear-gradient(180deg, rgba(10,12,15,0.95), rgba(10,12,15,0.95));24  }25  .peek::before {26    content: "";27    position: absolute;28    left: 0;29    top: 520px;30    width: 100%;31    height: 2px;32    background: rgba(160,170,175,0.25);33  }34 35  /* Drawer content */36  .drawer {37    position: absolute;38    left: 0;39    top: 0;40    width: 760px;41    height: 100%;42    padding: 56px 48px 40px 56px;43    box-sizing: border-box;44    color: #E8EDF1;45  }46 47  .brand {48    display: flex;49    align-items: center;50    gap: 20px;51    margin-bottom: 36px;52  }53  .brand .title {54    font-size: 56px;55    font-weight: 700;56    letter-spacing: 0.5px;57  }58  .brand .tagline {59    font-size: 24px;60    color: #97A2A9;61    margin-top: 6px;62  }63 64  /* Promo card */65  .promo-card {66    width: 640px;67    border-radius: 18px;68    overflow: hidden;69    margin-top: 14px;70    margin-bottom: 44px;71    background: #E0E0E0;72    border: 1px solid #BDBDBD;73    position: relative;74  }75  .promo-image {76    height: 280px;77    display: flex;78    align-items: center;79    justify-content: center;80    color: #757575;81    font-weight: 600;82  }83  .promo-cta {84    position: absolute;85    left: 26px;86    bottom: 22px;87    height: 86px;88    width: 360px;89    border-radius: 10px;90    background: linear-gradient(90deg, #20B59F, #1E5A8E);91    display: flex;92    align-items: center;93    justify-content: space-between;94    padding: 0 26px;95    box-sizing: border-box;96    color: #fff;97    font-size: 32px;98    font-weight: 700;99  }100 101  /* Menu sections */102  .menu-group {103    margin-top: 14px;104  }105  .menu-item {106    display: flex;107    align-items: center;108    gap: 24px;109    padding: 22px 0;110    font-size: 38px;111    color: #F3F7FA;112  }113  .menu-item .icon {114    width: 48px;115    height: 48px;116    color: #9AA4AB;117  }118 119  .new-row {120    display: flex;121    align-items: center;122    gap: 18px;123    padding: 20px 0 32px;124  }125  .pill {126    background: #F16522;127    color: #fff;128    font-size: 22px;129    font-weight: 700;130    padding: 8px 16px;131    border-radius: 999px;132  }133  .whats-new {134    font-size: 38px;135    color: #F16522;136    font-weight: 700;137  }138 139  .divider {140    height: 2px;141    background: rgba(160,170,175,0.25);142    margin: 18px 0 26px;143    width: 640px;144  }145 146  .link-item {147    font-size: 34px;148    color: #E6EBEE;149    padding: 24px 0;150  }151 152  .footer {153    position: absolute;154    left: 56px;155    bottom: 64px;156    width: 648px;157    display: flex;158    gap: 20px;159    color: #C8D0D6;160    font-size: 30px;161  }162  .dot {163    width: 8px; height: 8px; background: #C8D0D6; border-radius: 50%; align-self: center;164  }165 166  /* Simple home indicator */167  .home-indicator {168    position: absolute;169    bottom: 18px;170    left: 50%;171    transform: translateX(50%); /* place near right edge since the drawer shifts focus left */172    width: 220px;173    height: 10px;174    background: rgba(255,255,255,0.65);175    border-radius: 6px;176  }177</style>178</head>179<body>180<div id="render-target">181  <div class="drawer">182    <div class="brand">183      <!-- Sun icon -->184      <svg class="icon" width="72" height="72" viewBox="0 0 72 72">185        <circle cx="36" cy="36" r="16" fill="#F16522"></circle>186        <!-- simple rays -->187        <g stroke="#F16522" stroke-width="5" stroke-linecap="round">188          <line x1="36" y1="6" x2="36" y2="0"></line>189          <line x1="36" y1="72" x2="36" y2="66"></line>190          <line x1="6" y1="36" x2="0" y2="36"></line>191          <line x1="72" y1="36" x2="66" y2="36"></line>192          <line x1="13" y1="13" x2="8" y2="8"></line>193          <line x1="59" y1="59" x2="64" y2="64"></line>194          <line x1="13" y1="59" x2="8" y2="64"></line>195          <line x1="59" y1="13" x2="64" y2="8"></line>196        </g>197      </svg>198      <div>199        <div class="title">AccuWeather</div>200        <div class="tagline">Superior Accuracy</div>201      </div>202    </div>203 204    <!-- Promo Banner -->205    <div class="promo-card">206      <div class="promo-image">[IMG: Aurora Promotion Banner]</div>207      <div class="promo-cta">208        <span>Get Premium+</span>209        <svg width="34" height="34" viewBox="0 0 24 24">210          <path d="M8 5l8 7-8 7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>211        </svg>212      </div>213    </div>214 215    <!-- Primary menu -->216    <div class="menu-group">217      <div class="menu-item">218        <svg class="icon" viewBox="0 0 24 24">219          <rect x="3" y="4" width="18" height="14" rx="2" ry="2" fill="none" stroke="currentColor" stroke-width="2"></rect>220          <line x1="6" y1="8" x2="18" y2="8" stroke="currentColor" stroke-width="2"></line>221          <line x1="6" y1="12" x2="14" y2="12" stroke="currentColor" stroke-width="2"></line>222        </svg>223        <span>News</span>224      </div>225      <div class="menu-item">226        <svg class="icon" viewBox="0 0 24 24">227          <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"></circle>228          <polygon points="10,8 16,12 10,16" fill="currentColor"></polygon>229        </svg>230        <span>Video</span>231      </div>232      <div class="menu-item">233        <svg class="icon" viewBox="0 0 24 24">234          <circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2"></circle>235          <g stroke="currentColor" stroke-width="2">236            <path d="M12 3v3"></path>237            <path d="M12 18v3"></path>238            <path d="M3 12h3"></path>239            <path d="M18 12h3"></path>240            <path d="M5.5 5.5l2.1 2.1"></path>241            <path d="M16.4 16.4l2.1 2.1"></path>242            <path d="M18.5 5.5l-2.1 2.1"></path>243            <path d="M7.6 16.4l-2.1 2.1"></path>244          </g>245        </svg>246        <span>Settings</span>247      </div>248    </div>249 250    <!-- What's new -->251    <div class="new-row">252      <div class="pill">NEW</div>253      <div class="whats-new">What's New</div>254    </div>255 256    <div class="divider"></div>257 258    <!-- Secondary links -->259    <div class="link-item">How We Forecast</div>260    <div class="link-item">About AccuWeather</div>261    <div class="link-item">Contact Us</div>262    <div class="link-item">Help</div>263    <div class="link-item">Rate our app</div>264    <div class="link-item">Share Our App</div>265 266    <!-- Footer -->267    <div class="footer">268      <div>Terms of Use</div>269      <div class="dot"></div>270      <div>Privacy Policy</div>271    </div>272  </div>273 274  <div class="peek"></div>275  <div class="home-indicator"></div>276</div>277</body>278</html>