GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI - Note Editor</title>6<style>7  body{margin:0;padding:0;background:transparent;font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;}8  #render-target{9    position:relative; overflow:hidden;10    width:1080px; height:2400px;11    background:#1c1d20; color:#fff;12  }13  /* Status bar */14  .status-bar{15    height:120px; padding:24px 36px; box-sizing:border-box;16    display:flex; align-items:center; justify-content:space-between;17    color:#ffffff;18  }19  .status-left{font-size:44px; font-weight:600; letter-spacing:0.5px;}20  .status-right{display:flex; gap:26px; align-items:center;}21  .icon{display:inline-flex; align-items:center; justify-content:center;}22  /* Top app bar (back + actions) */23  .app-bar{24    height:120px; display:flex; align-items:center; justify-content:space-between;25    padding:0 36px; box-sizing:border-box;26  }27  .app-actions{display:flex; gap:36px; align-items:center;}28  /* Note area */29  .note-area{30    position:absolute; left:0; right:0; top:240px; bottom:1060px;31    padding:0 48px; box-sizing:border-box;32  }33  .title{font-size:68px; font-weight:700; color:#bfc2c7; margin-top:24px;}34  .meta-row{35    margin-top:28px; display:flex; align-items:center; justify-content:space-between;36    color:#9ca0a6;37  }38  .meta-text{font-size:36px;}39  .divider{height:2px; background:#2a2c31; margin-top:32px;}40  .note-body{41    margin-top:40px; height:100%; border-radius:8px; color:#cfd3d8;42  }43  /* Accessory bar above keyboard */44  .accessory-bar{45    position:absolute; left:0; right:0; bottom:960px; /* keyboard + features below */46    height:120px; background:#1f2225; border-top:1px solid #2a2c31;47    display:flex; align-items:center; padding:0 32px; box-sizing:border-box;48    color:#d8dbe0;49  }50  .accessory-left{display:flex; align-items:center; gap:40px; font-size:40px;}51  .accessory-right{margin-left:auto; display:flex; align-items:center;}52  /* Features row (emoji, gif, etc) */53  .features-row{54    position:absolute; left:0; right:0; bottom:800px;55    height:160px; background:#1f2225; display:flex; align-items:center;56    padding:0 28px; box-sizing:border-box; gap:36px; color:#dfe2e7;57    border-top:1px solid #2a2c31;58  }59  .feature-icon{60    width:90px; height:90px; border-radius:20px; background:#2b2e33;61    display:flex; align-items:center; justify-content:center; font-size:34px;62    color:#e8eaee;63  }64  /* Keyboard */65  .keyboard{66    position:absolute; left:0; right:0; bottom:0; height:800px;67    background:#222428; border-top:1px solid #2a2c31; padding:20px 24px;68    box-sizing:border-box;69  }70  .kb-row{display:flex; justify-content:space-between; margin:20px 0;}71  .key{72    background:#2a2d31; color:#e6e8ec; border-radius:18px;73    width:92px; height:120px; display:flex; align-items:center; justify-content:center;74    font-size:44px; box-shadow:inset 0 0 0 1px #2f3237;75  }76  .key.small{width:86px;}77  .key.wide{width:200px;}78  .key.xwide{width:540px;}79  .key.icon{font-size:40px;}80  .key.dark{background:#1e2024;}81  .delete{background:#31343a;}82  .bottom-row{display:flex; align-items:center; gap:18px; justify-content:center;}83  /* Icon coloring */84  .yellow{color:#f5c84a;}85  .muted{color:#b9bcc2;}86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Status Bar -->92  <div class="status-bar">93    <div class="status-left">10:43</div>94    <div class="status-right">95      <!-- WiFi -->96      <svg class="icon" width="42" height="42" viewBox="0 0 48 48">97        <path d="M6 18c10-8 26-8 36 0" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round"/>98        <path d="M12 26c7-5 17-5 24 0" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round"/>99        <circle cx="24" cy="33" r="4" fill="#fff"/>100      </svg>101      <!-- Battery -->102      <svg class="icon" width="54" height="42" viewBox="0 0 60 40">103        <rect x="4" y="8" width="48" height="24" rx="4" stroke="#fff" stroke-width="3" fill="none"/>104        <rect x="10" y="12" width="34" height="16" fill="#fff"/>105        <rect x="52" y="14" width="6" height="12" rx="2" fill="#fff"/>106      </svg>107    </div>108  </div>109 110  <!-- App Bar -->111  <div class="app-bar">112    <!-- Back Arrow -->113    <svg class="icon" width="72" height="72" viewBox="0 0 48 48">114      <path d="M22 10 L8 24 L22 38" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>115    </svg>116 117    <div class="app-actions">118      <!-- Yellow ring icon -->119      <svg class="icon" width="72" height="72" viewBox="0 0 48 48">120        <circle cx="24" cy="24" r="16" fill="none" stroke="#f5c84a" stroke-width="5"/>121        <circle cx="24" cy="24" r="6" fill="#f5c84a"/>122      </svg>123      <!-- Pin icon -->124      <svg class="icon" width="72" height="72" viewBox="0 0 48 48">125        <path d="M16 12h16l-6 8v10l-4 6v-16l-6-8z" fill="#dcdfe4"/>126      </svg>127      <!-- Kebab menu -->128      <svg class="icon" width="72" height="72" viewBox="0 0 48 48">129        <circle cx="24" cy="10" r="4" fill="#e6e8eb"/>130        <circle cx="24" cy="24" r="4" fill="#e6e8eb"/>131        <circle cx="24" cy="38" r="4" fill="#e6e8eb"/>132      </svg>133    </div>134  </div>135 136  <!-- Note Area -->137  <div class="note-area">138    <div class="title">Heading</div>139    <div class="meta-row">140      <div class="meta-text">Edited: 09-26 22:42</div>141      <!-- Calendar icon -->142      <svg class="icon" width="54" height="54" viewBox="0 0 48 48">143        <rect x="6" y="10" width="36" height="28" rx="4" fill="none" stroke="#aeb2b8" stroke-width="3"/>144        <rect x="6" y="14" width="36" height="6" fill="#aeb2b8"/>145        <rect x="12" y="24" width="26" height="10" fill="#aeb2b8"/>146      </svg>147    </div>148    <div class="divider"></div>149    <div class="note-body"></div>150  </div>151 152  <!-- Accessory Bar -->153  <div class="accessory-bar">154    <div class="accessory-left">155      <span class="muted">Aa</span>156      <!-- Undo -->157      <svg class="icon" width="56" height="56" viewBox="0 0 48 48">158        <path d="M14 18l-8 8 8 8" fill="none" stroke="#cdd0d6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>159        <path d="M40 26c-10-8-20-8-26 0" fill="none" stroke="#cdd0d6" stroke-width="4" stroke-linecap="round"/>160      </svg>161      <!-- Redo -->162      <svg class="icon" width="56" height="56" viewBox="0 0 48 48">163        <path d="M34 18l8 8-8 8" fill="none" stroke="#cdd0d6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>164        <path d="M8 26c10-8 20-8 26 0" fill="none" stroke="#cdd0d6" stroke-width="4" stroke-linecap="round"/>165      </svg>166    </div>167    <div class="accessory-right">168      <!-- Checkmark -->169      <svg class="icon" width="72" height="72" viewBox="0 0 48 48">170        <path d="M10 26l8 8 20-20" fill="none" stroke="#eaf0f5" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>171      </svg>172    </div>173  </div>174 175  <!-- Features row -->176  <div class="features-row">177    <div class="feature-icon">⌗</div>178    <div class="feature-icon">🙂</div>179    <div class="feature-icon">GIF</div>180    <div class="feature-icon">⚙️</div>181    <div class="feature-icon">G↔︎</div>182    <div class="feature-icon">🎨</div>183    <div class="feature-icon">🎤</div>184  </div>185 186  <!-- Keyboard -->187  <div class="keyboard">188    <!-- Row 1 -->189    <div class="kb-row">190      <div class="key">Q</div>191      <div class="key">W</div>192      <div class="key">E</div>193      <div class="key">R</div>194      <div class="key">T</div>195      <div class="key">Y</div>196      <div class="key">U</div>197      <div class="key">I</div>198      <div class="key">O</div>199      <div class="key">P</div>200    </div>201    <!-- Row 2 -->202    <div class="kb-row">203      <div class="key">A</div>204      <div class="key">S</div>205      <div class="key">D</div>206      <div class="key">F</div>207      <div class="key">G</div>208      <div class="key">H</div>209      <div class="key">J</div>210      <div class="key">K</div>211      <div class="key">L</div>212    </div>213    <!-- Row 3 -->214    <div class="kb-row">215      <div class="key small">Z</div>216      <div class="key small">X</div>217      <div class="key small">C</div>218      <div class="key small">V</div>219      <div class="key small">B</div>220      <div class="key small">N</div>221      <div class="key small">M</div>222      <div class="key delete icon">⌫</div>223    </div>224    <!-- Bottom Row -->225    <div class="bottom-row">226      <div class="key wide">?123</div>227      <div class="key small">,</div>228      <div class="key small">🙂</div>229      <div class="key xwide dark"></div>230      <div class="key small">.</div>231      <div class="key wide icon">↩︎</div>232    </div>233  </div>234 235</div>236</body>237</html>