GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Select destination - UI</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: #ffffff;13  }14 15  /* Header (status + app bar) */16  .header {17    position: absolute;18    top: 0;19    left: 0;20    width: 100%;21    height: 380px;22    background: #e8efe1;23    border-bottom: 1px solid #d9e5d2;24  }25  .status {26    height: 90px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 40px;31    color: #2f3a2f;32    font-size: 34px;33  }34  .status .right {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .status svg {40    width: 42px;41    height: 42px;42    fill: #2f3a2f;43  }44 45  .appbar {46    height: 290px;47    display: flex;48    align-items: center;49    justify-content: space-between;50    padding: 0 40px;51  }52  .left-area {53    display: flex;54    align-items: center;55    gap: 26px;56    color: #2f3a2f;57  }58  .left-area svg { width: 60px; height: 60px; fill: #2f3a2f; }59 60  .title {61    display: flex;62    flex-direction: column;63  }64  .title h1 {65    margin: 0;66    font-size: 62px;67    font-weight: 600;68    color: #2f3a2f;69    letter-spacing: 0.3px;70  }71  .title span {72    margin-top: 14px;73    font-size: 38px;74    color: #2f3a2f;75    opacity: 0.75;76  }77 78  .action-icon svg { width: 84px; height: 84px; fill: #2f3a2f; }79 80  /* Main content */81  .content {82    position: absolute;83    top: 380px;84    left: 0;85    width: 100%;86    height: 1800px;87    display: flex;88    flex-direction: column;89    align-items: center;90    justify-content: center;91    color: #2f3a2f;92  }93  .img-placeholder {94    width: 700px;95    height: 520px;96    background: #E0E0E0;97    border: 1px solid #BDBDBD;98    border-radius: 12px;99    display: flex;100    align-items: center;101    justify-content: center;102    color: #757575;103    font-size: 32px;104    margin-bottom: 60px;105  }106  .empty-text {107    font-size: 52px;108    letter-spacing: 0.2px;109  }110 111  .gesture {112    position: absolute;113    left: 340px;114    bottom: 250px;115    width: 400px;116    height: 12px;117    background: #9E9E9E;118    border-radius: 8px;119    opacity: 0.7;120  }121 122  /* Bottom action bar */123  .footer {124    position: absolute;125    bottom: 0;126    left: 0;127    width: 100%;128    height: 220px;129    background: #e8efe1;130    border-top: 1px solid #d9e5d2;131    display: flex;132    align-items: center;133    justify-content: space-between;134    padding: 0 60px;135  }136  .footer .text-btn {137    font-size: 48px;138    font-weight: 600;139    color: #2e6b3f;140  }141</style>142</head>143<body>144<div id="render-target">145 146  <!-- Header: status bar + app bar -->147  <div class="header">148    <div class="status">149      <div>10:18</div>150      <div class="right">151        <!-- Simple WiFi icon -->152        <svg viewBox="0 0 24 24">153          <path d="M12 18.5c.9 0 1.6.7 1.6 1.5s-.7 1.5-1.6 1.5-1.6-.7-1.6-1.5.7-1.5 1.6-1.5zm-6-6.2c3.6-3.1 8.4-3.1 12 0l-1.3 1.4c-2.9-2.4-6.6-2.4-9.5 0L6 12.3zm-3.3-3.3c5.4-4.6 13.2-4.6 18.6 0l-1.4 1.4c-4.6-3.9-11.2-3.9-15.8 0L2.7 9z"/>154        </svg>155        <!-- Battery icon -->156        <svg viewBox="0 0 24 24">157          <path d="M2 8h15c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2zm18 2h2v4h-2v-4zM4 10h11v4H4v-4z"/>158        </svg>159      </div>160    </div>161 162    <div class="appbar">163      <div class="left-area">164        <!-- Back arrow -->165        <svg viewBox="0 0 24 24">166          <path d="M15.5 19l-7-7 7-7 1.4 1.4L11.3 12l5.6 5.6-1.4 1.4z"/>167        </svg>168        <div class="title">169          <h1>Green</h1>170          <span>Select destination</span>171        </div>172      </div>173      <div class="action-icon">174        <!-- Folder with plus icon -->175        <svg viewBox="0 0 24 24">176          <path d="M10 4l2 2h7c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h5zm4 6h-2v3H9v2h3v3h2v-3h3v-2h-3v-3z"/>177        </svg>178      </div>179    </div>180  </div>181 182  <!-- Content -->183  <div class="content">184    <div class="img-placeholder">[IMG: Empty folder illustration]</div>185    <div class="empty-text">This folder is empty</div>186    <div class="gesture"></div>187  </div>188 189  <!-- Bottom action bar -->190  <div class="footer">191    <div class="text-btn">Cancel</div>192    <div class="text-btn">Move</div>193  </div>194 195</div>196</body>197</html>