GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #eee9f6; /* soft lavender app background */14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 24px;20    left: 40px;21    right: 40px;22    height: 60px;23    color: #5f6066;24    font-size: 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    opacity: 0.9;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 22px;34    font-size: 0;35  }36  .dot {37    width: 18px; height: 18px; background: #5f6066; border-radius: 50%;38    display: inline-block;39  }40  .wifi, .battery {41    width: 42px; height: 42px;42  }43 44  /* Top editor toolbar */45  .toolbar {46    position: absolute;47    top: 160px;48    left: 80px;49    right: 80px;50    display: flex;51    align-items: center;52    gap: 110px;53    color: #6c6f75;54  }55  .icon-btn {56    width: 70px;57    height: 70px;58  }59  .icon {60    width: 100%;61    height: 100%;62    stroke: #6c6f75;63    stroke-width: 6;64    fill: none;65    stroke-linecap: round;66    stroke-linejoin: round;67  }68  .icon.fill { fill: #6c6f75; stroke: none; }69 70  /* Main slide preview */71  .slide-preview {72    position: absolute;73    left: 28px;74    top: 820px;75    width: 1024px;76    height: 540px;77    background: linear-gradient(to bottom, #bcd2f7 50%, #e6e6e6 50%);78    border: 1px solid #cfcfd4;79    border-radius: 8px;80    box-shadow: 0 2px 0 rgba(0,0,0,0.05);81  }82 83  .tagline {84    position: absolute;85    top: 250px;86    left: 24px;87    right: 24px;88    font-size: 26px;89    color: #222;90  }91 92  .card-stack {93    position: absolute;94    left: 300px;95    top: 120px;96    width: 520px;97    height: 320px;98  }99  .card {100    position: absolute;101    width: 520px;102    height: 320px;103    background: #ffffff;104    border-radius: 4px;105    box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.25);106    border: 1px solid #e5e5e5;107  }108  .card.bottom { transform: rotate(-4deg); left: -18px; top: 10px; }109  .card.mid { transform: rotate(0deg); left: 6px; top: 24px; }110  .card.top { transform: rotate(4deg); left: 26px; top: 38px; }111 112  .card-content {113    position: absolute;114    left: 40px;115    top: 50px;116    color: #3b3b3b;117  }118  .card-title {119    font-size: 46px;120    font-weight: 600;121    margin-bottom: 8px;122  }123  .card-sub {124    font-size: 38px;125    color: #777;126    margin-bottom: 20px;127  }128  .card-foot {129    font-size: 24px;130    color: #9a9a9a;131  }132 133  /* Filmstrip thumbnails */134  .filmstrip {135    position: absolute;136    left: 0;137    right: 0;138    top: 1640px;139    height: 400px;140    padding: 24px 28px;141  }142  .thumbs {143    display: flex;144    gap: 40px;145    align-items: flex-end;146  }147  .thumb {148    width: 220px;149    height: 160px;150    background: linear-gradient(to bottom, #bcd2f7 50%, #e7e7e7 50%);151    border: 3px solid #c5c5c5;152    border-radius: 16px;153    position: relative;154    box-shadow: 0 2px 6px rgba(0,0,0,0.12);155  }156  .thumb.selected {157    border-color: #6e6adf;158    box-shadow: 0 0 0 4px rgba(110,106,223,0.25);159  }160  .thumb.alt-yellow { background: linear-gradient(to bottom, #f1da7f 50%, #e7e7e7 50%); }161  .thumb.alt-pink  { background: linear-gradient(to bottom, #f1b6b8 50%, #e7e7e7 50%); }162 163  .thumb-img {164    position: absolute;165    left: 16px;166    bottom: 16px;167    width: 90px;168    height: 120px;169    background: #E0E0E0;170    border: 1px solid #BDBDBD;171    display: flex;172    justify-content: center;173    align-items: center;174    color: #757575;175    font-size: 16px;176    border-radius: 6px;177  }178  .thumb-number {179    text-align: center;180    margin-top: 12px;181    font-size: 30px;182    color: #555;183  }184 185  /* Add slide floating pill */186  .add-slide {187    position: absolute;188    right: 24px;189    top: 1680px;190    width: 120px;191    height: 280px;192    background: #d6c9f7;193    border-radius: 60px;194    box-shadow: 0 8px 20px rgba(0,0,0,0.15);195    display: flex;196    align-items: center;197    justify-content: center;198  }199 200  /* Bottom system navigation area */201  .bottom-nav {202    position: absolute;203    left: 0;204    right: 0;205    bottom: 0;206    height: 120px;207    border-top: 2px solid rgba(0,0,0,0.08);208  }209  .gesture {210    position: absolute;211    left: 50%;212    transform: translateX(-50%);213    bottom: 24px;214    width: 300px;215    height: 14px;216    background: #525358;217    border-radius: 10px;218    opacity: 0.7;219  }220</style>221</head>222<body>223<div id="render-target">224 225  <!-- Status bar -->226  <div class="status-bar">227    <div>7:05</div>228    <div class="status-right">229      <span class="dot"></span>230      <span class="dot"></span>231      <span class="dot"></span>232      <!-- Simple wifi icon -->233      <svg class="wifi" viewBox="0 0 64 64">234        <path d="M8 26 C24 14 40 14 56 26" stroke="#5f6066" stroke-width="6" fill="none" stroke-linecap="round"/>235        <path d="M16 34 C28 26 36 26 48 34" stroke="#5f6066" stroke-width="6" fill="none" stroke-linecap="round"/>236        <circle cx="32" cy="44" r="4" fill="#5f6066"/>237      </svg>238      <!-- Battery icon -->239      <svg class="battery" viewBox="0 0 64 64">240        <rect x="8" y="18" width="44" height="28" rx="6" stroke="#5f6066" stroke-width="6" fill="none"/>241        <rect x="54" y="26" width="6" height="12" rx="2" fill="#5f6066"/>242      </svg>243    </div>244  </div>245 246  <!-- Toolbar -->247  <div class="toolbar">248    <!-- Back -->249    <div class="icon-btn">250      <svg class="icon" viewBox="0 0 64 64">251        <polyline points="36,14 18,32 36,50"></polyline>252      </svg>253    </div>254    <!-- Undo -->255    <div class="icon-btn">256      <svg class="icon" viewBox="0 0 64 64">257        <polyline points="26,18 14,30 26,30"></polyline>258        <path d="M14 30 C14 48 34 52 50 40" />259      </svg>260    </div>261    <!-- Redo -->262    <div class="icon-btn">263      <svg class="icon" viewBox="0 0 64 64">264        <polyline points="38,18 50,30 38,30"></polyline>265        <path d="M50 30 C50 48 30 52 14 40" />266      </svg>267    </div>268    <!-- Play -->269    <div class="icon-btn">270      <svg class="icon fill" viewBox="0 0 64 64">271        <polygon points="24,16 24,48 48,32"></polygon>272      </svg>273    </div>274    <!-- Plus -->275    <div class="icon-btn">276      <svg class="icon" viewBox="0 0 64 64">277        <line x1="32" y1="14" x2="32" y2="50"></line>278        <line x1="14" y1="32" x2="50" y2="32"></line>279      </svg>280    </div>281    <!-- Comment -->282    <div class="icon-btn">283      <svg class="icon" viewBox="0 0 64 64">284        <path d="M12 16 H52 V40 H30 L20 48 V40 H12 Z"></path>285      </svg>286    </div>287    <!--