GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Drive Delete Dialog</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;}8  #render-target{9    width:1080px;height:2400px;position:relative;overflow:hidden;10    background:#0f1217;color:#e7e9ee;11  }12 13  /* Status bar */14  .statusbar{position:absolute;left:0;top:0;width:100%;height:96px;color:#d7dae0;}15  .statusbar .time{position:absolute;left:44px;top:22px;font-size:38px;letter-spacing:1px;}16  .statusbar .icons{position:absolute;right:34px;top:26px;display:flex;gap:28px;align-items:center;}17  .statusbar .dot{width:16px;height:16px;border-radius:50%;background:#bfc7d3;opacity:.9;}18  .battery{19    width:42px;height:22px;border:2px solid #c6cbd4;border-radius:5px;position:relative;20  }21  .battery:after{22    content:"";position:absolute;right:-8px;top:6px;width:6px;height:10px;background:#c6cbd4;border-radius:2px;23  }24  .battery .level{position:absolute;left:4px;top:4px;height:12px;width:26px;background:#c6cbd4;border-radius:2px;}25 26  /* Search */27  .searchbar{28    position:absolute;left:36px;top:118px;width:1008px;height:114px;background:#1b212a;29    border-radius:60px;display:flex;align-items:center;padding:0 28px;box-shadow:0 2px 0 rgba(255,255,255,0.04) inset;30  }31  .searchbar .hamburger{width:52px;height:52px;margin-right:24px;}32  .searchbar .hamburger svg{width:100%;height:100%;}33  .searchbar .placeholder{font-size:38px;color:#9aa3b2;flex:1;}34  .searchbar .avatar{35    width:96px;height:96px;border-radius:50%;background:#2a3140;color:#c9d5ff;36    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:44px;margin-left:18px;37  }38 39  /* Top tabs */40  .tabs{position:absolute;left:60px;top:262px;display:flex;gap:80px;align-items:flex-end;}41  .tab{font-size:44px;color:#9aa3b2;padding-bottom:18px;}42  .tab.active{color:#c7d6ff;border-bottom:4px solid #85a3ff;}43 44  /* sort row */45  .sortrow{position:absolute;left:60px;top:360px;right:60px;height:64px;display:flex;align-items:center;}46  .sortrow .title{font-size:36px;color:#aeb6c3;}47  .sortrow .right{margin-left:auto;display:flex;align-items:center;gap:28px;}48  .icon-btn{width:56px;height:56px;border-radius:14px;background:#1a2029;display:flex;align-items:center;justify-content:center;}49  .icon-btn svg{width:36px;height:36px;fill:#cdd2db;}50 51  /* Grid area */52  .grid{position:absolute;left:40px;top:448px;right:40px;bottom:260px;}53  .tile{54    position:absolute;width:444px;height:348px;background:#171b22;border-radius:26px;55    box-shadow:0 0 0 1px rgba(255,255,255,0.04) inset;56  }57  .tile .tile-head{position:absolute;left:26px;top:26px;display:flex;align-items:center;gap:16px;}58  .tile .name{position:absolute;left:36px;bottom:26px;font-size:38px;color:#cfd6e2;}59  .kebab{position:absolute;right:20px;top:24px;width:16px;height:60px;display:flex;flex-direction:column;justify-content:space-between;}60  .dotv{width:10px;height:10px;border-radius:50%;background:#8f97a4;}61  .folder-ico{62    width:90px;height:66px;border-radius:10px;background:#93a2ff;position:relative;box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;63  }64  .folder-ico:before{65    content:"";position:absolute;left:8px;top:-14px;width:48px;height:24px;border-radius:6px;background:#93a2ff;66  }67  .doc-ico{width:64px;height:78px;background:#8fb1ff;border-radius:8px;position:relative;}68  .doc-ico:after{content:"";position:absolute;left:8px;top:40px;right:8px;height:8px;background:#e8f0ff;border-radius:4px;box-shadow:0 16px 0 #e8f0ff, 0 32px 0 #e8f0ff;}69  .form-ico{width:64px;height:78px;background:#c183ff;border-radius:8px;position:relative;}70  .form-ico:after{content:"";position:absolute;left:10px;top:14px;right:10px;height:8px;background:#efe6ff;border-radius:4px;box-shadow:0 16px 0 #efe6ff, 0 32px 0 #efe6ff;}71  .list-ico{width:64px;height:78px;background:#6ed0ff;border-radius:8px;position:relative;}72  .list-ico:after{content:"";position:absolute;left:10px;top:14px;right:10px;height:8px;background:#e7fbff;border-radius:4px;box-shadow:0 16px 0 #e7fbff, 0 32px 0 #e7fbff;}73 74  /* Floating action button */75  .fab{76    position:absolute;right:40px;bottom:264px;width:144px;height:144px;border-radius:50%;77    background:#2a3242;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px rgba(0,0,0,.45);78  }79  .fab span{font-size:110px;line-height:0;color:#b9c7ff;margin-top:-8px;}80 81  /* Bottom nav */82  .bottomnav{83    position:absolute;left:0;right:0;bottom:0;height:180px;background:#0d1015;border-top:1px solid #222835;84    display:flex;justify-content:space-around;align-items:center;85  }86  .navitem{display:flex;flex-direction:column;align-items:center;gap:10px;color:#9da7b6;font-size:34px;}87  .navitem .ico{width:62px;height:62px;border-radius:16px;background:#1a2029;display:flex;align-items:center;justify-content:center;}88  .navitem .ico svg{width:38px;height:38px;fill:#cfd6e1;}89  .navitem.active{color:#e6ecff;}90  .navitem.active .ico{background:#2a3346;}91 92  /* Overlay + dialog */93  .overlay{94    position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.45);95  }96  .dialog{97    position:absolute;left:60px;top:980px;width:960px;background:#1c2230;border-radius:42px;98    padding:56px 48px 40px;color:#e3e7f2;box-shadow:0 12px 40px rgba(0,0,0,.55);99  }100  .dialog .title{font-size:54px;margin-bottom:26px;}101  .dialog .msg{font-size:40px;line-height:58px;color:#cfd5df;margin-bottom:46px;}102  .dialog .actions{display:flex;justify-content:flex-end;gap:52px;}103  .btn{font-size:42px;color:#b9c2d1;}104  .btn.primary{color:#aebfff;}105 106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Status Bar -->112  <div class="statusbar">113    <div class="time">10:07</div>114    <div class="icons">115      <div class="dot"></div>116      <div class="dot" style="background:#e6e9ef;"></div>117      <div class="battery"><div class="level"></div></div>118    </div>119  </div>120 121  <!-- Search Bar -->122  <div class="searchbar">123    <div class="hamburger">124      <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="2" fill="#cfd6df"></rect><rect x="3" y="11" width="18" height="2" fill="#cfd6df"></rect><rect x="3" y="17" width="18" height="2" fill="#cfd6df"></rect></svg>125    </div>126    <div class="placeholder">Search in Drive</div>127    <div class="avatar">C</div>128  </div>129 130  <!-- Tabs -->131  <div class="tabs">132    <div class="tab active">My Drive</div>133    <div class="tab">Computers</div>134  </div>135 136  <!-- Sorting Row -->137  <div class="sortrow">138    <div class="title">Name ↑</div>139    <div class="right">140      <div class="icon-btn">141        <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="2"></rect><rect x="4" y="11" width="16" height="2"></rect><rect x="4" y="16" width="16" height="2"></rect></svg>142      </div>143    </div>144  </div>145 146  <!-- Grid Items -->147  <div class="grid">148    <!-- Row 1 -->149    <div class="tile" style="left:40px;top:92px;">150      <div class="tile-head">151        <div class="folder-ico"></div>152      </div>153      <div class="kebab"><div class="dotv"></div><div class="dotv"></div><div class="dotv"></div></div>154      <div class="name">Backup</div>155    </div>156 157    <div class="tile" style="left:536px;top:92px;">158      <div class="tile-head">159        <div class="doc-ico"></div>160      </div>161      <div class="kebab"><div class="dotv"></div><div class="dotv"></div><div class="dotv"></div></div>162      <div class="name">BACKUP_REMINDER_M...</div>163    </div>164 165    <!-- Row 2 -->166    <div class="tile" style="left:40px;top:494px;">167      <div class="tile-head">168        <div class="list-ico"></div>169      </div>170      <div class="kebab"><div class="dotv"></div><div class="dotv"></div><div class="dotv"></div></div>171      <div class="name">Movies</div>172    </div>173 174    <div class="tile" style="left:536px;top:494px;">175      <div class="tile-head">176        <div class="form-ico"></div>177      </div>178      <div class="kebab"><div class="dotv"></div><div class="dotv"></div><div class="dotv"></div></div>179      <div class="name">My Doc</div>180    </div>181  </div>182 183  <!-- Floating Action Button -->184  <div class="fab"><span>+</span></div>185 186  <!-- Bottom Navigation -->187  <div class="bottomnav">188    <div class="navitem">189      <div class="ico">190        <svg viewBox="0 0 24 24"><path d="M12 5l8 7h-3v7h-10v-7h-3z"/></svg>191      </div>192      <div>Home</div>193    </div>194    <div class="navitem">195      <div class="ico">196        <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.7 1.7-7.1-5.5-4.8 7.3-.6 2.7-6.5 2.7 6.5 7.3.6-5.5 4.8 1.7 7.1z"/></svg>197      </div>198      <div>Starred</div>199    </div>200    <div class="navitem">201      <div class="ico">202        <svg viewBox="0 0 24 24"><path d="M16 11c1.7 0 3 1.3 3 3v4h-6v-4c0-1.7 1.3-3 3-3zm-8 0c1.7 0 3 1.3 3 3v4h-6v-4c0-1.7 1.3-3 3-3zm8-2c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3zm-8 0c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3z"/></svg>203      </div>204      <div>Shared</div>205    </div>206    <div class="navitem active">207      <div class="ico">208        <svg viewBox="0 0 24 24"><path d="M10 4h10v14h-10zM4 10h4v8h-4z"/></svg>209      </div>210      <div>Files</div>211    </div>212  </div>213 214  <!-- Overlay and dialog -->215  <div class="overlay"></div>216  <div class="dialog">217    <div class="title">Move to Trash?</div>218    <div class="msg">"Grocery List" will be deleted forever after 30 days.</div>219    <div class="actions">220      <div class="btn">Cancel</div>221      <div class="btn primary">Move to trash</div>222    </div>223  </div>224 225</div>226</body>227</html>