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>Drive - Add shortcut</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:#2b2326; color:#eee; font-family: Roboto, Arial, sans-serif;12  }13 14  /* Status bar */15  .status-bar{16    height:110px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;17    color:#e9dfe2; font-weight:600;18  }19  .status-icons{ display:flex; align-items:center; gap:26px; opacity:.9; }20  .dot{ width:16px; height:16px; border-radius:50%; background:#d7c7cc; opacity:.85; }21  .pill{22    width:160px; height:18px; border-radius:10px; background:#cfc4c8; opacity:.6;23  }24 25  /* App bar */26  .app-bar{27    height:220px; padding:10px 36px 0 24px; display:flex; align-items:center; justify-content:space-between;28  }29  .left-pack{ display:flex; align-items:center; gap:26px; }30  .icon-btn{31    width:86px; height:86px; border-radius:50%; display:flex; align-items:center; justify-content:center;32    background: transparent; border:none;33  }34  .icon-btn svg{ fill:#e7d9de; }35  .titles h1{ margin:0; font-size:56px; line-height:1.05; font-weight:700; letter-spacing:.2px;}36  .titles .subtitle{ margin-top:8px; font-size:30px; color:#cdbfc5; }37  .right-pack{ display:flex; align-items:center; gap:20px; }38  .round-rect{39    width:86px; height:86px; border-radius:22px; background:#3a2b30;40    display:flex; align-items:center; justify-content:center;41    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);42  }43  .round-rect svg{ fill:#ead7dd; }44 45  /* Column header */46  .col-header{47    height:96px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;48    color:#d8cacf; border-top:1px solid rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.06);49  }50  .col-header .left{ font-size:30px; letter-spacing:.2px; display:flex; align-items:center; gap:12px; }51  .grid-icon{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:#3a2b30; }52  .grid-icon svg{ fill:#e6d6db; }53 54  /* List */55  .list{ height:1670px; overflow:hidden; }56  .row{57    display:flex; align-items:center; gap:28px;58    padding:30px 32px; border-bottom:1px solid rgba(255,255,255,.05);59  }60  .lead{61    width:110px; height:110px; border-radius:18px; background:#3a2b30; display:flex; align-items:center; justify-content:center;62    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);63  }64  .lead svg{ fill:#d8c9ce; }65  .meta{ flex:1; }66  .name{ font-size:36px; margin:0 0 8px 0; color:#f2e9ec; }67  .sub{ font-size:28px; color:#bcaeb4; display:flex; align-items:center; gap:10px; }68 69  /* Image thumbnail placeholder for photos */70  .thumb{71    width:110px; height:110px; border-radius:18px; background:#E0E0E0;72    border:1px solid #BDBDBD; color:#757575; display:flex; align-items:center; justify-content:center; text-align:center;73    font-size:20px; padding:6px;74  }75 76  /* Bottom action bar */77  .bottom-bar{78    position:absolute; left:0; right:0; bottom:100px; height:180px; background:#3a2b30;79    display:flex; align-items:center; justify-content:space-between; padding:0 44px;80    box-shadow: 0 -2px 16px rgba(0,0,0,.3);81  }82  .action{ font-size:40px; color:#ff9aba; font-weight:600; }83  .gesture{84    position:absolute; left:50%; transform:translateX(-50%);85    bottom:28px; width:320px; height:10px; border-radius:6px; background:#fff; opacity:.9;86  }87</style>88</head>89<body>90<div id="render-target">91 92  <!-- Status bar -->93  <div class="status-bar">94    <div style="display:flex; align-items:center; gap:16px;">95      <span style="font-size:38px; font-weight:700;">10:32</span>96      <div class="dot"></div>97      <div class="dot"></div>98      <div class="dot"></div>99    </div>100    <div class="status-icons">101      <div class="pill"></div>102      <div class="dot"></div>103      <div class="dot"></div>104    </div>105  </div>106 107  <!-- App bar -->108  <div class="app-bar">109    <div class="left-pack">110      <button class="icon-btn" aria-label="Back">111        <svg width="48" height="48" viewBox="0 0 24 24">112          <path d="M15.5 4.5 7 12l8.5 7.5-1.4 1.6L4.8 12l9.3-9.1z"/>113        </svg>114      </button>115      <div class="titles">116        <h1>My Drive</h1>117        <div class="subtitle">Add shortcut to Drive</div>118      </div>119    </div>120    <div class="right-pack">121      <div class="round-rect" title="New folder">122        <svg width="36" height="36" viewBox="0 0 24 24">123          <path d="M10 4l2 2h7a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2h5zm6 7h-3V8h-2v3H8v2h3v3h2v-3h3v-2z"/>124        </svg>125      </div>126    </div>127  </div>128 129  <!-- Column header -->130  <div class="col-header">131    <div class="left">132      <span>Name</span>133      <svg width="24" height="24" viewBox="0 0 24 24" style="fill:#d8cacf;">134        <path d="M7 14l5-5 5 5z"/>135      </svg>136    </div>137    <div class="grid-icon" title="Grid view">138      <svg width="28" height="28" viewBox="0 0 24 24">139        <path d="M3 3h7v7H3V3zm11 0h7v7h-7V3zM3 14h7v7H3v-7zm11 0h7v7h-7v-7z"/>140      </svg>141    </div>142  </div>143 144  <!-- File list -->145  <div class="list">146 147    <!-- Folder -->148    <div class="row">149      <div class="lead">150        <svg width="60" height="60" viewBox="0 0 24 24">151          <path d="M10 4l2 2h7a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2h5z" />152        </svg>153      </div>154      <div class="meta">155        <div class="name">Yoga video</div>156        <div class="sub">157          <svg width="24" height="24" viewBox="0 0 24 24" style="fill:#bcaeb4;">158            <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zM8 11c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05C16.67 13.72 18 14.62 18 16V19h6v-2.5c0-2.33-4.67-3.5-8-3.5z"/>159          </svg>160          Modified 10:02 PM161        </div>162      </div>163    </div>164 165    <!-- actuation_result.txt -->166    <div class="row">167      <div class="lead">168        <svg width="56" height="56" viewBox="0 0 24 24">169          <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm0 1.5L19.5 9H14V3.5z"/>170        </svg>171      </div>172      <div class="meta">173        <div class="name">actuation_result.txt</div>174        <div class="sub">Modified 5:11 PM</div>175      </div>176    </div>177 178    <!-- agents.txt -->179    <div class="row">180      <div class="lead">181        <svg width="56" height="56" viewBox="0 0 24 24">182          <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm0 1.5L19.5 9H14V3.5z"/>183        </svg>184      </div>185      <div class="meta">186        <div class="name">agents.txt</div>187        <div class="sub">Modified 5:11 PM</div>188      </div>189    </div>190 191    <!-- images (1).jpeg -->192    <div class="row">193      <div class="thumb">[IMG: Taco photo]</div>194      <div class="meta">195        <div class="name">images (1).jpeg</div>196        <div class="sub">Modified 5:11 PM</div>197      </div>198    </div>199 200    <!-- Maki-zushi.jpg -->201    <div class="row">202      <div class="thumb">[IMG: Sushi rolls]</div>203      <div class="meta">204        <div class="name">Maki-zushi.jpg</div>205        <div class="sub">Modified 5:11 PM</div>206      </div>207    </div>208 209    <!-- os_info.txt -->210    <div class="row">211      <div class="lead">212        <svg width="56" height="56" viewBox="0 0 24 24">213          <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm0 1.5L19.5 9H14V3.5z"/>214        </svg>215      </div>216      <div class="meta">217        <div class="name">os_info.txt</div>218        <div class="sub">Modified 5:11 PM</div>219      </div>220    </div>221 222    <!-- Outdoor yoga.mp4 -->223    <div class="row">224      <div class="lead" style="background:#5a2d34;">225        <svg width="60" height="60" viewBox="0 0 24 24">226          <path d="M4 6h16v12H4zM9 9l6 3-6 3V9z" />227        </svg>228      </div>229      <div class="meta">230        <div class="name">Outdoor yoga.mp4</div>231        <div class="sub">Modified 5:11 PM</div>232      </div>233    </div>234 235    <!-- Pizza.jpeg -->236    <div class="row">237      <div class="thumb">[IMG: Pizza slice]</div>238      <div class="meta">239        <div class="name">Pizza.jpeg</div>240        <div class="sub">Modified 5:12 PM</div>241      </div>242    </div>243 244    <!-- PXL_20230823... -->245    <div class="row">246      <div class="thumb">[IMG: Flower photo]</div>247      <div class="meta">248        <div class="name">PXL_20230823_092910703.PORTRAIT.j...</div>249        <div class="sub">Modified 5:11 PM</div>250      </div>251    </div>252 253  </div>254 255  <!-- Bottom action bar -->256  <div class="bottom-bar">257    <div class="action">Cancel</div>258    <div class="action">Add</div>259  </div>260 261  <!-- Gesture handle -->262  <div class="gesture"></div>263 264</div>265</body>266</html>