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>Employment Fair Survey Edit</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F1F1F1;15    border-radius: 0;16  }17 18  /* Top green status bar */19  .status-bar {20    height: 120px;21    background: #11A85C;22    color: #FFFFFF;23    display: flex;24    align-items: center;25    padding: 0 32px;26    box-sizing: border-box;27    font-weight: 600;28  }29  .status-left { font-size: 42px; }30  .status-right {31    margin-left: auto;32    display: flex;33    align-items: center;34    gap: 26px;35  }36  .status-icon svg { width: 36px; height: 36px; fill: #fff; }37 38  /* Top app bar */39  .app-bar {40    height: 120px;41    background: #FFFFFF;42    display: flex;43    align-items: center;44    padding: 0 24px 0 16px;45    box-sizing: border-box;46    box-shadow: 0 2px 4px rgba(0,0,0,0.12);47  }48  .app-title {49    font-size: 52px;50    color: #333333;51    font-weight: 600;52    margin-left: 16px;53  }54  .app-actions {55    margin-left: auto;56    display: flex;57    align-items: center;58    gap: 26px;59  }60  .icon-btn svg { width: 56px; height: 56px; fill: #11A85C; }61 62  /* Content area */63  .content {64    position: absolute;65    top: 240px; /* status + app bar */66    left: 0;67    right: 0;68    bottom: 180px; /* space for footer/nav */69    overflow: hidden;70  }71 72  /* Card */73  .card {74    width: 1000px;75    margin: 24px 40px;76    background: #FFFFFF;77    border-radius: 6px;78    box-shadow: 0 2px 6px rgba(0,0,0,0.18);79    padding: 28px 32px 40px 32px;80    position: relative;81  }82  .add-logo {83    display: inline-flex;84    align-items: center;85    gap: 16px;86    background: #F7B400;87    color: #1B1B1B;88    font-weight: 700;89    padding: 18px 26px;90    border-radius: 6px;91    font-size: 36px;92  }93  .add-logo .circle {94    width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,0.1);95    display: inline-flex; align-items: center; justify-content: center;96  }97  .add-logo .circle svg { width: 26px; height: 26px; fill: #1B1B1B; }98 99  .survey-title {100    text-align: center;101    color: #137C36;102    font-size: 56px;103    font-weight: 800;104    margin: 40px 0 10px 0;105  }106  .page-title {107    color: #137C36;108    font-size: 44px;109    margin: 10px 0 30px 0;110  }111  .question {112    color: #333333;113    font-size: 48px;114    font-weight: 800;115    margin: 12px 0 16px 0;116  }117  .dropdown {118    height: 96px;119    border: 2px solid #BDBDBD;120    border-radius: 4px;121    display: flex;122    align-items: center;123    padding: 0 20px;124    box-sizing: border-box;125    font-size: 36px;126    color: #666;127    position: relative;128  }129  .dropdown .chev {130    position: absolute;131    right: 16px; top: 50%;132    transform: translateY(-50%);133  }134  .dropdown .chev svg { width: 40px; height: 40px; fill: #555; }135 136  /* Drag handle dots (left of card) */137  .drag-dots {138    position: absolute;139    left: -22px;140    top: 210px;141    display: flex;142    flex-direction: column;143    gap: 14px;144  }145  .drag-dots .dot {146    width: 20px; height: 20px; border-radius: 50%;147    background: #D0D0D0;148    border: 2px solid #C0C0C0;149  }150 151  /* Faint close badge on card right */152  .faint-x {153    position: absolute;154    right: 20px;155    top: 140px;156    background: rgba(0,0,0,0.05);157    width: 64px; height: 64px;158    border-radius: 8px;159    color: rgba(0,0,0,0.25);160    display: flex; align-items: center; justify-content: center;161    font-size: 40px; font-weight: 700;162  }163 164  /* Footer */165  .footer {166    position: absolute;167    left: 0; right: 0; bottom: 90px;168    height: 110px;169    background: #FFFFFF;170    box-shadow: 0 -2px 4px rgba(0,0,0,0.12);171    display: flex;172    align-items: center;173    padding: 0 36px;174    color: #424242;175    font-size: 36px;176    letter-spacing: 1px;177    box-sizing: border-box;178  }179  .footer .up {180    margin-right: 18px;181    display: inline-flex; align-items: center; justify-content: center;182  }183  .footer .up svg { width: 32px; height: 32px; fill: #616161; }184 185  /* Floating action button */186  .fab {187    position: absolute;188    right: 40px;189    bottom: 140px;190    width: 132px; height: 132px;191    background: #10B763;192    border-radius: 50%;193    box-shadow: 0 6px 14px rgba(0,0,0,0.25);194    display: flex; align-items: center; justify-content: center;195  }196  .fab svg { width: 70px; height: 70px; fill: #fff; }197 198  /* Bottom navigation area (system bar placeholder) */199  .system-bar {200    position: absolute;201    left: 0; right: 0; bottom: 0;202    height: 90px;203    background: #000000;204    opacity: 0.92;205    display: flex; align-items: center; justify-content: center;206  }207  .home-indicator {208    width: 240px; height: 10px; border-radius: 5px; background: #D8D8D8;209    opacity: 0.9;210  }211</style>212</head>213<body>214<div id="render-target">215 216  <!-- Status bar -->217  <div class="status-bar">218    <div class="status-left">3:10</div>219    <div class="status-right">220      <span class="status-icon">221        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle></svg>222      </span>223      <span class="status-icon">224        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"/></svg>225      </span>226      <span class="status-icon">227        <svg viewBox="0 0 24 24"><path d="M3 21h18M3 14h18M3 7h18" stroke="#fff" stroke-width="2" fill="none"/></svg>228      </span>229      <span class="status-icon">230        <svg viewBox="0 0 24 24"><path d="M3 12h18" stroke="#fff" stroke-width="2"/></svg>231      </span>232      <span class="status-icon">233        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/></svg>234      </span>235      <span class="status-icon">236        <svg viewBox="0 0 24 24"><path d="M4 12h16" stroke="#fff" stroke-width="2"/></svg>237      </span>238      <span class="status-icon">239        <svg viewBox="0 0 24 24"><path d="M20 7l-8-5-8 5v10l8 5 8-5z" fill="#fff"/></svg>240      </span>241      <span class="status-icon">242        <svg viewBox="0 0 24 24"><path d="M3 7h18v10H3z" fill="none" stroke="#fff" stroke-width="2"/></svg>243      </span>244    </div>245  </div>246 247  <!-- App bar -->248  <div class="app-bar">249    <div class="icon-btn">250      <svg viewBox="0 0 24 24">251        <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252      </svg>253    </div>254    <div class="app-title">Edit</div>255    <div class="app-actions">256      <div class="icon-btn">257        <svg viewBox="0 0 24 24">258          <path d="M2 21l19-9L2 3v7l14 2-14 2z" />259        </svg>260      </div>261      <div class="icon-btn">262        <svg viewBox="0 0 24 24">263          <circle cx="12" cy="5" r="2" fill="#6b6b6b"></circle>264          <circle cx="12" cy="12" r="2" fill="#6b6b6b"></circle>265          <circle cx="12" cy="19" r="2" fill="#6b6b6b"></circle>266        </svg>267      </div>268    </div>269  </div>270 271  <!-- Main content -->272  <div class="content">273    <div class="card">274      <div class="add-logo">275        <span class="circle">276          <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#1B1B1B" stroke-width="2"/></svg>277        </span>278        ADD LOGO279      </div>280 281      <div class="survey-title">Employment Fair Survey</div>282      <div class="page-title">Page Title</div>283 284      <div class="question">1. Did you like the event?</div>285      <div class="dropdown"> 286        <span class="placeholder"></span>287        <span class="chev">288          <svg viewBox="0 0 24 24">289            <path d="M6 9l6 6 6-6" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>290          </svg>291        </span>292      </div>293 294      <!-- dotted handle -->295      <div class="drag-dots">296        <div class="dot"></div>297        <div class="dot"></div>298        <div class="dot"></div>299        <div class="dot"></div>300      </div>301 302      <!-- faint X -->303      <div class="faint-x">X</div>304    </div>305  </div>306 307  <!-- Footer page indicator -->308  <div class="footer">309    <span class="up">310      <svg viewBox="0 0 24 24"><path d="M6 14l6-6 6 6" fill="none" stroke="#616161" stroke-width="2"/></svg>311    </span>312    PAGE 1 OF 1313  </div>314 315  <!-- Floating action button -->316  <div class="fab">317    <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2"/></svg>318  </div>319 320  <!-- System navigation bar -->321  <div class="system-bar">322    <div class="home-indicator"></div>323  </div>324</div>325</body>326</html>