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>Mock UI - Note Detail</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #202124; /* dark UI background */20    color: #EDEDED;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 24px;27    left: 24px;28    right: 24px;29    height: 60px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #CFCFCF;34    font-size: 34px;35    letter-spacing: 0.3px;36  }37  .status-right {38    display: flex;39    align-items: center;40    gap: 26px;41  }42  .icon {43    width: 48px;44    height: 48px;45  }46  .icon.stroke path, .icon.stroke circle, .icon.stroke rect, .icon.stroke line {47    stroke: #BDBDBD;48    stroke-width: 2.6;49    fill: none;50    stroke-linecap: round;51    stroke-linejoin: round;52  }53  .icon.fill path, .icon.fill circle {54    fill: #BDBDBD;55  }56 57  /* Header (toolbar) */58  .toolbar {59    position: absolute;60    top: 120px;61    left: 32px;62    right: 32px;63    height: 88px;64  }65  .toolbar .left {66    position: absolute;67    left: 0;68    top: 20px;69  }70  .toolbar .actions {71    position: absolute;72    right: 0;73    top: 10px;74    display: flex;75    gap: 54px;76  }77 78  /* Content */79  .content {80    position: absolute;81    top: 260px;82    left: 60px;83    right: 60px;84  }85  .title {86    font-size: 96px;87    font-weight: 500;88    margin: 0 0 28px 0;89    color: #EDEDED;90  }91  .subtitle {92    font-size: 40px;93    color: #B0B0B0;94    margin: 0;95  }96 97  /* Bottom bar */98  .bottom-bar {99    position: absolute;100    left: 24px;101    right: 24px;102    bottom: 120px;103    height: 80px;104  }105  .bottom-left {106    position: absolute;107    left: 0;108    top: 6px;109    display: flex;110    gap: 34px;111    align-items: center;112  }113  .bottom-center {114    position: absolute;115    left: 50%;116    transform: translateX(-50%);117    top: 14px;118    color: #C0C0C0;119    font-size: 34px;120  }121  .bottom-right {122    position: absolute;123    right: 0;124    top: 6px;125  }126 127  /* Gesture bar */128  .gesture {129    position: absolute;130    bottom: 40px;131    left: 50%;132    transform: translateX(-50%);133    width: 220px;134    height: 10px;135    background: #FFFFFF;136    border-radius: 6px;137    opacity: 0.85;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Status Bar -->145  <div class="status-bar">146    <div class="status-left">8:22</div>147    <div class="status-right">148      <!-- Wi-Fi -->149      <svg class="icon stroke" viewBox="0 0 24 24">150        <path d="M3 8c5-4 13-4 18 0"></path>151        <path d="M6 12c3-2 9-2 12 0"></path>152        <path d="M9 16c2-1 4-1 6 0"></path>153        <circle cx="12" cy="19" r="1.5"></circle>154      </svg>155      <!-- Battery -->156      <svg class="icon stroke" viewBox="0 0 24 24">157        <rect x="3" y="7" width="16" height="10" rx="2"></rect>158        <rect x="20" y="10" width="2" height="4" rx="1"></rect>159        <rect x="5" y="9" width="12" height="6" rx="1" fill="#BDBDBD"></rect>160      </svg>161    </div>162  </div>163 164  <!-- Toolbar -->165  <div class="toolbar">166    <div class="left">167      <!-- Back Arrow -->168      <svg class="icon stroke" viewBox="0 0 24 24">169        <path d="M15 5L8 12l7 7"></path>170      </svg>171    </div>172    <div class="actions">173      <!-- Pin -->174      <svg class="icon stroke" viewBox="0 0 24 24">175        <path d="M12 3v6"></path>176        <path d="M8 9h8l-2 4v3l-4-3z"></path>177      </svg>178      <!-- Bell -->179      <svg class="icon stroke" viewBox="0 0 24 24">180        <path d="M12 4a5 5 0 0 1 5 5v3l2 3H5l2-3V9a5 5 0 0 1 5-5z"></path>181        <path d="M9 19a3 3 0 0 0 6 0"></path>182      </svg>183      <!-- Archive/Download -->184      <svg class="icon stroke" viewBox="0 0 24 24">185        <rect x="4" y="4" width="16" height="5" rx="1"></rect>186        <path d="M6 9v9h12V9"></path>187        <path d="M12 12v4"></path>188        <path d="M10 14l2 2 2-2"></path>189      </svg>190    </div>191  </div>192 193  <!-- Content -->194  <div class="content">195    <h1 class="title">Testing</h1>196    <p class="subtitle">Testing</p>197  </div>198 199  <!-- Bottom bar -->200  <div class="bottom-bar">201    <div class="bottom-left">202      <!-- Add (square with plus) -->203      <svg class="icon stroke" viewBox="0 0 24 24">204        <rect x="3" y="3" width="18" height="18" rx="2"></rect>205        <path d="M12 8v8"></path>206        <path d="M8 12h8"></path>207      </svg>208      <!-- Palette -->209      <svg class="icon stroke" viewBox="0 0 24 24">210        <path d="M12 3a9 9 0 1 0 0 18c2 0 2-2 1-3-1-1-1-2 1-2h2a4 4 0 0 0 0-8h-1"></path>211        <circle cx="7.5" cy="10" r="1.5"></circle>212        <circle cx="10.5" cy="7.5" r="1.5"></circle>213        <circle cx="14.5" cy="7.5" r="1.5"></circle>214        <circle cx="16.5" cy="10.5" r="1.5"></circle>215      </svg>216    </div>217    <div class="bottom-center">Edited Yesterday, 10:34 AM</div>218    <div class="bottom-right">219      <!-- Kebab vertical -->220      <svg class="icon fill" viewBox="0 0 24 24">221        <circle cx="12" cy="5" r="2.2"></circle>222        <circle cx="12" cy="12" r="2.2"></circle>223        <circle cx="12" cy="19" r="2.2"></circle>224      </svg>225    </div>226  </div>227 228  <!-- Gesture bar -->229  <div class="gesture"></div>230 231</div>232</body>233</html>