GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Rendered UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #e9e9e9; font-family: Arial, Helvetica, sans-serif;11  }12 13  /* Status bar */14  .status-bar {15    position: absolute; top: 0; left: 0; width: 100%; height: 140px;16    background: #000; color: #fff; display: flex; align-items: center; justify-content: space-between;17    padding: 0 36px; box-sizing: border-box; font-size: 48px; letter-spacing: 0.5px;18  }19  .status-icons { display: flex; align-items: center; gap: 28px; }20  .status-dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.9; }21  .status-battery {22    width: 44px; height: 24px; border: 3px solid #fff; border-radius: 6px; position: relative;23  }24  .status-battery::after {25    content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 2px;26  }27  .status-battery .level { position: absolute; left: 3px; top: 3px; width: 30px; height: 16px; background: #fff; }28 29  /* Underlying content */30  .content {31    position: absolute; top: 140px; left: 0; right: 0; bottom: 0; background: #efefef;32  }33  .header {34    padding: 40px; display: flex; align-items: center;35  }36  .close-btn {37    width: 72px; height: 72px; border-radius: 50%; background: #2fbfb0;38    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 56px; line-height: 56px;39  }40  .title {41    font-size: 96px; font-weight: 600; color: #dcdcdc; margin-left: 28px;42  }43  .menu-pill {44    margin-left: auto; width: 140px; height: 64px; background: #545454; border-radius: 32px;45    display: flex; align-items: center; justify-content: space-around;46  }47  .menu-pill .dot {48    width: 12px; height: 12px; background: #bbb; border-radius: 50%;49  }50  .doc {51    margin: 20px 40px; height: 1200px; background: #E0E0E0; border: 1px solid #BDBDBD;52    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px;53  }54 55  /* Dim overlay above content (not covering status bar) */56  .overlay {57    position: absolute; top: 140px; left: 0; width: 100%; height: 2260px;58    background: rgba(0,0,0,0.45); z-index: 3;59  }60 61  /* Bottom sheet */62  .sheet {63    position: absolute; left: 0; bottom: 0; width: 100%; height: 1520px; z-index: 10;64    background: #2f2f2f; color: #fff; border-top-left-radius: 48px; border-top-right-radius: 48px;65    box-shadow: 0 -16px 64px rgba(0,0,0,0.6); box-sizing: border-box; padding: 36px 40px 48px;66  }67  .grabber {68    width: 160px; height: 12px; background: #e6e6e6; border-radius: 8px; margin: 0 auto 24px;69  }70  .sheet-title { font-size: 60px; font-weight: 600; margin: 12px 0 24px; }71  .divider { height: 2px; background: rgba(255,255,255,0.18); margin: 16px 0 8px; }72 73  .row {74    display: flex; align-items: center; height: 108px; gap: 34px; padding: 0 8px;75  }76  .row svg { width: 56px; height: 56px; stroke: #fff; fill: none; stroke-width: 3; }77  .label { font-size: 48px; color: #fff; }78  .row.red .label { color: #ff4b4b; }79  .row.red svg { stroke: #ff4b4b; }80 81  /* Bottom home indicator */82  .home-indicator {83    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);84    width: 220px; height: 10px; background: #fff; border-radius: 6px; opacity: 0.9; z-index: 15;85  }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Status Bar -->92  <div class="status-bar">93    <div>2:16</div>94    <div class="status-icons">95      <svg width="40" height="40" viewBox="0 0 40 40">96        <path d="M8 20h24" stroke="#fff" stroke-width="3" />97        <path d="M20 8v24" stroke="#fff" stroke-width="3" />98      </svg>99      <div class="status-dot"></div>100      <svg width="40" height="40" viewBox="0 0 40 40">101        <rect x="8" y="8" width="24" height="18" stroke="#fff" fill="none" stroke-width="3"/>102        <path d="M12 30h16" stroke="#fff" stroke-width="3"/>103      </svg>104      <div class="status-battery"><div class="level"></div></div>105    </div>106  </div>107 108  <!-- Underlying content -->109  <div class="content">110    <div class="header">111      <div class="close-btn">×</div>112      <div class="title">Details</div>113      <div class="menu-pill">114        <span class="dot"></span><span class="dot"></span><span class="dot"></span>115      </div>116    </div>117    <div class="doc">[IMG: Document page content]</div>118  </div>119 120  <!-- Dim overlay -->121  <div class="overlay"></div>122 123  <!-- Bottom sheet modal -->124  <div class="sheet">125    <div class="grabber"></div>126    <div class="sheet-title">Report</div>127    <div class="divider"></div>128 129    <div class="row">130      <svg viewBox="0 0 56 56">131        <circle cx="28" cy="28" r="24"></circle>132        <path d="M18 28l6 6 14-14"></path>133      </svg>134      <div class="label">Add to Offline Viewer</div>135    </div>136 137    <div class="row">138      <svg viewBox="0 0 56 56">139        <circle cx="14" cy="16" r="6"></circle>140        <circle cx="42" cy="28" r="6"></circle>141        <circle cx="14" cy="40" r="6"></circle>142        <path d="M20 18l16 8M20 38l16-8"></path>143      </svg>144      <div class="label">Share</div>145    </div>146 147    <div class="row">148      <svg viewBox="0 0 56 56">149        <rect x="8" y="14" width="40" height="28" rx="4"></rect>150        <path d="M8 18l20 12 20-12"></path>151      </svg>152      <div class="label">Email</div>153    </div>154 155    <div class="row">156      <svg viewBox="0 0 56 56">157        <path d="M20 22c0-6 6-10 12-8 3 1 5 3 6 6"></path>158        <path d="M36 34c0 6-6 10-12 8-3-1-5-3-6-6"></path>159        <path d="M24 28h8"></path>160      </svg>161      <div class="label">Copy Shareable Link</div>162    </div>163 164    <div class="row">165      <svg viewBox="0 0 56 56">166        <path d="M14 28l16-16h10v10L24 38H14z"></path>167        <circle cx="22" cy="30" r="2"></circle>168      </svg>169      <div class="label">Tags</div>170    </div>171 172    <div class="row">173      <svg viewBox="0 0 56 56">174        <rect x="10" y="16" width="36" height="28" rx="4"></rect>175        <path d="M16 16v-6M40 16v-6"></path>176        <path d="M16 28h24"></path>177      </svg>178      <div class="label">Add to Calendar</div>179    </div>180 181    <div class="row">182      <svg viewBox="0 0 56 56">183        <path d="M28 8v12"></path>184        <path d="M28 36v12"></path>185        <path d="M8 28h12"></path>186        <path d="M36 28h12"></path>187        <path d="M16 16l8 8-8 8"></path>188        <path d="M40 16l-8 8 8 8"></path>189      </svg>190      <div class="label">Move to</div>191    </div>192 193    <div class="row">194      <svg viewBox="0 0 56 56">195        <rect x="10" y="12" width="26" height="32" rx="4"></rect>196        <rect x="20" y="18" width="26" height="32" rx="4"></rect>197      </svg>198      <div class="label">Copy to</div>199    </div>200 201    <div class="row">202      <svg viewBox="0 0 56 56">203        <path d="M28 12v24"></path>204        <path d="M16 28l12 12 12-12"></path>205        <rect x="10" y="40" width="36" height="6"></rect>206      </svg>207      <div class="label">Save to Device</div>208    </div>209 210    <div class="row">211      <svg viewBox="0 0 56 56">212        <rect x="10" y="16" width="36" height="28" rx="4"></rect>213        <path d="M18 36l10-10 10 10"></path>214        <rect x="18" y="22" width="12" height="6"></rect>215      </svg>216      <div class="label">Set as Folder Image</div>217    </div>218 219    <div class="row">220      <svg viewBox="0 0 56 56">221        <circle cx="28" cy="28" r="24"></circle>222        <path d="M28 20v16"></path>223        <circle cx="28" cy="16" r="2"></circle>224      </svg>225      <div class="label">Item Info</div>226    </div>227 228    <div class="row red">229      <svg viewBox="0 0 56 56">230        <path d="M16 18h24"></path>231        <path d="M22 18v24M34 18v24"></path>232        <rect x="16" y="18" width="24" height="28" rx="2"></rect>233        <path d="M20 12h16"></path>234      </svg>235      <div class="label">Trash</div>236    </div>237  </div>238 239  <!-- Home indicator (system navigation pill) -->240  <div class="home-indicator"></div>241 242</div>243</body>244</html>