GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Mockup - Text Tool with Keyboard</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  /* Top black area */15  .top-black {16    position: absolute; left: 0; top: 0;17    width: 1080px; height: 150px; background: #000;18  }19 20  /* Editing toolbar */21  .edit-toolbar {22    position: absolute; left: 80px; top: 170px;23    width: 920px; height: 110px;24    background: #3b3b3b; color: #fff;25    border-radius: 8px; box-shadow: 0 6px 14px rgba(0,0,0,0.35);26    display: flex; align-items: center; padding: 0 22px; gap: 26px;27  }28  .tool-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; }29  .tool-text { font-size: 40px; line-height: 52px; }30  .divider {31    height: 70px; width: 1px; background: rgba(255,255,255,0.35);32    margin-left: auto; margin-right: 20px;33  }34  .check-btn { width: 56px; height: 56px; border-radius: 6px; background: #4CAF50; display: flex; align-items: center; justify-content: center; }35 36  /* Text editor card */37  .text-card {38    position: absolute; left: 90px; top: 320px;39    width: 900px; background: #333; color: #fff;40    border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,0.35);41    padding-top: 24px; padding-bottom: 30px;42  }43  .text-card h2 {44    margin: 0; text-align: center; font-weight: 600; font-size: 42px; color: #ffffff;45  }46  .text-area {47    margin: 24px 26px;48    height: 260px;49    background: linear-gradient(#f1f1f1, #e7e7e7);50    border: 5px solid #5c87c4;51    border-radius: 12px;52    position: relative;53    padding: 18px;54    color: #5a5a5a;55    font-size: 64px;56  }57 58  /* Faint purple bounding box below */59  .ghost-box {60    position: absolute; left: 260px; top: 760px;61    width: 560px; height: 600px;62    border: 3px solid #b6aafe; border-radius: 4px;63    background: transparent;64  }65 66  /* Keyboard area */67  .keyboard {68    position: absolute; left: 0; top: 1450px;69    width: 1080px; height: 850px;70    background: #eef0e7;71    border-top-left-radius: 22px; border-top-right-radius: 22px;72    box-shadow: 0 -4px 10px rgba(0,0,0,0.08);73  }74  .kb-top-row {75    height: 100px; display: flex; align-items: center; gap: 28px;76    padding: 0 40px; color: #5b5b5b;77  }78  .kb-chip {79    background: #ffffff; border: 1px solid #d9d9d9; border-radius: 14px;80    height: 58px; padding: 0 22px; display: inline-flex; align-items: center; font-weight: 600;81  }82 83  .kb-rows { padding: 16px 26px 0; }84  .row { display: grid; gap: 16px; margin-bottom: 18px; }85  .row.row1 { grid-template-columns: repeat(10, 1fr); }86  .row.row2 { grid-template-columns: repeat(9, 1fr); padding: 0 40px; }87  .row.row3 { grid-template-columns: 1.4fr repeat(7, 1fr) 1.4fr; }88  .key {89    background: #ffffff; border: 1px solid #dcdcdc; border-radius: 18px;90    height: 120px; display: flex; align-items: center; justify-content: center;91    font-size: 46px; color: #2c2c2c;92  }93  .key.accent { background: #cfe4c7; }94  .key.small { font-size: 34px; }95  .key.icon { font-size: 38px; }96 97  .row.row4 {98    display: grid;99    grid-template-columns: 1.4fr 1fr 1fr 5fr 1fr 1.6fr;100    gap: 16px;101  }102 103  /* Bottom navigation pill */104  .nav-bar {105    position: absolute; left: 0; bottom: 0;106    width: 1080px; height: 100px; background: #f5f5f5;107  }108  .nav-pill {109    position: absolute; left: 50%; transform: translateX(-50%);110    bottom: 30px; width: 220px; height: 14px; border-radius: 10px; background: #7e7e7e;111  }112 113  /* Utility */114  .caret {115    width: 4px; height: 64px; background: #4c84c7; display: inline-block; margin-right: 12px;116    vertical-align: middle;117  }118</style>119</head>120<body>121<div id="render-target">122  <div class="top-black"></div>123 124  <div class="edit-toolbar">125    <div class="tool-icon">126      <svg viewBox="0 0 24 24" width="40" height="40">127        <rect x="2" y="4" width="20" height="16" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>128        <path d="M4 9h16M4 13h16" stroke="#fff" stroke-width="2"></path>129      </svg>130    </div>131    <div class="tool-text">Aa</div>132    <div class="tool-icon">133      <svg viewBox="0 0 24 24" width="40" height="40">134        <circle cx="12" cy="12" r="9" fill="none" stroke="#fff" stroke-width="2"></circle>135        <circle cx="12" cy="12" r="6" fill="none" stroke="#ffcc00" stroke-width="2"></circle>136      </svg>137    </div>138    <div class="tool-icon">139      <svg viewBox="0 0 24 24" width="40" height="40">140        <polygon points="4,18 10,6 20,18" fill="none" stroke="#fff" stroke-width="2"></polygon>141      </svg>142    </div>143    <div class="tool-icon">144      <svg viewBox="0 0 24 24" width="40" height="40">145        <circle cx="12" cy="12" r="8" fill="none" stroke="#fff" stroke-width="2"></circle>146        <circle cx="12" cy="12" r="2" fill="#fff"></circle>147      </svg>148    </div>149    <div class="divider"></div>150    <div class="check-btn">151      <svg viewBox="0 0 24 24" width="34" height="34">152        <path d="M5 12l4 4 10-10" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>153      </svg>154    </div>155  </div>156 157  <div class="text-card" style="height: 360px;">158    <h2>Text</h2>159    <div class="text-area">160      <span class="caret"></span><span>Text</span>161    </div>162  </div>163 164  <div class="ghost-box"></div>165 166  <div class="keyboard">167    <div class="kb-top-row">168      <div class="kb-chip">🙂</div>169      <div class="kb-chip">GIF</div>170      <div class="kb-chip">⚙️</div>171      <div class="kb-chip">Gx</div>172      <div class="kb-chip">🎨</div>173      <div class="kb-chip">🎤</div>174    </div>175 176    <div class="kb-rows">177      <div class="row row1">178        <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>179        <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>180      </div>181 182      <div class="row row2">183        <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>184        <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>185      </div>186 187      <div class="row row3">188        <div class="key accent icon">⇧</div>189        <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>190        <div class="key accent icon">⌫</div>191      </div>192 193      <div class="row row4">194        <div class="key accent small">?123</div>195        <div class="key small">,</div>196        <div class="key small">🙂</div>197        <div class="key"> </div>198        <div class="key small">.</div>199        <div class="key accent icon">↵</div>200      </div>201    </div>202  </div>203 204  <div class="nav-bar"><div class="nav-pill"></div></div>205</div>206</body>207</html>