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>Add shortcut to Drive</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #E0E0E0;16    font-family: Roboto, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    height: 96px;22    background: #1a1a1a;23    color: #ddd;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 32px;28    font-size: 34px;29    letter-spacing: 0.5px;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 24px;35    color: #ccc;36    font-size: 30px;37  }38  .battery {39    width: 54px;40    height: 28px;41    border: 3px solid #ccc;42    border-radius: 6px;43    position: relative;44  }45  .battery::after {46    content: "";47    position: absolute;48    right: -10px;49    top: 8px;50    width: 8px;51    height: 12px;52    background: #ccc;53    border-radius: 2px;54  }55  .battery-level {56    position: absolute;57    left: 3px;58    top: 3px;59    height: 20px;60    width: 38px; /* ~81% */61    background: #ccc;62    border-radius: 3px;63  }64  .wifi {65    width: 34px;66    height: 28px;67  }68 69  /* App bar */70  .app-bar {71    height: 160px;72    display: flex;73    align-items: center;74    padding: 0 28px;75    border-bottom: 1px solid #2b2b2b;76    background: #121212;77  }78  .app-title {79    font-size: 44px;80    margin-left: 24px;81    font-weight: 500;82  }83  .list {84    padding: 24px 0;85  }86  .item {87    height: 140px;88    padding: 0 40px;89    display: flex;90    align-items: center;91    gap: 36px;92    border-bottom: 1px solid #222;93  }94  .item:last-child { border-bottom: none; }95  .item svg {96    width: 72px; height: 72px;97    stroke: #BDBDBD; fill: none;98    stroke-width: 2.5;99  }100  .item .label {101    font-size: 40px;102    color: #EDEDED;103  }104 105  /* Bottom action bar */106  .bottom-bar {107    position: absolute;108    bottom: 0;109    left: 0;110    width: 100%;111    height: 200px;112    background: #1b1b1b;113    border-top: 1px solid #2b2b2b;114    display: flex;115    align-items: center;116    justify-content: space-between;117    padding: 0 60px;118  }119  .bottom-btn {120    font-size: 42px;121    color: #E0E0E0;122  }123  .bottom-btn.disabled {124    color: #7d7d7d;125  }126 127  /* Gesture pill */128  .gesture-pill {129    position: absolute;130    bottom: 210px;131    left: 50%;132    transform: translateX(-50%);133    width: 180px;134    height: 12px;135    background: #ffffff;136    border-radius: 8px;137    opacity: 0.9;138  }139</style>140</head>141<body>142<div id="render-target">143  <!-- Status bar -->144  <div class="status-bar">145    <div>1:06</div>146    <div class="status-right">147      <svg class="wifi" viewBox="0 0 24 24">148        <path d="M2 8c5-5 15-5 20 0" stroke="#ccc"/>149        <path d="M6 12c3-3 9-3 12 0" stroke="#ccc"/>150        <circle cx="12" cy="16" r="2" fill="#ccc" stroke="none"/>151      </svg>152      <div class="battery"><div class="battery-level"></div></div>153      <div>81%</div>154    </div>155  </div>156 157  <!-- App bar -->158  <div class="app-bar">159    <svg viewBox="0 0 24 24" width="48" height="48">160      <path d="M5 5 L19 19 M19 5 L5 19" stroke="#E0E0E0" stroke-width="2.8" />161    </svg>162    <div class="app-title">Add shortcut to Drive</div>163  </div>164 165  <!-- List items -->166  <div class="list">167    <div class="item">168      <!-- My Drive icon (triangle-like) -->169      <svg viewBox="0 0 24 24">170        <polygon points="12,4 20,18 4,18" />171      </svg>172      <div class="label">My Drive</div>173    </div>174    <div class="item">175      <!-- Computers icon -->176      <svg viewBox="0 0 24 24">177        <rect x="3" y="4" width="18" height="12" rx="2" />178        <rect x="8" y="17" width="8" height="3" rx="1" />179      </svg>180      <div class="label">Computers</div>181    </div>182    <div class="item">183      <!-- Shared with me icon -->184      <svg viewBox="0 0 24 24">185        <circle cx="12" cy="8" r="3.5" />186        <path d="M4 20c0-4.5 16-4.5 16 0" />187      </svg>188      <div class="label">Shared with me</div>189    </div>190    <div class="item">191      <!-- Starred icon -->192      <svg viewBox="0 0 24 24">193        <polygon points="12,3 15,10 22,10 16.5,14.5 18.5,21 12,17 5.5,21 7.5,14.5 2,10 9,10" />194      </svg>195      <div class="label">Starred</div>196    </div>197  </div>198 199  <!-- Gesture pill -->200  <div class="gesture-pill"></div>201 202  <!-- Bottom action bar -->203  <div class="bottom-bar">204    <div class="bottom-btn">Cancel</div>205    <div class="bottom-btn disabled">Add</div>206  </div>207</div>208</body>209</html>