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 {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #2A2224; /* dark plum */20    color: #EBC6CF; /* soft pink text */21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 100px;30    background: #33282B;31    display: flex;32    align-items: center;33    padding: 0 36px;34    box-sizing: border-box;35    color: #F0D3DA;36    font-size: 36px;37    letter-spacing: 0.5px;38  }39  .status-left { flex: 1; }40  .status-right {41    display: flex;42    gap: 18px;43    align-items: center;44  }45  .status-dot {46    width: 24px; height: 24px; border-radius: 50%; background: #D7AEB9; opacity: 0.9;47  }48 49  /* Header */50  .header {51    position: absolute;52    top: 100px;53    left: 0;54    width: 1080px;55    height: 150px;56    background: #33282B;57    display: flex;58    align-items: center;59    padding: 0 36px;60    box-sizing: border-box;61    border-bottom: 1px solid rgba(255,255,255,0.06);62  }63  .close-icon {64    width: 60px;65    height: 60px;66    margin-right: 24px;67  }68  .header-title {69    font-size: 56px;70    font-weight: 600;71    color: #F1CCD6;72  }73 74  /* List */75  .list {76    position: absolute;77    top: 250px;78    left: 0;79    width: 100%;80    padding: 0 36px;81    box-sizing: border-box;82  }83  .list-item {84    display: flex;85    align-items: center;86    gap: 28px;87    height: 120px;88    color: #F1CCD6;89  }90  .item-icon {91    width: 72px;92    height: 72px;93  }94  .item-label {95    font-size: 48px;96    line-height: 1;97  }98 99  /* Footer actions */100  .footer {101    position: absolute;102    bottom: 0;103    left: 0;104    width: 1080px;105    height: 180px;106    background: #33282B;107    border-top: 1px solid rgba(255,255,255,0.06);108    display: flex;109    align-items: center;110    justify-content: space-between;111    padding: 0 60px;112    box-sizing: border-box;113  }114  .action {115    font-size: 48px;116  }117  .action.cancel { color: #FF89A2; }118  .action.add { color: #8C8185; }119 120  /* Home indicator */121  .home-indicator {122    position: absolute;123    bottom: 200px;124    left: 50%;125    transform: translateX(-50%);126    width: 240px;127    height: 16px;128    background: #FFFFFF;129    border-radius: 10px;130    opacity: 0.9;131  }132</style>133</head>134<body>135<div id="render-target">136 137  <!-- Status Bar -->138  <div class="status-bar">139    <div class="status-left">10:32</div>140    <div class="status-right">141      <div class="status-dot"></div>142      <div class="status-dot"></div>143      <div class="status-dot"></div>144      <div class="status-dot"></div>145    </div>146  </div>147 148  <!-- Header -->149  <div class="header">150    <!-- X icon -->151    <svg class="close-icon" viewBox="0 0 24 24">152      <path d="M4 4 L20 20 M20 4 L4 20" stroke="#EBC6CF" stroke-width="2.5" stroke-linecap="round"/>153    </svg>154    <div class="header-title">Add shortcut to Drive</div>155  </div>156 157  <!-- List -->158  <div class="list">159    <!-- My Drive -->160    <div class="list-item">161      <svg class="item-icon" viewBox="0 0 24 24">162        <rect x="3" y="3" width="18" height="18" rx="2" fill="none" stroke="#EBC6CF" stroke-width="1.8"/>163        <path d="M12 7 L8 13 L16 13 Z" fill="none" stroke="#EBC6CF" stroke-width="1.5" />164      </svg>165      <div class="item-label">My Drive</div>166    </div>167 168    <!-- Computers -->169    <div class="list-item">170      <svg class="item-icon" viewBox="0 0 24 24">171        <rect x="3" y="4" width="18" height="12" rx="1.5" fill="none" stroke="#EBC6CF" stroke-width="1.8"/>172        <path d="M8 18 H16 M10 18 V20 M14 18 V20" stroke="#EBC6CF" stroke-width="1.8" stroke-linecap="round"/>173      </svg>174      <div class="item-label">Computers</div>175    </div>176 177    <!-- Shared with me -->178    <div class="list-item">179      <svg class="item-icon" viewBox="0 0 24 24">180        <circle cx="12" cy="8" r="4" fill="none" stroke="#EBC6CF" stroke-width="1.8"/>181        <path d="M4 20 C4 15 8 14 12 14 C16 14 20 15 20 20" fill="none" stroke="#EBC6CF" stroke-width="1.8" stroke-linecap="round"/>182      </svg>183      <div class="item-label">Shared with me</div>184    </div>185 186    <!-- Starred -->187    <div class="list-item">188      <svg class="item-icon" viewBox="0 0 24 24">189        <path d="M12 4 L14.8 9.2 L20.5 10 L16.2 13.8 L17.4 19.5 L12 16.6 L6.6 19.5 L7.8 13.8 L3.5 10 L9.2 9.2 Z" fill="none" stroke="#EBC6CF" stroke-width="1.8" stroke-linejoin="round"/>190      </svg>191      <div class="item-label">Starred</div>192    </div>193  </div>194 195  <!-- Home indicator -->196  <div class="home-indicator"></div>197 198  <!-- Footer actions -->199  <div class="footer">200    <div class="action cancel">Cancel</div>201    <div class="action add">Add</div>202  </div>203 204</div>205</body>206</html>