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; font-family: Roboto, Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top bars */18  .status-bar {19    height: 96px;20    background: #1E88E5;21    color: #FFFFFF;22    padding: 0 28px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    font-size: 38px;27    letter-spacing: 0.5px;28  }29  .status-icons { display: flex; align-items: center; gap: 18px; }30  .status-icons svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 3; }31 32  .app-bar {33    height: 148px;34    background: #1E88E5;35    color: #FFFFFF;36    padding: 0 20px 0 8px;37    display: flex;38    align-items: center;39    justify-content: space-between;40  }41  .nav-left { display: flex; align-items: center; gap: 8px; }42  .app-title { font-weight: 500; font-size: 40px; display:none; }43  .app-actions { display: flex; align-items: center; gap: 38px; }44  .app-actions svg, .nav-left svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 3; }45 46  /* Content */47  .content {48    position: absolute;49    left: 0; right: 0;50    top: 244px; /* 96 + 148 */51    bottom: 0;52    overflow: hidden;53    background: #ffffff;54  }55  .scroll {56    height: 100%;57    overflow-y: auto;58    padding: 36px 48px 320px;59  }60  .title-row {61    display: flex;62    align-items: center;63    justify-content: space-between;64    margin-top: 12px;65  }66  .title {67    font-size: 56px;68    font-weight: 700;69    color: #212121;70  }71  .star {72    width: 64px; height: 64px;73  }74  .star svg { width: 100%; height: 100%; fill: none; stroke: #BDBDBD; stroke-width: 3; }75 76  .body-text {77    margin-top: 24px;78    font-size: 44px;79    line-height: 1.52;80    color: #333333;81  }82 83  .divider {84    height: 2px;85    background: #E0E0E0;86    margin: 52px 0 44px;87  }88 89  .reminder {90    display: flex;91    align-items: center;92    gap: 24px;93    color: #9E9E9E;94    font-size: 40px;95  }96  .reminder svg { width: 52px; height: 52px; fill: none; stroke: #9E9E9E; stroke-width: 3; }97 98  .timestamps {99    margin-top: 44px;100    color: #9E9E9E;101    font-size: 34px;102    line-height: 1.6;103  }104 105  /* Floating action button */106  .fab {107    position: absolute;108    right: 72px;109    bottom: 280px; /* above ad banner */110    width: 160px;111    height: 160px;112    border-radius: 50%;113    background: #1E88E5;114    box-shadow: 0 10px 22px rgba(0,0,0,0.28);115    display: flex;116    align-items: center;117    justify-content: center;118  }119  .fab svg { width: 96px; height: 96px; stroke: #fff; stroke-width: 10; fill: none; }120 121  /* Bottom ad banner */122  .ad-banner {123    position: absolute;124    left: 0; right: 0; bottom: 96px;125    height: 190px;126    padding: 8px;127    background: #FFFFFF;128    border-top: 1px solid #E0E0E0;129    display: flex;130  }131  .ad-placeholder {132    width: 100%;133    height: 100%;134    background: #E0E0E0;135    border: 1px solid #BDBDBD;136    color: #757575;137    font-size: 36px;138    display: flex;139    align-items: center;140    justify-content: center;141    text-align: center;142    letter-spacing: 0.2px;143  }144 145  /* Home indicator */146  .home-indicator {147    position: absolute;148    left: 50%;149    bottom: 30px;150    transform: translateX(-50%);151    width: 300px;152    height: 10px;153    background: #1A1A1A;154    opacity: 0.25;155    border-radius: 8px;156  }157</style>158</head>159<body>160<div id="render-target">161 162  <!-- Status bar -->163  <div class="status-bar">164    <div class="time">11:43</div>165    <div class="status-icons">166      <!-- Calendar glyph -->167      <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="14" rx="2" stroke="#fff"/><line x1="3" y1="10" x2="21" y2="10" stroke="#fff"/><line x1="8" y1="2" x2="8" y2="6" stroke="#fff"/><line x1="16" y1="2" x2="16" y2="6" stroke="#fff"/></svg>168      <!-- Signal -->169      <svg viewBox="0 0 24 24"><path d="M3 18h2v3H3zM8 14h2v7H8zM13 10h2v11h-2zM18 6h2v15h-2z" stroke="#fff"/></svg>170      <!-- Do Not Disturb crescent -->171      <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 9 6.5A7 7 0 1 1 12 2z" stroke="#fff"/></svg>172      <!-- Dot -->173      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#fff"/></svg>174      <!-- Wi-Fi -->175      <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 12c4-3 10-3 14 0M8 16c3-2 5-2 8 0" stroke="#fff"/><circle cx="12" cy="20" r="2" fill="#fff"/></svg>176      <!-- Battery -->177      <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2" stroke="#fff"/><rect x="4" y="8" width="16" height="8" fill="#fff"/><rect x="22" y="9" width="4" height="6" rx="1" fill="#fff"/></svg>178    </div>179  </div>180 181  <!-- App bar -->182  <div class="app-bar">183    <div class="nav-left">184      <!-- Back arrow -->185      <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>186    </div>187    <div class="app-actions">188      <!-- Palette -->189      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#fff"/><circle cx="9" cy="10" r="1.2" fill="#fff"/><circle cx="15" cy="10" r="1.2" fill="#fff"/><circle cx="12" cy="14.5" r="1.2" fill="#fff"/></svg>190      <!-- Image -->191      <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2" stroke="#fff"/><circle cx="9" cy="11" r="2" stroke="#fff"/><path d="M6 17l4-4 4 4 3-3 3 3" stroke="#fff"/></svg>192      <!-- Tag -->193      <svg viewBox="0 0 24 24"><path d="M3 12l9-9h6l3 3v6l-9 9-9-9z" stroke="#fff"/><circle cx="16" cy="8" r="1.5" fill="#fff"/></svg>194      <!-- Mic -->195      <svg viewBox="0 0 24 24"><rect x="9" y="5" width="6" height="10" rx="3" stroke="#fff"/><path d="M5 12a7 7 0 0 0 14 0M12 19v3" stroke="#fff"/></svg>196      <!-- Share -->197      <svg viewBox="0 0 24 24"><circle cx="6" cy="12" r="2" stroke="#fff"/><circle cx="18" cy="7" r="2" stroke="#fff"/><circle cx="18" cy="17" r="2" stroke="#fff"/><path d="M8 11l8-3M8 13l8 3" stroke="#fff"/></svg>198      <!-- Overflow -->199      <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#fff"/><circle cx="12" cy="12" r="2" fill="#fff"/><circle cx="19" cy="12" r="2" fill="#fff"/></svg>200    </div>201  </div>202 203  <!-- Main content -->204  <div class="content">205    <div class="scroll">206      <div class="title-row">207        <div class="title">About Pixel Phone</div>208        <div class="star">209          <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>210        </div>211      </div>212 213      <div class="body-text">214        Pixel phone 6 is good for the official use to store the data and restore the data it is basically very useful to store message nd pic in the drive .215      </div>216 217      <div class="divider"></div>218 219      <div class="reminder">220        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v6l4 2"/></svg>221        <span>No reminder</span>222      </div>223 224      <div class="timestamps">225        Updated: Today, 10:30 am<br/>226        Created: Today, 9:10 am227      </div>228    </div>229  </div>230 231  <!-- Floating Action Button -->232  <div class="fab" aria-label="Mark Done">233    <svg viewBox="0 0 24 24"><path d="M5 12l5 5 9-9" stroke-linecap="round" stroke-linejoin="round"/></svg>234  </div>235 236  <!-- Bottom ad banner (placeholder image) -->237  <div class="ad-banner">238    <div class="ad-placeholder">[IMG: Promotional Advertisement Banner]</div>239  </div>240 241  <!-- Home indicator -->242  <div class="home-indicator"></div>243 244</div>245</body>246</html>