GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Generated UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Arial", sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#f3f5f4;11  }12  /* Top App Bar */13  .app-bar {14    position:absolute; left:0; top:0; width:1080px; height:180px;15    background:#57b86e;16    color:#fff;17    box-sizing:border-box;18    padding:40px 40px;19  }20  .app-bar .title {21    font-size:64px; font-weight:600; margin-left:90px; line-height:100px;22  }23  .back-btn {24    position:absolute; left:30px; top:55px; width:70px; height:70px;25  }26  .status-right {27    position:absolute; right:30px; top:35px; display:flex; align-items:center; gap:26px; color:#fff;28    font-size:40px; opacity:0.95;29  }30  /* Content Card */31  .card {32    position:absolute; left:20px; top:200px; width:1040px; height:1320px;33    background:#fff; border-radius:10px; box-shadow:0 2px 0 rgba(0,0,0,0.08);34    border:1px solid #e1e1e1;35  }36  .logo-btn {37    display:inline-flex; align-items:center; gap:22px;38    background:#f2c23a; color:#1d1d1d; font-weight:700; font-size:44px;39    padding:26px 38px; border-radius:12px; margin:30px 0 10px 40px;40  }41  .logo-btn .plus {42    width:50px; height:50px; border-radius:25px; background:rgba(0,0,0,0.12);43    display:flex; align-items:center; justify-content:center; color:#000; font-size:38px; font-weight:900;44  }45  .page-heading {46    margin:20px 40px 0 40px; font-size:62px; color:#2f8f43; font-weight:800;47  }48  .page-sub {49    margin:24px 40px; font-size:46px; color:#2f8f43;50  }51  .drag-dots {52    position:absolute; left:-12px; top:290px; display:flex; flex-direction:column; gap:22px;53  }54  .dot { width:18px; height:18px; border-radius:9px; background:#cfcfcf; }55  .question {56    margin:20px 40px; font-size:54px; font-weight:800; color:#1e1e1e;57  }58  .input-row {59    margin:16px 40px; height:140px; border:2px solid #cfcfcf; border-radius:6px;60    display:flex; align-items:center; justify-content:space-between; padding:0 26px; color:#666; font-size:42px;61  }62  .caret {63    width:40px; height:40px;64  }65 66  /* Dropdown Overlay Menu */67  .overlay-menu {68    position:absolute; right:20px; top:170px;69    width:650px; background:#fff; border-radius:18px;70    box-shadow:0 18px 60px rgba(0,0,0,0.25);71    border:1px solid #e7e7e7;72    padding:26px 30px;73  }74  .menu-item {75    display:flex; align-items:center; gap:26px; padding:26px 0;76    font-size:46px; color:#3a3a3a; border-bottom:1px solid #efefef;77  }78  .menu-item:last-child { border-bottom:none; }79  .menu-icon { width:58px; height:58px; border-radius:12px; background:#e8f4ea; display:flex; align-items:center; justify-content:center; }80  .menu-disabled { color:#a9abae; }81  .menu-icon.gray { background:#efefef; }82  /* Bottom bar and FAB */83  .bottom-bar {84    position:absolute; left:0; bottom:0; width:1080px; height:200px; background:#ffffff;85    border-top:1px solid #e0e0e0;86    display:flex; align-items:center; padding:0 60px; box-sizing:border-box;87  }88  .page-indicator {89    display:flex; align-items:center; gap:20px; color:#37474f; font-size:44px; font-weight:600;90  }91  .fab {92    position:absolute; right:80px; bottom:140px; width:170px; height:170px; border-radius:85px;93    background:#5bc37a; box-shadow:0 12px 40px rgba(0,0,0,0.25);94    display:flex; align-items:center; justify-content:center;95  }96  .fab span {97    display:block; width:100px; height:100px; border-radius:50%; color:#fff; font-size:100px; line-height:100px; text-align:center; margin-top:-6px;98  }99 100  /* Tiny helper area at very bottom (gesture bar) */101  .gesture-bar {102    position:absolute; left:290px; bottom:30px; width:500px; height:16px; background:#c8c8c8; border-radius:8px;103  }104</style>105</head>106<body>107<div id="render-target">108 109  <!-- Top App Bar -->110  <div class="app-bar">111    <svg class="back-btn" viewBox="0 0 24 24">112      <path d="M15 5 L7 12 L15 19" stroke="#fff" stroke-width="3.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>113    </svg>114    <div class="title">Edit</div>115 116    <div class="status-right">117      <div>3:50</div>118      <!-- simple small icons -->119      <svg width="40" height="40" viewBox="0 0 24 24">120        <circle cx="12" cy="12" r="10" fill="#fff" opacity="0.9"></circle>121      </svg>122      <svg width="40" height="40" viewBox="0 0 24 24">123        <path d="M2 16 L8 10 L13 14 L22 6" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round"></path>124      </svg>125      <svg width="62" height="40" viewBox="0 0 30 16">126        <rect x="1" y="2" width="24" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>127        <rect x="3" y="4" width="20" height="8" fill="#fff"></rect>128        <rect x="26" y="6" width="3" height="4" rx="1" fill="#fff"></rect>129      </svg>130    </div>131  </div>132 133  <!-- Content Card -->134  <div class="card">135    <div class="logo-btn">136      <div class="plus">+</div>137      <div>ADD LOGO</div>138    </div>139 140    <div class="page-heading">Employment</div>141    <div class="page-sub">Page Title</div>142 143    <div class="drag-dots">144      <div class="dot"></div>145      <div class="dot"></div>146      <div class="dot"></div>147      <div class="dot"></div>148    </div>149 150    <div class="question">1. Did you like the event?</div>151    <div class="input-row">152      <div></div>153      <svg class="caret" viewBox="0 0 24 24">154        <path d="M6 9 L12 15 L18 9" fill="none" stroke="#555" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"></path>155      </svg>156    </div>157  </div>158 159  <!-- Overlay Menu on right -->160  <div class="overlay-menu">161    <div class="menu-item menu-disabled">162      <div class="menu-icon gray">163        <svg width="34" height="34" viewBox="0 0 24 24">164          <rect x="3" y="6" width="18" height="12" fill="#cfcfcf"></rect>165        </svg>166      </div>167      Add Logo168    </div>169 170    <div class="menu-item">171      <div class="menu-icon">172        <svg width="34" height="34" viewBox="0 0 24 24">173          <path d="M6 6 H18 V18 H6 Z" fill="#5bc37a"></path>174          <path d="M3 12 H9" stroke="#2e7d32" stroke-width="2.5" stroke-linecap="round"></path>175          <path d="M15 12 H21" stroke="#2e7d32" stroke-width="2.5" stroke-linecap="round"></path>176        </svg>177      </div>178      Copy, Move or Delete179    </div>180 181    <div class="menu-item">182      <div class="menu-icon">183        <svg width="34" height="34" viewBox="0 0 24 24">184          <circle cx="12" cy="12" r="9" fill="#5bc37a"></circle>185          <circle cx="12" cy="12" r="4" fill="#2e7d32"></circle>186        </svg>187      </div>188      Display Options189    </div>190 191    <div class="menu-item">192      <div class="menu-icon">193        <svg width="34" height="34" viewBox="0 0 24 24">194          <path d="M4 20 L12 4 L20 20 Z" fill="#5bc37a"></path>195        </svg>196      </div>197      Colors198    </div>199 200    <div class="menu-item">201      <div class="menu-icon">202        <svg width="34" height="34" viewBox="0 0 24 24">203          <rect x="4" y="5" width="16" height="12" fill="#5bc37a"></rect>204          <path d="M10 9 L14 12 L10 15 Z" fill="#2e7d32"></path>205        </svg>206      </div>207      Preview &amp; Test208    </div>209  </div>210 211  <!-- Floating action button -->212  <div class="fab"><span>+</span></div>213 214  <!-- Bottom bar -->215  <div class="bottom-bar">216    <div class="page-indicator">217      <svg width="40" height="40" viewBox="0 0 24 24">218        <path d="M6 14 L12 8 L18 14" stroke="#37474f" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>219      </svg>220      <div>PAGE 1 OF 1</div>221    </div>222  </div>223 224  <div class="gesture-bar"></div>225</div>226</body>227</html>