GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Docs Menu - Dark</title>7<style>8  body { margin:0; padding:0; background: transparent; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#201a24; color:#EDE7F6; font-family: Arial, Helvetica, sans-serif;12  }13  .status-bar {14    position:absolute; top:0; left:0; right:0; height:110px;15    background:#18131d; color:#fff; display:flex; align-items:center;16    padding:0 36px; font-size:42px; letter-spacing:0.5px;17  }18  .status-icons { display:flex; gap:28px; align-items:center; }19  .status-icons .dot { width:10px; height:10px; background:#ddd; border-radius:50%; display:inline-block; }20  .icon-battery { width:46px; height:26px; border:3px solid #fff; border-radius:6px; position:relative; }21  .icon-battery::after { content:""; position:absolute; right:-10px; top:6px; width:6px; height:12px; background:#fff; border-radius:2px; }22  .icon-battery .level { position:absolute; left:3px; top:3px; right:10px; bottom:3px; background:#fff; }23  /* Search bar */24  .search-row {25    position:absolute; top:140px; left:36px; right:36px; height:124px;26    display:flex; align-items:center;27  }28  .search-pill {29    width:100%; height:124px; background:#2b2333; border-radius:62px;30    display:flex; align-items:center; padding:0 32px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);31  }32  .left-hamburger { margin-right:24px; }33  .search-text { color:#bfb6c9; font-size:44px; flex:1; }34  .right-actions { display:flex; align-items:center; gap:26px; }35  .avatar { width:86px; height:86px; border-radius:50%; background:#5a4a39; color:#e8e1d8;36            display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:42px; }37  /* Secondary row */38  .info-row {39    position:absolute; top:300px; left:36px; right:36px; height:90px;40    display:flex; align-items:center; justify-content:space-between; color:#b7afbf;41    font-size:38px;42  }43  .info-left { display:flex; align-items:center; gap:18px; }44  .info-right { display:flex; align-items:center; gap:18px; }45  /* Document card above the menu */46  .doc-card {47    position:absolute; top:410px; left:36px; right:36px; height:170px;48    background:#2a2231; border-radius:30px; display:flex; align-items:center; padding:0 32px;49  }50  .doc-icon { width:84px; height:84px; border-radius:12px; background:#3b6ed8; display:flex; align-items:center; justify-content:center; margin-right:26px; }51  .doc-title { font-size:46px; }52  /* Slide-up menu panel */53  .menu-panel {54    position:absolute; top:560px; left:0; right:0;55    background:#251f2b; border-top-left-radius:40px; border-top-right-radius:40px;56    padding-top:22px; padding-bottom:160px;57    box-shadow: 0 -6px 24px rgba(0,0,0,0.35);58  }59  .menu-header {60    margin:0 36px 12px 36px; height:160px; border-radius:32px; background:#2a2231;61    display:flex; align-items:center; padding:0 32px;62  }63  .menu-header .doc-icon { margin-right:28px; }64  .menu-header .title { font-size:46px; color:#fff; }65  .menu-item { height:120px; padding:0 36px; display:flex; align-items:center; gap:30px; font-size:44px; color:#eae4f3; }66  .menu-item svg { width:60px; height:60px; fill:none; stroke:#cfc6d9; stroke-width:6; }67  .divider { height:2px; margin:8px 36px; background:#3a3240; }68  .gesture {69    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);70    width:420px; height:16px; background:#e9e9ea; border-radius:10px; opacity:0.85;71  }72  /* Simple utility icons */73  .svg-fill { fill:#cfc6d9; stroke:none; }74</style>75</head>76<body>77<div id="render-target">78  <!-- Status bar -->79  <div class="status-bar">80    <div class="time">3:04</div>81    <div class="status-icons">82      <span class="dot"></span>83      <span class="dot"></span>84      <!-- magnifier -->85      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2"></circle><line x1="16" y1="16" x2="22" y2="22" stroke="#fff" stroke-width="2"></line></svg>86      <!-- S app badge -->87      <div style="width:26px;height:26px;border:2px solid #fff;border-radius:6px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;">S</div>88      <span class="dot"></span>89      <!-- WiFi -->90      <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" fill="none"></path><path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" fill="none"></path><path d="M9 16c3-2 5-2 8 0" stroke="#fff" stroke-width="2" fill="none"></path><circle cx="12" cy="19" r="1.8" fill="#fff"></circle></svg>91      <!-- Battery -->92      <div class="icon-battery"><div class="level"></div></div>93    </div>94  </div>95 96  <!-- Search bar -->97  <div class="search-row">98    <div class="search-pill">99      <div class="left-hamburger">100        <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#cfc6d9" stroke-width="2" stroke-linecap="round"></path></svg>101      </div>102      <div class="search-text">Search Docs</div>103      <div class="right-actions">104        <!-- folder -->105        <svg viewBox="0 0 24 24"><path d="M3 6h7l2 3h9v9H3z" stroke="#cfc6d9" stroke-width="2" fill="none"></path></svg>106        <div class="avatar">F</div>107      </div>108    </div>109  </div>110 111  <!-- Info row -->112  <div class="info-row">113    <div class="info-left">114      <span>Last opened by me</span>115      <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#b7afbf" stroke-width="2" fill="none" stroke-linecap="round"></path></svg>116    </div>117    <div class="info-right">118      <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" stroke="#b7afbf" stroke-width="2" stroke-linecap="round"></path></svg>119    </div>120  </div>121 122  <!-- Document card preview -->123  <div class="doc-card">124    <div class="doc-icon">125      <svg viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2" ry="2" fill="#cfe0ff"></rect><line x1="8" y1="9" x2="16" y2="9" stroke="#3b6ed8" stroke-width="2"></line></svg>126    </div>127    <div class="doc-title">PVD</div>128  </div>129 130  <!-- Slide-up menu -->131  <div class="menu-panel">132    <div class="menu-header">133      <div class="doc-icon">134        <svg viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2" ry="2" fill="#cfe0ff"></rect><line x1="8" y1="9" x2="16" y2="9" stroke="#3b6ed8" stroke-width="2"></line></svg>135      </div>136      <div class="title">PVD</div>137    </div>138 139    <div class="menu-item">140      <!-- star -->141      <svg viewBox="0 0 24 24"><path class="svg-fill" d="M12 3l3.1 6.3 6.9 1-5 4.7 1.2 6.8L12 18.6 5.8 21.8 7 15.1 2 10.3l6.9-1z"></path></svg>142      <div>Add to Starred</div>143    </div>144 145    <div class="menu-item">146      <!-- share -->147      <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="6" r="3"></circle><circle cx="18" cy="18" r="3"></circle><path d="M8.8 11l6-3M8.8 13l6 3" stroke="#cfc6d9" stroke-width="2"></path></svg>148      <div>Share</div>149    </div>150 151    <div class="menu-item">152      <!-- manage access -->153      <svg viewBox="0 0 24 24"><circle cx="9" cy="8" r="3"></circle><path d="M3 20c0-3.3 4-5 6-5s6 1.7 6 5" stroke="#cfc6d9" stroke-width="2"></path><line x1="18" y1="9" x2="18" y2="15"></line><line x1="15" y1="12" x2="21" y2="12"></line></svg>154      <div>Manage access</div>155    </div>156 157    <div class="menu-item">158      <!-- available offline -->159      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v8M8 12l4 4 4-4" stroke="#cfc6d9" stroke-width="2"></path></svg>160      <div>Available offline</div>161    </div>162 163    <div class="divider"></div>164 165    <div class="menu-item">166      <!-- info -->167      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="8" stroke="#cfc6d9" stroke-width="3"></line><line x1="12" y1="11" x2="12" y2="17"></line></svg>168      <div>Details</div>169    </div>170 171    <div class="menu-item">172      <!-- link -->173      <svg viewBox="0 0 24 24"><path d="M8 14a4 4 0 0 1 0-6l3-3a4 4 0 0 1 6 6l-1 1" stroke="#cfc6d9" stroke-width="2" fill="none"></path><path d="M16 10a4 4 0 0 1 0 6l-3 3a4 4 0 1 1-6-6l1-1" stroke="#cfc6d9" stroke-width="2" fill="none"></path></svg>174      <div>Copy link</div>175    </div>176 177    <div class="menu-item">178      <!-- send -->179      <svg viewBox="0 0 24 24"><path d="M3 12l18-9-6 18-4-7-8-2z" stroke="#cfc6d9" stroke-width="2" fill="none"></path></svg>180      <div>Send a copy</div>181    </div>182 183    <div class="menu-item">184      <!-- make a copy -->185      <svg viewBox="0 0 24 24"><rect x="6" y="7" width="12" height="14" rx="2"></rect><rect x="3" y="3" width="12" height="14" rx="2"></rect></svg>186      <div>Make a copy</div>187    </div>188 189    <div class="menu-item">190      <!-- download -->191      <svg viewBox="0 0 24 24"><path d="M12 5v9M8 10l4 4 4-4" stroke="#cfc6d9" stroke-width="2"></path><path d="M5 19h14" stroke="#cfc6d9" stroke-width="2"></path></svg>192      <div>Download</div>193    </div>194 195    <div class="menu-item">196      <!-- Word icon -->197      <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"></rect><text x="12" y="16" text-anchor="middle" font-size="10" fill="#cfc6d9" font-family="Arial" font-weight="bold">W</text></svg>198      <div>Save as Word (.docx)</div>199    </div>200 201    <div class="divider"></div>202 203    <div class="menu-item">204      <!-- rename -->205      <svg viewBox="0 0 24 24"><path d="M4 17v3h3l11-11-3-3L4 17z" stroke="#cfc6d9" stroke-width="2" fill="none"></path></svg>206      <div>Rename</div>207    </div>208 209    <div class="menu-item" style="opacity:0.9;">210      <!-- shortcut -->211      <svg viewBox="0 0 24 24"><path d="M6 4h12v6H6z" stroke="#cfc6d9" stroke-width="2" fill="none"></path><path d="M6 14h12v6H6z" stroke="#cfc6d9" stroke-width="2" fill="none"></path><path d="M9 10v4" stroke="#cfc6d9" stroke-width="2"></path></svg>212      <div>Add shortcut to Drive</div>213    </div>214  </div>215 216  <!-- Gesture bar -->217  <div class="gesture"></div>218</div>219</body>220</html>