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;11    position: relative; overflow: hidden;12    background: #121212; color: #EDEDED; font-family: Arial, Helvetica, sans-serif;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 110px; background: #1a1a1a;19    display: flex; align-items: center; padding: 0 40px;20    font-size: 32px; color: #dcdcdc;21  }22  .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }23  .icon { width: 40px; height: 40px; display: inline-block; }24  .battery { display: flex; align-items: center; gap: 8px; font-size: 28px; color: #bdbdbd; }25 26  /* App bar */27  .app-bar {28    position: absolute; top: 110px; left: 0; right: 0;29    height: 160px; background: #222326; display: flex; align-items: center;30    padding: 0 40px; box-sizing: border-box;31    border-bottom: 1px solid #2e2e2e;32  }33  .app-title { margin-left: 28px; }34  .app-title h1 { margin: 0; font-size: 48px; font-weight: 600; color: #ffffff; }35  .app-title p { margin: 6px 0 0; font-size: 28px; color: #9fa1a6; }36  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 30px; }37  .btn-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: transparent; }38  .btn-icon svg { width: 44px; height: 44px; fill: #cfcfcf; }39 40  /* Header row within content */41  .list-header {42    position: absolute; top: 270px; left: 0; right: 0;43    height: 90px; display: flex; align-items: center;44    padding: 0 40px; color: #bababa; font-size: 30px;45  }46  .list-header .name { display: flex; align-items: center; gap: 10px; }47  .list-header .right { margin-left: auto; display: flex; align-items: center; gap: 18px; color: #9fa1a6; }48 49  /* Grid content */50  .grid {51    position: absolute; top: 360px; left: 0; right: 0; bottom: 200px;52    padding: 0 40px 40px; box-sizing: border-box;53    display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 48px;54  }55  .tile {56    background: transparent;57  }58  .preview {59    width: 468px; height: 300px; border-radius: 32px;60    background: #2a2a2a; border: 1px solid #3b3b3b;61    display: flex; align-items: center; justify-content: center; color: #bdbdbd;62    font-size: 32px;63    box-shadow: 0 2px 0 rgba(255,255,255,0.02) inset;64  }65  .meta {66    display: flex; align-items: center; gap: 18px;67    margin-top: 16px; padding: 0 6px;68  }69  .doc-icon {70    width: 36px; height: 48px;71  }72  .label {73    font-size: 32px; color: #d6d6d6;74    line-height: 1.25;75  }76 77  /* Bottom actions */78  .bottom-bar {79    position: absolute; left: 0; right: 0; bottom: 0;80    height: 160px; background: #1b1b1d; border-top: 1px solid #2e2e2e;81    display: flex; align-items: center; justify-content: space-between;82    padding: 0 60px; box-sizing: border-box;83  }84  .bottom-bar .action {85    font-size: 38px; color: #cfcfcf;86  }87  .bottom-bar .action.primary { color: #4da3ff; font-weight: 600; }88 89  /* Navigation pill */90  .nav-indicator {91    position: absolute; bottom: 168px; left: 50%;92    transform: translateX(-50%);93    width: 220px; height: 12px; background: #e9e9e9; border-radius: 10px; opacity: 0.9;94  }95 96  /* Simple helper icons */97  .chevron-left svg { fill: #e6e6e6; }98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status bar -->104  <div class="status-bar">105    <div>1:07</div>106    <div class="status-right">107      <!-- small circles/icons to mimic status -->108      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#5e5e5e"/></svg>109      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#7b7b7b" stroke-width="2"/></svg>110      <svg class="icon" viewBox="0 0 24 24"><path d="M4 19h16M4 12h16M4 5h16" stroke="#7b7b7b" stroke-width="2"/></svg>111      <div class="battery">112        <svg width="44" height="24" viewBox="0 0 44 24">113          <rect x="1" y="3" width="38" height="18" rx="3" fill="none" stroke="#bdbdbd" stroke-width="2"/>114          <rect x="4" y="6" width="30" height="12" rx="2" fill="#bdbdbd"/>115          <rect x="39" y="7" width="4" height="10" rx="2" fill="#bdbdbd"/>116        </svg>117        81%118      </div>119    </div>120  </div>121 122  <!-- App bar -->123  <div class="app-bar">124    <div class="chevron-left btn-icon" aria-label="Back">125      <svg viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5" fill="none" stroke="#e6e6e6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>126    </div>127    <div class="app-title">128      <h1>My Drive</h1>129      <p>Add shortcut to Drive</p>130    </div>131    <div class="app-actions">132      <!-- view toggle -->133      <button class="btn-icon" aria-label="Toggle view">134        <svg viewBox="0 0 24 24">135          <rect x="3" y="4" width="18" height="4" rx="1"></rect>136          <rect x="3" y="10" width="18" height="4" rx="1"></rect>137          <rect x="3" y="16" width="18" height="4" rx="1"></rect>138        </svg>139      </button>140      <!-- add folder -->141      <button class="btn-icon" aria-label="Add folder">142        <svg viewBox="0 0 24 24">143          <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="#cfcfcf"></path>144          <path d="M12 10v6M9 13h6" stroke="#222326" stroke-width="2" stroke-linecap="round"/>145        </svg>146      </button>147    </div>148  </div>149 150  <!-- List header -->151  <div class="list-header">152    <div class="name">153      <span>Name</span>154      <svg class="icon" viewBox="0 0 24 24">155        <path d="M6 15l6-6 6 6" fill="none" stroke="#bababa" stroke-width="2" stroke-linecap="round"/>156      </svg>157    </div>158    <div class="right">159      <svg class="icon" viewBox="0 0 24 24"><path d="M4 5h16M4 12h16M4 19h16" stroke="#8a8a8a" stroke-width="2"/></svg>160    </div>161  </div>162 163  <!-- Grid of items -->164  <div class="grid">165    <!-- Private File (folder) -->166    <div class="tile">167      <div class="preview">[IMG: Folder Preview]</div>168      <div class="meta">169        <span class="label">Private File</span>170      </div>171    </div>172 173    <!-- BACKUP_REMINDER_M... -->174    <div class="tile">175      <div class="preview">[IMG: Document Preview]</div>176      <div class="meta">177        <svg class="doc-icon" viewBox="0 0 24 24">178          <path d="M6 3h8l5 5v13H6z" fill="#4c6fb3"/>179          <path d="M14 3v6h6" fill="#7aa0e2"/>180        </svg>181        <span class="label">BACKUP_REMINDER_M...</span>182      </div>183    </div>184 185    <!-- Copy of Tools list -->186    <div class="tile">187      <div class="preview">[IMG: Document Preview]</div>188      <div class="meta">189        <svg class="doc-icon" viewBox="0 0 24 24">190          <path d="M6 3h8l5 5v13H6z" fill="#4c6fb3"/>191          <path d="M14 3v6h6" fill="#7aa0e2"/>192        </svg>193        <span class="label">Copy of<br>Tools list</span>194      </div>195    </div>196 197    <!-- diy projects.txt -->198    <div class="tile">199      <div class="preview">[IMG: Text File Preview]</div>200      <div class="meta">201        <svg class="doc-icon" viewBox="0 0 24 24">202          <path d="M6 3h8l5 5v13H6z" fill="#4c6fb3"/>203          <path d="M14 3v6h6" fill="#7aa0e2"/>204        </svg>205        <span class="label">diy<br>projects.txt</span>206      </div>207    </div>208 209    <!-- Tools list -->210    <div class="tile">211      <div class="preview">[IMG: Document Preview]</div>212      <div class="meta">213        <svg class="doc-icon" viewBox="0 0 24 24">214          <path d="M6 3h8l5 5v13H6z" fill="#4c6fb3"/>215          <path d="M14 3v6h6" fill="#7aa0e2"/>216        </svg>217        <span class="label">Tools list</span>218      </div>219    </div>220  </div>221 222  <!-- Navigation indicator and bottom actions -->223  <div class="nav-indicator"></div>224  <div class="bottom-bar">225    <div class="action">Cancel</div>226    <div class="action primary">Add</div>227  </div>228 229</div>230</body>231</html>