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>Reviews Screen</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: #2b2d31;15    color: #eaeaea;16  }17 18  /* Status bar */19  .status-bar {20    height: 96px;21    background: #000000;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 32px;26    box-sizing: border-box;27    font-weight: 600;28    letter-spacing: 1px;29  }30  .status-left { display: flex; align-items: center; gap: 16px; }31  .status-right { display: flex; align-items: center; gap: 18px; font-size: 26px; color: #ffffff; }32 33  /* App bar */34  .app-bar {35    height: 120px;36    background: #313339;37    display: flex;38    align-items: center;39    padding: 0 24px;40    box-sizing: border-box;41    border-bottom: 1px solid #3a3d43;42  }43  .title {44    font-size: 46px;45    font-weight: 600;46    margin-left: 16px;47    color: #ffffff;48  }49 50  /* Content area */51  .content {52    position: absolute;53    top: 216px; /* status + app bar */54    bottom: 900px; /* keyboard height */55    left: 0;56    right: 0;57    overflow: hidden;58    padding: 24px 28px;59    box-sizing: border-box;60  }61  .spacer {62    height: 630px; /* large empty area at the top similar to screenshot */63  }64 65  .review {66    display: flex;67    flex-direction: column;68    gap: 18px;69    color: #ddd;70  }71  .review-head {72    display: flex;73    align-items: center;74    gap: 22px;75  }76  .avatar {77    width: 72px;78    height: 72px;79    background: #7b4e3d;80    color: #fff;81    border-radius: 50%;82    display: flex;83    align-items: center;84    justify-content: center;85    font-weight: 700;86    font-size: 36px;87  }88  .name {89    font-size: 36px;90    color: #f0f0f0;91    font-weight: 500;92  }93  .review-body {94    display: flex;95    align-items: center;96    justify-content: space-between;97  }98  .comment {99    font-size: 36px;100    color: #bfc3c7;101  }102  .actions {103    display: flex;104    align-items: center;105    gap: 36px;106    padding-right: 8px;107  }108  .icon-btn svg { display: block; }109 110  /* Composer (input area) */111  .composer {112    position: absolute;113    left: 0;114    right: 0;115    bottom: 900px; /* sits right above keyboard */116    padding: 12px 24px 22px 24px;117    box-sizing: border-box;118    background: linear-gradient(to bottom, rgba(43,45,49,0) 0%, rgba(43,45,49,0.6) 35%, rgba(43,45,49,1) 100%);119  }120  .input-row {121    display: flex;122    align-items: center;123    gap: 18px;124  }125  .input-line {126    flex: 1;127    height: 74px;128    border-bottom: 2px solid #4a4f55;129    color: #e5e5e5;130    display: flex;131    align-items: flex-end;132    font-size: 34px;133  }134  .post-btn {135    width: 168px;136    height: 92px;137    background: #1f2125;138    border-radius: 32px;139    display: flex;140    align-items: center;141    justify-content: center;142    color: #ffffff;143    font-weight: 700;144    letter-spacing: 1px;145    border: 1px solid #3b3f46;146    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);147  }148 149  /* Keyboard */150  .keyboard {151    position: absolute;152    left: 0; right: 0; bottom: 40px;153    height: 860px;154    background: #1f2023;155    border-top: 1px solid #34373c;156    box-sizing: border-box;157    padding: 18px 18px 24px;158  }159  .kb-top {160    height: 92px;161    display: flex;162    align-items: center;163    gap: 22px;164    color: #d2d2d2;165  }166  .kb-pill {167    width: 92px; height: 92px; border-radius: 20px; background: #2e3136; display: flex; align-items: center; justify-content: center; font-size: 34px;168  }169  .kb-grid {170    margin-top: 12px;171    display: grid;172    grid-template-columns: repeat(10, 1fr);173    gap: 12px;174  }175  .key {176    height: 120px;177    background: #3b3f45;178    border-radius: 18px;179    color: #e7e7e7;180    display: flex; align-items: center; justify-content: center;181    font-size: 44px;182  }183  .row {184    display: grid;185    grid-template-columns: 1.2fr repeat(8, 1fr) 1.2fr;186    gap: 12px;187    margin-top: 12px;188  }189  .space-row {190    display: grid;191    grid-template-columns: 1.2fr 1.2fr 6fr 1.2fr 1.6fr;192    gap: 12px;193    margin-top: 12px;194  }195  .wide { grid-column: span 2; }196  .enter { background: #cfd5ff; color: #1b1e23; }197  .mic { background: #494d54; }198 199  /* Gesture pill (OS navigation) */200  .gesture-pill {201    position: absolute;202    bottom: 8px;203    left: 50%;204    transform: translateX(-50%);205    width: 220px;206    height: 10px;207    background: #e6e6e6;208    border-radius: 8px;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">219      <div style="color:#fff; font-size:34px;">10:15</div>220    </div>221    <div class="status-right">222      <!-- simple mock icons -->223      <svg width="28" height="28" viewBox="0 0 24 24" fill="#ffffff"><circle cx="12" cy="12" r="10"/></svg>224      <svg width="28" height="28" viewBox="0 0 24 24" fill="#ffffff"><circle cx="12" cy="12" r="2"/><circle cx="4" cy="12" r="2"/><circle cx="20" cy="12" r="2"/></svg>225      <div style="display:flex; align-items:center; gap:8px;">226        <span style="font-size:26px;">97%</span>227        <svg width="44" height="24" viewBox="0 0 44 24">228          <rect x="1" y="4" width="34" height="16" rx="3" ry="3" fill="none" stroke="#ffffff" stroke-width="2"/>229          <rect x="3" y="6" width="30" height="12" fill="#ffffff"/>230          <rect x="36" y="8" width="6" height="8" rx="1" fill="#ffffff"/>231        </svg>232      </div>233    </div>234  </div>235 236  <!-- App Bar -->237  <div class="app-bar">238    <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">239      <path d="M15 5 L8 12 L15 19"/>240    </svg>241    <div class="title">Reviews</div>242  </div>243 244  <!-- Content -->245  <div class="content">246    <div class="spacer"></div>247 248    <div class="review">249      <div class="review-head">250        <div class="avatar">F</div>251        <div class="name">Fabio Teixeira</div>252      </div>253      <div class="review-body">254        <div class="comment">Tasty</div>255        <div class="actions">256          <!-- Warning icon -->257          <div class="icon-btn">258            <svg width="54" height="54" viewBox="0 0 24 24">259              <path d="M12 3 L2 20 H22 Z" fill="#ffd43b" stroke="#d6b41f" stroke-width="1.2"/>260              <rect x="11" y="9" width="2" height="6" fill="#5b4a00"/>261              <rect x="11" y="16.5" width="2" height="2" fill="#5b4a00"/>262            </svg>263          </div>264          <!-- Trash icon -->265          <div class="icon-btn">266            <svg width="54" height="54" viewBox="0 0 24 24">267              <rect x="6" y="7" width="12" height="13" rx="2" fill="#ff4b4b"/>268              <rect x="9" y="3" width="6" height="3" rx="1" fill="#ff6b6b"/>269              <rect x="5" y="6" width="14" height="2" rx="1" fill="#e83e3e"/>270              <rect x="9" y="10" width="2" height="7" fill="#b52020"/>271              <rect x="13" y="10" width="2" height="7" fill="#b52020"/>272            </svg>273          </div>274        </div>275      </div>276    </div>277  </div>278 279  <!-- Composer -->280  <div class="composer">281    <div class="input-row">282      <div class="input-line"></div>283      <div class="post-btn">POST</div>284    </div>285  </div>286 287  <!-- Keyboard -->288  <div class="keyboard">289    <div class="kb-top">290      <div class="kb-pill">▦</div>291      <div class="kb-pill">☺</div>292      <div class="kb-pill" style="font-weight:700;">GIF</div>293      <div class="kb-pill">⚙</div>294      <div class="kb-pill">G↔</div>295      <div class="kb-pill">🎨</div>296      <div style="margin-left:auto;" class="kb-pill">🎤</div>297    </div>298 299    <!-- Row 1 -->300    <div class="kb-grid">301      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>302      <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>303    </div>304    <!-- Row 2 -->305    <div class="row">306      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>307      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key enter">⌫</div>308    </div>309    <!-- Row 3 -->310    <div class="row">311      <div class="key">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>312      <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key">.</div><div class="key enter">↵</div>313    </div>314    <!-- Row 4 -->315    <div class="space-row">316      <div class="key">?123</div>317      <div class="key">,</div>318      <div class="key">space</div>319      <div class="key">.</div>320      <div class="key enter">⮞</div>321    </div>322  </div>323 324  <!-- Gesture pill -->325  <div class="gesture-pill"></div>326</div>327</body>328</html>