GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search Screen Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Segoe UI", Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #FFFFFF;10  }11 12  /* Top system status bar */13  .status-bar {14    position: absolute; top: 0; left: 0; width: 100%; height: 160px;15    background: #EEEEEE; display: flex; align-items: center; justify-content: space-between;16    padding: 0 40px; color: #555; font-size: 44px; letter-spacing: 1px;17  }18  .status-icons { display: flex; align-items: center; gap: 28px; }19  .status-icons svg { width: 48px; height: 48px; fill: #555; }20 21  /* App bar */22  .app-bar {23    position: absolute; top: 160px; left: 0; width: 100%; height: 140px;24    background: #EEEEEE; display: flex; align-items: center; gap: 28px; padding: 0 40px;25    color: #333; border-bottom: 1px solid #E6E6E6;26  }27  .app-bar .title { font-size: 64px; font-weight: 500; }28  .icon-btn {29    width: 84px; height: 84px; border-radius: 42px; background: transparent; display: flex; align-items: center; justify-content: center;30  }31  .icon-btn svg { width: 64px; height: 64px; fill: #333; }32 33  /* Content area */34  .content {35    position: absolute; top: 300px; left: 0; width: 100%; bottom: 980px; background: #FFFFFF;36  }37 38  /* Keyboard */39  .keyboard {40    position: absolute; left: 0; bottom: 80px; width: 100%; height: 920px;41    background: #F3F3F3; border-top: 1px solid #DDDDDD;42  }43  .kb-toolbar {44    height: 150px; display: flex; align-items: center; gap: 50px; padding: 0 40px; color: #444;45  }46  .kb-circle {47    width: 100px; height: 100px; border-radius: 50px; background: #D7DEE2; display: flex; align-items: center; justify-content: center;48  }49  .kb-toolbar .label { font-weight: 700; font-size: 46px; color: #444; }50  .kb-divider { width: 2px; height: 60px; background: #CFCFCF; }51  .kb-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }52  .kb-icon svg { width: 60px; height: 60px; fill: #4A4A4A; }53 54  .keys { padding: 10px 24px 24px; }55  .row { display: grid; gap: 18px; margin-bottom: 18px; }56  .row1 { grid-template-columns: repeat(10, 1fr); }57  .row2 { grid-template-columns: repeat(9, 1fr); padding: 0 44px; }58  .row3 { grid-template-columns: repeat(9, 1fr); padding: 0 104px 0 104px; }59  .row4 { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr 1.1fr 5fr 1fr 1.2fr; gap: 18px; padding: 0 12px; }60 61  .key {62    height: 120px; border-radius: 28px; background: #FFFFFF; border: 1px solid #E0E0E0;63    display: flex; align-items: center; justify-content: center; font-size: 46px; color: #333;64  }65  .key.special {66    background: #D6DEE2; color: #2E2E2E; border-color: #D6DEE2;67  }68  .space { background: #FFFFFF; border-color: #E0E0E0; }69  .emoji { background: #EAEAEA; }70  .enter { background: #D6DEE2; }71 72  /* Home indicator */73  .home-indicator {74    position: absolute; left: 50%; transform: translateX(-50%);75    bottom: 20px; width: 320px; height: 14px; background: #BDBDBD; border-radius: 7px;76  }77</style>78</head>79<body>80<div id="render-target">81 82  <!-- Status Bar -->83  <div class="status-bar">84    <div class="time">10:33</div>85    <div class="status-icons">86      <!-- Wi-Fi icon -->87      <svg viewBox="0 0 24 24">88        <path d="M12 18c.7 0 1.2.5 1.2 1.2S12.7 20.4 12 20.4s-1.2-.5-1.2-1.2S11.3 18 12 18z"></path>89        <path d="M4.5 12.5c4.9-4 10.1-4 15 0l-1.3 1.3c-3.9-3.1-8.5-3.1-12.3 0L4.5 12.5z"></path>90        <path d="M7.6 15.2c2.6-2.1 6.3-2.1 8.9 0l-1.3 1.3c-2-1.5-4.4-1.5-6.3 0l-1.3-1.3z"></path>91      </svg>92      <!-- Battery icon -->93      <svg viewBox="0 0 24 24">94        <rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect>95        <rect x="20.5" y="9" width="2" height="6" rx="1"></rect>96        <path d="M11 8l-2 4h3l-2 4" fill="none" stroke="#555" stroke-width="1.5"></path>97      </svg>98    </div>99  </div>100 101  <!-- App Bar -->102  <div class="app-bar">103    <div class="icon-btn">104      <svg viewBox="0 0 24 24">105        <path d="M15.5 5l-8 7 8 7" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>106      </svg>107    </div>108    <div class="title">Search</div>109  </div>110 111  <!-- Content Area (empty) -->112  <div class="content"></div>113 114  <!-- Keyboard -->115  <div class="keyboard">116    <div class="kb-toolbar">117      <div class="kb-circle">118        <svg viewBox="0 0 24 24">119          <path d="M15.5 5l-8 7 8 7" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>120        </svg>121      </div>122      <div class="kb-icon">123        <svg viewBox="0 0 24 24">124          <circle cx="9" cy="9" r="3"></circle>125          <circle cx="15" cy="15" r="3"></circle>126        </svg>127      </div>128      <div class="label">GIF</div>129      <div class="kb-icon">130        <svg viewBox="0 0 24 24">131          <circle cx="12" cy="12" r="6" fill="none" stroke="#4A4A4A" stroke-width="2"></circle>132          <path d="M12 6v3M12 15v3M6 12h3M15 12h3" stroke="#4A4A4A" stroke-width="2" stroke-linecap="round"></path>133        </svg>134      </div>135      <div class="kb-icon">136        <svg viewBox="0 0 24 24">137          <path d="M8 7h8v4H8zM5 15h14v2H5z""></path>138        </svg>139      </div>140      <div class="kb-divider"></div>141      <div class="kb-icon">142        <svg viewBox="0 0 24 24">143          <circle cx="12" cy="6" r="2"></circle>144          <circle cx="12" cy="18" r="2"></circle>145          <circle cx="12" cy="12" r="2"></circle>146        </svg>147      </div>148      <div class="kb-icon">149        <svg viewBox="0 0 24 24">150          <path d="M12 3c2 0 3 1.4 3 3.2V11c0 1.8-1 3.2-3 3.2s-3-1.4-3-3.2V6.2C9 4.4 10 3 12 3z"></path>151          <rect x="9" y="15" width="6" height="6" rx="3"></rect>152        </svg>153      </div>154    </div>155 156    <div class="keys">157      <div class="row row1">158        <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>159        <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>160      </div>161      <div class="row row2">162        <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>163        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>164      </div>165      <div class="row row3">166        <div class="key special">⇧</div>167        <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>168        <div class="key special">⌫</div>169      </div>170      <div class="row row4">171        <div class="key special">?123</div>172        <div class="key special">,</div>173        <div class="key emoji">🙂</div>174        <div class="key space"></div>175        <div class="key">.</div>176        <div class="key special">177          <svg viewBox="0 0 24 24" style="width:48px;height:48px;fill:#333;">178            <circle cx="11" cy="11" r="7" fill="none" stroke="#333" stroke-width="2"></circle>179            <path d="M16.5 16.5L21 21" stroke="#333" stroke-width="2" stroke-linecap="round"></path>180          </svg>181        </div>182        <div class="key enter">⏎</div>183      </div>184    </div>185  </div>186 187  <div class="home-indicator"></div>188</div>189</body>190</html>