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>Grocery List UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #E0E0E0;16  }17 18  /* Status bar */19  .status-bar {20    height: 120px;21    padding: 32px 40px 0 40px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #EDEDED;26    font-size: 36px;27    opacity: 0.9;28  }29  .status-right {30    display: flex;31    align-items: center;32    gap: 22px;33  }34  .dot {35    width: 10px; height: 10px; background: #DADADA; border-radius: 50%;36    display: inline-block; margin: 0 6px;37  }38 39  /* Top actions */40  .top-actions {41    height: 120px;42    padding: 10px 40px;43    display: flex;44    align-items: center;45    justify-content: space-between;46    color: #CFCFCF;47  }48  .actions-group {49    display: flex;50    gap: 30px;51  }52  .icon-btn {53    width: 76px; height: 76px; border: 2px solid #3A3A3A; border-radius: 18px;54    display: flex; align-items: center; justify-content: center;55  }56  .icon {57    width: 40px; height: 40px;58  }59  .icon path, .icon rect, .icon circle, .icon polyline, .icon line {60    stroke: #CFCFCF; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;61  }62  .back {63    width: 72px; height: 72px; display: flex; align-items: center;64    margin-left: 20px;65  }66 67  /* Content */68  .content {69    padding: 40px 60px;70  }71  .title {72    font-size: 88px;73    font-weight: 500;74    letter-spacing: 0.3px;75    margin: 20px 0 24px 0;76    color: #E3E3E3;77  }78  .note-text {79    font-size: 40px;80    line-height: 1.6;81    color: #C7C7C7;82    max-width: 900px;83  }84 85  /* Bottom toolbar */86  .bottom-toolbar {87    position: absolute;88    left: 0;89    right: 0;90    bottom: 140px;91    height: 120px;92    padding: 0 40px;93    display: flex;94    align-items: center;95    justify-content: space-between;96    color: #CFCFCF;97  }98  .bt-left, .bt-right {99    display: flex; align-items: center; gap: 34px;100  }101  .bt-icon {102    width: 80px; height: 80px; border: 2px solid #3A3A3A; border-radius: 16px;103    display: flex; align-items: center; justify-content: center;104  }105  .edit-time {106    font-size: 34px; color: #AFAFAF;107  }108 109  /* Gesture bar */110  .gesture {111    position: absolute;112    bottom: 60px;113    left: 50%;114    transform: translateX(-50%);115    width: 300px;116    height: 12px;117    background: #FFFFFF;118    border-radius: 12px;119    opacity: 0.85;120  }121</style>122</head>123<body>124<div id="render-target">125 126  <!-- Status bar -->127  <div class="status-bar">128    <div>5:56</div>129    <div class="status-right">130      <!-- Simple placeholders mimicking status icons -->131      <svg width="40" height="24"><circle cx="12" cy="12" r="10" fill="#EDEDED"/></svg>132      <svg width="40" height="24"><circle cx="12" cy="12" r="10" fill="#EDEDED"/></svg>133      <span class="dot"></span>134      <svg width="40" height="24"><polygon points="4,20 20,20 12,4" fill="#EDEDED"/></svg>135      <svg width="40" height="24"><rect x="6" y="6" width="20" height="12" fill="none" stroke="#EDEDED" stroke-width="3"/><rect x="27" y="9" width="6" height="6" fill="#EDEDED"/></svg>136    </div>137  </div>138 139  <!-- Top actions row -->140  <div class="top-actions">141    <div class="back">142      <svg class="icon" viewBox="0 0 48 48">143        <polyline points="30,10 18,24 30,38"></polyline>144      </svg>145    </div>146    <div class="actions-group">147      <div class="icon-btn">148        <!-- Pin -->149        <svg class="icon" viewBox="0 0 48 48">150          <path d="M16 12l16 8-6 2 6 10-6 4-6-10-6 2z"></path>151        </svg>152      </div>153      <div class="icon-btn">154        <!-- Bell -->155        <svg class="icon" viewBox="0 0 48 48">156          <path d="M24 40c3 0 5-2 5-4H19c0 2 2 4 5 4z"></path>157          <path d="M36 30V22c0-6-5-10-12-10s-12 4-12 10v8l-4 4h32l-4-4z"></path>158        </svg>159      </div>160      <div class="icon-btn">161        <!-- Download -->162        <svg class="icon" viewBox="0 0 48 48">163          <path d="M24 10v18"></path>164          <polyline points="16,22 24,30 32,22"></polyline>165          <rect x="10" y="34" width="28" height="6" rx="3"></rect>166        </svg>167      </div>168    </div>169  </div>170 171  <!-- Main Content -->172  <div class="content">173    <div class="title">Grocery List</div>174    <div class="note-text">175      Quinoa, dairy products, fruits and vegetables, and<br>176      lean meats177    </div>178  </div>179 180  <!-- Bottom toolbar -->181  <div class="bottom-toolbar">182    <div class="bt-left">183      <div class="bt-icon">184        <!-- Plus in square -->185        <svg class="icon" viewBox="0 0 48 48">186          <rect x="6" y="6" width="36" height="36" rx="8"></rect>187          <line x1="24" y1="16" x2="24" y2="32"></line>188          <line x1="16" y1="24" x2="32" y2="24"></line>189        </svg>190      </div>191      <div class="bt-icon">192        <!-- Palette -->193        <svg class="icon" viewBox="0 0 48 48">194          <path d="M24 8c10 0 16 6 16 12s-6 6-8 6c-2 0-2 4-6 4-8 0-18-4-18-12S14 8 24 8z"></path>195          <circle cx="16" cy="18" r="2"></circle>196          <circle cx="22" cy="16" r="2"></circle>197          <circle cx="28" cy="18" r="2"></circle>198        </svg>199      </div>200      <div class="bt-icon">201        <!-- Letter A -->202        <svg class="icon" viewBox="0 0 48 48">203          <path d="M12 36l12-24 12 24"></path>204          <line x1="18" y1="24" x2="30" y2="24"></line>205        </svg>206      </div>207    </div>208    <div class="edit-time">Edited 5:55 PM</div>209    <div class="bt-right">210      <!-- Kebab vertical -->211      <svg width="16" height="48" viewBox="0 0 16 48">212        <circle cx="8" cy="8" r="4" fill="#CFCFCF"></circle>213        <circle cx="8" cy="24" r="4" fill="#CFCFCF"></circle>214        <circle cx="8" cy="40" r="4" fill="#CFCFCF"></circle>215      </svg>216    </div>217  </div>218 219  <!-- Gesture bar -->220  <div class="gesture"></div>221 222</div>223</body>224</html>