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>Add Your Spot UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14  #render-target {15    position: relative;16    width: 1080px;17    height: 2400px;18    overflow: hidden;19    background-color: #000;20  }21 22  /* Background photo placeholder */23  .bg-photo {24    position: absolute;25    inset: 0;26    background: #E0E0E0;27    border: 1px solid #BDBDBD;28    display: flex;29    align-items: center;30    justify-content: center;31    color: #757575;32    font-size: 36px;33    letter-spacing: 0.5px;34    text-align: center;35  }36  .dark-overlay {37    position: absolute;38    inset: 0;39    background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.6) 100%);40    pointer-events: none;41  }42 43  /* Status bar */44  .status-bar {45    position: absolute;46    top: 20px;47    left: 24px;48    right: 24px;49    height: 80px;50    display: flex;51    align-items: center;52    justify-content: space-between;53    color: #fff;54  }55  .status-left, .status-right {56    display: flex;57    align-items: center;58    gap: 22px;59    font-weight: 600;60    font-size: 40px;61  }62  .status-icon svg {63    display: block;64  }65 66  /* Compass */67  .compass-wrap {68    position: absolute;69    top: 600px;70    left: 50%;71    transform: translateX(-50%);72    width: 420px;73    height: 420px;74  }75  .cardinal {76    position: absolute;77    color: #fff;78    font-weight: 800;79    font-size: 64px;80    letter-spacing: 2px;81  }82  .cardinal.n { top: -84px; left: 50%; transform: translateX(-50%); }83  .cardinal.s { bottom: -84px; left: 50%; transform: translateX(-50%); }84  .cardinal.w { top: 50%; left: -64px; transform: translateY(-50%); }85  .cardinal.e { top: 50%; right: -64px; transform: translateY(-50%); }86 87  /* Headline & copy */88  .headline {89    position: absolute;90    top: 1120px;91    left: 50%;92    transform: translateX(-50%);93    width: 900px;94    text-align: center;95    color: #fff;96    font-weight: 800;97    font-size: 76px;98  }99  .subcopy {100    position: absolute;101    top: 1240px;102    left: 50%;103    transform: translateX(-50%);104    width: 920px;105    text-align: center;106    color: rgba(255,255,255,0.95);107    font-size: 42px;108    line-height: 1.35;109    font-weight: 600;110  }111 112  /* Buttons */113  .buttons {114    position: absolute;115    bottom: 250px;116    left: 50%;117    transform: translateX(-50%);118    width: 940px;119    display: flex;120    flex-direction: column;121    gap: 36px;122  }123  .btn {124    height: 120px;125    border-radius: 30px;126    display: flex;127    align-items: center;128    justify-content: center;129    font-size: 48px;130    font-weight: 800;131    text-align: center;132  }133  .btn.primary {134    background: #19F2C3;135    color: #08342D;136    box-shadow: 0 10px 20px rgba(0,0,0,0.25);137    color: #fff;138  }139  .btn.secondary {140    background: rgba(255,255,255,0.04);141    border: 3px solid rgba(255,255,255,0.65);142    color: #fff;143  }144 145  /* Home indicator */146  .home-indicator {147    position: absolute;148    bottom: 80px;149    left: 50%;150    transform: translateX(-50%);151    width: 200px;152    height: 14px;153    background: rgba(255,255,255,0.75);154    border-radius: 10px;155  }156</style>157</head>158<body>159<div id="render-target">160  <div class="bg-photo">[IMG: Aerial coast background]</div>161  <div class="dark-overlay"></div>162 163  <!-- Status Bar -->164  <div class="status-bar">165    <div class="status-left">166      <div>10:10</div>167      <div class="status-icon">168        <!-- small dotted icon -->169        <svg width="40" height="40" viewBox="0 0 24 24">170          <circle cx="6" cy="12" r="2" fill="#fff"/>171          <circle cx="12" cy="12" r="2" fill="#fff"/>172          <circle cx="18" cy="12" r="2" fill="#fff"/>173        </svg>174      </div>175      <div class="status-icon">176        <!-- upload arrow -->177        <svg width="40" height="40" viewBox="0 0 24 24">178          <path d="M12 4l4 4h-3v8h-2V8H8l4-4z" fill="#fff"/>179        </svg>180      </div>181      <div class="status-icon">182        <!-- small dot -->183        <svg width="14" height="14" viewBox="0 0 10 10">184          <circle cx="5" cy="5" r="3" fill="#fff"/>185        </svg>186      </div>187    </div>188    <div class="status-right">189      <div class="status-icon">190        <!-- Wi-Fi -->191        <svg width="44" height="44" viewBox="0 0 24 24">192          <path d="M12 18.5c.9 0 1.6.7 1.6 1.5s-.7 1.5-1.6 1.5-1.6-.7-1.6-1.5.7-1.5 1.6-1.5z" fill="#fff"/>193          <path d="M4.2 12.9c4.9-4.2 10.8-4.2 15.7 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>194          <path d="M7 15.5c3.1-2.6 6.9-2.6 10 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>195        </svg>196      </div>197      <div class="status-icon">198        <!-- Battery -->199        <svg width="44" height="44" viewBox="0 0 28 24">200          <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>201          <rect x="4" y="8" width="12" height="8" fill="#fff"/>202          <rect x="22" y="9" width="4" height="6" rx="1" fill="#fff"/>203        </svg>204      </div>205    </div>206  </div>207 208  <!-- Compass -->209  <div class="compass-wrap">210    <svg width="420" height="420" viewBox="0 0 420 420">211      <!-- outer circle -->212      <circle cx="210" cy="210" r="150" stroke="#fff" stroke-width="16" fill="none"/>213      <!-- ticks at N/E/S/W -->214      <path d="M210 48 l16 32 h-32z" fill="#fff"/>215      <path d="M372 210 l-32 16 v-32z" fill="#fff"/>216      <path d="M210 372 l-16 -32 h32z" fill="#fff"/>217      <path d="M48 210 l32 -16 v32z" fill="#fff"/>218      <!-- compass needle -->219      <polygon points="210,120 240,210 210,300 180,210" fill="#fff" opacity="0.95"/>220      <polygon points="210,160 226,210 210,260 194,210" fill="#0D1D1A"/>221    </svg>222    <div class="cardinal n">N</div>223    <div class="cardinal s">S</div>224    <div class="cardinal w">W</div>225    <div class="cardinal e">E</div>226  </div>227 228  <!-- Headline and copy -->229  <div class="headline">Add Your Spot</div>230  <div class="subcopy">Allow Location Services to find your location or open weather map</div>231 232  <!-- Buttons -->233  <div class="buttons">234    <div class="btn primary">Find nearest spot</div>235    <div class="btn secondary">Open weather map</div>236  </div>237 238  <!-- Home indicator -->239  <div class="home-indicator"></div>240</div>241</body>242</html>