GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI - Movie Plans</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11  }12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; right:0;15    height:90px; background:#ffffff;16    border-bottom:1px solid #e6e6e6;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 32px; color:#333;19    font-size:28px;20  }21  .status-icons { display:flex; align-items:center; gap:22px; }22  .dot { width:18px; height:18px; background:#6d6d6d; border-radius:50%; }23  /* App bar */24  .app-bar {25    position:absolute; top:90px; left:0; right:0;26    height:130px; background:#ffffff;27    border-bottom:1px solid #eaeaea;28    display:flex; align-items:center; justify-content:center;29  }30  .app-title {31    font-size:48px; color:#1a1a1a; font-weight:600;32  }33  .app-actions {34    position:absolute; top:0; left:0; right:0; height:130px;35    display:flex; align-items:center; justify-content:space-between;36    padding:0 28px;37  }38  .icon-btn {39    width:96px; height:96px; display:flex; align-items:center; justify-content:center;40    border-radius:18px;41  }42  .icon-area { display:flex; align-items:center; gap:22px; }43  .rounded {44    background:#f2f2f2; border:1px solid #dcdcdc;45  }46  /* Banner */47  .banner {48    position:absolute; top:220px; left:0; right:0;49    height:110px; background:#ffef9a; color:#5a4c00;50    display:flex; align-items:center; justify-content:space-between;51    padding:0 28px; font-size:36px;52    border-bottom:1px solid #e1d47a;53  }54  /* Content area */55  .content {56    position:absolute; top:330px; left:0; right:0; bottom:170px;57    padding:40px 56px;58  }59  .note-text {60    font-size:56px; line-height:84px; color:#111;61    max-width:940px;62  }63  .misspell {64    display:inline-block;65    border-bottom:4px dotted #d32f2f;66    padding-bottom:6px;67  }68  /* Blue selection marker (teardrop) */69  .cursor {70    position:absolute; top:640px; left:56px; width:46px; height:46px;71    background:#4169e1;72    border-radius:50% 50% 50% 0;73    transform:rotate(-45deg);74    box-shadow:0 2px 0 rgba(0,0,0,0.1);75  }76  .cursor::after {77    content:"";78    position:absolute; top:10px; left:10px; width:14px; height:14px;79    background:#ffffff; border-radius:50%;80  }81  /* Bottom toolbar */82  .toolbar {83    position:absolute; bottom:0; left:0; right:0;84    height:170px; background:#f6f6f6; border-top:1px solid #e3e3e3;85    display:flex; align-items:center; padding:0 32px; gap:38px;86  }87  .tool {88    width:120px; height:120px; display:flex; align-items:center; justify-content:center;89    color:#333;90  }91  .tool-label { font-size:54px; font-weight:700; }92  .italic { font-style:italic; font-weight:500; }93  .underline { text-decoration:underline; font-weight:600; }94  .strike { text-decoration:line-through; font-size:46px; }95  .color-chip {96    width:92px; height:92px; border:1px solid #cfcfcf; border-radius:6px;97    position:relative;98  }99  .color-chip .bar {100    position:absolute; bottom:10px; left:16px; right:16px; height:12px; background:#e53935; border-radius:4px;101  }102  .list-group { display:flex; align-items:center; gap:10px; }103  .list-lines { width:120px; height:90px; border:1px solid #cfcfcf; border-radius:6px; position:relative; }104  .list-lines::before, .list-lines::after {105    content:""; position:absolute; left:14px; right:14px; height:8px; background:#bdbdbd;106  }107  .list-lines::before { top:18px; }108  .list-lines::after { top:46px; }109  .nums { font-size:30px; color:#1a73e8; }110  .indent {111    width:120px; height:90px; border:1px solid #cfcfcf; border-radius:6px; position:relative;112  }113  .indent::before {114    content:""; position:absolute; top:38px; left:18px; width:64px; height:8px; background:#bdbdbd;115  }116  .indent::after {117    content:""; position:absolute; top:38px; right:16px; width:0; height:0; border-top:12px solid transparent; border-bottom:12px solid transparent; border-left:16px solid #1a73e8;118  }119  .side-panel {120    position:absolute; right:0; bottom:170px; width:42px; height:210px; background:#eeeeee; border-left:1px solid #e2e2e2;121  }122  /* Simple inline SVG size */123  svg { width:48px; height:48px; }124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Status Bar -->130  <div class="status-bar">131    <div>8:00</div>132    <div class="status-icons">133      <div class="dot"></div>134      <div class="dot" style="background:#808080;"></div>135      <div class="dot" style="background:#a0a0a0;"></div>136      <div class="dot" style="background:#c0c0c0;"></div>137      <div class="dot" style="background:#4f4f4f;"></div>138      <div class="dot" style="background:#333;"></div>139    </div>140  </div>141 142  <!-- App Bar -->143  <div class="app-bar">144    <div class="app-title">Movie Plans</div>145    <div class="app-actions">146      <div class="icon-area">147        <div class="icon-btn">148          <!-- Check icon -->149          <svg viewBox="0 0 24 24">150            <path d="M9 16l-4-4 1.6-1.6L9 12.8 17.4 4.4 19 6l-10 10z" fill="#2e7d32"></path>151          </svg>152        </div>153      </div>154      <div class="icon-area">155        <div class="icon-btn">156          <!-- Pencil -->157          <svg viewBox="0 0 24 24">158            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41L18.37 3.3a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.84z" fill="#3a3a3a"></path>159          </svg>160        </div>161        <div class="icon-btn">162          <!-- Search -->163          <svg viewBox="0 0 24 24">164            <circle cx="10" cy="10" r="6" stroke="#3a3a3a" stroke-width="2" fill="none"></circle>165            <path d="M14.5 14.5L20 20" stroke="#3a3a3a" stroke-width="2" stroke-linecap="round"></path>166          </svg>167        </div>168        <div class="icon-btn rounded">169          <!-- Document icon -->170          <svg viewBox="0 0 24 24">171            <path d="M6 3h9l5 5v13H6z" fill="#777"></path>172            <path d="M15 3v6h6" fill="none" stroke="#bbb" stroke-width="1.5"></path>173          </svg>174        </div>175        <div class="icon-btn">176          <!-- Undo arrow -->177          <svg viewBox="0 0 24 24">178            <path d="M12 5v3H6l3-3-3-3h6a8 8 0 1 1 0 16h-1v-2h1a6 6 0 1 0 0-12z" fill="#3a3a3a"></path>179          </svg>180        </div>181        <div class="icon-btn">182          <!-- Kebab menu -->183          <svg viewBox="0 0 24 24">184            <circle cx="5" cy="12" r="2" fill="#3a3a3a"></circle>185            <circle cx="12" cy="12" r="2" fill="#3a3a3a"></circle>186            <circle cx="19" cy="12" r="2" fill="#3a3a3a"></circle>187          </svg>188        </div>189      </div>190    </div>191  </div>192 193  <!-- Banner -->194  <div class="banner">195    <div>Can't upload - Please sign into your account.</div>196    <div>197      <!-- Drop-down caret -->198      <svg viewBox="0 0 24 24">199        <path d="M6 9l6 6 6-6z" fill="#6a5c00"></path>200      </svg>201    </div>202  </div>203 204  <!-- Content -->205  <div class="content">206    <div class="note-text">207      I will buy the movie 2 more premium tickets<br>208      for my friend <span class="misspell">deniel</span> and his wife.209    </div>210  </div>211 212  <!-- Blue selection marker -->213  <div class="cursor"></div>214 215  <!-- Bottom toolbar -->216  <div class="toolbar">217    <div class="tool"><div class="tool-label">B</div></div>218    <div class="tool"><div class="tool-label italic">I</div></div>219    <div class="tool"><div class="tool-label underline">U</div></div>220    <div class="tool"><div class="strike">S</div></div>221    <div class="tool">222      <div class="color-chip"><div class="bar"></div></div>223    </div>224    <div class="tool list-group">225      <div class="list-lines"></div>226      <div class="nums">1 2 3</div>227    </div>228    <div class="tool">229      <div class="indent"></div>230    </div>231    <div class="side-panel"></div>232  </div>233 234</div>235</body>236</html>