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>Survey Editor Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #EFEFEF;15    color: #333;16  }17 18  /* Top green status area */19  .status-bar {20    position: absolute;21    top: 0; left: 0; right: 0;22    height: 180px;23    background: #10B15A;24    color: #fff;25  }26  .status-content {27    position: absolute; left: 36px; right: 36px; top: 30px;28    display: flex; justify-content: space-between; align-items: center;29    font-size: 36px; letter-spacing: 0.5px;30  }31  .status-icons { display: flex; align-items: center; gap: 24px; opacity: 0.95; }32  .status-icons svg { fill: #fff; }33 34  /* Top toolbar */35  .toolbar {36    position: absolute;37    top: 160px; left: 0; right: 0;38    height: 140px;39    background: #FFFFFF;40    box-shadow: 0 2px 6px rgba(0,0,0,0.2);41    display: flex; align-items: center; justify-content: space-between;42    padding: 0 36px;43  }44  .toolbar-left { display: flex; align-items: center; gap: 24px; }45  .toolbar-title { font-size: 48px; color: #4b4b4b; }46  .toolbar-right { display: flex; align-items: center; gap: 36px; }47  .icon-btn svg { display: block; }48 49  /* Card */50  .card {51    position: absolute;52    top: 360px; left: 36px;53    width: 1008px;54    background: #FFFFFF;55    border-radius: 6px;56    box-shadow: 0 3px 12px rgba(0,0,0,0.18);57    padding: 36px 36px 48px 36px;58  }59 60  .logo-btn {61    display: inline-flex; align-items: center; gap: 18px;62    background: #FFC107;63    color: #222;64    border-radius: 8px;65    height: 96px; padding: 0 28px;66    font-weight: 700; letter-spacing: 0.6px; font-size: 34px;67  }68  .logo-btn svg { width: 40px; height: 40px; }69 70  .survey-title {71    margin: 36px 0 8px 0;72    font-size: 56px; font-weight: 800; color: #138F3D;73  }74  .page-subtitle {75    font-size: 44px; color: #2E7D32; margin-bottom: 42px;76  }77  .question {78    font-size: 44px; font-weight: 800; color: #444; margin-bottom: 22px;79  }80  .select {81    display: flex; align-items: center; justify-content: space-between;82    height: 96px;83    border: 2px solid #BDBDBD;84    padding: 0 24px;85    color: #777; background: #FAFAFA;86  }87 88  /* Drag dots beside the card */89  .drag-dots {90    position: absolute; left: -18px; top: 220px;91    display: flex; flex-direction: column; gap: 14px;92  }93  .drag-dots span {94    width: 22px; height: 22px; border-radius: 50%;95    background: #E0E0E0; border: 1px solid #C9C9C9;96  }97 98  /* Small X chip on the right of the card */99  .chip-x {100    position: absolute; right: -16px; top: 180px;101    width: 80px; height: 80px;102    background: #F5F5F5; border: 1px solid #EAEAEA;103    border-radius: 12px; color: #C8C8C8;104    display: flex; align-items: center; justify-content: center;105    font-weight: 700; font-size: 32px;106  }107 108  /* Bottom page bar */109  .bottom-bar {110    position: absolute; left: 0; right: 0; bottom: 120px;111    height: 140px; background: #FFFFFF;112    border-top: 1px solid #E0E0E0;113    box-shadow: 0 -2px 6px rgba(0,0,0,0.06);114    display: flex; align-items: center; padding: 0 36px; gap: 16px;115    color: #5F6368; font-size: 34px; letter-spacing: 1px;116    text-transform: uppercase;117  }118 119  /* Floating action button */120  .fab {121    position: absolute; right: 36px; bottom: 180px;122    width: 140px; height: 140px; border-radius: 50%;123    background: #12B15A; color: #fff; font-size: 96px; line-height: 0;124    display: flex; align-items: center; justify-content: center;125    box-shadow: 0 10px 20px rgba(0,0,0,0.35);126  }127 128  /* Gesture area */129  .gesture {130    position: absolute; left: 0; right: 0; bottom: 0;131    height: 100px; background: #000;132    display: flex; align-items: center; justify-content: center;133  }134  .gesture .pill {135    width: 240px; height: 12px; background: #EDEDED; border-radius: 8px;136    opacity: 0.95;137  }138</style>139</head>140<body>141<div id="render-target">142  <!-- Green status bar -->143  <div class="status-bar">144    <div class="status-content">145      <div>3:05</div>146      <div class="status-icons">147        <!-- simple dots & icons -->148        <svg width="34" height="34" viewBox="0 0 24 24"><path d="M2 18h2a8 8 0 0 1 8-8v-2c-6.6 0-12 5.4-12 12zM6 18h2a4 4 0 0 1 4-4v-2c-3.3 0-6 2.7-6 6zM10 18h2a1 1 0 0 1 1-1v-2c-1.7 0-3 1.3-3 3z" fill="#fff"/></svg>149        <svg width="40" height="34" viewBox="0 0 24 24"><path d="M3 7h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" fill="none" stroke="#fff" stroke-width="2"/><path d="M21 7v8" stroke="#fff" stroke-width="2"/></svg>150      </div>151    </div>152  </div>153 154  <!-- White toolbar -->155  <div class="toolbar">156    <div class="toolbar-left">157      <svg width="56" height="56" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>158      <div class="toolbar-title">Edit</div>159    </div>160    <div class="toolbar-right">161      <div class="icon-btn">162        <svg width="56" height="56" viewBox="0 0 24 24"><path d="M3 12l18-8-8 18-2-7-8-3z" fill="none" stroke="#15A85A" stroke-width="2" stroke-linejoin="round"/></svg>163      </div>164      <div class="icon-btn">165        <svg width="36" height="56" viewBox="0 0 24 24">166          <circle cx="12" cy="5" r="2.2" fill="#6C6C6C"/><circle cx="12" cy="12" r="2.2" fill="#6C6C6C"/><circle cx="12" cy="19" r="2.2" fill="#6C6C6C"/>167        </svg>168      </div>169    </div>170  </div>171 172  <!-- Main card -->173  <div class="card">174    <div class="drag-dots">175      <span></span><span></span><span></span><span></span>176    </div>177    <div class="chip-x">X</div>178 179    <div class="logo-btn">180      <svg viewBox="0 0 24 24">181        <circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2" fill="none"></circle>182        <path d="M12 8v8M8 12h8" stroke="#333" stroke-width="2" stroke-linecap="round"></path>183      </svg>184      ADD LOGO185    </div>186 187    <div class="survey-title">Employment Fair Survey</div>188    <div class="page-subtitle">Page Title</div>189 190    <div class="question">1. Did you like the event?</div>191    <div class="select">192      <span></span>193      <svg width="44" height="44" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>194    </div>195  </div>196 197  <!-- Bottom bar -->198  <div class="bottom-bar">199    <svg width="42" height="42" viewBox="0 0 24 24"><path d="M6 14l6-6 6 6" stroke="#5F6368" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>200    <div>Page 1 of 1</div>201  </div>202 203  <!-- Floating action button -->204  <div class="fab">+</div>205 206  <!-- Gesture area -->207  <div class="gesture"><div class="pill"></div></div>208</div>209</body>210</html>