GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Collections - Choose a location</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target{8    width:1080px;9    height:2400px;10    position:relative;11    overflow:hidden;12    background:#F2F2EF;13    color:#222;14  }15 16  /* Status bar */17  .status-bar{18    position:absolute; top:0; left:0; right:0;19    height:88px;20    padding:0 40px;21    display:flex; align-items:center; justify-content:space-between;22    color:#616161; font-size:34px; letter-spacing:0.5px;23  }24  .status-icons{ display:flex; align-items:center; gap:28px; }25  .icon-wifi, .icon-battery{26    width:44px; height:28px;27    position:relative;28  }29  .icon-wifi:before{30    content:""; position:absolute; left:0; right:0; top:4px; bottom:4px;31    border:3px solid #616161; border-radius:18px 18px 0 0; border-bottom:none;32  }33  .icon-battery{34    border:3px solid #616161; border-radius:6px;35  }36  .icon-battery:after{37    content:""; position:absolute; right:-10px; top:6px; width:8px; height:12px; background:#616161; border-radius:2px;38  }39 40  /* Top app header */41  .app-header{42    position:absolute; left:0; right:0; top:88px;43    padding:36px 40px 30px 40px;44    background:#EEEFEA;45    box-sizing:border-box;46  }47  .header-row{48    display:flex; align-items:center; justify-content:space-between;49  }50  .left-group{ display:flex; align-items:center; gap:26px; }51  .title-block{ margin-left:72px; }52  .title{ font-size:64px; font-weight:700; color:#222; }53  .subtitle{ margin-top:10px; font-size:44px; color:#4B4B4B; }54  .icon-btn{ width:70px; height:70px; display:flex; align-items:center; justify-content:center; }55  .icon{ width:56px; height:56px; }56 57  /* Content area */58  .content{59    position:absolute; top:300px; left:0; right:0; bottom:220px;60    background:#FFFFFF;61    padding:40px;62    box-sizing:border-box;63  }64  .list-header{65    display:flex; align-items:center; justify-content:space-between;66    color:#5A5A5A; font-size:40px;67    padding:8px 8px 24px 8px;68  }69  .sort-icon{ width:54px; height:54px; position:relative; }70  .sort-icon span{71    position:absolute; left:8px; right:8px; height:6px; background:#5A5A5A; border-radius:3px;72  }73  .sort-icon span:nth-child(1){ top:10px; }74  .sort-icon span:nth-child(2){ top:22px; }75  .sort-icon span:nth-child(3){ top:34px; }76 77  /* File tile */78  .file-item{79    margin-top:36px;80    padding-left:14px;81  }82  .thumb-wrap{83    display:inline-block;84    background:#F5F7FD;85    border-radius:28px;86    padding:22px;87  }88  .thumb{89    width:520px; height:360px;90    background:#E0E0E0;91    border:1px solid #BDBDBD;92    border-radius:18px;93    display:flex; align-items:center; justify-content:center;94    color:#757575; font-size:34px; text-align:center;95    box-shadow:0 2px 6px rgba(0,0,0,0.08);96  }97  .file-meta{98    margin-top:24px;99    display:flex; align-items:flex-start; gap:22px;100    padding-left:20px;101  }102  .badge{103    background:#F36C63; color:#fff; font-weight:700;104    padding:10px 18px; border-radius:12px; font-size:30px; line-height:1;105  }106  .file-name{107    font-size:44px; color:#333; line-height:1.25;108  }109 110  /* Bottom action bar */111  .bottom-bar{112    position:absolute; left:0; right:0; bottom:0;113    background:#EEEFEA;114    height:220px;115    display:flex; align-items:center; justify-content:space-between;116    padding:0 64px;117    box-sizing:border-box;118  }119  .action{120    font-size:52px; color:#4E6B2E; /* greenish */121  }122 123  /* Gesture handle */124  .gesture{125    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);126    width:360px; height:10px; background:#8D8D8D; border-radius:6px; opacity:0.7;127  }128</style>129</head>130<body>131<div id="render-target">132 133  <!-- Status bar -->134  <div class="status-bar">135    <div class="status-time">6:19</div>136    <div class="status-icons">137      <div class="icon-wifi"></div>138      <div class="icon-battery"></div>139    </div>140  </div>141 142  <!-- Header -->143  <div class="app-header">144    <div class="header-row">145      <div class="left-group">146        <!-- Back arrow -->147        <div class="icon-btn">148          <svg class="icon" viewBox="0 0 24 24">149            <path d="M15 4 L5 12 L15 20" stroke="#333" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>150            <line x1="6" y1="12" x2="21" y2="12" stroke="#333" stroke-width="2.8" stroke-linecap="round"/>151          </svg>152        </div>153        <div class="title-block">154          <div class="title">Collections</div>155          <div class="subtitle">Choose a location</div>156        </div>157      </div>158      <!-- Folder plus icon -->159      <div class="icon-btn">160        <svg class="icon" viewBox="0 0 24 24">161          <path d="M3 7h7l2 2h9v10H3z" fill="none" stroke="#333" stroke-width="2" stroke-linejoin="round"/>162          <rect x="3" y="7" width="7" height="0.01" fill="none"/>163          <line x1="12" y1="13" x2="12" y2="19" stroke="#333" stroke-width="2" stroke-linecap="round"/>164          <line x1="9" y1="16" x2="15" y2="16" stroke="#333" stroke-width="2" stroke-linecap="round"/>165        </svg>166      </div>167    </div>168  </div>169 170  <!-- Content -->171  <div class="content">172    <div class="list-header">173      <div>Name ↑</div>174      <div class="sort-icon" aria-hidden="true">175        <span></span><span></span><span></span>176      </div>177    </div>178 179    <div class="file-item">180      <div class="thumb-wrap">181        <div class="thumb">[IMG: PDF cover thumbnail]</div>182      </div>183 184      <div class="file-meta">185        <div class="badge">PDF</div>186        <div class="file-name">187          typhoon-mc<br/>m-obooko....188        </div>189      </div>190    </div>191 192  </div>193 194  <!-- Bottom action bar -->195  <div class="bottom-bar">196    <div class="action">Cancel</div>197    <div class="action">Select</div>198  </div>199 200  <div class="gesture"></div>201</div>202</body>203</html>