GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>UI Render</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: #F4F3F7;15    font-family: Arial, Helvetica, sans-serif;16    color: #222;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 96px;26    background: #ECEAF0;27    display: flex;28    align-items: center;29    padding: 0 36px;30    box-sizing: border-box;31  }32  .status-left { font-size: 36px; color: #4d4d4d; }33  .status-right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .icon-pill {40    width: 48px; height: 32px; background: #6E6E6E; border-radius: 8px;41  }42  .dot { width: 12px; height: 12px; background: #6E6E6E; border-radius: 50%; }43  .signal {44    width: 40px; height: 28px; border: 3px solid #6E6E6E; border-top: none; border-left: none; transform: skewX(-12deg);45    border-radius: 4px;46  }47  .battery {48    width: 48px; height: 24px; border: 3px solid #6E6E6E; border-radius: 4px; position: relative;49  }50  .battery:after {51    content: ''; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #6E6E6E; border-radius: 2px;52  }53 54  /* App bar */55  .app-bar {56    position: absolute;57    top: 96px;58    left: 0;59    width: 1080px;60    height: 190px;61    background: #ECEAF0;62    box-sizing: border-box;63    padding: 24px 36px;64    display: flex;65    align-items: center;66    border-bottom: 1px solid #E0DEE6;67  }68  .back-btn {69    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 18px;70  }71  .title-group { line-height: 1.2; }72  .title-group .title {73    font-size: 56px; font-weight: 600; margin-bottom: 10px;74  }75  .title-group .subtitle {76    font-size: 36px; color: #666;77  }78  .toolbar-right {79    margin-left: auto; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;80  }81 82  /* Content */83  .content {84    position: absolute;85    top: 286px; /* status + app-bar */86    left: 0;87    width: 1080px;88    height: 1714px; /* until actions area */89    background: #F8F7FB;90    display: flex;91    flex-direction: column;92    align-items: center;93    justify-content: center;94  }95  .img-placeholder {96    width: 640px; height: 420px;97    background: #E0E0E0;98    border: 1px solid #BDBDBD;99    display: flex; align-items: center; justify-content: center;100    color: #757575; font-size: 34px;101    border-radius: 8px;102    margin-bottom: 60px;103  }104  .empty-text {105    font-size: 44px; color: #333;106  }107 108  /* Bottom actions */109  .bottom-actions {110    position: absolute;111    bottom: 0;112    left: 0;113    width: 1080px;114    height: 300px;115    background: #ECEAF0;116    border-top: 1px solid #E0DEE6;117    box-sizing: border-box;118    padding: 70px 90px 40px;119    display: flex;120    justify-content: space-between;121    align-items: center;122  }123  .action {124    font-size: 44px;125    color: #5A58A6;126  }127 128  /* Home indicator */129  .home-indicator {130    position: absolute;131    bottom: 24px;132    left: 50%;133    transform: translateX(-50%);134    width: 360px; height: 12px; background: #6A6A6A; border-radius: 6px;135    opacity: 0.8;136  }137 138  /* Simple icons */139  .icon {140    width: 56px; height: 56px;141  }142  .icon-folder-plus { width: 60px; height: 60px; }143</style>144</head>145<body>146<div id="render-target">147  <!-- Status Bar -->148  <div class="status-bar">149    <div class="status-left">2:53</div>150    <div class="status-right">151      <div class="icon-pill"></div>152      <div class="dot"></div>153      <div class="signal"></div>154      <div class="battery"></div>155    </div>156  </div>157 158  <!-- App Bar -->159  <div class="app-bar">160    <div class="back-btn">161      <svg class="icon" viewBox="0 0 24 24">162        <path d="M15 19L8 12l7-7" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>163      </svg>164    </div>165    <div class="title-group">166      <div class="title">YMCA 2023</div>167      <div class="subtitle">Select destination</div>168    </div>169    <div class="toolbar-right">170      <svg class="icon-folder-plus" viewBox="0 0 24 24">171        <path d="M3 6h6l2 2h7a2 2 0 012 2v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2z" fill="none" stroke="#333" stroke-width="2" stroke-linejoin="round"/>172        <path d="M16 12v6M13 15h6" stroke="#333" stroke-width="2" stroke-linecap="round"/>173      </svg>174    </div>175  </div>176 177  <!-- Main Content -->178  <div class="content">179    <div class="img-placeholder">[IMG: Empty folder illustration]</div>180    <div class="empty-text">This folder is empty</div>181  </div>182 183  <!-- Bottom Actions -->184  <div class="bottom-actions">185    <div class="action">Cancel</div>186    <div class="action">Move</div>187  </div>188 189  <div class="home-indicator"></div>190</div>191</body>192</html>