GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Search UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #ffffff;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; right: 0;17 height: 120px; padding: 0 40px;18 display: flex; align-items: center; justify-content: space-between;19 color: #333; font-weight: 600; font-size: 38px;20 }21 .sb-left, .sb-right { display: flex; align-items: center; gap: 24px; }22 .sb-icon { width: 38px; height: 38px; opacity: 0.7; }23 .sb-dot { width: 12px; height: 12px; background:#616161; border-radius:50%; margin-left: 8px; }24 25 /* Search header */26 .search-header {27 position: absolute; top: 120px; left: 0; right: 0;28 height: 190px; border-bottom: 1px solid #e6e6e6;29 display: flex; align-items: center; padding: 0 40px;30 background: #fff;31 }32 .back-btn {33 width: 84px; height: 84px; display: flex; align-items: center; justify-content: center;34 margin-right: 20px;35 }36 .search-input {37 flex: 1;38 height: 120px;39 border-radius: 14px;40 font-size: 46px;41 color: #9e9e9e;42 display: flex; align-items: center;43 padding-left: 16px;44 }45 .placeholder { color: #9e9e9e; }46 47 /* List area */48 .list-area {49 position: absolute; top: 310px; left: 0; right: 0; bottom: 900px;50 overflow: hidden; padding: 30px 60px;51 }52 .search-row {53 display: flex; align-items: center; gap: 24px; margin-bottom: 40px;54 color: #555;55 }56 .mag-icon {57 width: 48px; height: 48px;58 }59 .category {60 font-size: 52px; color: #212121;61 padding: 44px 0; border-bottom: 1px solid transparent;62 }63 64 /* Keyboard mock */65 .keyboard {66 position: absolute; left: 0; right: 0; bottom: 0;67 height: 900px; background: #121212; color: #fff;68 box-shadow: 0 -4px 12px rgba(0,0,0,0.2);69 }70 .kb-top {71 height: 120px; display: flex; align-items: center; gap: 34px;72 padding: 0 40px; color: #d0d0d0; font-size: 38px;73 }74 .kb-top .mini { width: 80px; height: 80px; background: #1f1f1f; border-radius: 18px; display: flex; align-items: center; justify-content: center; }75 .kb-rows { padding: 24px 24px 0 24px; }76 .row { display: flex; justify-content: space-between; margin: 22px 12px; }77 .key {78 width: 92px; height: 120px; background: #2a2a2a; border-radius: 22px;79 display: flex; align-items: center; justify-content: center;80 font-size: 52px; color: #eaeaea;81 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);82 }83 .key.wide { width: 220px; }84 .key.space { flex: 1; margin: 0 18px; width: auto; }85 .key.icon { font-size: 40px; }86 .action-circle {87 width: 120px; height: 120px; background: #cfe6ff; border-radius: 60px;88 display: flex; align-items: center; justify-content: center; margin-left: 18px;89 }90 91 /* Simple SVG icon styling */92 svg { display: block; }93</style>94</head>95<body>96<div id="render-target">97 98 <!-- Status bar -->99 <div class="status-bar">100 <div class="sb-left">101 <div style="font-size:38px;">12:05</div>102 <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#666" d="M12 2a7 7 0 0 0 0 20 9 9 0 0 1 0-20z"/></svg>103 <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#666" d="M9 7h6v2H9zm-2 4h10v2H7zm-3 4h16v2H4z"/></svg>104 <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#666" d="M10 16l6-4-6-4v8z"/></svg>105 <div class="sb-dot"></div>106 </div>107 <div class="sb-right">108 <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#666" d="M3 18h2v3H3v-3zm4-4h2v7H7v-7zm4-3h2v10h-2V11zm4-4h2v14h-2V7zm4-3h2v17h-2V4z"/></svg>109 <svg class="sb-icon" viewBox="0 0 24 24"><path fill="#666" d="M20 8h-3V5a5 5 0 0 0-10 0v3H4v14h16V8zm-9-3a3 3 0 0 1 6 0v3h-6V5z"/></svg>110 </div>111 </div>112 113 <!-- Search header -->114 <div class="search-header">115 <div class="back-btn">116 <svg width="64" height="64" viewBox="0 0 24 24">117 <path d="M15 18l-6-6 6-6" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>118 </svg>119 </div>120 <div class="search-input">121 <span class="placeholder">Book, author or shelf</span>122 </div>123 </div>124 125 <!-- List area -->126 <div class="list-area">127 <div class="search-row">128 <svg class="mag-icon" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="#777" stroke-width="2" fill="none"/><path d="M15 15l6 6" stroke="#777" stroke-width="2" /></svg>129 <div style="font-size:52px; color:#333;">Search</div>130 </div>131 132 <div class="category">Audiobooks</div>133 <div class="category">Fiction</div>134 <div class="category">Podcasts</div>135 <div class="category">Read for free</div>136 <div class="category">Self-Help</div>137 <div class="category">Young Adult</div>138 <div class="category">Romance</div>139 <div class="category">Thriller & Crime</div>140 </div>141 142 <!-- Keyboard -->143 <div class="keyboard">144 <div class="kb-top">145 <div class="mini">146 <svg width="50" height="50" viewBox="0 0 24 24"><path fill="#bdbdbd" d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>147 </div>148 <div class="mini"><span>😊</span></div>149 <div class="mini"><span style="font-weight:700">GIF</span></div>150 <div class="mini">151 <svg width="50" height="50" viewBox="0 0 24 24"><path fill="#bdbdbd" d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-13a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"/></svg>152 </div>153 <div class="mini">154 <svg width="50" height="50" viewBox="0 0 24 24"><path fill="#bdbdbd" d="M12 2a10 10 0 0 0 0 20c4-2 6-6 6-10S16 4 12 2z"/></svg>155 </div>156 <div class="mini">157 <svg width="50" height="50" viewBox="0 0 24 24"><path fill="#bdbdbd" d="M12 3l9 4-9 4-9-4 9-4zm0 9l9 4-9 4-9-4 9-4z"/></svg>158 </div>159 <div class="mini">160 <svg width="50" height="50" viewBox="0 0 24 24"><path fill="#bdbdbd" d="M12 3a5 5 0 0 1 5 5v4a5 5 0 0 1-10 0V8a5 5 0 0 1 5-5zm1 17h-2v2h2v-2z"/></svg>161 </div>162 </div>163 164 <div class="kb-rows">165 <div class="row">166 <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><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>167 </div>168 <div class="row" style="padding: 0 46px;">169 <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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>170 </div>171 <div class="row" style="padding: 0 90px;">172 <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>173 <div class="key icon">174 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#eaeaea" d="M19 7l-7 7-7-7"/></svg>175 </div>176 </div>177 <div class="row" style="align-items: center;">178 <div class="key wide" style="background:#3a3a3a; color:#d7d7d7;">?123</div>179 <div class="key icon">,</div>180 <div class="key icon">😊</div>181 <div class="key space"> </div>182 <div class="key icon">.</div>183 <div class="action-circle">184 <svg width="60" height="60" viewBox="0 0 24 24">185 <circle cx="11" cy="11" r="7" stroke="#2b5da8" stroke-width="2" fill="none"/>186 <path d="M16 16l5 5" stroke="#2b5da8" stroke-width="2"/>187 </svg>188 </div>189 </div>190 </div>191 </div>192 193</div>194</body>195</html>