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 Reconstruction</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13  }14  #render-target {15    position: relative;16    width: 1080px;17    height: 2400px;18    overflow: hidden;19    background: #FFFFFF;20  }21 22  /* Top black bar (status/header) */23  .top-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 120px;29    background: #000;30  }31 32  /* Center framed content */33  .framed-box {34    position: absolute;35    left: 120px;36    top: 560px;37    width: 840px;38    height: 360px;39    border: 36px solid #000000;40    background: #FFFFFF;41    box-sizing: border-box;42    display: flex;43    flex-direction: column;44    justify-content: center;45    align-items: center;46    text-align: center;47  }48  .framed-box .subtitle {49    font-size: 52px;50    color: #222;51    line-height: 1.3;52    margin: 0 40px 30px;53    font-weight: 500;54  }55  .framed-box .city {56    font-size: 80px;57    font-weight: 900;58    letter-spacing: 2px;59    color: #000;60  }61 62  /* Large white canvas area spacing simulation */63  .spacer-area {64    position: absolute;65    top: 0;66    left: 0;67    right: 0;68    bottom: 420px; /* reserve space for bottom controls and home indicator */69    pointer-events: none;70  }71 72  /* Purple tools bar */73  .tools-bar {74    position: absolute;75    left: 0;76    bottom: 360px;77    width: 1080px;78    height: 190px;79    background: #8E28D9;80    display: flex;81    align-items: center;82    padding: 0 40px;83    box-sizing: border-box;84    gap: 54px;85  }86 87  .icon {88    width: 86px;89    height: 86px;90    display: flex;91    align-items: center;92    justify-content: center;93    color: #fff;94  }95  .icon svg {96    width: 60px;97    height: 60px;98    fill: #FFFFFF;99  }100  .icon.tt {101    font-weight: 800;102    font-size: 42px;103    color: #fff;104  }105 106  /* Thumbnails strip */107  .thumb-strip {108    position: absolute;109    left: 0;110    bottom: 170px;111    width: 1080px;112    height: 170px;113    background: #FFFFFF;114    display: flex;115    align-items: center;116    gap: 18px;117    padding: 0 20px;118    box-sizing: border-box;119  }120  .thumb {121    width: 150px;122    height: 140px;123    background: #E0E0E0;124    border: 1px solid #BDBDBD;125    color: #757575;126    font-size: 22px;127    display: flex;128    align-items: center;129    justify-content: center;130    text-align: center;131    border-radius: 6px;132  }133 134  /* Bottom black bar + home indicator */135  .bottom-bar {136    position: absolute;137    bottom: 0;138    left: 0;139    width: 1080px;140    height: 170px;141    background: #000;142  }143  .home-indicator {144    position: absolute;145    bottom: 52px;146    left: 50%;147    transform: translateX(-50%);148    width: 280px;149    height: 10px;150    background: #FFFFFF;151    opacity: 0.95;152    border-radius: 8px;153  }154</style>155</head>156<body>157  <div id="render-target">158    <div class="top-bar"></div>159 160    <div class="spacer-area"></div>161 162    <div class="framed-box">163      <div class="subtitle">A lecture on Dutch history</div>164      <div class="city">GRONINGEN</div>165    </div>166 167    <div class="tools-bar">168      <!-- Simple circular icon -->169      <div class="icon">170        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg>171      </div>172      <!-- Paint brush (simple) -->173      <div class="icon">174        <svg viewBox="0 0 24 24">175          <path d="M18 3l3 3-7 7-3-3 7-7zM9 11l4 4c-1 2-2 3-5 3-2 0-3 1-3 3H3c0-4 2-6 6-6 2 0 3-1 0-4z"/>176        </svg>177      </div>178      <!-- Eraser -->179      <div class="icon">180        <svg viewBox="0 0 24 24">181          <path d="M3 16l8-8 6 6-6 6H7L3 16zM14 6l2-2 5 5-2 2-5-5z"/>182        </svg>183      </div>184      <!-- Shape icon -->185      <div class="icon">186        <svg viewBox="0 0 24 24">187          <rect x="4" y="4" width="8" height="8"></rect>188          <circle cx="17" cy="17" r="5"></circle>189        </svg>190      </div>191      <!-- Save (floppy) -->192      <div class="icon">193        <svg viewBox="0 0 24 24">194          <path d="M4 4h12l4 4v12H4V4zm3 0v6h10V6H7z"/>195        </svg>196      </div>197      <!-- Text tool -->198      <div class="icon tt">Tt</div>199      <!-- Undo arrow -->200      <div class="icon">201        <svg viewBox="0 0 24 24">202          <path d="M12 5V2L6 8l6 6V9c3 0 6 1 6 5 0 2-1 4-3 5 3-1 5-4 5-7 0-5-4-7-8-7z"/>203        </svg>204      </div>205      <!-- Redo arrow -->206      <div class="icon">207        <svg viewBox="0 0 24 24">208          <path d="M12 5V2l6 6-6 6V9c-3 0-6 1-6 5 0 2 1 4 3 5-3-1-5-4-5-7 0-5 4-7 8-7z"/>209        </svg>210      </div>211      <!-- Expand icon -->212      <div class="icon">213        <svg viewBox="0 0 24 24">214          <path d="M3 10V3h7v2H6.4L11 9.6 9.6 11 5 6.4V10H3zm18 4v7h-7v-2h3.6L13 14.4 14.4 13 19 17.6V14h2z"/>215        </svg>216      </div>217    </div>218 219    <div class="thumb-strip">220      <div class="thumb">[IMG: Landmark]</div>221      <div class="thumb">[IMG: City View]</div>222      <div class="thumb">[IMG: Traveler]</div>223      <div class="thumb">[IMG: Cathedral]</div>224      <div class="thumb">[IMG: Bridge]</div>225      <div class="thumb">[IMG: Cable Car]</div>226      <div class="thumb">[IMG: Underpass]</div>227    </div>228 229    <div class="bottom-bar">230      <div class="home-indicator"></div>231    </div>232  </div>233</body>234</html>