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 Note Editor Mock</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; position: relative; overflow: hidden;10    background: #ffffff;11    border-radius: 0;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 90px;17    background: #67c2cf;18    color: #ffffff; font-weight: 600; letter-spacing: .3px;19  }20  .status-bar .time {21    position: absolute; left: 36px; top: 24px; font-size: 38px;22  }23  .status-icons {24    position: absolute; right: 32px; top: 28px; display: flex; gap: 24px; align-items: center;25  }26  .status-dot { width: 12px; height: 12px; background: #fff; border-radius: 50%; opacity: .9; }27  .status-icons .wifi {28    width: 40px; height: 28px;29    border: 3px solid #fff; border-top-left-radius: 40px; border-top-right-radius: 40px;30    border-bottom: none; transform: translateY(6px);31  }32  .status-icons .battery {33    width: 46px; height: 24px; border: 3px solid #fff; border-radius: 4px; position: relative;34  }35  .battery::after {36    content: ""; position: absolute; right: -10px; top: 7px; width: 8px; height: 10px; background: #fff; border-radius: 2px;37  }38 39  /* App bar */40  .app-bar {41    position: absolute; top: 90px; left: 0; width: 100%; height: 210px; background: #67c2cf;42  }43  .back-btn {44    position: absolute; left: 30px; top: 48px; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;45  }46  .back-btn svg { width: 48px; height: 48px; }47  .title-input {48    position: absolute; left: 120px; right: 120px; top: 36px; height: 120px;49    background: #f5f7f8; border-radius: 14px; border: 1px solid #d7e0e2;50    padding: 30px 32px; box-sizing: border-box; font-size: 44px; color: #333;51  }52  .title-input::placeholder { color: #7a8a90; }53  .app-actions {54    position: absolute; right: 24px; top: 26px; display: flex; gap: 26px;55  }56  .circle-icon {57    width: 84px; height: 84px; background: rgba(255,255,255,0.18); border-radius: 50%;58    border: 2px solid rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 46px; font-weight: 700;59  }60  .circle-icon svg { width: 46px; height: 46px; fill: none; stroke: #fff; stroke-width: 4; }61 62  /* Formatting toolbar area */63  .toolbar-area {64    position: absolute; top: 300px; left: 0; width: 100%; padding: 40px 40px 24px 40px; box-sizing: border-box;65    background: #ffffff;66  }67  .tool-row { display: flex; gap: 28px; margin-bottom: 32px; flex-wrap: wrap; }68  .tool {69    height: 92px; min-width: 120px; padding: 0 24px;70    background: #F0F2F3; border: 1px solid #D4D8DA; border-radius: 8px;71    display: flex; align-items: center; justify-content: center; color: #444; font-size: 42px; font-weight: 600;72  }73  .tool.small { min-width: 110px; font-size: 40px; }74  .tool.wide { min-width: 180px; }75  .tool .sub { font-size: 28px; vertical-align: baseline; }76  .tool .sup { font-size: 28px; vertical-align: super; }77  .done-btn {78    margin-left: auto; background: #55b6c5; color: #fff; border-color: #4aa9b8; font-weight: 800; letter-spacing: 1px; padding: 0 36px; min-width: 220px;79  }80 81  /* Document area */82  .doc-area {83    position: absolute; top: 780px; left: 0; width: 100%; height: 760px; padding: 40px;84    box-sizing: border-box; background: #ffffff; color: #111;85  }86  .doc-line { font-size: 58px; line-height: 84px; }87 88  /* Keyboard mock */89  .keyboard {90    position: absolute; left: 0; bottom: 0; width: 100%; height: 860px; background: #151517; color: #fff;91    box-shadow: 0 -8px 20px rgba(0,0,0,0.25);92  }93  .kb-top {94    height: 120px; display: flex; align-items: center; justify-content: space-between; padding: 0 42px;95    box-sizing: border-box;96  }97  .kb-top .pill {98    width: 92px; height: 92px; background: #2a2a2f; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 38px;99  }100  .kb-grid {101    position: absolute; left: 24px; right: 24px; bottom: 24px; top: 140px;102    display: grid; grid-template-columns: repeat(10, 1fr); grid-auto-rows: 116px; gap: 18px;103  }104  .key {105    background: #252528; border-radius: 22px; display: flex; align-items: center; justify-content: center;106    font-size: 54px; color: #eaeaf0;107  }108  .key.small { font-size: 46px; }109  .key.wide { grid-column: span 3; }110  .key.return { grid-column: span 2; background: #d9c3ea; color: #2b2b2f; font-weight: 800; }111  .space { grid-column: span 4; background: #2b2b2f; }112  .corner { border-radius: 30px; }113</style>114</head>115<body>116<div id="render-target">117 118  <!-- Status Bar -->119  <div class="status-bar">120    <div class="time">11:08</div>121    <div class="status-icons">122      <div class="status-dot"></div>123      <div class="status-dot"></div>124      <div class="status-dot"></div>125      <div class="wifi"></div>126      <div class="battery"></div>127    </div>128  </div>129 130  <!-- App Bar -->131  <div class="app-bar">132    <div class="back-btn">133      <svg viewBox="0 0 24 24">134        <path d="M15 5 L7 12 L15 19" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>135      </svg>136    </div>137 138    <div class="title-input">Title</div>139 140    <div class="app-actions">141      <div class="circle-icon">142        <svg viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" /></svg>143      </div>144      <div class="circle-icon">145        <svg viewBox="0 0 24 24">146          <rect x="6" y="7" width="12" height="12" rx="2" ry="2"></rect>147          <rect x="10" y="4" width="4" height="3" rx="1"></rect>148        </svg>149      </div>150      <div class="circle-icon">?</div>151    </div>152  </div>153 154  <!-- Formatting Toolbar -->155  <div class="toolbar-area">156    <div class="tool-row">157      <div class="tool wide">OCR</div>158      <div class="tool">B</div>159      <div class="tool">I</div>160      <div class="tool">T</div>161      <div class="tool">U</div>162      <div class="tool">A</div>163      <div class="tool">Tt</div>164    </div>165 166    <div class="tool-row">167      <div class="tool">▶︎</div>168      <div class="tool">◀︎</div>169      <div class="tool small">x<tspan class="sup">2</tspan></div>170      <div class="tool small">x<tspan class="sub">2</tspan></div>171      <div class="tool">↶</div>172      <div class="tool">↷</div>173    </div>174 175    <div class="tool-row">176      <div class="tool">≡</div>177      <div class="tool">≣</div>178      <div class="tool">≡</div>179      <div class="tool">• •</div>180      <div class="tool">1 2 3</div>181      <div class="tool">☑︎</div>182      <div class="tool done-btn">DONE</div>183    </div>184  </div>185 186  <!-- Document Area -->187  <div class="doc-area">188    <div class="doc-line">Manager</div>189    <div class="doc-line">AA Technologies</div>190  </div>191 192  <!-- Keyboard -->193  <div class="keyboard">194    <div class="kb-top">195      <div class="pill">⌾</div>196      <div class="pill">GIF</div>197      <div class="pill">⚙️</div>198      <div class="pill">G≁</div>199      <div class="pill">🎨</div>200      <div class="pill">🎤</div>201    </div>202 203    <div class="kb-grid">204      <!-- Row 1 -->205      <div class="key small">Q</div><div class="key small">W</div><div class="key small">E</div><div class="key small">R</div><div class="key small">T</div>206      <div class="key small">Y</div><div class="key small">U</div><div class="key small">I</div><div class="key small">O</div><div class="key small">P</div>207 208      <!-- Row 2 -->209      <div class="key small">A</div><div class="key small">S</div><div class="key small">D</div><div class="key small">F</div><div class="key small">G</div>210      <div class="key small">H</div><div class="key small">J</div><div class="key small">K</div><div class="key small">L</div><div class="key small">⌫</div>211 212      <!-- Row 3 -->213      <div class="key small">⇧</div><div class="key small">Z</div><div class="key small">X</div><div class="key small">C</div><div class="key small">V</div>214      <div class="key small">B</div><div class="key small">N</div><div class="key small">M</div><div class="key small">.</div><div class="key return">↵</div>215 216      <!-- Row 4 -->217      <div class="key small">?123</div>218      <div class="key small">,</div>219      <div class="key space"> </div>220      <div class="key small">•</div>221      <div class="key return">↵</div>222    </div>223  </div>224 225</div>226</body>227</html>