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.0">6<title>Recreated Mobile UI</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: #2f2f2f;15    font-family: "Segoe UI", Roboto, Arial, sans-serif;16    color: #eeeeee;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 96px;24    background: #1f1f1f;25    color: #eaeaea;26    display: flex;27    align-items: center;28    padding: 0 28px;29    font-size: 34px;30    letter-spacing: 0.5px;31  }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 22px;37  }38  .icon-small svg { display: block; }39 40  /* App top bar */41  .top-bar {42    position: absolute;43    top: 96px; left: 0; right: 0;44    height: 140px;45    background: #262626;46    display: flex;47    align-items: center;48    padding: 0 24px;49  }50  .back-btn {51    width: 72px; height: 72px;52    display: flex; align-items: center; justify-content: center;53    margin-right: 16px;54  }55  .title {56    font-size: 44px;57    color: #f3f3f3;58  }59  .spacer { flex: 1; }60  .top-icon {61    width: 72px; height: 72px;62    display: flex; align-items: center; justify-content: center;63    margin-left: 8px;64  }65 66  /* Content area */67  .content {68    position: absolute;69    top: 236px;70    bottom: 210px; /* leave room for bottom toolbar */71    left: 0; right: 0;72    background: #2f2f2f;73    padding: 48px 40px;74  }75  .doc-line {76    font-size: 48px;77    line-height: 1.6;78    color: #f5f5f5;79  }80 81  /* Bottom toolbar */82  .bottom-toolbar {83    position: absolute;84    left: 0; right: 0; bottom: 64px;85    height: 180px;86    background: #242424;87    border-top: 1px solid rgba(255,255,255,0.06);88    display: flex;89    align-items: center;90    justify-content: space-around;91    padding: 0 20px;92  }93  .tool {94    width: 180px;95    display: flex;96    align-items: center;97    justify-content: center;98    flex-direction: column;99    gap: 16px;100    color: #cfcfcf;101    text-align: center;102    font-size: 30px;103  }104  .tool svg { width: 56px; height: 56px; fill: #cfcfcf; }105 106  /* Gesture pill */107  .gesture {108    position: absolute;109    left: 50%;110    transform: translateX(-50%);111    bottom: 16px;112    width: 260px;113    height: 10px;114    background: #ffffff;115    border-radius: 8px;116    opacity: 0.9;117  }118</style>119</head>120<body>121<div id="render-target">122  <!-- Status Bar -->123  <div class="status-bar">124    <div>4:47</div>125    <div class="status-right">126      <!-- Simple small status icons -->127      <div class="icon-small">128        <svg width="34" height="34" viewBox="0 0 24 24">129          <circle cx="12" cy="12" r="2" fill="#eaeaea"/>130        </svg>131      </div>132      <div class="icon-small">133        <svg width="34" height="34" viewBox="0 0 24 24">134          <rect x="3" y="6" width="14" height="12" rx="2" fill="#eaeaea"/>135          <rect x="18" y="10" width="3" height="4" fill="#eaeaea"/>136        </svg>137      </div>138      <div class="icon-small">139        <svg width="34" height="34" viewBox="0 0 24 24">140          <path d="M2 12h4l3 6 4-12 3 6h6" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/>141        </svg>142      </div>143    </div>144  </div>145 146  <!-- Top App Bar -->147  <div class="top-bar">148    <div class="back-btn">149      <svg width="40" height="40" viewBox="0 0 24 24">150        <path d="M15 5l-7 7 7 7" stroke="#f0f0f0" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>151      </svg>152    </div>153    <div class="title">fun time docs - Saved</div>154    <div class="spacer"></div>155    <div class="top-icon">156      <!-- Search -->157      <svg width="40" height="40" viewBox="0 0 24 24">158        <circle cx="10.5" cy="10.5" r="6.5" stroke="#f0f0f0" stroke-width="2" fill="none"/>159        <path d="M15.5 15.5L21 21" stroke="#f0f0f0" stroke-width="2" stroke-linecap="round"/>160      </svg>161    </div>162    <div class="top-icon">163      <!-- More vertical -->164      <svg width="40" height="40" viewBox="0 0 24 24">165        <circle cx="12" cy="5" r="2" fill="#f0f0f0"/>166        <circle cx="12" cy="12" r="2" fill="#f0f0f0"/>167        <circle cx="12" cy="19" r="2" fill="#f0f0f0"/>168      </svg>169    </div>170  </div>171 172  <!-- Document Content -->173  <div class="content">174    <div class="doc-line">Fun time</div>175  </div>176 177  <!-- Bottom Toolbar -->178  <div class="bottom-toolbar">179    <div class="tool">180      <svg viewBox="0 0 24 24">181        <rect x="3" y="4" width="18" height="14" rx="2" />182        <rect x="6" y="7" width="12" height="2" />183        <rect x="6" y="11" width="8" height="2" />184      </svg>185      <div>Print Layout</div>186    </div>187    <div class="tool">188      <svg viewBox="0 0 24 24">189        <rect x="4" y="6" width="16" height="2"/>190        <rect x="7" y="11" width="13" height="2"/>191        <rect x="10" y="16" width="10" height="2"/>192      </svg>193      <div>Headings</div>194    </div>195    <div class="tool">196      <svg viewBox="0 0 24 24">197        <path d="M4 20v-9M4 11h10" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>198        <path d="M18 7l-6 6" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>199        <path d="M14 7h4v4" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>200      </svg>201      <div>Edit</div>202    </div>203    <div class="tool">204      <svg viewBox="0 0 24 24">205        <circle cx="6" cy="12" r="3"/>206        <circle cx="18" cy="6" r="3"/>207        <circle cx="18" cy="18" r="3"/>208        <path d="M8.5 10.5L15.5 7.5M8.5 13.5L15.5 16.5" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>209      </svg>210      <div>Share</div>211    </div>212    <div class="tool">213      <svg viewBox="0 0 24 24">214        <path d="M5 18V6h2.5l3 8 3-8H16v12" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>215        <path d="M18 9c1.8 1.8 1.8 4.2 0 6" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>216        <path d="M19.5 7.5c2.7 2.7 2.7 6.3 0 9" stroke="#cfcfcf" stroke-width="2" fill="none" stroke-linecap="round"/>217      </svg>218      <div>Read Aloud</div>219    </div>220  </div>221 222  <!-- Gesture bar -->223  <div class="gesture"></div>224</div>225</body>226</html>