GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Choose a location - Mobile UI</title>5<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #F0F1EC;12    color: #222;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0;18    width: 100%; height: 120px;19    display: flex; align-items: center; justify-content: space-between;20    padding: 0 40px;21    font-size: 42px; font-weight: 500;22    color: #222;23  }24  .status-icons { display: flex; align-items: center; gap: 28px; }25  .status-icons svg { width: 48px; height: 48px; }26 27  /* Header */28  .header {29    position: absolute; top: 120px; left: 0;30    width: 100%; height: 180px;31    background: #E7E8E2;32    display: flex; align-items: center;33    padding: 0 40px;34    box-sizing: border-box;35  }36  .close-btn {37    width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;38    margin-right: 28px;39  }40  .header-title {41    font-size: 56px; font-weight: 700; letter-spacing: 0.5px;42  }43 44  /* Content list */45  .content {46    position: absolute; top: 300px; left: 0;47    width: 100%; height: 1780px; /* leaves room for footer */48    background: #FFFFFF;49    box-sizing: border-box;50  }51  .list {52    padding-top: 30px;53  }54  .list-item {55    height: 170px;56    display: flex; align-items: center;57    padding: 0 48px;58    gap: 36px;59    box-sizing: border-box;60  }61  .list-item + .list-item { margin-top: 8px; }62  .item-icon {63    width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;64  }65  .item-label {66    font-size: 52px; font-weight: 500; color: #222;67  }68 69  /* Footer */70  .footer {71    position: absolute; bottom: 0; left: 0;72    width: 100%; height: 180px;73    background: #E7E8E2;74    display: flex; align-items: center; justify-content: space-between;75    padding: 0 60px; box-sizing: border-box;76  }77  .btn {78    font-size: 46px; font-weight: 700;79  }80  .btn-cancel { color: #4C7A2C; }81  .btn-select { color: #9FA4A2; }82 83  /* Gesture bar */84  .gesture-bar {85    position: absolute; bottom: 24px; left: 50%;86    width: 360px; height: 18px; border-radius: 10px;87    background: #6E6E6E; transform: translateX(-50%);88    opacity: 0.8;89  }90</style>91</head>92<body>93<div id="render-target">94 95  <!-- Status Bar -->96  <div class="status-bar">97    <div>6:08</div>98    <div class="status-icons">99      <!-- simple "sun" icon -->100      <svg viewBox="0 0 24 24">101        <circle cx="12" cy="12" r="5" fill="#777"></circle>102      </svg>103      <!-- WiFi icon -->104      <svg viewBox="0 0 24 24">105        <path d="M2 8c5-4 15-4 20 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>106        <path d="M5 12c3-3 11-3 14 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>107        <path d="M9 16c2-2 4-2 6 0" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>108        <circle cx="12" cy="18.5" r="1.6" fill="#333"></circle>109      </svg>110      <!-- Battery icon -->111      <svg viewBox="0 0 26 24">112        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"/>113        <rect x="4" y="8" width="12" height="8" fill="#333"></rect>114        <rect x="22" y="9" width="2.6" height="6" fill="#333"></rect>115      </svg>116    </div>117  </div>118 119  <!-- Header -->120  <div class="header">121    <div class="close-btn">122      <!-- Close (X) icon -->123      <svg viewBox="0 0 24 24">124        <path d="M5 5l14 14M19 5L5 19" stroke="#333" stroke-width="2.6" stroke-linecap="round"/>125      </svg>126    </div>127    <div class="header-title">Choose a location</div>128  </div>129 130  <!-- Content -->131  <div class="content">132    <div class="list">133      <!-- My Drive -->134      <div class="list-item">135        <div class="item-icon">136          <!-- Google Drive-like triangle in a rounded square -->137          <svg viewBox="0 0 24 24">138            <rect x="1.5" y="1.5" width="21" height="21" rx="3" ry="3" fill="none" stroke="#5A5A5A" stroke-width="1.8"></rect>139            <path d="M12 6l5 8H7l5-8z" fill="none" stroke="#5A5A5A" stroke-width="1.6" stroke-linejoin="round"></path>140          </svg>141        </div>142        <div class="item-label">My Drive</div>143      </div>144 145      <!-- Computers -->146      <div class="list-item">147        <div class="item-icon">148          <svg viewBox="0 0 24 24">149            <rect x="3" y="5" width="18" height="12" rx="2" ry="2" fill="none" stroke="#5A5A5A" stroke-width="2"></rect>150            <rect x="8" y="18" width="8" height="2" fill="#5A5A5A"></rect>151          </svg>152        </div>153        <div class="item-label">Computers</div>154      </div>155 156      <!-- Shared with me -->157      <div class="list-item">158        <div class="item-icon">159          <svg viewBox="0 0 24 24">160            <circle cx="12" cy="9" r="3.5" fill="none" stroke="#5A5A5A" stroke-width="2"></circle>161            <path d="M4 20c2.5-4 13.5-4 16 0" fill="none" stroke="#5A5A5A" stroke-width="2" stroke-linecap="round"></path>162          </svg>163        </div>164        <div class="item-label">Shared with me</div>165      </div>166 167      <!-- Starred -->168      <div class="list-item">169        <div class="item-icon">170          <svg viewBox="0 0 24 24">171            <path d="M12 3l3 6 6 .9-4.5 4.3 1.1 6.5L12 18l-5.6 2.7 1.1-6.5L3 9.9 9 9l3-6z" fill="none" stroke="#5A5A5A" stroke-width="2" stroke-linejoin="round"></path>172          </svg>173        </div>174        <div class="item-label">Starred</div>175      </div>176    </div>177  </div>178 179  <!-- Footer -->180  <div class="footer">181    <div class="btn btn-cancel">Cancel</div>182    <div class="btn btn-select">Select</div>183  </div>184 185  <!-- Gesture Bar -->186  <div class="gesture-bar"></div>187</div>188</body>189</html>