GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Movie Plans - Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #FFFFFF;13  }14 15  /* Android status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 90px;22    background: #F5F5F5;23    display: flex;24    align-items: center;25    padding: 0 24px;26    color: #212121;27    font-size: 36px;28    letter-spacing: 0.4px;29  }30  .status-icons {31    margin-left: auto;32    display: flex;33    gap: 22px;34    align-items: center;35  }36  .icon { width: 44px; height: 44px; }37  .dot { width: 16px; height: 16px; background:#212121; border-radius:50%; display:inline-block; }38 39  /* App header */40  .app-bar {41    position: absolute;42    top: 90px;43    left: 0;44    width: 1080px;45    height: 150px;46    background: #FFFFFF;47    border-bottom: 1px solid #E0E0E0;48    display: flex;49    align-items: center;50    padding: 0 24px;51  }52  .app-left {53    display: flex;54    gap: 34px;55    align-items: center;56  }57  .app-title {58    position: absolute;59    left: 0;60    right: 0;61    text-align: center;62    font-size: 44px;63    font-weight: 600;64    color: #333;65  }66  .app-right {67    margin-left: auto;68    display: flex;69    gap: 42px;70    align-items: center;71  }72  .kebab {73    width: 12px; height: 12px; background:#555; border-radius:50%; box-shadow: 0 16px 0 #555, 0 -16px 0 #555;74  }75 76  /* Warning banner */77  .banner {78    position: absolute;79    top: 240px;80    left: 0;81    width: 1080px;82    height: 120px;83    background: #FFF3CD;84    color: #5F4E00;85    border-bottom: 1px solid #E6D79B;86    display: flex;87    align-items: center;88    padding: 0 30px;89    font-size: 38px;90  }91  .banner .chev {92    margin-left: auto;93    width: 28px; height: 28px; border-right: 4px solid #806B00; border-bottom: 4px solid #806B00; transform: rotate(45deg);94  }95 96  /* Document area */97  .doc-area {98    position: absolute;99    top: 360px;100    left: 0;101    width: 1080px;102    bottom: 220px; /* leave room for bottom toolbar */103    background: #FFFFFF;104    padding: 40px 56px;105    overflow: hidden;106  }107  .doc-line {108    font-size: 50px;109    line-height: 74px;110    color: #111;111  }112  .red-underline {113    border-bottom: 6px solid #D84343;114    padding-bottom: 6px;115  }116  /* Blue text caret marker (teardrop) */117  .caret {118    position: absolute;119    top: 740px;120    left: 54px;121    width: 60px;122    height: 86px;123    background: #4A78FE;124    border-radius: 40px 40px 40px 40px / 60px 60px 20px 20px;125    box-shadow: 0 0 0 6px rgba(74,120,254,0.15) inset;126  }127  .caret::after {128    content: '';129    position: absolute;130    bottom: -12px;131    left: 24px;132    width: 12px;133    height: 12px;134    background: #FFFFFF;135    border-radius: 50%;136  }137 138  /* Bottom formatting toolbar */139  .bottom-bar {140    position: absolute;141    bottom: 0;142    left: 0;143    width: 1080px;144    height: 220px;145    background: #F2F2F2;146    border-top: 1px solid #DADADA;147    display: flex;148    align-items: center;149    padding: 0 28px;150    gap: 48px;151  }152  .fmt-btn {153    display: flex;154    flex-direction: column;155    align-items: center;156    gap: 14px;157    width: 100px;158  }159  .fmt-label {160    font-size: 46px;161    color: #2E2E2E;162    font-weight: 700;163  }164  .fmt-label.italic { font-style: italic; font-weight: 500; }165  .fmt-label.underline { text-decoration: underline; font-weight: 600; }166  .tool-icon {167    width: 80px; height: 72px; display:flex; justify-content:center; align-items:center;168  }169  .tool-a {170    font-size: 64px; font-weight: 700; color: #202020; position: relative;171  }172  .tool-a::after {173    content: '';174    position: absolute;175    left: -4px; right: -4px; bottom: -10px;176    height: 12px; background: #E53935; border-radius: 8px;177  }178  .list-icon, .num-icon {179    width: 120px; height: 74px; border: 2px solid #BDBDBD; background:#FFFFFF;180    display:flex; align-items:center; justify-content:space-between; padding: 0 18px; color:#555;181  }182  .list-icon .dot {183    background:#0081FB;184    width: 14px; height: 14px;185  }186  .list-lines { display:flex; flex-direction:column; gap: 10px; width: 72px; }187  .list-lines span { display:block; height: 8px; background:#777; }188  .num-col { display:flex; flex-direction:column; gap: 10px; color:#0081FB; font-size: 30px; width: 40px; text-align:center; }189  .arrow-btn {190    width: 84px; height: 74px; border: 2px solid #BDBDBD; background:#FFFFFF; display:flex; align-items:center; justify-content:center;191  }192  .up-btn {193    width: 64px; height: 64px; border: 2px solid #BDBDBD; background:#FFFFFF; display:flex; align-items:center; justify-content:center;194  }195 196  /* Simple svg styles */197  svg { width: 54px; height: 54px; }198  .doc-icon svg { width: 64px; height: 64px; }199</style>200</head>201<body>202<div id="render-target">203 204  <!-- Status bar -->205  <div class="status-bar">206    <div>7:57</div>207    <div class="status-icons">208      <span class="dot"></span>209      <span class="dot" style="opacity:.6;"></span>210      <span class="dot" style="opacity:.35;"></span>211      <span class="dot" style="opacity:.2;"></span>212      <span class="dot" style="background:#4CAF50;"></span>213      <span class="dot" style="background:#000; width: 12px; height: 28px; border-radius:4px;"></span>214    </div>215  </div>216 217  <!-- App header -->218  <div class="app-bar">219    <div class="app-left">220      <!-- Check icon -->221      <svg class="icon" viewBox="0 0 24 24"><path d="M9 16.2l-4.2-4.2-2 2L9 20.2 21.2 8l-2-2z" fill="#4CAF50"/></svg>222      <!-- Pen icon -->223      <svg class="icon" viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#424242"/></svg>224      <!-- Search icon -->225      <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 16 15.5l.27.28v.79l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z" fill="#424242"/></svg>226    </div>227 228    <div class="app-title">Movie Plans</div>229 230    <div class="app-right">231      <!-- Document page icon -->232      <div class="doc-icon">233        <svg viewBox="0 0 24 24"><path d="M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 1.5V8h5.5L14 3.5z" fill="#757575"/></svg>234      </div>235      <!-- Undo icon -->236      <svg class="icon" viewBox="0 0 24 24"><path d="M12 5v3l-4-4 4-4v3c5.52 0 10 4.48 10 10a10 10 0 0 1-10 10v-2a8 8 0 0 0 0-16z" fill="#424242"/></svg>237      <!-- Kebab -->238      <div class="kebab"></div>239    </div>240  </div>241 242  <!-- Warning banner -->243  <div class="banner">244    Can't upload - Please sign into your account.245    <div class="chev"></div>246  </div>247 248  <!-- Document area -->249  <div class="doc-area">250    <div class="doc-line">251      I will buy the movie 2 more premium tickets252      for my friend <span class="red-underline">deniel</span> and his wife.253    </div>254 255    <!-- Blue caret marker -->256    <div class="caret"></div>257  </div>258 259  <!-- Bottom formatting toolbar -->260  <div class="bottom-bar">261    <div class="fmt-btn">262      <div class="fmt-label">B</div>263    </div>264    <div class="fmt-btn">265      <div class="fmt-label italic">I</div>266    </div>267    <div class="fmt-btn">268      <div class="fmt-label underline">U</div>269    </div>270    <div class="fmt-btn">271      <div class="tool-icon">272        <!-- Pencil/highlighter icon -->273        <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#616161"/></svg>274      </div>275    </div>276    <div class="fmt-btn">277      <div class="tool-a">A</div>278    </div>279 280    <!-- Bulleted list -->281    <div class="list-icon">282      <div class="list-lines">283        <span></span><span></span><span></span>284      </div>285      <div class="list-lines" style="width: 18px;">286        <span class="dot"></span><span class="dot"></span><span class="dot"></span>287      </div>288    </div>289 290    <!-- Numbered list -->291    <div class="num-icon">292      <div class="num-col"><span>1</span><span>2</span><span>3</span></div>293      <div class="list-lines"><span></span><span></span><span></span></div>294    </div>295 296    <!-- Indent/arrow right -->297    <div class="arrow-btn">298      <svg viewBox="0 0 24 24"><path d="M10 17l5-5-5-5v10zM5 5h2v14H5z" fill="#616161"/></svg>299    </div>300 301    <!-- Up arrow -->302    <div class="up-btn">303      <svg viewBox="0 0 24 24"><path d="M12 8l-6 6h12l-6-6z" fill="#616161"/></svg>304    </div>305  </div>306 307</div>308</body>309</html>