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>Mobile UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; border-radius: 24px;13    box-shadow: 0 4px 24px rgba(0,0,0,0.08);14    font-family: Arial, Helvetica, sans-serif; color: #222;15  }16 17  /* Status bar */18  .status-bar { position: absolute; top: 0; left: 0; width: 100%; height: 110px; }19  .status-left { position: absolute; left: 32px; top: 28px; font-size: 42px; font-weight: 600; letter-spacing: 0.5px; color: #222; }20  .status-icons { position: absolute; right: 28px; top: 30px; display: flex; align-items: center; gap: 22px; }21  .status-icons svg { width: 38px; height: 38px; }22 23  /* Search bar row */24  .search-row { position: absolute; top: 118px; left: 24px; right: 24px; height: 100px; display: flex; align-items: center; gap: 20px; }25  .back-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }26  .back-btn svg { width: 46px; height: 46px; }27  .search-field { flex: 1; height: 100px; background: #F2F3F5; border-radius: 50px; position: relative; }28  .search-field .placeholder { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); font-size: 36px; color: #5D636B; }29  .search-field .icon { position: absolute; top: 50%; transform: translateY(-50%); }30  .search-field .icon.mic { right: 132px; }31  .search-field .icon.camera { right: 44px; }32  .search-field .icon svg { width: 46px; height: 46px; fill: none; stroke: #2E2E2E; stroke-width: 2.5; }33 34  /* Tabs */35  .tab-bar { position: absolute; top: 248px; left: 36px; display: flex; gap: 52px; align-items: center; }36  .tab { font-size: 38px; color: #757575; }37  .tab.active { color: #2563EB; font-weight: 600; }38  .tab-line { position: absolute; top: 310px; left: 36px; width: 120px; height: 6px; background: #2563EB; border-radius: 3px; }39 40  /* Recent list */41  .list { position: absolute; top: 360px; left: 36px; right: 36px; }42  .item { font-size: 44px; line-height: 1.35; margin-bottom: 44px; color: #222; }43  .item.bold { font-weight: 600; }44 45  /* Keyboard */46  .keyboard { position: absolute; left: 0; bottom: 0; width: 100%; height: 900px; background: #F4F1F8; border-top: 1px solid #E0E0E0; }47  .kb-toolbar { position: absolute; top: 24px; left: 28px; right: 28px; display: flex; gap: 36px; align-items: center; }48  .tool { width: 72px; height: 72px; border-radius: 18px; background: #EDECF4; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #333; }49  .tool.green { background: #D6EDC9; }50  .kb { position: absolute; top: 120px; left: 22px; right: 22px; }51  .kb-row { display: flex; justify-content: center; gap: 16px; margin-bottom: 30px; }52  .key {53    width: 92px; height: 120px; background: #FFFFFF;54    border-radius: 28px; box-shadow: inset 0 1px 0 #E0E0E0;55    display: flex; align-items: center; justify-content: center;56    font-size: 40px; color: #222;57  }58  .key.wide { width: 170px; }59  .key.extra-wide { width: 520px; }60  .key.pink { background: #F7E3E9; }61  .key.green { background: #CDE8BE; font-weight: 700; }62  .key-icon svg { width: 42px; height: 42px; }63  .gesture-bar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 200px; height: 8px; background: #BDBDBD; border-radius: 4px; opacity: 0.8; }64</style>65</head>66<body>67<div id="render-target">68 69  <!-- Status bar -->70  <div class="status-bar">71    <div class="status-left">12:37</div>72    <div class="status-icons">73      <!-- envelope/mail -->74      <svg viewBox="0 0 24 24">75        <rect x="2" y="5" width="20" height="14" rx="2" ry="2" fill="none" stroke="#666" stroke-width="2"></rect>76        <path d="M3 6 L12 12 L21 6" fill="none" stroke="#666" stroke-width="2"></path>77      </svg>78      <!-- wifi (simple) -->79      <svg viewBox="0 0 24 24">80        <path d="M3 10 Q12 3 21 10" fill="none" stroke="#666" stroke-width="2"></path>81        <path d="M6 13 Q12 8 18 13" fill="none" stroke="#666" stroke-width="2"></path>82        <circle cx="12" cy="17" r="2" fill="#666"></circle>83      </svg>84      <!-- battery -->85      <svg viewBox="0 0 28 24">86        <rect x="2" y="6" width="20" height="12" rx="2" fill="none" stroke="#666" stroke-width="2"></rect>87        <rect x="23" y="9" width="3" height="6" fill="#666"></rect>88        <rect x="4" y="8" width="16" height="8" fill="#666"></rect>89      </svg>90    </div>91  </div>92 93  <!-- Search bar row -->94  <div class="search-row">95    <div class="back-btn">96      <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">97        <path d="M30 10 L16 24 L30 38" fill="none" stroke="#222" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>98      </svg>99    </div>100    <div class="search-field">101      <div class="placeholder">Search on eBay</div>102      <div class="icon mic">103        <svg viewBox="0 0 48 48">104          <rect x="16" y="10" width="16" height="20" rx="8"></rect>105          <path d="M12 22 Q24 30 36 22" fill="none" stroke="#2E2E2E" stroke-width="2.5"></path>106          <path d="M24 30 L24 38" stroke="#2E2E2E" stroke-width="2.5"></path>107        </svg>108      </div>109      <div class="icon camera">110        <svg viewBox="0 0 48 48">111          <rect x="8" y="12" width="32" height="24" rx="6"></rect>112          <circle cx="24" cy="24" r="7" fill="none" stroke="#2E2E2E" stroke-width="2.5"></circle>113          <rect x="14" y="10" width="8" height="4" rx="2"></rect>114        </svg>115      </div>116    </div>117  </div>118 119  <!-- Tabs -->120  <div class="tab-bar">121    <div class="tab active">Recent</div>122    <div class="tab">Saved</div>123  </div>124  <div class="tab-line"></div>125 126  <!-- Recent list -->127  <div class="list">128    <div class="item">amazon echo dot</div>129    <div class="item bold">HOOBRO wooden side tables</div>130    <div class="item">hoobro wooden side table</div>131    <div class="item">side table by Amazon</div>132    <div class="item">a to l side table</div>133    <div class="item">a to l furniture</div>134    <div class="item">ace furniture</div>135    <div class="item">furniture</div>136  </div>137 138  <!-- Keyboard -->139  <div class="keyboard">140    <div class="kb-toolbar">141      <div class="tool green">⌨️</div>142      <div class="tool">😊</div>143      <div class="tool">GIF</div>144      <div class="tool">⚙️</div>145      <div class="tool">Gᵗʳ</div>146      <div class="tool">🎨</div>147      <div class="tool">🎤</div>148    </div>149 150    <div class="kb">151      <!-- Row 1 -->152      <div class="kb-row">153        <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>154        <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>155      </div>156      <!-- Row 2 -->157      <div class="kb-row" style="padding: 0 40px;">158        <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>159        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>160      </div>161      <!-- Row 3 -->162      <div class="kb-row">163        <div class="key wide">164          <!-- Shift icon -->165          <svg viewBox="0 0 48 48" class="key-icon">166            <path d="M24 10 L10 24 H18 V36 H30 V24 H38 Z" fill="#222"></path>167          </svg>168        </div>169        <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>170        <div class="key wide">171          <!-- Backspace -->172          <svg viewBox="0 0 48 48" class="key-icon">173            <path d="M14 12 L6 24 L14 36 H40 V12 Z" fill="none" stroke="#222" stroke-width="3"></path>174            <path d="M24 18 L32 30 M32 18 L24 30" stroke="#222" stroke-width="3"></path>175          </svg>176        </div>177      </div>178      <!-- Row 4 -->179      <div class="kb-row">180        <div class="key pink wide">?123</div>181        <div class="key">,</div>182        <div class="key">☺</div>183        <div class="key extra-wide"></div>184        <div class="key">.</div>185        <div class="key green wide">186          <!-- Search icon -->187          <svg viewBox="0 0 48 48" class="key-icon">188            <circle cx="20" cy="20" r="12" fill="none" stroke="#222" stroke-width="3"></circle>189            <path d="M30 30 L38 38" stroke="#222" stroke-width="3" stroke-linecap="round"></path>190          </svg>191        </div>192      </div>193    </div>194 195    <div class="gesture-bar"></div>196  </div>197 198</div>199</body>200</html>