GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Employment Fair Survey - Edit</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: #f6f6f6;13 border-radius: 0;14 }15 16 /* Top app bar */17 .appbar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 160px;23 background: #4CAF50;24 box-shadow: 0 2px 6px rgba(0,0,0,0.25);25 }26 .nav-row {27 position: absolute;28 left: 0;29 right: 0;30 top: 68px;31 height: 80px;32 display: flex;33 align-items: center;34 padding: 0 36px;35 color: #fff;36 }37 .nav-title {38 color: #1d2b2b;39 font-weight: 600;40 font-size: 58px;41 margin-left: 24px;42 }43 .grow { flex: 1; }44 .icon-btn {45 width: 72px;46 height: 72px;47 display: flex;48 justify-content: center;49 align-items: center;50 margin-left: 18px;51 }52 .icon svg { width: 48px; height: 48px; }53 54 /* Main card */55 .card {56 position: absolute;57 left: 30px;58 right: 30px;59 top: 200px;60 background: #fff;61 border-radius: 8px;62 box-shadow: 0 6px 20px rgba(0,0,0,0.15);63 padding: 36px 36px 48px 36px;64 min-height: 760px;65 }66 /* left handle dots */67 .handle-dots {68 position: absolute;69 left: 10px;70 top: 260px;71 width: 20px;72 }73 .handle-dots .dot {74 width: 22px;75 height: 22px;76 border-radius: 50%;77 background: #d9d9d9;78 margin: 18px 0;79 }80 81 .logo-btn {82 display: inline-flex;83 align-items: center;84 gap: 18px;85 background: #F4C542;86 color: #1d1d1d;87 border-radius: 12px;88 padding: 18px 26px;89 font-weight: 700;90 font-size: 38px;91 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);92 }93 .logo-btn .circle {94 width: 48px;95 height: 48px;96 border-radius: 50%;97 background: rgba(255,255,255,0.65);98 display: flex;99 justify-content: center;100 align-items: center;101 }102 .logo-btn .circle svg { width: 28px; height: 28px; }103 104 .close-box {105 position: absolute;106 right: 24px;107 top: 24px;108 width: 72px;109 height: 72px;110 background: #f1f1f1;111 border-radius: 8px;112 display: flex;113 justify-content: center;114 align-items: center;115 color: #9e9e9e;116 font-size: 46px;117 font-weight: 700;118 }119 120 .survey-title {121 margin: 36px 0 8px 0;122 color: #2E7D32;123 font-size: 60px;124 font-weight: 800;125 }126 .page-subtitle {127 color: #46a048;128 font-size: 42px;129 margin-bottom: 36px;130 }131 .question {132 font-size: 50px;133 font-weight: 800;134 color: #2c2c2c;135 margin: 12px 0 28px 0;136 }137 .dropdown {138 width: calc(100% - 40px);139 height: 120px;140 border: 2px solid #cfcfcf;141 border-radius: 6px;142 display: flex;143 align-items: center;144 justify-content: space-between;145 padding: 0 24px;146 font-size: 40px;147 color: #777;148 }149 .dropdown .caret svg { width: 36px; height: 36px; }150 151 /* Bottom page indicator */152 .bottom-bar {153 position: absolute;154 left: 0;155 right: 0;156 bottom: 150px;157 height: 110px;158 background: #ffffff;159 box-shadow: 0 -2px 8px rgba(0,0,0,0.08);160 display: flex;161 align-items: center;162 padding: 0 40px;163 color: #333;164 font-size: 40px;165 }166 .bottom-bar .mini-arrow {167 width: 60px;168 height: 60px;169 margin-right: 18px;170 display: flex;171 justify-content: center;172 align-items: center;173 }174 .bottom-bar .mini-arrow svg { width: 40px; height: 40px; }175 176 /* Floating action button */177 .fab {178 position: absolute;179 right: 72px;180 bottom: 210px;181 width: 140px;182 height: 140px;183 background: #4CAF50;184 border-radius: 50%;185 box-shadow: 0 10px 18px rgba(0,0,0,0.28);186 display: flex;187 justify-content: center;188 align-items: center;189 }190 .fab svg { width: 64px; height: 64px; }191</style>192</head>193<body>194<div id="render-target">195 196 <!-- Top App Bar -->197 <div class="appbar">198 <div class="nav-row">199 <div class="icon-btn icon">200 <!-- Back arrow -->201 <svg viewBox="0 0 24 24">202 <path d="M15 5l-7 7 7 7" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>203 </svg>204 </div>205 <div class="nav-title">Edit</div>206 <div class="grow"></div>207 <div class="icon-btn icon">208 <!-- Paper plane (send) -->209 <svg viewBox="0 0 24 24">210 <path d="M3 11l17-7-7 17-3-7-7-3z" fill="#ffffff"/>211 </svg>212 </div>213 <div class="icon-btn icon">214 <!-- Vertical dots -->215 <svg viewBox="0 0 24 24">216 <circle cx="12" cy="5" r="2.2" fill="#ffffff"/>217 <circle cx="12" cy="12" r="2.2" fill="#ffffff"/>218 <circle cx="12" cy="19" r="2.2" fill="#ffffff"/>219 </svg>220 </div>221 </div>222 </div>223 224 <!-- Left handle dots -->225 <div class="handle-dots">226 <div class="dot"></div>227 <div class="dot"></div>228 <div class="dot"></div>229 </div>230 231 <!-- Main Card Content -->232 <div class="card">233 <div class="close-box">X</div>234 235 <div class="logo-btn">236 <div class="circle">237 <svg viewBox="0 0 24 24">238 <path d="M12 5v14M5 12h14" stroke="#2d2d2d" stroke-width="2.5" stroke-linecap="round"/>239 </svg>240 </div>241 ADD LOGO242 </div>243 244 <div class="survey-title">Employment Fair Survey</div>245 <div class="page-subtitle">Page Title</div>246 247 <div class="question">1. Did you like the event?</div>248 249 <div class="dropdown">250 <div class="placeholder"></div>251 <div class="caret">252 <svg viewBox="0 0 24 24">253 <path d="M6 9l6 6 6-6" fill="none" stroke="#616161" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>254 </svg>255 </div>256 </div>257 </div>258 259 <!-- Floating Action Button -->260 <div class="fab">261 <svg viewBox="0 0 24 24">262 <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>263 </svg>264 </div>265 266 <!-- Bottom page indicator -->267 <div class="bottom-bar">268 <div class="mini-arrow">269 <svg viewBox="0 0 24 24">270 <path d="M12 17l-6-6h12z" fill="#4d4d4d"/>271 </svg>272 </div>273 PAGE 1 OF 1274 </div>275 276</div>277</body>278</html>