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>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top black status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #000;25  }26 27  /* Poster/card in the upper middle */28  .poster {29    position: absolute;30    left: 120px;31    top: 520px;32    width: 840px;33    height: 360px;34    border: 28px solid #000;35    box-sizing: border-box;36    display: flex;37    flex-direction: column;38    justify-content: center;39    align-items: center;40    background: #fff;41  }42  .poster .subtitle {43    font-family: Arial, Helvetica, sans-serif;44    font-size: 50px;45    color: #222;46    margin: 0 40px 40px;47    text-align: center;48    line-height: 1.2;49  }50  .poster .city {51    font-family: Arial, Helvetica, sans-serif;52    font-weight: 900;53    font-size: 72px;54    letter-spacing: 3px;55    color: #000;56  }57 58  /* Bottom tool area */59  .bottom-dock {60    position: absolute;61    left: 0;62    bottom: 120px; /* leave room for home indicator */63    width: 1080px;64    height: 360px;65    display: flex;66    flex-direction: column;67  }68 69  .tool-icons {70    height: 180px;71    background: #8a2be2;72    display: flex;73    align-items: center;74    justify-content: space-around;75    padding: 0 30px;76    box-sizing: border-box;77  }78  .icon {79    width: 90px;80    height: 90px;81    display: flex;82    align-items: center;83    justify-content: center;84  }85  .icon svg { width: 90%; height: 90%; }86 87  .thumb-strip {88    flex: 1;89    background: #ffffff;90    display: flex;91    align-items: center;92    padding: 12px 18px;93    box-sizing: border-box;94    gap: 18px;95    overflow: hidden;96    border-top: 2px solid #e0e0e0;97  }98  .side-controls {99    width: 70px;100    align-self: stretch;101    display: flex;102    flex-direction: column;103    align-items: center;104    justify-content: center;105    gap: 14px;106  }107  .side-controls .pill {108    width: 46px;109    height: 46px;110    border-radius: 50%;111    background: #0aa3e6;112    color: #fff;113    font: 700 26px/46px Arial, sans-serif;114    text-align: center;115  }116 117  .thumb {118    width: 160px;119    height: 150px;120    background: #E0E0E0;121    border: 1px solid #BDBDBD;122    display: flex;123    align-items: center;124    justify-content: center;125    color: #555;126    text-align: center;127    padding: 6px;128    box-sizing: border-box;129    border-radius: 6px;130    flex: 0 0 auto;131  }132 133  /* Bottom black area with home indicator */134  .home-area {135    position: absolute;136    bottom: 0;137    left: 0;138    width: 1080px;139    height: 120px;140    background: #000;141    display: flex;142    align-items: center;143    justify-content: center;144  }145  .home-indicator {146    width: 220px;147    height: 8px;148    background: #fff;149    border-radius: 6px;150    opacity: 0.9;151  }152</style>153</head>154<body>155  <div id="render-target">156    <div class="status-bar"></div>157 158    <!-- Central framed text -->159    <div class="poster">160      <div class="subtitle">A lecture on Dutch history</div>161      <div class="city">GRONINGEN</div>162    </div>163 164    <!-- Bottom tool area -->165    <div class="bottom-dock">166      <div class="tool-icons">167        <!-- Icon: AD circle -->168        <div class="icon">169          <svg viewBox="0 0 24 24">170            <circle cx="12" cy="12" r="10" fill="#673ab7"></circle>171            <text x="12" y="15" text-anchor="middle" font-size="10" font-family="Arial" fill="#ffffff" font-weight="700">AD</text>172          </svg>173        </div>174        <!-- Icon: color wheel -->175        <div class="icon">176          <svg viewBox="0 0 24 24">177            <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"></circle>178            <path d="M12 3 A9 9 0 0 1 21 12" stroke="#fff" stroke-width="2" fill="none"/>179            <path d="M3 12 A9 9 0 0 1 12 21" stroke="#fff" stroke-width="2" fill="none"/>180            <path d="M12 3 L12 12" stroke="#fff" stroke-width="2"/>181          </svg>182        </div>183        <!-- Icon: brush -->184        <div class="icon">185          <svg viewBox="0 0 24 24">186            <path d="M3 21c2 0 3-1 4-3s3-3 5-3l-2-2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>187            <path d="M20 4l-8 8l3 3l8-8z" fill="#fff"/>188          </svg>189        </div>190        <!-- Icon: eraser -->191        <div class="icon">192          <svg viewBox="0 0 24 24">193            <path d="M3 16l8-8l6 6l-6 6H7z" fill="none" stroke="#fff" stroke-width="2"/>194          </svg>195        </div>196        <!-- Icon: square/shape -->197        <div class="icon">198          <svg viewBox="0 0 24 24">199            <rect x="5" y="5" width="14" height="14" fill="none" stroke="#fff" stroke-width="2"></rect>200          </svg>201        </div>202        <!-- Icon: droplet -->203        <div class="icon">204          <svg viewBox="0 0 24 24">205            <path d="M12 3C12 3 6 10 6 14a6 6 0 0 0 12 0c0-4-6-11-6-11z" fill="none" stroke="#fff" stroke-width="2"/>206          </svg>207        </div>208        <!-- Icon: save -->209        <div class="icon">210          <svg viewBox="0 0 24 24">211            <path d="M4 4h12l4 4v12H4z" fill="none" stroke="#fff" stroke-width="2"/>212            <rect x="7" y="4" width="6" height="5" fill="#fff"></rect>213          </svg>214        </div>215        <!-- Icon: TT -->216        <div class="icon">217          <svg viewBox="0 0 24 24">218            <text x="12" y="16" text-anchor="middle" font-size="14" font-family="Arial" fill="#fff" font-weight="700">Tt</text>219          </svg>220        </div>221        <!-- Icon: undo -->222        <div class="icon">223          <svg viewBox="0 0 24 24">224            <path d="M9 8H4l4-4v3c7 0 9 3 9 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>225          </svg>226        </div>227        <!-- Icon: expand -->228        <div class="icon">229          <svg viewBox="0 0 24 24">230            <path d="M4 9V4h5" stroke="#fff" stroke-width="2" fill="none"/>231            <path d="M20 15v5h-5" stroke="#fff" stroke-width="2" fill="none"/>232            <path d="M4 4l6 6" stroke="#fff" stroke-width="2" fill="none"/>233            <path d="M20 20l-6-6" stroke="#fff" stroke-width="2" fill="none"/>234          </svg>235        </div>236      </div>237 238      <div class="thumb-strip">239        <div class="side-controls">240          <div class="pill">i</div>241          <div class="pill">x</div>242        </div>243        <div class="thumb">[IMG: Dome Building]</div>244        <div class="thumb">[IMG: Scenic Landscape]</div>245        <div class="thumb">[IMG: Gothic Cathedral]</div>246        <div class="thumb">[IMG: Arch Bridge]</div>247        <div class="thumb">[IMG: Cable Car]</div>248        <div class="thumb">[IMG: Under Bridge]</div>249      </div>250    </div>251 252    <div class="home-area">253      <div class="home-indicator"></div>254    </div>255  </div>256</body>257</html>