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>UI Render</title>7<style>8  :root{9    --bg:#121212;10    --sheet:#2d3439;11    --card:#1a1f22;12    --text:#cfcfcf;13    --muted:#9aa1a6;14    --icon:#c7cdd2;15    --divider:#3c4246;16    --accent:#8ab9f4;17  }18  body{ margin:0; padding:0; background:transparent; font-family:Arial, Helvetica, sans-serif; }19  #render-target{20    width:1080px; height:2400px;21    position:relative; overflow:hidden;22    background:var(--bg);23    border-radius:24px;24  }25 26  /* Status bar */27  .status-bar{ position:absolute; top:20px; left:32px; right:32px; height:64px; }28  .time{ color:#f0f0f0; font-size:42px; line-height:64px; }29  .status-icons{ position:absolute; right:0; top:10px; display:flex; gap:24px; align-items:center; }30  .status-icons svg{ width:44px; height:44px; stroke:#ffffff; fill:none; opacity:0.95; }31 32  /* App bar */33  .app-bar{ position:absolute; top:108px; left:24px; right:24px; height:80px; }34  .app-bar .left{ position:absolute; left:0; top:0; height:80px; display:flex; align-items:center; gap:20px; }35  .app-bar .right{ position:absolute; right:0; top:0; height:80px; display:flex; align-items:center; gap:42px; }36  .app-bar svg{ width:48px; height:48px; stroke:var(--icon); fill:none; stroke-width:2.5; opacity:0.9; }37 38  /* Title card */39  .title-card{40    position:absolute; top:206px; left:32px; width:1016px; height:500px;41    background:var(--card); border-radius:28px;42    box-shadow:0 18px 40px rgba(0,0,0,0.25) inset;43  }44  .title-card .title{ position:absolute; top:40px; left:40px; color:#d5d7da; font-size:56px; font-weight:600; letter-spacing:0.2px; }45  .title-card .subtitle{ position:absolute; top:120px; left:40px; color:var(--muted); font-size:32px; }46 47  /* Wave area */48  .wave-area{ position:absolute; top:780px; left:24px; right:24px; height:820px; }49  .wave-area .vline{50    position:absolute; left:540px; top:40px; width:6px; height:720px; background:#3e4448; border-radius:3px;51  }52  .wave-area .bars{ position:absolute; bottom:40px; left:140px; right:80px; height:120px; display:flex; align-items:flex-end; gap:26px; }53  .bar{ width:18px; background:#3e4448; border-radius:9px; opacity:0.85; }54  .bar:nth-child(1){ height:12px; }55  .bar:nth-child(2){ height:22px; }56  .bar:nth-child(3){ height:34px; }57  .bar:nth-child(4){ height:24px; }58  .bar:nth-child(5){ height:18px; }59  .bar:nth-child(6){ height:40px; }60  .bar:nth-child(7){ height:58px; }61  .bar:nth-child(8){ height:34px; }62  .bar:nth-child(9){ height:20px; }63  .bar:nth-child(10){ height:16px; }64  .bar:nth-child(11){ height:54px; }65  .bar:nth-child(12){ height:84px; }66  .bar:nth-child(13){ height:64px; }67  .bar:nth-child(14){ height:92px; }68  .bar:nth-child(15){ height:70px; }69 70  /* Bottom sheet */71  .sheet{72    position:absolute; left:0; right:0; bottom:0; height:680px;73    background:var(--sheet); border-top-left-radius:42px; border-top-right-radius:42px;74    box-shadow:0 -10px 40px rgba(0,0,0,0.35);75  }76  .sheet-header{ position:absolute; top:38px; left:32px; right:32px; height:80px; }77  .sheet-header .back{ position:absolute; left:12px; top:0; width:60px; height:60px; display:flex; align-items:center; justify-content:center; }78  .sheet-header .title{ position:absolute; left:92px; top:6px; color:#e6e6e6; font-size:44px; font-weight:600; }79 80  .option{ position:relative; margin:160px 40px 0 40px; padding:28px 28px 28px 92px; border-radius:18px; }81  .option .label{ color:#e9edf0; font-size:40px; }82  .option .hint{ color:#aab1b6; font-size:28px; margin-top:10px; }83  .radio{84    position:absolute; left:22px; top:40px; width:44px; height:44px; border-radius:50%;85    border:3px solid var(--accent); display:flex; align-items:center; justify-content:center; background:transparent;86  }87  .radio::after{88    content:""; width:22px; height:22px; border-radius:50%; background:var(--accent);89  }90  .option.second{ margin-top:40px; }91  .option.second .radio{ border-color:#9aa1a6; }92  .option.second .radio::after{ background:transparent; width:0; height:0; }93 94  .next-btn{95    position:absolute; right:40px; bottom:118px;96    width:180px; height:90px; background:var(--accent); color:#0e2035;97    border-radius:45px; display:flex; align-items:center; justify-content:center;98    font-size:38px; font-weight:600;99    box-shadow:0 6px 16px rgba(138,185,244,0.35);100  }101 102  /* Gesture bar */103  .gesture{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:360px; height:12px; background:#ffffff; border-radius:6px; opacity:0.9; }104 105  /* Utility icon color */106  .muted{ stroke:var(--icon); }107</style>108</head>109<body>110<div id="render-target">111 112  <!-- Status bar -->113  <div class="status-bar">114    <div class="time">8:47</div>115    <div class="status-icons">116      <!-- Wi‑Fi -->117      <svg viewBox="0 0 24 24">118        <path d="M2 9 Q12 2 22 9" stroke-width="2.4"></path>119        <path d="M5 12 Q12 6 19 12" stroke-width="2.4"></path>120        <path d="M8 15 Q12 11 16 15" stroke-width="2.4"></path>121        <circle cx="12" cy="18" r="2.2" fill="#ffffff"></circle>122      </svg>123      <!-- Battery -->124      <svg viewBox="0 0 30 24">125        <rect x="2" y="5" width="22" height="14" rx="3" ry="3" stroke-width="2.4"></rect>126        <rect x="4" y="7" width="15" height="10" rx="2" ry="2" fill="#ffffff" opacity="0.9"></rect>127        <rect x="24" y="9" width="4" height="6" rx="1" ry="1" stroke-width="2" fill="#ffffff"></rect>128      </svg>129    </div>130  </div>131 132  <!-- App bar with actions -->133  <div class="app-bar">134    <div class="left">135      <!-- Back arrow -->136      <svg viewBox="0 0 48 48">137        <polyline points="30,10 16,24 30,38" class="muted" fill="none" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"></polyline>138      </svg>139    </div>140    <div class="right">141      <!-- Star -->142      <svg viewBox="0 0 48 48">143        <polygon points="24,6 29,18 42,18 31,26 35,38 24,30 13,38 17,26 6,18 19,18" class="muted" fill="none" stroke-width="2.6" stroke-linejoin="round"></polygon>144      </svg>145      <!-- Share -->146      <svg viewBox="0 0 48 48">147        <circle cx="12" cy="30" r="4" class="muted" stroke-width="2.6"></circle>148        <circle cx="36" cy="18" r="4" class="muted" stroke-width="2.6"></circle>149        <circle cx="36" cy="34" r="4" class="muted" stroke-width="2.6"></circle>150        <path d="M16 30 L32 20 M16 30 L32 30" class="muted" stroke-width="2.6"></path>151      </svg>152      <!-- Scissors -->153      <svg viewBox="0 0 48 48">154        <circle cx="14" cy="16" r="6" class="muted" stroke-width="2.6"></circle>155        <circle cx="14" cy="32" r="6" class="muted" stroke-width="2.6"></circle>156        <path d="M20 16 L42 26 M20 32 L42 22" class="muted" stroke-width="2.6" stroke-linecap="round"></path>157      </svg>158      <!-- Search -->159      <svg viewBox="0 0 48 48">160        <circle cx="22" cy="22" r="12" class="muted" stroke-width="2.6"></circle>161        <line x1="32" y1="32" x2="44" y2="44" class="muted" stroke-width="3" stroke-linecap="round"></line>162      </svg>163      <!-- More (vertical dots) -->164      <svg viewBox="0 0 48 48">165        <circle cx="24" cy="12" r="3.2" fill="var(--icon)"></circle>166        <circle cx="24" cy="24" r="3.2" fill="var(--icon)"></circle>167        <circle cx="24" cy="36" r="3.2" fill="var(--icon)"></circle>168      </svg>169    </div>170  </div>171 172  <!-- Title card -->173  <div class="title-card">174    <div class="title">Birthday Song</div>175    <div class="subtitle">Thu, Dec 14 • 7:56 AM</div>176  </div>177 178  <!-- Waveform area -->179  <div class="wave-area">180    <div class="vline"></div>181    <div class="bars">182      <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>183      <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>184      <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>185      <div class="bar"></div><div class="bar"></div><div class="bar"></div>186    </div>187  </div>188 189  <!-- Bottom sheet -->190  <div class="sheet">191    <div class="sheet-header">192      <div class="back">193        <svg viewBox="0 0 48 48">194          <polyline points="30,10 16,24 30,38" stroke="#cfd6db" fill="none" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"></polyline>195        </svg>196      </div>197      <div class="title">Select file</div>198    </div>199 200    <div class="option">201      <div class="radio"></div>202      <div class="label">Audio (.m4a)</div>203      <div class="hint">File size is 347 kB</div>204    </div>205 206    <div class="option second">207      <div class="radio"></div>208      <div class="label">Transcript (.txt)</div>209    </div>210 211    <div class="next-btn">Next</div>212  </div>213 214  <div class="gesture"></div>215</div>216</body>217</html>