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>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #E0E0E0;13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 110px; padding: 0 36px;20    display: flex; align-items: center; justify-content: space-between;21    color: #EDEDED; font-size: 36px; letter-spacing: 0.2px;22  }23  .status-right {24    display: flex; align-items: center; gap: 22px; color: #DADADA;25    font-size: 32px;26  }27  .status-icon { display: inline-flex; align-items: center; }28  .status-icon svg { width: 44px; height: 44px; }29 30  /* Top app bar */31  .app-bar {32    position: absolute; top: 120px; left: 0; right: 0;33    height: 100px; padding: 0 36px;34    display: flex; align-items: center; justify-content: space-between;35  }36  .app-left { display: flex; align-items: center; gap: 24px; }37  .app-right { display: flex; align-items: center; gap: 34px; }38  .icon-btn svg { width: 56px; height: 56px; }39  .icon-btn { color: #BDBDBD; }40 41  /* Title and meta */42  .title {43    position: absolute; top: 250px; left: 72px; right: 72px;44    font-size: 64px; font-weight: 800; line-height: 1.2; color: #E6E6E6;45  }46  .meta-row {47    position: absolute; top: 400px; left: 72px; right: 72px;48    display: flex; align-items: center; justify-content: space-between;49  }50  .edited { color: #8C8C8C; font-size: 34px; }51  .calendar-icon svg { width: 50px; height: 50px; color: #8C8C8C; }52 53  .divider {54    position: absolute; top: 470px; left: 72px; right: 72px;55    height: 2px; background: #2A2A2A;56  }57 58  /* Note content */59  .content {60    position: absolute; top: 520px; left: 72px; right: 72px;61    font-size: 48px; color: #BDBDBD;62  }63 64  /* USB debugging modal */65  .modal {66    position: absolute; left: 72px; right: 72px; bottom: 450px;67    background: #1C1C1C; border-radius: 32px;68    box-shadow: 0 20px 40px rgba(0,0,0,0.5);69    padding: 48px 48px 36px;70  }71  .modal h2 {72    margin: 0 0 20px 0; font-size: 54px; font-weight: 800; color: #EFEFEF;73  }74  .modal p {75    margin: 8px 0; font-size: 34px; color: #CFCFCF; line-height: 1.45;76  }77  .checkbox-row {78    display: flex; align-items: center; gap: 20px; margin-top: 26px;79    color: #D8D8D8; font-size: 34px;80  }81  .checkbox {82    width: 40px; height: 40px; border: 2px solid #C7B07A; border-radius: 6px;83    box-sizing: border-box;84  }85  .modal-actions {86    display: flex; justify-content: flex-end; gap: 40px; margin-top: 38px;87    font-size: 40px; color: #D9BC7A;88  }89 90  /* Bottom editing bar */91  .bottom-bar {92    position: absolute; bottom: 140px; left: 0; right: 0;93    height: 120px; padding: 0 36px;94    display: flex; align-items: center; justify-content: space-between;95    background: #0F0F0F; color: #BDBDBD;96    border-top: 1px solid #1E1E1E;97  }98  .aa { font-size: 42px; font-weight: 700; letter-spacing: 0.5px; }99  .edit-btn {100    display: flex; align-items: center; justify-content: center;101    width: 120px; height: 72px; border-radius: 18px;102    background: #151515; border: 1px solid #2A2A2A;103  }104  .edit-btn svg { width: 38px; height: 38px; color: #C8C8C8; }105 106  /* Gesture pill */107  .gesture {108    position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%);109    width: 240px; height: 12px; background: #EDEDED; border-radius: 12px; opacity: 0.9;110  }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Status bar -->117  <div class="status-bar">118    <div class="status-left">3:11</div>119    <div class="status-right">120      <div>72°</div>121      <div>✓✓</div>122      <div>en</div>123      <div>•</div>124      <div class="status-icon">125        <!-- Wi-Fi -->126        <svg viewBox="0 0 24 24" fill="none">127          <path d="M2 8c5-4 15-4 20 0" stroke="#DADADA" stroke-width="2" stroke-linecap="round"/>128          <path d="M5 11c3-3 11-3 14 0" stroke="#DADADA" stroke-width="2" stroke-linecap="round"/>129          <path d="M8 14c2-2 6-2 8 0" stroke="#DADADA" stroke-width="2" stroke-linecap="round"/>130          <circle cx="12" cy="18" r="2" fill="#DADADA"/>131        </svg>132      </div>133      <div class="status-icon">134        <!-- Battery -->135        <svg viewBox="0 0 28 24" fill="none">136          <rect x="2" y="6" width="20" height="12" rx="2" stroke="#E0E0E0" stroke-width="2"/>137          <rect x="4" y="8" width="14" height="8" fill="#E0E0E0"/>138          <rect x="22" y="9" width="4" height="6" rx="1" fill="#E0E0E0"/>139        </svg>140      </div>141    </div>142  </div>143 144  <!-- App bar -->145  <div class="app-bar">146    <div class="app-left">147      <!-- Back arrow -->148      <div class="icon-btn">149        <svg viewBox="0 0 24 24" fill="none">150          <path d="M15 4L7 12l8 8" stroke="#E0E0E0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>151        </svg>152      </div>153    </div>154    <div class="app-right">155      <!-- Ringed dot (reminder) -->156      <div class="icon-btn">157        <svg viewBox="0 0 24 24" fill="none">158          <circle cx="12" cy="12" r="9" stroke="#D7AA55" stroke-width="2"/>159          <circle cx="12" cy="12" r="3" fill="#D7AA55"/>160        </svg>161      </div>162      <!-- Pin -->163      <div class="icon-btn">164        <svg viewBox="0 0 24 24" fill="none">165          <path d="M12 3l5 5-3 3 3 8-5-4-5 4 3-8-3-3 5-5z" stroke="#BDBDBD" stroke-width="2" stroke-linejoin="round" fill="none"/>166        </svg>167      </div>168      <!-- Kebab menu -->169      <div class="icon-btn">170        <svg viewBox="0 0 24 24" fill="#BDBDBD">171          <circle cx="12" cy="5" r="2.2"/>172          <circle cx="12" cy="12" r="2.2"/>173          <circle cx="12" cy="19" r="2.2"/>174        </svg>175      </div>176    </div>177  </div>178 179  <!-- Title -->180  <div class="title">Reminder to buy groceries</div>181 182  <!-- Meta row -->183  <div class="meta-row">184    <div class="edited">Edited: 12-13 13:59</div>185    <div class="calendar-icon">186      <svg viewBox="0 0 24 24" fill="none">187        <rect x="3" y="5" width="18" height="16" rx="2" stroke="#8C8C8C" stroke-width="2"/>188        <path d="M3 9h18" stroke="#8C8C8C" stroke-width="2"/>189        <rect x="7" y="2" width="2" height="4" fill="#8C8C8C"/>190        <rect x="15" y="2" width="2" height="4" fill="#8C8C8C"/>191      </svg>192    </div>193  </div>194 195  <div class="divider"></div>196 197  <!-- Content -->198  <div class="content">Milk, eggs and chicken</div>199 200  <!-- Modal -->201  <div class="modal">202    <h2>Allow USB debugging?</h2>203    <p>The computer's RSA key fingerprint is:</p>204    <p>21:FE:B1:D0:42:22:C5:8B:F6:1D:71:72:06:7C:9:46</p>205    <div class="checkbox-row">206      <div class="checkbox"></div>207      <div>Always allow from this computer</div>208    </div>209    <div class="modal-actions">210      <div>Cancel</div>211      <div>Allow</div>212    </div>213  </div>214 215  <!-- Bottom editing bar -->216  <div class="bottom-bar">217    <div class="aa">Aa</div>218    <div class="edit-btn">219      <svg viewBox="0 0 24 24" fill="none">220        <path d="M4 16l10-10 4 4L8 20H4v-4z" stroke="#C8C8C8" stroke-width="2" fill="none"/>221      </svg>222    </div>223  </div>224 225  <div class="gesture"></div>226 227</div>228</body>229</html>