GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Weather App Drawer - HTML Render</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #2b3e4f;11    border-radius: 0;12  }13  /* Right side underlying app content */14  .app-content {15    position: absolute; right: 0; top: 0;16    width: 1080px; height: 2400px;17    background: #3b4b59;18  }19  .app-content .content-overlay {20    position: absolute; left: 720px; top: 0;21    width: 360px; height: 2400px;22    background: rgba(0,0,0,0.35);23  }24  .app-preview {25    position: absolute; right: 40px; top: 360px;26    width: 320px; height: 800px;27    display: flex; flex-direction: column; gap: 24px;28  }29  .img-ph {30    background: #E0E0E0; border: 1px solid #BDBDBD;31    color: #757575; display: flex; justify-content: center; align-items: center;32    font-size: 28px;33  }34  .img-ph.small { height: 160px; }35  .img-ph.medium { height: 220px; }36  .img-ph.large { height: 280px; }37  /* Drawer */38  .drawer {39    position: absolute; left: 0; top: 0;40    width: 720px; height: 2400px;41    background: linear-gradient(180deg, #0e5a79 0%, #0e5a79 40%, #0d5573 100%);42    color: #ffffff;43    box-shadow: 4px 0 18px rgba(0,0,0,0.35);44  }45  .pattern {46    position: absolute; inset: 0;47    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 3px, transparent 3px 22px);48    opacity: 0.15; pointer-events: none;49  }50  .drawer-header {51    position: relative;52    padding: 40px 36px 24px 36px;53  }54  .sky-banner {55    width: 648px; height: 360px;56    border: 1px solid rgba(255,255,255,0.2);57    background: #E0E0E0;58    display: flex; justify-content: center; align-items: center;59    color: #757575; font-size: 32px; margin-bottom: 24px;60  }61  .location-title { font-size: 54px; font-weight: 600; margin: 0 0 18px 0; }62  .weather-sub { font-size: 40px; opacity: 0.95; }63  .divider {64    height: 6px; background: #f4c63b; margin: 18px 0 0 0;65  }66  .menu {67    padding: 10px 24px 24px 24px;68  }69  .menu-item {70    height: 92px; display: flex; align-items: center;71    gap: 22px; padding: 0 12px;72    border-radius: 10px;73  }74  .menu-item .label { font-size: 36px; letter-spacing: 0.2px; }75  .menu-item:hover { background: rgba(255,255,255,0.06); }76  .menu-spacer { height: 14px; }77  .menu-divider { height: 6px; background: #f4c63b; margin: 18px 0; }78  .badge-new {79    background: #e94b4b; color: #fff; font-size: 26px; font-weight: 700;80    padding: 6px 18px; border-radius: 26px; margin-left: 18px;81  }82  /* Icon base */83  .icon {84    width: 64px; height: 64px; border-radius: 50%;85    border: 2px solid rgba(255,255,255,0.7);86    display: flex; justify-content: center; align-items: center;87  }88  .icon svg { width: 34px; height: 34px; fill: none; stroke: #ffffff; stroke-width: 2.2; }89  .icon.solid svg { fill: #ffffff; stroke: none; }90  .footer-link {91    position: absolute; left: 24px; bottom: 40px;92    display: flex; align-items: center; gap: 20px;93    color: #ffffff; font-size: 36px;94  }95</style>96</head>97<body>98<div id="render-target">99  <!-- Right-side underlying app content preview -->100  <div class="app-content">101    <div class="app-preview">102      <div class="img-ph medium">[IMG: Ad - Running Shoes]</div>103      <div class="img-ph small">[IMG: Weather Chart]</div>104      <div class="img-ph large">[IMG: Forecast Cards]</div>105    </div>106    <div class="content-overlay"></div>107  </div>108 109  <!-- Left navigation drawer -->110  <div class="drawer">111    <div class="pattern"></div>112    <div class="drawer-header">113      <div class="sky-banner">[IMG: Cloudy Sky]</div>114      <div class="location-title">Ystradgynlais</div>115      <div class="weather-sub">62° variable clouds</div>116      <div class="divider"></div>117    </div>118 119    <div class="menu">120      <div class="menu-item">121        <div class="icon">122          <svg viewBox="0 0 24 24">123            <circle cx="11" cy="11" r="7"></circle>124            <line x1="16" y1="16" x2="22" y2="22"></line>125          </svg>126        </div>127        <div class="label">My Locations</div>128      </div>129 130      <div class="menu-item">131        <div class="icon">132          <svg viewBox="0 0 24 24">133            <circle cx="8" cy="10" r="5"></circle>134            <path d="M14 14c2.5 0 4.5-1.8 5-4"></path>135            <path d="M5 18h14"></path>136          </svg>137        </div>138        <div class="label">Weather Ystradgynlais</div>139      </div>140 141      <div class="menu-item">142        <div class="icon">143          <svg viewBox="0 0 24 24">144            <rect x="3" y="5" width="18" height="14" rx="2"></rect>145            <line x1="6" y1="9" x2="18" y2="9"></line>146            <line x1="6" y1="13" x2="18" y2="13"></line>147          </svg>148        </div>149        <div class="label">WeatherRadar</div>150      </div>151 152      <div class="menu-item">153        <div class="icon">154          <svg viewBox="0 0 24 24">155            <path d="M12 3v10"></path>156            <path d="M8 7c0 2 2 6 4 9"></path>157            <circle cx="12" cy="18" r="1.8"></circle>158          </svg>159        </div>160        <div class="label">RainRadar</div>161      </div>162 163      <div class="menu-item">164        <div class="icon">165          <svg viewBox="0 0 24 24">166            <path d="M8 3h8"></path>167            <path d="M8 21h8"></path>168            <path d="M12 5v14"></path>169          </svg>170        </div>171        <div class="label">TemperatureRadar</div>172      </div>173 174      <div class="menu-item">175        <div class="icon">176          <svg viewBox="0 0 24 24">177            <path d="M4 12c3-4 8-4 12 0"></path>178            <path d="M6 16c3-2 7-2 10 0"></path>179          </svg>180        </div>181        <div class="label">WindRadar</div>182      </div>183 184      <div class="menu-item">185        <div class="icon">186          <svg viewBox="0 0 24 24">187            <path d="M12 2l-3 7h6l-5 13 1-8H8z"></path>188          </svg>189        </div>190        <div class="label">LightningRadar</div>191        <div class="badge-new">NEW</div>192      </div>193 194      <div class="menu-item">195        <div class="icon">196          <svg viewBox="0 0 24 24">197            <rect x="3" y="5" width="18" height="14" rx="2"></rect>198            <line x1="6" y1="9" x2="18" y2="9"></line>199            <line x1="6" y1="13" x2="14" y2="13"></line>200          </svg>201        </div>202        <div class="label">WeatherNews</div>203      </div>204 205      <div class="menu-divider"></div>206 207      <div class="menu-item">208        <div class="icon solid">209          <svg viewBox="0 0 24 24">210            <path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>211          </svg>212        </div>213        <div class="label">Remove ads</div>214      </div>215 216      <div class="menu-item">217        <div class="icon">218          <svg viewBox="0 0 24 24">219            <circle cx="12" cy="12" r="7"></circle>220            <path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M17 7l1.4-1.4M5.6 18.4L7 17"></path>221          </svg>222        </div>223        <div class="label">Info & Settings</div>224      </div>225 226      <div class="menu-item">227        <div class="icon">228          <svg viewBox="0 0 24 24">229            <path d="M6 12c0 3 3 6 6 6s6-3 6-6"></path>230            <path d="M12 3v9"></path>231          </svg>232        </div>233        <div class="label">Rate App</div>234      </div>235 236      <div class="menu-item">237        <div class="icon">238          <svg viewBox="0 0 24 24">239            <rect x="3" y="5" width="18" height="14" rx="2"></rect>240            <path d="M3 7l9 6 9-6"></path>241          </svg>242        </div>243        <div class="label">Contact us</div>244      </div>245    </div>246 247    <div class="footer-link">248      <div class="icon">249        <svg viewBox="0 0 24 24">250          <circle cx="12" cy="12" r="9"></circle>251          <path d="M3 12h18M12 3a15 15 0 010 18M12 3a15 15 0 000 18"></path>252        </svg>253      </div>254      <div>weatherandradar.com</div>255    </div>256  </div>257</div>258</body>259</html>