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>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #000000;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0;18    width: 100%; height: 120px;19    background: #000;20    color: #fff;21    display: flex; align-items: center;22    padding: 0 30px;23    box-sizing: border-box;24    font-weight: 500;25  }26  .status-time { font-size: 44px; letter-spacing: 0.5px; }27  .status-middle {28    margin-left: 22px;29    font-size: 40px; color: #ffffff; opacity: 0.9;30  }31  .status-icons { margin-left: auto; display: flex; align-items: center; gap: 22px; }32  .icon { display: inline-flex; align-items: center; justify-content: center; }33  .wifi svg, .battery svg { fill: #fff; }34 35  /* Toolbar */36  .toolbar {37    position: absolute; top: 120px; left: 0;38    width: 100%; height: 140px;39    background: #7b7300; /* olive mustard */40    display: flex; align-items: center;41    padding: 0 26px; box-sizing: border-box;42    color: #222;43  }44  .check-btn {45    width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;46  }47  .title-input {48    height: 90px; width: 720px;49    background: #f0efe9;50    border: 6px solid #b88708;51    border-radius: 8px;52    box-sizing: border-box;53    margin: 0 24px;54    display: flex; align-items: center;55    padding: 0 18px;56    font-size: 54px; color: #101010;57  }58  .caret {59    width: 2px; height: 64px; background: #4A90E2; margin-left: 10px;60  }61  .yellow-square {62    width: 90px; height: 90px; background: #fff200;63    border-radius: 4px; margin-right: 24px;64    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);65  }66  .kebab {67    width: 60px; height: 90px; display: flex; align-items: center; justify-content: center;68  }69  .kebab span {70    width: 10px; height: 10px; background: #222; border-radius: 50%;71    display: block; margin: 5px 0;72  }73 74  /* Timestamp at right under toolbar */75  .timestamp {76    position: absolute; top: 276px; right: 26px;77    color: #bdbdbd; font-size: 36px;78  }79 80  /* Content area with lines */81  .content {82    position: absolute; left: 0; top: 260px;83    width: 100%; height: 1240px;84    background:85      repeating-linear-gradient(to bottom,86        rgba(123,115,0,0.35) 0px, rgba(123,115,0,0.35) 1px,87        transparent 1px, transparent 170px);88    padding: 26px 34px;89    box-sizing: border-box;90    color: #d3d3d3;91  }92  .editing-label {93    color: #9e9e9e; font-size: 40px; margin-top: 10px;94  }95  .main-title {96    font-size: 72px; color: #cfcfcf; margin-top: 20px;97  }98 99  /* Undo/Redo row above keyboard */100  .history-controls {101    position: absolute; bottom: 980px; left: 0; width: 100%;102    height: 120px; display: flex; align-items: center; justify-content: center; gap: 120px;103  }104  .round-btn {105    width: 100px; height: 100px; border-radius: 50%;106    display: flex; align-items: center; justify-content: center;107    background: #0d0d0d; box-shadow: inset 0 0 0 1px rgba(123,115,0,0.5);108  }109  .round-btn svg { fill: #b9b9b9; }110 111  /* Keyboard (simplified dark UI) */112  .keyboard {113    position: absolute; bottom: 0; left: 0;114    width: 100%; height: 980px;115    background: #222328;116    box-sizing: border-box;117    padding: 18px 20px;118    color: #e6e6e6;119  }120  .suggest-bar {121    height: 100px; background: #2b2c32; border-radius: 18px;122    display: flex; align-items: center; justify-content: space-around;123    font-size: 40px; color: #cfd0d4;124    margin-bottom: 24px;125  }126  .keys {127    display: grid;128    grid-template-columns: repeat(10, 1fr);129    grid-row-gap: 22px; grid-column-gap: 14px;130  }131  .key {132    height: 120px; background: #3a3b41; border-radius: 22px;133    display: flex; align-items: center; justify-content: center;134    font-size: 46px; color: #f0f0f0;135  }136  .space-row {137    margin-top: 24px; display: grid; grid-template-columns: 1.2fr 1fr 5fr 1fr 1.2fr; grid-column-gap: 16px;138  }139  .key.small { font-size: 40px; }140  .enter { background: #cfd6ff; color: #1a1a1a; }141  .emoji { background: #3a3b41; }142</style>143</head>144<body>145<div id="render-target">146 147  <!-- Status Bar -->148  <div class="status-bar">149    <div class="status-time">11:37</div>150    <div class="status-middle">M</div>151    <div class="status-icons">152      <div class="icon wifi">153        <svg width="46" height="46" viewBox="0 0 24 24">154          <path d="M12 18l2 2-2 2-2-2 2-2zm-4.5-3.5l1.4 1.4C9.4 15.4 10.7 15 12 15s2.6.4 3.6 1.2l1.4-1.4C15.9 13.9 14 13 12 13s-3.9.9-4.5 1.5zm-4-4l1.4 1.4C7 10.4 9.4 9.5 12 9.5s5 .9 6.9 2.4l1.4-1.4C18.9 8 15.6 7 12 7S5.1 8 3.5 10.5z"/>155        </svg>156      </div>157      <div class="icon battery">158        <svg width="46" height="46" viewBox="0 0 24 24">159          <path d="M17 7h2v2h1v6h-1v2h-2V7z"/>160          <path d="M3 7h12v10H3z"/>161        </svg>162      </div>163    </div>164  </div>165 166  <!-- Toolbar -->167  <div class="toolbar">168    <div class="check-btn">169      <svg width="64" height="64" viewBox="0 0 24 24">170        <path fill="#e6e6e6" d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/>171      </svg>172    </div>173    <div class="title-input">174      <span>Books</span>175      <div class="caret"></div>176    </div>177    <div class="yellow-square"></div>178    <div class="kebab">179      <span></span><span></span><span></span>180    </div>181  </div>182 183  <div class="timestamp">8/9/23 11:35 AM</div>184 185  <!-- Content area -->186  <div class="content">187    <div class="editing-label">Editing</div>188    <div class="main-title">Bhagavad Geeta</div>189  </div>190 191  <!-- Undo / Redo controls -->192  <div class="history-controls">193    <div class="round-btn">194      <svg width="56" height="56" viewBox="0 0 24 24">195        <path d="M11 7V4L6 9l5 5v-3c3.3 0 5.4 1.6 6.6 4.1l1.8-.9C18.5 11.1 15.7 9 11 9z"/>196      </svg>197    </div>198    <div class="round-btn">199      <svg width="56" height="56" viewBox="0 0 24 24">200        <path d="M13 7c-4.7 0-7.5 2.1-9.4 5.2l1.8.9C6.6 10.6 8.7 9 12 9v3l5-5-5-5v3z"/>201      </svg>202    </div>203  </div>204 205  <!-- Keyboard (simplified) -->206  <div class="keyboard">207    <div class="suggest-bar">208      <div>Books</div>209      <div>|</div>210      <div>Book's</div>211      <div>|</div>212      <div>[IMG: Books icon]</div>213      <div class="icon">214        <svg width="50" height="50" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#cfd0d4"/></svg>215      </div>216    </div>217 218    <div class="keys">219      <!-- Row 1 -->220      <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>221      <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>222      <!-- Row 2 -->223      <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>224      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key small">⌫</div>225      <!-- Row 3 -->226      <div class="key small">⇧</div><div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>227      <div class="key">b</div><div class="key">n</div><div class="key">m</div><div class="key">.</div><div class="key small">↵</div>228    </div>229 230    <div class="space-row">231      <div class="key small">?123</div>232      <div class="key">,</div>233      <div class="key emoji">space</div>234      <div class="key">.</div>235      <div class="key enter">→</div>236    </d