GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile Note UI - Dbw</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #000000;18    color: #ffffff;19  }20 21  /* Status bar */22  .statusbar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 110px;28    background: #000000;29    display: flex;30    align-items: center;31    padding: 0 36px;32    box-sizing: border-box;33    font-size: 44px;34    letter-spacing: 0.5px;35  }36  .status-left {37    flex: 1;38    color: #ffffff;39  }40  .status-right {41    display: flex;42    align-items: center;43    gap: 24px;44  }45  .icon {46    display: inline-flex;47    align-items: center;48    justify-content: center;49  }50 51  /* App bar */52  .appbar {53    position: absolute;54    top: 110px;55    left: 0;56    width: 1080px;57    height: 170px;58    background: #8A8131; /* olive/mustard */59    display: flex;60    align-items: center;61    padding: 0 32px;62    box-sizing: border-box;63  }64  .app-left {65    display: flex;66    align-items: center;67    gap: 28px;68  }69  .title {70    font-size: 68px;71    font-weight: 600;72    color: #ffffff;73  }74  .app-right {75    margin-left: auto;76    display: flex;77    align-items: center;78    gap: 36px;79  }80 81  /* Meta row under app bar */82  .meta-row {83    position: absolute;84    top: 280px;85    left: 0;86    width: 1080px;87    height: 70px;88    display: flex;89    align-items: center;90    color: #BDBDBD;91    font-size: 40px;92    padding: 0 32px;93    box-sizing: border-box;94  }95  .meta-left { flex: 1; }96  .meta-right { color: #BDBDBD; }97 98  /* Content area */99  .content {100    position: absolute;101    top: 350px;102    left: 0;103    width: 1080px;104    height: 1830px;105    padding: 0 32px;106    box-sizing: border-box;107    color: #D9D9D9;108  }109  .note-title {110    font-size: 76px;111    font-weight: 600;112    margin: 20px 0 30px 0;113    color: #E0E0E0;114  }115  .line {116    width: 100%;117    height: 2px;118    background: #6E6826; /* faint olive lines */119    opacity: 0.35;120    margin: 85px 0 0 0;121  }122 123  /* Bottom gesture bar */124  .gesture {125    position: absolute;126    bottom: 40px;127    left: 50%;128    transform: translateX(-50%);129    width: 360px;130    height: 18px;131    background: #EDEDED;132    border-radius: 10px;133    opacity: 0.95;134  }135</style>136</head>137<body>138<div id="render-target">139 140  <!-- Status Bar -->141  <div class="statusbar">142    <div class="status-left">3:18</div>143    <div class="status-right">144      <!-- Wi-Fi icon -->145      <svg class="icon" width="50" height="38" viewBox="0 0 50 38">146        <path d="M3 10c10-8 34-8 44 0" stroke="#ffffff" stroke-width="3" fill="none" />147        <path d="M9 18c7-6 25-6 32 0" stroke="#ffffff" stroke-width="3" fill="none" />148        <path d="M17 26c4-4 12-4 16 0" stroke="#ffffff" stroke-width="3" fill="none" />149        <circle cx="25" cy="32" r="3.5" fill="#ffffff"/>150      </svg>151      <!-- Battery icon -->152      <svg class="icon" width="60" height="34" viewBox="0 0 60 34">153        <rect x="2" y="6" width="48" height="22" rx="4" ry="4" stroke="#ffffff" stroke-width="3" fill="none"/>154        <rect x="6" y="10" width="40" height="14" fill="#ffffff"/>155        <rect x="51" y="12" width="6" height="10" fill="#ffffff"/>156      </svg>157    </div>158  </div>159 160  <!-- App Bar -->161  <div class="appbar">162    <div class="app-left">163      <!-- Back arrow -->164      <svg class="icon" width="64" height="64" viewBox="0 0 64 64">165        <path d="M36 12 L16 32 L36 52" stroke="#ffffff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>166      </svg>167      <div class="title">Dbw</div>168    </div>169    <div class="app-right">170      <!-- Edit pencil -->171      <svg class="icon" width="60" height="60" viewBox="0 0 60 60">172        <path d="M12 40 L12 48 L20 48 L46 22 L38 14 Z" fill="#ffffff"/>173        <rect x="34" y="10" width="8" height="8" transform="rotate(45 38 14)" fill="#ffffff"/>174      </svg>175      <!-- More vertical dots -->176      <svg class="icon" width="44" height="60" viewBox="0 0 44 60">177        <circle cx="22" cy="14" r="5" fill="#ffffff"/>178        <circle cx="22" cy="30" r="5" fill="#ffffff"/>179        <circle cx="22" cy="46" r="5" fill="#ffffff"/>180      </svg>181    </div>182  </div>183 184  <!-- Meta information row -->185  <div class="meta-row">186    <div class="meta-left">23 min. ago</div>187    <div class="meta-right">8/10/23 2:53 PM</div>188  </div>189 190  <!-- Content -->191  <div class="content">192    <div class="note-title">Dbw</div>193    <!-- Faint ruled lines -->194    <div class="line"></div>195    <div class="line"></div>196    <div class="line"></div>197    <div class="line"></div>198    <div class="line"></div>199    <div class="line"></div>200    <div class="line"></div>201    <div class="line"></div>202    <div class="line"></div>203    <div class="line"></div>204    <div class="line"></div>205    <div class="line"></div>206    <div class="line"></div>207    <div class="line"></div>208    <div class="line"></div>209  </div>210 211  <!-- Bottom gesture bar -->212  <div class="gesture"></div>213</div>214</body>215</html>