GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile Notes Editor Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    font-family: Arial, Helvetica, sans-serif;15    color: #FFFFFF;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #1a1a1a;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    font-weight: 600;31  }32  .status-left { display: flex; align-items: center; gap: 18px; }33  .status-left .time { font-size: 42px; }34  .status-center { margin-left: 24px; display: flex; align-items: center; gap: 22px; opacity: 0.9; }35  .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }36 37  /* Top app bar */38  .app-bar {39    position: absolute;40    top: 120px;41    left: 0;42    width: 1080px;43    height: 140px;44    background: #222222;45    display: flex;46    align-items: center;47    padding: 0 36px;48    box-sizing: border-box;49  }50  .app-title { font-size: 56px; font-weight: 600; color: #EFEFEF; }51  .app-actions {52    margin-left: 36px;53    display: flex;54    align-items: center;55    gap: 40px;56  }57  .app-right {58    margin-left: auto;59    display: flex;60    align-items: center;61    gap: 30px;62  }63  .badge {64    width: 64px;65    height: 64px;66    border-radius: 14px;67    background: #3A3A3A;68    color: #FFFFFF;69    font-size: 36px;70    display: flex; align-items: center; justify-content: center;71  }72  .close-x {73    width: 72px; height: 72px;74    border-radius: 10px;75    display: flex; align-items: center; justify-content: center;76  }77 78  /* Editor area */79  .editor {80    position: absolute;81    top: 260px;82    left: 0;83    width: 1080px;84    height: 1960px;85    background: #FFFFFF;86    color: #333333;87    box-sizing: border-box;88  }89  .editor-content {90    padding: 60px 72px;91    font-size: 46px;92    line-height: 74px;93  }94  .cursor-bracket {95    position: absolute;96    left: 38px;97    top: 330px;98    width: 28px; height: 28px;99    border-left: 3px solid #9E9E9E;100    border-bottom: 3px solid #9E9E9E;101  }102  .line { margin-bottom: 24px; }103  .paragraph { margin-top: 40px; }104  .hint-bracket {105    position: absolute;106    left: 38px;107    bottom: 260px;108    width: 28px; height: 28px;109    border-left: 3px solid #C0C0C0;110    border-bottom: 3px solid #C0C0C0;111  }112  .pill {113    position: absolute;114    left: 84px;115    bottom: 250px;116    background: #EEEEEE;117    color: #555555;118    padding: 18px 26px;119    border-radius: 14px;120    font-size: 34px;121    border: 1px solid #D8D8D8;122  }123 124  /* Bottom toolbar */125  .bottom-bar {126    position: absolute;127    bottom: 0;128    left: 0;129    width: 1080px;130    height: 170px;131    background: #1f1f1f;132    display: flex;133    align-items: center;134    justify-content: space-between;135    padding: 0 40px;136    box-sizing: border-box;137  }138  .toolbar-group {139    display: flex;140    align-items: center;141    gap: 46px;142  }143  .tool {144    width: 64px; height: 64px;145    display: flex; align-items: center; justify-content: center;146    opacity: 0.95;147  }148 149  /* Gesture bar */150  .gesture {151    position: absolute;152    bottom: 14px;153    left: 50%;154    transform: translateX(-50%);155    width: 360px;156    height: 10px;157    background: #EDEDED;158    border-radius: 6px;159    opacity: 0.9;160  }161  svg { display: block; }162</style>163</head>164<body>165<div id="render-target">166 167  <!-- Status bar -->168  <div class="status-bar">169    <div class="status-left">170      <div class="time">9:15</div>171    </div>172 173    <div class="status-center">174      <!-- Mail icon -->175      <svg width="44" height="44" viewBox="0 0 24 24">176        <path fill="#BBBBBB" d="M3 6h18v12H3V6zm9 5L4 7v10h16V7l-8 4z"/>177      </svg>178      <!-- Cloud icon -->179      <svg width="44" height="44" viewBox="0 0 24 24">180        <path fill="#BBBBBB" d="M6 15a5 5 0 1 1 9.6-2H17a4 4 0 0 1 0 8H8a3 3 0 0 1-2-6z"/>181      </svg>182    </div>183 184    <div class="status-right">185      <!-- WiFi icon -->186      <svg width="48" height="48" viewBox="0 0 24 24">187        <path fill="#DDDDDD" d="M2 8a14 14 0 0 1 20 0l-2 2a11 11 0 0 0-16 0L2 8zm4 4a10 10 0 0 1 12 0l-2 2a7 7 0 0 0-8 0l-2-2zm4 4 2 2 2-2a3 3 0 0 0-4 0z"/>188      </svg>189      <!-- Battery icon -->190      <svg width="58" height="48" viewBox="0 0 28 18">191        <rect x="1" y="2" width="22" height="14" rx="3" fill="none" stroke="#DDDDDD" stroke-width="2"/>192        <rect x="3" y="4" width="16" height="10" fill="#DDDDDD"/>193        <rect x="23" y="6" width="3" height="6" rx="1" fill="#DDDDDD"/>194      </svg>195    </div>196  </div>197 198  <!-- App bar -->199  <div class="app-bar">200    <div class="app-title">Done</div>201    <div class="app-actions">202      <!-- Up arrow / upload -->203      <div class="tool">204        <svg width="64" height="64" viewBox="0 0 24 24">205          <path fill="#EEEEEE" d="M12 4l5 5h-3v6h-4V9H7l5-5zM5 19h14v2H5z"/>206        </svg>207      </div>208      <!-- Undo icon -->209      <div class="tool">210        <svg width="64" height="64" viewBox="0 0 24 24">211          <path fill="#EEEEEE" d="M7 7v4H3l6 6 6-6h-4V9a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7H7z"/>212        </svg>213      </div>214    </div>215    <div class="app-right">216      <div class="badge">1</div>217      <div class="close-x">218        <svg width="60" height="60" viewBox="0 0 24 24">219          <path fill="#FFFFFF" d="M6 6l12 12M18 6L6 18" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>220        </svg>221      </div>222    </div>223  </div>224 225  <!-- Editor -->226  <div class="editor">227    <div class="cursor-bracket"></div>228    <div class="editor-content">229      <div class="line">Dusk</div>230      <div class="line">Duck</div>231      <div class="line">Gulab</div>232      <div class="line">Full</div>233 234      <div class="paragraph">Desk desk desk damsel line ah mud co laksh do gayi</div>235    </div>236 237    <div class="hint-bracket"></div>238    <div class="pill">Full text: 67</div>239  </div>240 241  <!-- Bottom toolbar -->242  <div class="bottom-bar">243    <div class="toolbar-group">244      <!-- Grid icon -->245      <div class="tool">246        <svg width="64" height="64" viewBox="0 0 24 24">247          <path fill="#CFCFCF" d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/>248        </svg>249      </div>250      <!-- Crop icon -->251      <div class="tool">252        <svg width="64" height="64" viewBox="0 0 24 24">253          <path fill="#CFCFCF" d="M7 3v10h10V3h2v12H5V3h2z"/>254        </svg>255      </div>256      <!-- Text Aa icon -->257      <div class="tool">258        <svg width="64" height="64" viewBox="0 0 24 24">259          <path fill="#CFCFCF" d="M12 4l6 16h-2l-1.5-4h-5L8 20H6l6-16zm1.8 10L12 7.8 10.2 14h3.6z"/>260        </svg>261      </div>262      <!-- Align lines icon -->263      <div class="tool">264        <svg width="64" height="64" viewBox="0 0 24 24">265          <path fill="#CFCFCF" d="M4 6h16v2H4zm0 5h12v2H4zm0 5h16v2H4z"/>266        </svg>267      </div>268      <!-- Pen/Scribble icon -->269      <div class="tool">270        <svg width="64" height="64" viewBox="0 0 24 24">271          <path fill="#CFCFCF" d="M3 17l9-9 4 4-9 9H3v-4zM15 5l2-2 4 4-2 2-4-4z"/>272        </svg>273      </div>274      <!-- Image icon -->275      <div class="tool">276        <svg width="64" height="64" viewBox="0 0 24 24">277          <path fill="#CFCFCF" d="M4 5h16v14H4V5zm2 2v10h12V7H6zm2 8 3-4 3 4 2-3 2 3H8zM9 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>278        </svg>279      </div>280      <!-- Plus icon -->281      <div class="tool">282        <svg width="64" height="64" viewBox="0 0 24 24">283          <path fill="#CFCFCF" d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/>284        </svg>285      </div>286      <!-- Keyboard icon -->287      <div class="tool">288        <svg width="64" height="64" viewBox="0 0 24 24">289          <path fill="#CFCFCF" d="M4 6h16v10H4V6zm2 2v6h12V8H6zm1 1h2v2H7V9zm3 0h2v2h-2V9zm3 0h2v2h-2V9zm3 0h2v2h-2V9zM7 12h10v2H7v-2z"/>290        </svg>291      </div>292    </div>293    <!-- Accent icon on far right -->294    <div class="tool">295      <svg width="64" height="64" viewBox="0 0 24 24">296        <circle cx="12" cy="18" r="2.5" fill="#A46CF2"/>297        <path d="M5 8c3-3 11-3 14 0" stroke="#A46CF2" stroke-width="2" fill="none" stroke-linecap="round"/>298      </svg>299    </div>300  </div>301 302  <div class="gesture"></div>303</div>304</body>305</html>