GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI - Options Sheet</title>5<style>6  body { margin:0; padding:0; background:transparent; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#EEF4E9; /* soft pale green from screenshot */11    font-family: Arial, Helvetica, sans-serif;12    color:#222;13  }14 15  /* Status bar */16  .statusbar {17    height:110px;18    padding:0 40px;19    display:flex;20    align-items:center;21    justify-content:space-between;22    color:#2b2b2b;23    font-size:40px;24  }25  .sb-right {26    display:flex; align-items:center; gap:28px;27  }28  .dot, .bar {29    width:18px; height:18px; background:#4a4a4a; border-radius:50%;30  }31  .bar { width:70px; height:18px; border-radius:9px; }32 33  /* Header with thumbnail and title */34  .file-header {35    display:flex; align-items:center;36    padding:30px 40px 20px 40px;37  }38  .thumb {39    width:96px; height:96px;40    background:#E0E0E0; border:1px solid #BDBDBD; border-radius:16px;41    display:flex; align-items:center; justify-content:center;42    color:#757575; font-size:28px;43    margin-right:26px;44  }45  .title { font-size:52px; font-weight:600; }46 47  /* List items */48  .menu {49    margin-top:22px;50  }51  .item {52    height:120px;53    padding:0 40px;54    display:flex; align-items:center;55    gap:36px;56  }57  .item .icon {58    width:60px; height:60px; display:flex; align-items:center; justify-content:center;59  }60  .item .label {61    font-size:44px; color:#1f1f1f;62  }63  .divider {64    height:2px; margin:20px 40px; background:#D8E0D2;65  }66 67  /* Simple outlined grey icons */68  svg { width:60px; height:60px; }69  .ico { stroke:#687066; fill:none; stroke-width:4; }70  .ico-fill { fill:#687066; stroke:none; }71 72  /* Bottom spacing */73  .spacer { height:40px; }74</style>75</head>76<body>77<div id="render-target">78 79  <!-- Status bar -->80  <div class="statusbar">81    <div class="time">10:17</div>82    <div class="sb-right">83      <div class="dot"></div>84      <div class="dot"></div>85      <div class="dot"></div>86      <div class="bar"></div>87    </div>88  </div>89 90  <!-- Header -->91  <div class="file-header">92    <div class="thumb">[IMG: Plant thumbnail]</div>93    <div class="title">Plant</div>94  </div>95 96  <div class="menu">97 98    <div class="item">99      <div class="icon">100        <!-- star outline -->101        <svg viewBox="0 0 24 24"><path class="ico" d="M12 3l3.2 6.5 7.1.8-5.2 4.3 1.7 6.9L12 17l-6.8 4.5 1.7-6.9-5.2-4.3 7.1-.8z"/></svg>102      </div>103      <div class="label">Add to Starred</div>104    </div>105 106    <div class="item">107      <div class="icon">108        <!-- offline check circle -->109        <svg viewBox="0 0 24 24">110          <circle class="ico" cx="12" cy="12" r="9"></circle>111          <path class="ico" d="M7 12l3 3 6-6"></path>112        </svg>113      </div>114      <div class="label">Make available offline</div>115    </div>116 117    <div class="divider"></div>118 119    <div class="item">120      <div class="icon">121        <!-- link icon -->122        <svg viewBox="0 0 24 24">123          <path class="ico" d="M8 12a4 4 0 0 1 4-4h5M8 12a4 4 0 0 0 4 4h5"></path>124          <path class="ico" d="M7 12h4"></path>125        </svg>126      </div>127      <div class="label">Copy link</div>128    </div>129 130    <div class="item">131      <div class="icon">132        <!-- copy icon -->133        <svg viewBox="0 0 24 24">134          <rect class="ico" x="6" y="6" width="10" height="12" rx="2"></rect>135          <rect class="ico" x="10" y="3" width="8" height="10" rx="2"></rect>136        </svg>137      </div>138      <div class="label">Make a copy</div>139    </div>140 141    <div class="item">142      <div class="icon">143        <!-- send icon -->144        <svg viewBox="0 0 24 24">145          <path class="ico" d="M3 12l18-9-6 18-4-7-8-2z"></path>146        </svg>147      </div>148      <div class="label">Send a copy</div>149    </div>150 151    <div class="divider"></div>152 153    <div class="item">154      <div class="icon">155        <!-- open with icon (compass) -->156        <svg viewBox="0 0 24 24">157          <circle class="ico" cx="12" cy="12" r="9"></circle>158          <path class="ico" d="M10 14l4-2-2-4-2 6z"></path>159        </svg>160      </div>161      <div class="label">Open with</div>162    </div>163 164    <div class="item">165      <div class="icon">166        <!-- download icon -->167        <svg viewBox="0 0 24 24">168          <path class="ico" d="M12 4v9"></path>169          <path class="ico" d="M8 10l4 4 4-4"></path>170          <path class="ico" d="M4 19h16"></path>171        </svg>172      </div>173      <div class="label">Download</div>174    </div>175 176    <div class="item">177      <div class="icon">178        <!-- rename pencil -->179        <svg viewBox="0 0 24 24">180          <path class="ico" d="M4 20l5-1 9-9-4-4-9 9-1 5z"></path>181        </svg>182      </div>183      <div class="label">Rename</div>184    </div>185 186    <div class="item">187      <div class="icon">188        <!-- shortcut plus drive box -->189        <svg viewBox="0 0 24 24">190          <rect class="ico" x="6" y="9" width="12" height="8" rx="2"></rect>191          <path class="ico" d="M12 5v6M9 8h6"></path>192        </svg>193      </div>194      <div class="label">Add shortcut to Drive</div>195    </div>196 197    <div class="item">198      <div class="icon">199        <!-- move arrow in box -->200        <svg viewBox="0 0 24 24">201          <rect class="ico" x="4" y="4" width="16" height="16" rx="2"></rect>202          <path class="ico" d="M8 12h8M12 8l4 4-4 4"></path>203        </svg>204      </div>205      <div class="label">Move</div>206    </div>207 208    <div class="item">209      <div class="icon">210        <!-- info circle -->211        <svg viewBox="0 0 24 24">212          <circle class="ico" cx="12" cy="12" r="9"></circle>213          <circle class="ico" cx="12" cy="8" r="1.5"></circle>214          <path class="ico" d="M12 11v6"></path>215        </svg>216      </div>217      <div class="label">Details & activity</div>218    </div>219 220    <div class="item">221      <div class="icon">222        <!-- print icon -->223        <svg viewBox="0 0 24 24">224          <rect class="ico" x="6" y="3" width="12" height="6"></rect>225          <rect class="ico" x="5" y="11" width="14" height="8" rx="2"></rect>226          <path class="ico" d="M8 15h8"></path>227        </svg>228      </div>229      <div class="label">Print</div>230    </div>231 232    <div class="item">233      <div class="icon">234        <!-- add to home screen -->235        <svg viewBox="0 0 24 24">236          <rect class="ico" x="4" y="4" width="16" height="16" rx="3"></rect>237          <path class="ico" d="M12 7v10M7 12h10"></path>238        </svg>239      </div>240      <div class="label">Add to Home screen</div>241    </div>242 243    <div class="item">244      <div class="icon">245        <!-- trash can -->246        <svg viewBox="0 0 24 24">247          <path class="ico" d="M5 7h14"></path>248          <rect class="ico" x="7" y="7" width="10" height="12" rx="2"></rect>249          <path class="ico" d="M10 11v6M14 11v6"></path>250        </svg>251      </div>252      <div class="label">Remove</div>253    </div>254 255    <div class="spacer"></div>256  </div>257 258</div>259</body>260</html>