GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Drive Options - Dark UI</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1440px; height:3120px; position:relative; overflow:hidden;9 background:#121414;10 color:#e9ecef;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; width:100%; height:120px;16 padding:0 48px;17 display:flex; align-items:center; justify-content:space-between;18 color:#dcdcdc; font-size:52px;19 }20 .status-icons { display:flex; gap:32px; align-items:center; }21 .icon-dot { width:18px; height:18px; background:#cfcfcf; border-radius:50%; display:inline-block; opacity:0.7; }22 .icon-battery {23 width:62px; height:30px; border:3px solid #cfcfcf; border-radius:6px; position:relative;24 }25 .icon-battery::after { content:''; position:absolute; right:-10px; top:7px; width:8px; height:16px; background:#cfcfcf; border-radius:2px; }26 .icon-battery-fill { position:absolute; left:4px; top:4px; height:20px; width:38px; background:#cfcfcf; }27 28 /* Search row */29 .toolbar {30 position:absolute; top:120px; left:0; width:100%; height:170px;31 padding:0 48px; display:flex; align-items:center; gap:36px;32 }33 .hamburger {34 width:88px; height:88px; border-radius:14px; display:flex; align-items:center; justify-content:center;35 }36 .hamburger svg { width:64px; height:64px; fill:#cfcfcf; opacity:0.9; }37 .search-field {38 flex:1; height:120px; background:#1f2420; border:1px solid #2b2f2b;39 border-radius:60px; display:flex; align-items:center; padding:0 48px; gap:24px;40 color:#95a09a; font-size:52px;41 }42 .search-field svg { width:56px; height:56px; fill:#95a09a; }43 .avatar {44 width:120px; height:120px; border-radius:60px; background:#2b423a; color:#c7e2d4;45 display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:58px; border:2px solid #3a4c44;46 }47 48 /* Tabs */49 .tabs {50 position:absolute; top:290px; left:0; width:100%; height:150px;51 display:flex; align-items:center; gap:48px; padding:0 48px; color:#aeb6b0; font-size:52px;52 }53 .tab { padding:18px 24px; }54 .tab.active { color:#dbe3de; font-weight:bold; border-bottom:6px solid #4daf84; }55 .tab-spacer { flex:1; }56 .sort-icon { width:80px; height:80px; display:flex; align-items:center; justify-content:center; }57 .sort-icon svg { width:72px; height:72px; fill:#aeb6b0; }58 59 /* File row */60 .file-row {61 position:absolute; top:430px; left:0; width:100%;62 padding:0 48px; height:220px; display:flex; align-items:center; gap:32px;63 background:transparent; color:#e7ede8; font-size:56px;64 }65 .pdf-icon {66 width:96px; height:96px; border-radius:16px; background:#cc4b4b; color:#fff;67 display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:42px;68 }69 70 /* Options sheet */71 .sheet {72 position:absolute; top:580px; left:0; width:100%; height:2480px; /* large bottom sheet */73 background:#1c231f; border-top-left-radius:60px; border-top-right-radius:60px;74 border-top:1px solid #2c3a31;75 box-shadow: 0 -20px 60px rgba(0,0,0,0.6);76 padding:60px 72px;77 }78 .file-title { font-size:64px; margin-bottom:48px; display:flex; align-items:center; gap:28px; }79 .file-title .pdf-icon { width:80px; height:80px; font-size:36px; }80 .option {81 display:flex; align-items:center; gap:40px; height:150px; border-radius:28px;82 color:#e8eee9; font-size:58px; padding:0 8px;83 }84 .option .ico {85 width:80px; height:80px; display:flex; align-items:center; justify-content:center;86 background:transparent;87 }88 .option .ico svg { width:80px; height:80px; fill:#cbd6cf; }89 .divider {90 height:2px; background:#2b332e; margin:22px 0 22px 80px;91 }92</style>93</head>94<body>95<div id="render-target">96 97 <!-- Status Bar -->98 <div class="status-bar">99 <div class="time">9:04</div>100 <div class="status-icons">101 <span style="font-size:54px; opacity:0.7;">◦</span>102 <span class="icon-dot"></span>103 <span class="icon-dot"></span>104 <div class="icon-battery"><div class="icon-battery-fill"></div></div>105 </div>106 </div>107 108 <!-- Toolbar -->109 <div class="toolbar">110 <div class="hamburger">111 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>112 </div>113 <div class="search-field">114 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.28v.79l5 5-1.5 1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>115 <span>Search in Drive</span>116 </div>117 <div class="avatar">C</div>118 </div>119 120 <!-- Tabs -->121 <div class="tabs">122 <div class="tab active">My Drive</div>123 <div class="tab">Computers</div>124 <div class="tab-spacer"></div>125 <div class="sort-icon">126 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm4 5h14v2H7zm6 5h8v2h-8z"/></svg>127 </div>128 </div>129 130 <!-- File Row -->131 <div class="file-row">132 <div class="pdf-icon">PDF</div>133 <div>dinner-veg (3).pdf</div>134 </div>135 136 <!-- Bottom Sheet Options -->137 <div class="sheet">138 <div class="file-title">139 <div class="pdf-icon">PDF</div>140 <div>dinner-veg (3).pdf</div>141 </div>142 143 <div class="option">144 <div class="ico">145 <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.47.09-.7s-.04-.47-.09-.7l7.02-4.11c.53.5 1.22.81 2.07.81A3 3 0 1 0 17 5a3 3 0 0 0 .04.5L10.02 9.6A3 3 0 1 0 9 12c0-.23.03-.45.08-.66l7.06 4.13A3 3 0 1 0 18 16.08z"/></svg>146 </div>147 <div>Share</div>148 </div>149 150 <div class="option">151 <div class="ico">152 <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-3.33 0-8 1.67-8 5v3h16v-3c0-3.33-4.67-5-8-5z"/></svg>153 </div>154 <div>Manage access</div>155 </div>156 157 <div class="option">158 <div class="ico">159 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 13.97 22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"/></svg>160 </div>161 <div>Add to Starred</div>162 </div>163 164 <div class="option">165 <div class="ico">166 <svg viewBox="0 0 24 24"><path d="M12 4l8 4v8l-8 4-8-4V8l8-4zm-3 9l2 2 4-4-1.5-1.5L11 12.5 10.5 12 9 13z"/></svg>167 </div>168 <div>Make available offline</div>169 </div>170 171 <div class="divider"></div>172 173 <div class="option">174 <div class="ico">175 <svg viewBox="0 0 24 24"><path d="M3.9 12a5 5 0 0 1 8.9-3l2.2 2-1.4 1.4-2.2-2A3 3 0 1 0 7 12c0 .5.13.97.36 1.38l-1.46 1.46A4.98 4.98 0 0 1 3.9 12zm16.2 0a5 5 0 0 1-8.9 3l-2.2-2 1.4-1.4 2.2 2A3 3 0 1 0 17 12c0-.5-.13-.97-.36-1.38l1.46-1.46c.56.89.9 1.94.9 3.04z"/></svg>176 </div>177 <div>Copy link</div>178 </div>179 180 <div class="option">181 <div class="ico">182 <svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>183 </div>184 <div>Make a copy</div>185 </div>186 187 <div class="option">188 <div class="ico">189 <svg viewBox="0 0 24 24"><path d="M4 20v-8l8-8 8 8-3 3-5-5-5 5v5H4z"/></svg>190 </div>191 <div>Send a copy</div>192 </div>193 194 <div class="divider"></div>195 196 <div class="option">197 <div class="ico">198 <svg viewBox="0 0 24 24"><path d="M5 5h14v2H5zm0 6h14v2H5zm0 6h14v2H5z"/></svg>199 </div>200 <div>Open with</div>201 </div>202 203 <div class="divider"></div>204 205 <div class="option">206 <div class="ico">207 <svg viewBox="0 0 24 24"><path d="M5 20h14v2H5zm7-2L5 9h14l-7 9zM12 2l4 5H8l4-5z"/></svg>208 </div>209 <div>Download</div>210 </div>211 212 <div class="option">213 <div class="ico">214 <svg viewBox="0 0 24 24"><path d="M4 20h16v-2H4v2zM7 17h10v-2H7v2zm0-4h10v-2H7v2zm0-4h10V7H7v2z"/></svg>215 </div>216 <div>Rename</div>217 </div>218 219 <div class="option">220 <div class="ico">221 <svg viewBox="0 0 24 24"><path d="M12 2L2 7v6c0 5 3.8 9.3 9 10 5.2-.7 9-5 9-10V7l-8-5zm0 3.2L17.2 7 12 9.8 6.8 7 12 5.2zM5 9.5l7 3.3 7-3.3V13c0 4-3 7.3-7 8-4-.7-7-4-7-8V9.5z"/></svg>222 </div>223 <div>Add shortcut to Drive</div>224 </div>225 226 </div>227 228</div>229</body>230</html>