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">6<title>Mock UI</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: #000000;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    font-size: 36px;26    letter-spacing: 0.2px;27  }28  .status-left { display: flex; align-items: center; gap: 18px; }29  .status-right { display: flex; align-items: center; gap: 24px; }30  .icon-mini svg { display: block; }31 32  /* App bar */33  .app-bar {34    height: 120px;35    padding: 0 32px;36    display: flex;37    align-items: center;38    justify-content: space-between;39  }40  .app-left { display: flex; align-items: center; gap: 22px; }41  .app-title {42    display: flex;43    align-items: center;44    gap: 10px;45    font-size: 48px;46    font-weight: 700;47  }48  .app-actions { display: flex; align-items: center; gap: 24px; }49 50  /* Reminder block */51  .reminder {52    padding: 12px 32px 0 32px;53  }54  .reminder-row {55    display: flex;56    align-items: flex-start;57    justify-content: space-between;58  }59  .reminder-left {60    display: flex;61    align-items: center;62    gap: 22px;63  }64  .checkbox-icon svg { display: block; }65  .reminder-text {66    display: flex;67    flex-direction: column;68    gap: 12px;69  }70  .due-line {71    display: flex;72    align-items: center;73    gap: 12px;74    color: #FF9800;75    font-size: 36px;76    font-weight: 800;77  }78  .repeat-line {79    display: flex;80    align-items: center;81    gap: 12px;82    color: #BDBDBD;83    font-size: 30px;84    font-weight: 500;85  }86 87  /* Content */88  .content {89    padding: 36px 32px 0 32px;90  }91  .note-title {92    font-size: 72px;93    font-weight: 800;94    margin: 24px 0 18px 0;95    color: #FFFFFF;96  }97  .note-body {98    font-size: 42px;99    color: #CFCFCF;100  }101 102  /* Bottom toolbar */103  .bottom-bar {104    position: absolute;105    left: 0;106    right: 0;107    bottom: 120px;108    height: 120px;109    padding: 0 60px;110    display: flex;111    align-items: center;112    gap: 80px;113    color: #BDBDBD;114  }115  .bottom-bar svg { display: block; }116  .nav-pill {117    position: absolute;118    left: 50%;119    transform: translateX(-50%);120    bottom: 40px;121    width: 300px;122    height: 12px;123    background: #FFFFFF;124    border-radius: 8px;125    opacity: 0.95;126  }127 128  /* Helpers */129  .icon { width: 56px; height: 56px; }130  .icon-lg { width: 64px; height: 64px; }131  .icon-sm { width: 44px; height: 44px; }132  .muted { color: #9E9E9E; }133</style>134</head>135<body>136<div id="render-target">137 138  <!-- Status Bar -->139  <div class="status-bar">140    <div class="status-left">141      <div>2:57</div>142      <!-- Simple status glyphs -->143      <div class="icon-mini">144        <svg width="38" height="38" viewBox="0 0 24 24">145          <path d="M3 17h18M6 12h12M9 7h6" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" opacity="0.85"/>146        </svg>147      </div>148    </div>149    <div class="status-right">150      <div class="icon-mini">151        <svg width="38" height="38" viewBox="0 0 24 24">152          <path d="M3 10a9 9 0 0 1 18 0" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.85"/>153          <circle cx="12" cy="16" r="2" fill="#FFFFFF" opacity="0.85"/>154        </svg>155      </div>156      <div class="icon-mini">157        <svg width="38" height="38" viewBox="0 0 24 24">158          <rect x="3" y="7" width="18" height="10" rx="2" stroke="#FFFFFF" stroke-width="2" fill="none"/>159          <rect x="15" y="9" width="5" height="6" fill="#FFFFFF"/>160        </svg>161      </div>162    </div>163  </div>164 165  <!-- App Bar -->166  <div class="app-bar">167    <div class="app-left">168      <svg class="icon" viewBox="0 0 24 24">169        <path d="M15 18l-6-6 6-6" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>170      </svg>171      <div class="app-title"><span>👋</span><span>Welcome</span>172        <svg class="icon-sm" viewBox="0 0 24 24">173          <path d="M6 9l6 6 6-6" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>174        </svg>175      </div>176    </div>177    <div class="app-actions">178      <svg class="icon" viewBox="0 0 24 24">179        <circle cx="12" cy="5" r="2" fill="#FFFFFF"/>180        <circle cx="12" cy="12" r="2" fill="#FFFFFF"/>181        <circle cx="12" cy="19" r="2" fill="#FFFFFF"/>182      </svg>183    </div>184  </div>185 186  <!-- Reminder -->187  <div class="reminder">188    <div class="reminder-row">189      <div class="reminder-left">190        <div class="checkbox-icon">191          <svg class="icon-lg" viewBox="0 0 24 24">192            <rect x="3" y="3" width="18" height="18" rx="2" stroke="#9E9E9E" stroke-width="2" fill="none"/>193          </svg>194        </div>195        <div class="reminder-text">196          <div class="due-line">197            <svg class="icon-sm" viewBox="0 0 24 24">198              <circle cx="12" cy="12" r="8" stroke="#FF9800" stroke-width="2" fill="none"/>199              <path d="M12 12V8M12 12l4 2" stroke="#FF9800" stroke-width="2" stroke-linecap="round"/>200            </svg>201            <span>2 days later, Aug 13, 06:00PM</span>202          </div>203          <div class="repeat-line">204            <svg class="icon-sm" viewBox="0 0 24 24">205              <path d="M6 9a6 6 0 1 1 0 6M6 9V6l-3 3" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>206            </svg>207            <span>Daily</span>208          </div>209        </div>210      </div>211      <div class="app-actions">212        <svg class="icon-lg" viewBox="0 0 24 24">213          <path d="M6 4v16M6 4h10l-3 4 3 4H6" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>214        </svg>215      </div>216    </div>217  </div>218 219  <!-- Content -->220  <div class="content">221    <div class="note-title">Rent is due</div>222    <div class="note-body">its a new month</div>223  </div>224 225  <!-- Bottom toolbar -->226  <div class="bottom-bar">227    <!-- Tag icon -->228    <svg class="icon-lg" viewBox="0 0 24 24">229      <path d="M3 12l9-9h6l3 3v6l-9 9-9-9z" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linejoin="round"/>230      <circle cx="16" cy="8" r="2" fill="#BDBDBD"/>231    </svg>232    <!-- List icon -->233    <svg class="icon-lg" viewBox="0 0 24 24">234      <circle cx="5" cy="6" r="2" fill="#BDBDBD"/>235      <circle cx="5" cy="12" r="2" fill="#BDBDBD"/>236      <circle cx="5" cy="18" r="2" fill="#BDBDBD"/>237      <path d="M10 6h10M10 12h10M10 18h10" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"/>238    </svg>239    <!-- Image icon -->240    <svg class="icon-lg" viewBox="0 0 24 24">241      <rect x="3" y="4" width="18" height="16" rx="2" stroke="#BDBDBD" stroke-width="2" fill="none"/>242      <circle cx="9" cy="9" r="2" fill="#BDBDBD"/>243      <path d="M4 18l6-5 4 3 6-6 1 8H4z" fill="#BDBDBD" opacity="0.5"/>244    </svg>245  </div>246 247  <!-- Navigation pill -->248  <div class="nav-pill"></div>249 250</div>251</body>252</html>