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>AccuWeather Drawer Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #111516;15    color: #E9ECEF;16  }17 18  /* Drawer panel */19  .drawer {20    position: absolute;21    top: 0;22    left: 0;23    width: 820px;24    height: 100%;25    background: #2D3539; /* dark slate */26    box-shadow: 6px 0 24px rgba(0,0,0,0.45);27    padding: 44px 40px 36px 40px;28    box-sizing: border-box;29  }30  .overlay {31    position: absolute; right: 0; top: 0; height: 100%; left: 820px;32    background: rgba(0,0,0,0.55);33  }34 35  /* Header / brand */36  .brand {37    display: flex; align-items: center; gap: 18px;38    margin-bottom: 18px;39  }40  .brand-name {41    font-size: 52px; font-weight: 700; letter-spacing: 0.2px;42  }43  .brand-sub {44    color: #9AA6AD; font-size: 26px; margin-left: 66px; margin-top: -4px;45  }46  .abc-pill {47    margin-left: auto;48    background: #0B0F11;49    color: #B5C0C7;50    border: 1px solid #3E474B;51    font-weight: 700;52    font-size: 24px;53    padding: 6px 12px;54    border-radius: 14px;55  }56 57  /* Upgrade card */58  .upgrade-card {59    margin-top: 28px;60    background: #263136;61    border-radius: 18px;62    padding: 18px;63  }64  .banner-img {65    width: 100%;66    height: 300px;67    background: #E0E0E0;68    border: 1px solid #BDBDBD;69    border-radius: 14px;70    display: flex;71    align-items: center;72    justify-content: center;73    color: #606060;74    font-size: 26px;75    position: relative;76    overflow: hidden;77  }78  .banner-text {79    position: absolute;80    left: 24px;81    top: 24px;82    right: 24px;83    color: #FFFFFF;84    font-size: 44px;85    font-weight: 700;86    line-height: 1.15;87    text-shadow: 0 1px 2px rgba(0,0,0,0.35);88  }89  .cta {90    position: absolute;91    left: 24px;92    bottom: 24px;93    display: inline-flex;94    align-items: center;95    gap: 16px;96    padding: 18px 26px;97    border-radius: 12px;98    background: linear-gradient(90deg, #2DB7A8 0%, #2563A8 100%);99    color: #EAF7F8;100    font-weight: 700;101    font-size: 30px;102  }103 104  /* Menu */105  .menu { margin-top: 42px; }106  .menu-item {107    display: flex; align-items: center; gap: 22px;108    padding: 18px 6px;109    color: #E9ECEF;110    font-size: 40px;111  }112  .menu-item .label-secondary { color: #AEB8BD; font-size: 36px; }113  .menu-item .live-pill {114    margin-left: 14px;115    background: #C51710;116    color: #fff;117    font-size: 22px;118    padding: 6px 14px;119    border-radius: 12px;120    font-weight: 700;121  }122  .menu-item.orange { color: #FF6B00; }123  .new-dot {124    background: #FF6B00; color: #111516; font-weight: 800;125    border-radius: 50px; padding: 6px 12px; font-size: 22px; margin-right: 6px;126  }127 128  .divider { height: 1px; background: #3B4448; margin: 36px 0 30px 0; }129 130  .sub-links .link {131    padding: 24px 6px;132    color: #D9E0E3;133    font-size: 36px;134  }135 136  .footer {137    position: absolute; bottom: 42px; left: 40px; right: 40px;138    color: #C7CED2; font-size: 30px;139    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;140  }141  .dot { width: 6px; height: 6px; background: #C7CED2; border-radius: 50%; display: inline-block; }142 143  /* SVG icon sizing */144  .icon { width: 42px; height: 42px; flex: 0 0 42px; color: #AEB8BD; }145</style>146</head>147<body>148<div id="render-target">149  <div class="drawer">150    <div class="brand">151      <!-- Sun icon -->152      <svg class="icon" viewBox="0 0 24 24">153        <circle cx="12" cy="12" r="4.5" fill="#FF6B00"></circle>154        <g stroke="#FF6B00" stroke-width="1.5" stroke-linecap="round">155          <line x1="12" y1="1.5" x2="12" y2="5"></line>156          <line x1="12" y1="19" x2="12" y2="22.5"></line>157          <line x1="1.5" y1="12" x2="5" y2="12"></line>158          <line x1="19" y1="12" x2="22.5" y2="12"></line>159          <line x1="4.2" y1="4.2" x2="6.8" y2="6.8"></line>160          <line x1="17.2" y1="17.2" x2="19.8" y2="19.8"></line>161          <line x1="17.2" y1="6.8" x2="19.8" y2="4.2"></line>162          <line x1="4.2" y1="19.8" x2="6.8" y2="17.2"></line>163        </g>164      </svg>165      <div>166        <div class="brand-name">AccuWeather</div>167        <div class="brand-sub">Superior Accuracy</div>168      </div>169      <div class="abc-pill">abc7</div>170    </div>171 172    <div class="upgrade-card">173      <div class="banner-img">174        <div>[IMG: Northern Lights Banner]</div>175        <div class="banner-text">Upgrade to a Better Weather Experience</div>176        <div class="cta">Get Premium+ <span style="font-size:34px;">→</span></div>177      </div>178    </div>179 180    <div class="menu">181      <div class="menu-item">182        <!-- Newspaper icon -->183        <svg class="icon" viewBox="0 0 24 24">184          <rect x="3" y="4" width="14" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="1.6"/>185          <rect x="7" y="7" width="8" height="3" fill="currentColor"/>186          <rect x="7" y="12" width="8" height="1.6" fill="currentColor"/>187          <rect x="7" y="15" width="6" height="1.6" fill="currentColor"/>188        </svg>189        <div>News</div>190      </div>191      <div class="menu-item">192        <!-- Play icon -->193        <svg class="icon" viewBox="0 0 24 24">194          <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.6"/>195          <polygon points="10,8 16,12 10,16" fill="currentColor"/>196        </svg>197        <div>Video</div>198        <span class="live-pill">LIVE</span>199      </div>200      <div class="menu-item">201        <!-- Gear icon -->202        <svg class="icon" viewBox="0 0 24 24">203          <circle cx="12" cy="12" r="3.2" fill="none" stroke="currentColor" stroke-width="1.6"/>204          <path d="M12 2.5v2.2M12 19.3v2.2M4.7 4.7l1.6 1.6M17.7 17.7l1.6 1.6M2.5 12h2.2M19.3 12h2.2M4.7 19.3l1.6-1.6M17.7 6.3l1.6-1.6"205                stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round"/>206        </svg>207        <div>Settings</div>208      </div>209 210      <div class="menu-item orange" style="margin-top: 6px;">211        <span class="new-dot">NEW</span>212        <div>What's New</div>213      </div>214    </div>215 216    <div class="divider"></div>217 218    <div class="sub-links">219      <div class="link">How We Forecast</div>220      <div class="link">About AccuWeather</div>221      <div class="link">Contact Us</div>222      <div class="link">Help</div>223      <div class="link">Rate our app</div>224      <div class="link">Share Our App</div>225    </div>226 227    <div class="footer">228      <span>Terms of Use</span>229      <span class="dot"></span>230      <span>Privacy Policy</span>231    </div>232  </div>233  <div class="overlay"></div>234</div>235</body>236</html>