GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Menu</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#5c4a33; /* app dark sepia background */10  }11 12  /* Status bar */13  .status-bar {14    position:absolute; left:0; top:0; width:100%; height:120px;15    background:#3f3426; color:#fff; display:flex; align-items:center; justify-content:space-between;16    padding:0 40px; box-sizing:border-box;17  }18  .status-right { display:flex; align-items:center; gap:30px; }19  .status-text { font-size:42px; letter-spacing:1px; }20 21  /* App bar */22  .app-bar {23    position:absolute; left:0; top:120px; width:100%; height:160px;24    background:#6a583d; color:#e9e4d6; display:flex; align-items:center; justify-content:space-between;25    padding:0 36px; box-sizing:border-box;26  }27  .app-left { display:flex; align-items:center; gap:28px; }28  .app-title { font-size:56px; font-weight:700; }29  .app-right { display:flex; align-items:center; gap:40px; }30  .icon { width:54px; height:54px; fill:none; stroke:#e9e4d6; stroke-width:4; }31  .icon.solid { fill:#e9e4d6; stroke:none; }32 33  /* Note content behind sheet */34  .note-area {35    position:absolute; left:0; top:280px; width:100%; height:480px;36    background:#6a583d; color:#111; padding:40px; box-sizing:border-box;37  }38  .note-text { font-size:64px; color:#111; }39 40  /* Overlay sheet */41  .sheet {42    position:absolute; left:0; top:420px; width:100%; height:1860px;43    background:#ffffff; border-top-left-radius:0; border-top-right-radius:0;44    box-shadow:0 -6px 20px rgba(0,0,0,0.25);45  }46  .sheet-header {47    position:absolute; right:40px; top:40px;48    width:72px; height:72px; display:flex; align-items:center; justify-content:center;49    border-radius:36px; color:#6a6a6a;50  }51  .menu {52    position:absolute; left:0; top:140px; width:100%;53  }54  .menu-item {55    display:flex; align-items:center; gap:36px; padding:44px 48px;56    border-bottom:1px solid #eeeeee; color:#2c2c2c;57  }58  .menu-item .mi-icon { width:60px; height:60px; stroke:#2c2c2c; stroke-width:4; fill:none; }59  .menu-item .mi-icon.solid { fill:#2c2c2c; stroke:none; }60  .menu-item span { font-size:52px; }61 62  /* Bottom gesture pill */63  .gesture {64    position:absolute; left:50%; transform:translateX(-50%);65    bottom:26px; width:420px; height:16px; background:#cfcfcf; border-radius:16px;66  }67</style>68</head>69<body>70<div id="render-target">71 72  <!-- Status Bar -->73  <div class="status-bar">74    <div class="status-text">3:20</div>75    <div class="status-right">76      <!-- Wi-Fi icon -->77      <svg class="icon" viewBox="0 0 24 24">78        <path d="M2 8c5-5 13-5 18 0"></path>79        <path d="M5 11c3.5-3.5 10.5-3.5 14 0"></path>80        <path d="M8 14c2-2 6-2 8 0"></path>81        <circle cx="12" cy="17.5" r="1.7" fill="#e9e4d6" stroke="none"></circle>82      </svg>83      <!-- Battery/bolt icon -->84      <svg class="icon" viewBox="0 0 24 24">85        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#e9e4d6"></rect>86        <rect x="20" y="9" width="2" height="6" fill="#e9e4d6" stroke="none"></rect>87        <path d="M11 8l-2 5h3l-2 5 6-8h-3l2-2z" class="solid"></path>88      </svg>89    </div>90  </div>91 92  <!-- App Bar -->93  <div class="app-bar">94    <div class="app-left">95      <!-- Back Arrow -->96      <svg class="icon" viewBox="0 0 24 24">97        <path d="M15 5l-7 7 7 7"></path>98      </svg>99      <div class="app-title">Title</div>100    </div>101    <div class="app-right">102      <!-- Alarm -->103      <svg class="icon" viewBox="0 0 24 24">104        <circle cx="12" cy="13" r="6"></circle>105        <path d="M12 13V9"></path>106        <path d="M5 6l3-3"></path>107        <path d="M19 6l-3-3"></path>108      </svg>109      <!-- Person add -->110      <svg class="icon" viewBox="0 0 24 24">111        <circle cx="8" cy="9" r="4"></circle>112        <path d="M2 20c1.5-3.5 5-5 8-5s6.5 1.5 8 5"></path>113        <path d="M19 8v5"></path>114        <path d="M16.5 10.5h5"></path>115      </svg>116      <!-- Kebab menu -->117      <svg class="icon" viewBox="0 0 24 24">118        <circle cx="12" cy="5" r="2" class="solid"></circle>119        <circle cx="12" cy="12" r="2" class="solid"></circle>120        <circle cx="12" cy="19" r="2" class="solid"></circle>121      </svg>122    </div>123  </div>124 125  <!-- Note Content -->126  <div class="note-area">127    <div class="note-text">Modeling</div>128  </div>129 130  <!-- Overlay Sheet -->131  <div class="sheet">132    <div class="sheet-header">133      <!-- Close X -->134      <svg class="icon" viewBox="0 0 24 24">135        <path d="M5 5l14 14"></path>136        <path d="M19 5L5 19"></path>137      </svg>138    </div>139 140    <div class="menu">141      <div class="menu-item">142        <!-- Export / Share -->143        <svg class="mi-icon" viewBox="0 0 24 24">144          <path d="M12 5l6 6"></path>145          <path d="M12 5v9"></path>146          <path d="M18 11v6H6V7h6"></path>147        </svg>148        <span>Export</span>149      </div>150 151      <div class="menu-item">152        <!-- Set Reminder / Clock -->153        <svg class="mi-icon" viewBox="0 0 24 24">154          <circle cx="12" cy="12" r="7"></circle>155          <path d="M12 12V8"></path>156          <path d="M12 12l4 2"></path>157        </svg>158        <span>Set Reminder</span>159      </div>160 161      <div class="menu-item">162        <!-- Shortcuts / Wand -->163        <svg class="mi-icon" viewBox="0 0 24 24">164          <path d="M4 20l10-10"></path>165          <path d="M16 4l2 2"></path>166          <path d="M20 8l2 2"></path>167          <path d="M12 2l2 2"></path>168        </svg>169        <span>Shortcuts</span>170      </div>171 172      <div class="menu-item">173        <!-- Favorite Star -->174        <svg class="mi-icon" viewBox="0 0 24 24">175          <path d="M12 3l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path>176        </svg>177        <span>Make Favorite</span>178      </div>179 180      <div class="menu-item">181        <!-- Info -->182        <svg class="mi-icon" viewBox="0 0 24 24">183          <circle cx="12" cy="12" r="9"></circle>184          <circle cx="12" cy="8" r="1.5" class="solid"></circle>185          <path d="M12 11v6"></path>186        </svg>187        <span>Info</span>188      </div>189 190      <div class="menu-item">191        <!-- Tags -->192        <svg class="mi-icon" viewBox="0 0 24 24">193          <path d="M3 12l9-9h6l-9 9-6 6v-6z"></path>194          <circle cx="16" cy="6" r="2"></circle>195        </svg>196        <span>Tags</span>197      </div>198 199      <div class="menu-item">200        <!-- Picture in picture -->201        <svg class="mi-icon" viewBox="0 0 24 24">202          <rect x="3" y="5" width="18" height="14" rx="2" ry="2"></rect>203          <rect x="12" y="10" width="7" height="5"></rect>204        </svg>205        <span>Picture in picture</span>206      </div>207 208      <div class="menu-item">209        <!-- Lock -->210        <svg class="mi-icon" viewBox="0 0 24 24">211          <rect x="6" y="11" width="12" height="9" rx="2" ry="2"></rect>212          <path d="M9 11V8a3 3 0 016 0v3"></path>213        </svg>214        <span>Lock</span>215      </div>216 217      <div class="menu-item">218        <!-- Print -->219        <svg class="mi-icon" viewBox="0 0 24 24">220          <rect x="6" y="3" width="12" height="6"></rect>221          <rect x="5" y="10" width="14" height="7" rx="2" ry="2"></rect>222          <rect x="7" y="18" width="10" height="3"></rect>223        </svg>224        <span>Print</span>225      </div>226 227      <div class="menu-item">228        <!-- Search -->229        <svg class="mi-icon" viewBox="0 0 24 24">230          <circle cx="11" cy="11" r="5"></circle>231          <path d="M16 16l5 5"></path>232        </svg>233        <span>Search in Note</span>234      </div>235 236      <div class="menu-item">237        <!-- Copy -->238        <svg class="mi-icon" viewBox="0 0 24 24">239          <rect x="8" y="8" width="10" height="12"></rect>240          <rect x="4" y="4" width="10" height="12"></rect>241        </svg>242        <span>Copy</span>243      </div>244    </div>245  </div>246 247  <div class="gesture"></div>248</div>249</body>250</html>