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>Document - Saved</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: #2b2b2b;15    font-family: Roboto, Arial, sans-serif;16    color: #ffffff;17  }18  .statusbar {19    position: absolute;20    top: 0; left: 0;21    width: 100%; height: 96px;22    background: #1e1e1e;23    display: flex;24    align-items: center;25    padding: 0 36px;26    box-sizing: border-box;27    font-size: 32px;28    letter-spacing: 0.5px;29  }30  .status-right {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 26px;35  }36  .sb-icon {37    width: 28px; height: 28px;38    background: #e0e0e0;39    border-radius: 6px;40    opacity: 0.75;41  }42  .battery {43    width: 44px; height: 22px;44    border: 2px solid #e0e0e0;45    border-radius: 4px;46    position: relative;47  }48  .battery::after {49    content: "";50    position: absolute;51    right: -6px; top: 5px;52    width: 6px; height: 12px;53    background: #e0e0e0;54    border-radius: 2px;55  }56  .battery-fill {57    position: absolute;58    left: 2px; top: 2px;59    height: 16px; width: 28px;60    background: #e0e0e0;61    border-radius: 2px;62  }63 64  .appbar {65    position: absolute;66    top: 96px; left: 0;67    width: 100%; height: 140px;68    background: #232323;69    display: flex;70    align-items: center;71    box-sizing: border-box;72    padding: 0 28px;73    border-bottom: 1px solid #3a3a3a;74  }75  .appbar-title {76    font-size: 44px;77    font-weight: 500;78    margin-left: 20px;79    letter-spacing: 0.2px;80  }81  .appbar-actions {82    margin-left: auto;83    display: flex;84    align-items: center;85    gap: 34px;86  }87  .icon-btn svg { display: block; }88  .content {89    position: absolute;90    top: 236px; left: 0;91    right: 0; bottom: 240px;92    padding: 48px 48px;93    box-sizing: border-box;94  }95  .doc-line {96    font-size: 54px;97    color: #ffffff;98    margin-top: 20px;99  }100  .bottom-toolbar {101    position: absolute;102    left: 0; right: 0; bottom: 0;103    height: 220px;104    background: #1f1f1f;105    border-top: 1px solid #3a3a3a;106    display: flex;107    align-items: center;108    justify-content: space-around;109    padding: 24px 24px 40px;110    box-sizing: border-box;111  }112  .tool {113    width: 180px;114    display: flex;115    flex-direction: column;116    align-items: center;117    gap: 22px;118    color: #d7d7d7;119    font-size: 30px;120  }121  .tool svg { width: 72px; height: 72px; }122  .gesture {123    position: absolute;124    bottom: 12px; left: 50%;125    transform: translateX(-50%);126    width: 220px; height: 12px;127    background: #e6e6e6;128    border-radius: 8px;129    opacity: 0.9;130  }131</style>132</head>133<body>134<div id="render-target">135 136  <!-- Status bar -->137  <div class="statusbar">138    <div>4:44</div>139    <div class="status-right">140      <div class="sb-icon"></div>141      <div class="sb-icon"></div>142      <div class="sb-icon"></div>143      <div class="sb-icon" style="border-radius:50%;"></div>144      <div class="sb-icon" style="border-radius:50%;"></div>145      <div class="battery"><div class="battery-fill"></div></div>146    </div>147  </div>148 149  <!-- App bar -->150  <div class="appbar">151    <div class="icon-btn">152      <svg width="60" height="60" viewBox="0 0 48 48">153        <polyline points="30,8 14,24 30,40" fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>154      </svg>155    </div>156    <div class="appbar-title">Document - Saved</div>157    <div class="appbar-actions">158      <div class="icon-btn">159        <svg width="60" height="60" viewBox="0 0 48 48">160          <circle cx="20" cy="20" r="12" fill="none" stroke="#ffffff" stroke-width="3"/>161          <line x1="32" y1="32" x2="44" y2="44" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>162        </svg>163      </div>164      <div class="icon-btn">165        <svg width="60" height="60" viewBox="0 0 48 48">166          <circle cx="24" cy="10" r="4" fill="#ffffff"/>167          <circle cx="24" cy="24" r="4" fill="#ffffff"/>168          <circle cx="24" cy="38" r="4" fill="#ffffff"/>169        </svg>170      </div>171    </div>172  </div>173 174  <!-- Content -->175  <div class="content">176    <div class="doc-line">Fun and Food</div>177  </div>178 179  <!-- Bottom toolbar -->180  <div class="bottom-toolbar">181    <div class="tool">182      <svg viewBox="0 0 64 64">183        <rect x="10" y="12" width="44" height="40" rx="4" ry="4" fill="none" stroke="#d7d7d7" stroke-width="3"/>184        <rect x="18" y="18" width="28" height="6" fill="#d7d7d7"/>185        <rect x="18" y="30" width="20" height="4" fill="#d7d7d7" opacity="0.7"/>186      </svg>187      <div>Print Layout</div>188    </div>189    <div class="tool">190      <svg viewBox="0 0 64 64">191        <rect x="12" y="14" width="40" height="8" fill="#d7d7d7"/>192        <rect x="18" y="28" width="28" height="6" fill="#d7d7d7" opacity="0.8"/>193        <rect x="22" y="40" width="20" height="4" fill="#d7d7d7" opacity="0.6"/>194      </svg>195      <div>Headings</div>196    </div>197    <div class="tool">198      <svg viewBox="0 0 64 64">199        <path d="M20 44 L26 38 L48 16" stroke="#d7d7d7" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>200        <polygon points="48,16 40,16 48,24" fill="#d7d7d7" opacity="0.9"/>201      </svg>202      <div>Edit</div>203    </div>204    <div class="tool">205      <svg viewBox="0 0 64 64">206        <circle cx="18" cy="32" r="6" fill="#d7d7d7"/>207        <circle cx="46" cy="20" r="6" fill="#d7d7d7"/>208        <circle cx="46" cy="44" r="6" fill="#d7d7d7"/>209        <line x1="24" y1="32" x2="40" y2="20" stroke="#d7d7d7" stroke-width="3"/>210        <line x1="24" y1="32" x2="40" y2="44" stroke="#d7d7d7" stroke-width="3"/>211      </svg>212      <div>Share</div>213    </div>214    <div class="tool">215      <svg viewBox="0 0 64 64">216        <text x="12" y="42" font-size="30" fill="#d7d7d7" font-family="Roboto, Arial">A</text>217        <path d="M40 26 C46 30,46 34,40 38" stroke="#56A8FF" stroke-width="3" fill="none" stroke-linecap="round"/>218        <path d="M46 20 C54 26,54 38,46 44" stroke="#56A8FF" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.8"/>219      </svg>220      <div>Read Aloud</div>221    </div>222  </div>223 224  <!-- Gesture bar -->225  <div class="gesture"></div>226</div>227</body>228</html>