GD-ML/AndroidCode
13.4k
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>Search Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #000000; color: #E0E0E0;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 110px; padding: 28px 32px 0 32px;19 display: flex; align-items: center; justify-content: space-between;20 color: #EAEAEA; font-size: 34px; letter-spacing: 0.5px;21 }22 .status-left { display: flex; align-items: center; gap: 16px; }23 .status-right { display: flex; align-items: center; gap: 22px; opacity: 0.9; }24 .icon { width: 34px; height: 34px; fill: #EAEAEA; opacity: 0.9; }25 26 /* Search bar area */27 .search-area { position: absolute; top: 140px; left: 48px; right: 48px; display: flex; align-items: center; }28 .search-bar {29 flex: 1; height: 120px; background: #333333; border-radius: 22px;30 display: flex; align-items: center; padding: 0 28px; position: relative;31 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);32 }33 .search-bar .back { margin-right: 18px; }34 .caret {35 width: 4px; height: 64px; background: #FF7A2F; border-radius: 2px; margin-left: 8px;36 }37 .cast-icon {38 width: 56px; height: 56px; margin-left: 16px;39 display: flex; align-items: center; justify-content: center;40 }41 42 /* Suggestions */43 .suggestions {44 position: absolute; top: 320px; left: 48px; right: 48px;45 }46 .suggestion {47 display: flex; align-items: center; justify-content: space-between;48 padding: 28px 8px; border-bottom: 1px solid rgba(255,255,255,0.05);49 }50 .suggestion .text { font-size: 42px; color: #D2D2D2; }51 .suggestion .remove { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; opacity: 0.6; }52 .suggestion .remove svg { width: 28px; height: 28px; fill: none; stroke: #C8C8C8; stroke-width: 4; }53 .suggestion.large .text { font-size: 46px; color: #E0E0E0; }54 .hint { color: #B8B8B8; font-size: 40px; padding: 36px 8px; }55 56 /* Keyboard */57 .keyboard {58 position: absolute; left: 0; right: 0; bottom: 0;59 height: 850px; background: #1E1F22; border-top-left-radius: 18px; border-top-right-radius: 18px;60 box-shadow: 0 -2px 0 rgba(255,255,255,0.05) inset;61 }62 .kb-tools {63 height: 110px; padding: 18px 24px; display: flex; align-items: center; gap: 24px;64 }65 .tool {66 width: 96px; height: 76px; background: #2C2D31; border-radius: 18px; display: flex; align-items: center; justify-content: center;67 color: #EAEAEA; font-size: 30px;68 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);69 }70 .keys { padding: 12px 16px 0 16px; }71 .row {72 display: flex; justify-content: center; gap: 14px; margin-bottom: 18px;73 }74 .key {75 width: 90px; height: 120px; background: #3A3C3F; border-radius: 18px;76 display: flex; align-items: center; justify-content: center;77 color: #EAEAEA; font-size: 46px; text-transform: lowercase;78 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);79 }80 .key.wide { width: 130px; }81 .key.shift { width: 130px; }82 .space-row { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; }83 .key.space { flex: 1; height: 120px; margin: 0 14px; font-size: 38px; color: #CFCFCF; }84 .key.circle {85 width: 120px; height: 120px; border-radius: 60px; background: #BFD0E7; color: #1B1B1B; font-size: 44px;86 }87 .handle {88 position: absolute; left: 50%; transform: translateX(-50%);89 bottom: 18px; width: 220px; height: 10px; background: #CFCFCF; border-radius: 6px; opacity: 0.6;90 }91</style>92</head>93<body>94<div id="render-target">95 96 <!-- Status Bar -->97 <div class="status-bar">98 <div class="status-left">99 <span>10:34</span>100 <svg class="icon" viewBox="0 0 24 24">101 <circle cx="10" cy="10" r="7" stroke="white" stroke-width="2" fill="none"></circle>102 <rect x="16" y="16" width="6" height="2" transform="rotate(45 16 16)" fill="white"></rect>103 </svg>104 </div>105 <div class="status-right">106 <svg class="icon" viewBox="0 0 24 24">107 <circle cx="12" cy="12" r="8" stroke="white" stroke-width="2" fill="none"></circle>108 <rect x="7" y="11" width="10" height="2" fill="white"></rect>109 </svg>110 <svg class="icon" viewBox="0 0 24 24">111 <path d="M3 9h14v6H3z" stroke="white" stroke-width="2" fill="none"></path>112 <path d="M19 10c2 1 3 3 3 5" stroke="white" stroke-width="2" fill="none"></path>113 </svg>114 <svg class="icon" viewBox="0 0 24 24">115 <rect x="3" y="7" width="18" height="10" stroke="white" stroke-width="2" fill="none"></rect>116 <rect x="5" y="9" width="10" height="6" fill="white"></rect>117 </svg>118 </div>119 </div>120 121 <!-- Search Bar -->122 <div class="search-area">123 <div class="search-bar">124 <div class="back">125 <svg width="44" height="44" viewBox="0 0 24 24">126 <path d="M15 6L9 12l6 6" stroke="#EAEAEA" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>127 </svg>128 </div>129 <div class="caret"></div>130 </div>131 <div class="cast-icon">132 <svg width="56" height="56" viewBox="0 0 24 24">133 <rect x="3" y="5" width="14" height="10" rx="2" ry="2" stroke="#EAEAEA" stroke-width="2" fill="none"></rect>134 <path d="M3 18c2 0 4 2 4 4" stroke="#EAEAEA" stroke-width="2" fill="none"></path>135 <path d="M3 14c4 0 8 4 8 8" stroke="#EAEAEA" stroke-width="2" fill="none"></path>136 </svg>137 </div>138 </div>139 140 <!-- Suggestions -->141 <div class="suggestions">142 <div class="suggestion">143 <div class="text">real love martin garrix</div>144 <div class="remove" title="remove">145 <svg viewBox="0 0 24 24">146 <path d="M6 6l12 12M18 6L6 18"></path>147 </svg>148 </div>149 </div>150 <div class="suggestion">151 <div class="text">real love massari</div>152 <div class="remove">153 <svg viewBox="0 0 24 24">154 <path d="M6 6l12 12M18 6L6 18"></path>155 </svg>156 </div>157 </div>158 <div class="suggestion large">159 <div class="text">Martin Garrix</div>160 <div class="remove">161 <svg viewBox="0 0 24 24">162 <path d="M6 6l12 12M18 6L6 18"></path>163 </svg>164 </div>165 </div>166 <div class="hint">Clear search history</div>167 </div>168 169 <!-- Keyboard -->170 <div class="keyboard">171 <div class="kb-tools">172 <div class="tool">▣</div>173 <div class="tool">☺</div>174 <div class="tool">GIF</div>175 <div class="tool">⚙</div>176 <div class="tool">G↔</div>177 <div class="tool">🎨</div>178 <div class="tool">🎤</div>179 </div>180 <div class="keys">181 <div class="row">182 <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>183 <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>184 </div>185 <div class="row">186 <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>187 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>188 </div>189 <div class="row">190 <div class="key shift">↑</div>191 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>192 <div class="key">b</div><div class="key">n</div><div class="key">m</div>193 <div class="key wide">⌫</div>194 </div>195 <div class="space-row" style="margin-top:10px;">196 <div class="key wide">?123</div>197 <div class="key wide">☺</div>198 <div class="key space">space</div>199 <div class="key wide">.</div>200 <div class="key circle">🔍</div>201 </div>202 </div>203 <div class="handle"></div>204 </div>205 206</div>207</body>208</html>