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>Groningen Poster Editor</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9 10  /* Root render area */11  #render-target {12    width: 1080px;13    height: 2400px;14    position: relative;15    overflow: hidden;16    background: #0E5F8F; /* deep blue canvas */17  }18 19  /* Simulated device status/top safe area */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 130px;26    background: #000;27  }28 29  /* Main poster card */30  .title-card {31    position: absolute;32    left: 120px;33    top: 440px;34    width: 840px;35    background: #000;           /* thick black frame */36    padding: 28px;37    box-sizing: border-box;38  }39  .title-card .inner {40    background: #FFFFFF;41    padding: 70px 60px 60px;42    box-sizing: border-box;43    border: 1px solid #DCDCDC;44    text-align: center;45  }46  .title-card h1 {47    margin: 0 0 60px;48    font: 500 48px/1.3 "Segoe UI", Arial, Helvetica, sans-serif;49    color: #222;50  }51  .title-card .city {52    margin: 0;53    font: 900 72px/1 "Impact", "Arial Black", "Segoe UI", Arial, sans-serif;54    letter-spacing: 3px;55    color: #000;56  }57 58  /* Purple tool area (two rows of icons) */59  .toolbar {60    position: absolute;61    left: 0;62    right: 0;63    bottom: 300px; /* above thumbs and home area */64    height: 220px;65    background: #9321B5; /* vivid purple */66    box-sizing: border-box;67    padding: 26px 40px 18px;68  }69  .icon-row {70    display: flex;71    justify-content: space-between;72    align-items: center;73  }74  .icon {75    width: 92px;76    height: 92px;77    display: flex;78    align-items: center;79    justify-content: center;80  }81  .icon svg {82    width: 64px;83    height: 64px;84    stroke: #fff;85    fill: none;86    stroke-width: 6;87    stroke-linecap: round;88    stroke-linejoin: round;89  }90  .icon.text {91    color: #fff;92    font: 700 40px/1 "Segoe UI", Arial, sans-serif;93  }94 95  /* Thumbnails strip */96  .thumbs {97    position: absolute;98    left: 0;99    right: 0;100    bottom: 120px;101    height: 180px;102    background: #ffffff;103    display: flex;104    align-items: center;105    padding: 0 20px;106    box-sizing: border-box;107    gap: 18px;108    overflow: hidden;109  }110  .thumbs .close {111    width: 48px;112    height: 48px;113    border-radius: 50%;114    border: 3px solid #35A5FF;115    color: #35A5FF;116    display: flex;117    align-items: center;118    justify-content: center;119    font: 700 30px/1 Arial, sans-serif;120  }121  .thumb {122    width: 170px;123    height: 140px;124    background: #E0E0E0;125    border: 1px solid #BDBDBD;126    color: #757575;127    display: flex;128    align-items: center;129    justify-content: center;130    font: 500 22px/1.2 "Segoe UI", Arial, sans-serif;131    text-align: center;132    padding: 6px;133    box-sizing: border-box;134    white-space: normal;135  }136 137  /* Bottom system home-area */138  .home-area {139    position: absolute;140    left: 0;141    right: 0;142    bottom: 0;143    height: 120px;144    background: #000;145  }146  .home-indicator {147    position: absolute;148    bottom: 36px;149    left: 50%;150    width: 300px;151    height: 10px;152    background: #fff;153    opacity: 0.85;154    border-radius: 8px;155    transform: translateX(-50%);156  }157</style>158</head>159<body>160  <div id="render-target">161    <div class="status-bar"></div>162 163    <!-- Main framed poster content -->164    <div class="title-card">165      <div class="inner">166        <h1>A lecture on Dutch history</h1>167        <p class="city">GRONINGEN</p>168      </div>169    </div>170 171    <!-- Toolbars -->172    <div class="toolbar">173      <div class="icon-row" style="margin-bottom: 18px;">174        <!-- AA inside circle -->175        <div class="icon">176          <svg viewBox="0 0 24 24" aria-label="Text">177            <circle cx="12" cy="12" r="9"></circle>178            <path d="M8 15l2.5-7h3L16 15M9.5 12h5"></path>179          </svg>180        </div>181        <!-- Save -->182        <div class="icon">183          <svg viewBox="0 0 24 24" aria-label="Save">184            <path d="M5 4h11l3 3v13H5z"></path>185            <rect x="7" y="6" width="7" height="5"></rect>186            <rect x="8" y="14" width="8" height="5"></rect>187          </svg>188        </div>189        <!-- Tt -->190        <div class="icon text">Tt</div>191        <!-- Undo -->192        <div class="icon">193          <svg viewBox="0 0 24 24" aria-label="Undo">194            <path d="M9 7L5 11l4 4"></path>195            <path d="M19 17a7 7 0 0 0-7-7H5"></path>196          </svg>197        </div>198        <!-- Redo -->199        <div class="icon" style="opacity:0.6">200          <svg viewBox="0 0 24 24" aria-label="Redo">201            <path d="M15 7l4 4-4 4"></path>202            <path d="M5 17a7 7 0 0 1 7-7h7"></path>203          </svg>204        </div>205      </div>206 207      <div class="icon-row">208        <!-- Color wheel -->209        <div class="icon">210          <svg viewBox="0 0 24 24" aria-label="Color">211            <circle cx="12" cy="12" r="9"></circle>212            <path d="M12 3v18M3 12h18"></path>213          </svg>214        </div>215        <!-- Brush -->216        <div class="icon">217          <svg viewBox="0 0 24 24" aria-label="Brush">218            <path d="M3 21c3 0 4-2 4-4l10-10 3 3-10 10c-2 0-4 1-7 1z"></path>219          </svg>220        </div>221        <!-- Eraser -->222        <div class="icon">223          <svg viewBox="0 0 24 24" aria-label="Eraser">224            <path d="M3 16l7-7 5 5-5 5H6z"></path>225            <path d="M14 9l3-3 4 4-3 3"></path>226          </svg>227        </div>228        <!-- Rectangle -->229        <div class="icon">230          <svg viewBox="0 0 24 24" aria-label="Rectangle">231            <rect x="5" y="6" width="14" height="12"></rect>232          </svg>233        </div>234        <!-- Circle -->235        <div class="icon">236          <svg viewBox="0 0 24 24" aria-label="Circle">237            <circle cx="12" cy="12" r="7"></circle>238          </svg>239        </div>240        <!-- Diamond -->241        <div class="icon">242          <svg viewBox="0 0 24 24" aria-label="Diamond">243            <path d="M12 3l7 9-7 9-7-9z"></path>244          </svg>245        </div>246        <!-- Resize/drag -->247        <div class="icon">248          <svg viewBox="0 0 24 24" aria-label="Drag">249            <path d="M8 16l8-8M10 8h6v6"></path>250          </svg>251        </div>252        <!-- Fullscreen -->253        <div class="icon">254          <svg viewBox="0 0 24 24" aria-label="Fullscreen">255            <path d="M4 9V4h5M15 4h5v5M4 15v5h5M15 20h5v-5"></path>256          </svg>257        </div>258      </div>259    </div>260 261    <!-- Thumbnails -->262    <div class="thumbs">263      <div class="close">×</div>264      <div class="thumb">[IMG: App Logo]</div>265      <div class="thumb">[IMG: Historic Building]</div>266      <div class="thumb">[IMG: Landscape Photo]</div>267      <div class="thumb">[IMG: Cathedral Facade]</div>268      <div class="thumb">[IMG: Bridge Arches]</div>269      <div class="thumb">[IMG: Cable Car]</div>270      <div class="thumb">[IMG: Urban Bridge]</div>271    </div>272 273    <!-- Home indicator area -->274    <div class="home-area">275      <div class="home-indicator"></div>276    </div>277  </div>278</body>279</html>