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>Note Detail UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #F6E8E7; /* soft pink page */15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #111;17  }18 19  /* top app/status bar */20  .top-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 190px;24    background: #DB4A3F; /* red header */25  }26  .status-content {27    position: absolute;28    top: 32px; left: 34px; right: 34px;29    height: 80px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #fff;34    font-weight: 600;35    font-size: 40px;36    letter-spacing: .5px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 28px;42  }43  .status-icon {44    width: 42px; height: 42px;45  }46 47  /* content area */48  .content {49    position: absolute;50    top: 190px; left: 0; right: 0; bottom: 0;51    padding: 36px 44px 0 44px;52  }53  .back-row {54    display: flex;55    align-items: center;56    gap: 22px;57  }58  .back-btn {59    width: 64px; height: 64px; cursor: default;60  }61  .title {62    margin: 24px 0 18px 0;63    font-size: 72px;64    font-weight: 800;65    line-height: 1.1;66  }67  .meta {68    color: #6F6F6F;69    font-size: 34px;70    margin-top: 8px;71  }72  .divider {73    height: 2px;74    background: #D5C9C9;75    margin: 20px 0 32px 0;76  }77  .note-text {78    font-size: 44px;79    color: #222;80  }81 82  /* overflow menu card */83  .menu-card {84    position: absolute;85    top: 250px;86    right: 44px;87    width: 540px;88    background: #fff;89    border-radius: 16px;90    box-shadow: 0 30px 60px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,0.12);91    overflow: hidden;92  }93  .menu-item {94    padding: 34px 40px;95    font-size: 44px;96    color: #222;97    border-bottom: 1px solid #F0F0F0;98  }99  .menu-item:last-child { border-bottom: none; }100 101  /* bottom ad banner */102  .ad-banner {103    position: absolute;104    left: 0; right: 0;105    bottom: 110px;106    height: 170px;107    background: #FFFFFF;108    border-top: 1px solid #E6E6E6;109    display: flex;110    align-items: center;111    padding: 20px 28px;112    box-shadow: 0 -6px 18px rgba(0,0,0,0.07);113  }114  .ad-badge {115    color: #E28E2E;116    font-weight: 700;117    margin-right: 18px;118    font-size: 34px;119  }120  .ad-text {121    flex: 1;122    display: flex;123    flex-direction: column;124    line-height: 1.25;125  }126  .ad-line1 {127    font-size: 44px;128    font-weight: 700;129  }130  .ad-line1 .open { color: #32A060; margin: 0 8px; }131  .ad-line2 {132    font-size: 36px;133    color: #3B73C5;134  }135  .ad-cta {136    width: 84px; height: 84px;137    background: #4E87F1;138    border-radius: 18px;139    display: flex; align-items: center; justify-content: center;140    margin-left: 24px;141  }142  .gesture {143    position: absolute;144    left: 50%;145    transform: translateX(-50%);146    bottom: 34px;147    width: 300px; height: 12px;148    background: #000;149    border-radius: 10px;150    opacity: .85;151  }152</style>153</head>154<body>155<div id="render-target">156 157  <!-- Top red bar with status indicators -->158  <div class="top-bar"></div>159  <div class="status-content">160    <div>12:06</div>161    <div class="status-right">162      <!-- simple placeholder icons -->163      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">164        <circle cx="12" cy="12" r="2" fill="#fff"></circle>165      </svg>166      <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">167        <path d="M2 12c5-5 15-5 20 0"></path>168        <path d="M5 12c3-3 11-3 14 0"></path>169        <path d="M8 12c2-2 6-2 8 0"></path>170      </svg>171      <svg class="status-icon" viewBox="0 0 26 24" fill="none" stroke="#fff" stroke-width="2">172        <rect x="2" y="5" width="18" height="14" rx="2" ry="2" fill="#fff" stroke="none"></rect>173        <rect x="4" y="7" width="14" height="10" fill="#DB4A3F"></rect>174        <rect x="20" y="9" width="3" height="6" fill="#fff" stroke="none"></rect>175      </svg>176    </div>177  </div>178 179  <!-- Content -->180  <div class="content">181    <div class="back-row">182      <svg class="back-btn" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">183        <path d="M15 18l-6-6 6-6"></path>184      </svg>185    </div>186 187    <div class="title">things to buy in th</div>188    <div class="meta">Edited: 10–10 23:07</div>189    <div class="divider"></div>190    <div class="note-text">new car, investment prop...</div>191  </div>192 193  <!-- Overflow menu on the right -->194  <div class="menu-card">195    <div class="menu-item">Check</div>196    <div class="menu-item">Pin</div>197    <div class="menu-item">Reminders</div>198    <div class="menu-item">Archive</div>199    <div class="menu-item">Delete</div>200    <div class="menu-item">Make a copy</div>201    <div class="menu-item">Export</div>202    <div class="menu-item">Share</div>203  </div>204 205  <!-- Bottom ad banner -->206  <div class="ad-banner">207    <div class="ad-badge">VLCC</div>208    <div class="ad-text">209      <div class="ad-line1">New Delhi <span class="open">OPEN</span> 9:30AM–6:30PM</div>210      <div class="ad-line2">E2/7,8 1st Floor, Malviya Nagar,...</div>211    </div>212    <div class="ad-cta">213      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">214        <path d="M9 18l6-6-6-6"></path>215      </svg>216    </div>217  </div>218 219  <!-- Gesture bar -->220  <div class="gesture"></div>221</div>222</body>223</html>