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">6<title>Note Detail UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000000;15    font-family: "Roboto", Arial, Helvetica, sans-serif;16    color: #FFFFFF;17  }18 19  /* Status bar */20  .status-bar {21    height: 90px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #ffffff;27    font-size: 32px;28    letter-spacing: 0.5px;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 24px;34    opacity: 0.9;35  }36  .status-icon svg { width: 40px; height: 40px; }37 38  /* App bar */39  .app-bar {40    height: 120px;41    padding: 0 24px;42    display: flex;43    align-items: center;44    gap: 24px;45  }46  .app-title {47    font-size: 56px;48    font-weight: 700;49    display: flex;50    align-items: center;51    gap: 12px;52  }53  .app-title .chevron {54    margin-left: 8px;55    opacity: 0.9;56  }57  .app-actions {58    margin-left: auto;59  }60 61  /* Reminder row */62  .reminder-row {63    margin: 40px 24px 0 24px;64    display: flex;65    align-items: center;66    gap: 24px;67  }68  .checkbox {69    width: 48px;70    height: 48px;71    border: 3px solid #8E8E8E;72    border-radius: 6px;73    opacity: 0.8;74  }75  .reminder-text {76    color: #FF8F00;77    font-size: 34px;78    font-weight: 700;79  }80  .flag {81    margin-left: auto;82  }83 84  /* Content */85  .note-title {86    margin: 40px 24px 0 24px;87    font-size: 72px;88    font-weight: 800;89  }90  .note-body {91    margin: 28px 24px 0 24px;92    font-size: 40px;93    color: #CFCFCF;94  }95 96  /* Bottom toolbar */97  .bottom-bar {98    position: absolute;99    bottom: 110px;100    left: 24px;101    right: 24px;102    height: 120px;103    display: flex;104    align-items: center;105    gap: 72px;106  }107  .tool-icon svg {108    width: 64px;109    height: 64px;110    stroke: #BDBDBD;111    fill: none;112    opacity: 0.85;113  }114 115  /* Gesture pill */116  .gesture-pill {117    position: absolute;118    bottom: 40px;119    left: 50%;120    transform: translateX(-50%);121    width: 360px;122    height: 16px;123    background: #E0E0E0;124    border-radius: 12px;125    opacity: 0.9;126  }127</style>128</head>129<body>130<div id="render-target">131 132  <!-- Status bar -->133  <div class="status-bar">134    <div class="status-left">2:53</div>135    <div class="status-right">136      <div class="status-icon">137        <!-- Signal bars -->138        <svg viewBox="0 0 48 48">139          <rect x="4" y="26" width="6" height="16" fill="#FFFFFF"/>140          <rect x="14" y="20" width="6" height="22" fill="#FFFFFF"/>141          <rect x="24" y="14" width="6" height="28" fill="#FFFFFF"/>142          <rect x="34" y="8" width="6" height="34" fill="#FFFFFF"/>143        </svg>144      </div>145      <div class="status-icon">146        <!-- Wi-Fi -->147        <svg viewBox="0 0 48 48">148          <path d="M6 18 C16 10,32 10,42 18" stroke="#FFFFFF" stroke-width="4" fill="none"/>149          <path d="M12 24 C18 18,30 18,36 24" stroke="#FFFFFF" stroke-width="4" fill="none"/>150          <circle cx="24" cy="30" r="4" fill="#FFFFFF"/>151        </svg>152      </div>153      <div class="status-icon">154        <!-- Battery -->155        <svg viewBox="0 0 48 48">156          <rect x="6" y="12" width="34" height="24" rx="4" ry="4" stroke="#FFFFFF" stroke-width="3" fill="none"/>157          <rect x="42" y="18" width="4" height="12" fill="#FFFFFF"/>158          <rect x="10" y="16" width="26" height="16" fill="#FFFFFF"/>159        </svg>160      </div>161    </div>162  </div>163 164  <!-- App bar -->165  <div class="app-bar">166    <!-- Back arrow -->167    <svg viewBox="0 0 48 48" width="56" height="56">168      <path d="M30 12 L14 24 L30 36" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>169    </svg>170    <div class="app-title">171      <span>👋</span>172      <span>Welcome</span>173      <svg class="chevron" viewBox="0 0 48 48" width="36" height="36">174        <path d="M12 18 L24 30 L36 18" stroke="#FFFFFF" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>175      </svg>176    </div>177    <div class="app-actions">178      <!-- Kebab menu -->179      <svg viewBox="0 0 48 48" width="48" height="48">180        <circle cx="24" cy="12" r="4" fill="#FFFFFF"/>181        <circle cx="24" cy="24" r="4" fill="#FFFFFF"/>182        <circle cx="24" cy="36" r="4" fill="#FFFFFF"/>183      </svg>184    </div>185  </div>186 187  <!-- Reminder row -->188  <div class="reminder-row">189    <div class="checkbox"></div>190    <div class="reminder-icon">191      <!-- Alarm/clock -->192      <svg viewBox="0 0 48 48" width="48" height="48">193        <circle cx="24" cy="26" r="14" stroke="#FF8F00" stroke-width="4" fill="none"/>194        <path d="M24 26 L24 18 M24 26 L32 26" stroke="#FF8F00" stroke-width="4" stroke-linecap="round"/>195        <path d="M10 10 L18 14 M38 10 L30 14" stroke="#FF8F00" stroke-width="4" fill="none" stroke-linecap="round"/>196      </svg>197    </div>198    <div class="reminder-text">2 days later, Aug 13, 06:00PM</div>199    <div class="flag">200      <!-- Flag icon -->201      <svg viewBox="0 0 48 48" width="48" height="48">202        <path d="M10 8 L10 40" stroke="#FFFFFF" stroke-width="4"/>203        <path d="M12 10 L36 14 L12 20 Z" fill="#FFFFFF"/>204      </svg>205    </div>206  </div>207 208  <!-- Note content -->209  <div class="note-title">Rent is due</div>210  <div class="note-body">its a new month</div>211 212  <!-- Bottom toolbar -->213  <div class="bottom-bar">214    <div class="tool-icon">215      <!-- Tag icon -->216      <svg viewBox="0 0 64 64">217        <path d="M10 34 L34 10 L54 30 L30 54 Z" stroke="#BDBDBD" stroke-width="4" fill="none"/>218        <circle cx="40" cy="24" r="4" fill="#BDBDBD"/>219      </svg>220    </div>221    <div class="tool-icon">222      <!-- List icon -->223      <svg viewBox="0 0 64 64">224        <circle cx="12" cy="16" r="4" fill="#BDBDBD"/>225        <circle cx="12" cy="32" r="4" fill="#BDBDBD"/>226        <circle cx="12" cy="48" r="4" fill="#BDBDBD"/>227        <path d="M22 16 H54 M22 32 H54 M22 48 H54" stroke="#BDBDBD" stroke-width="4"/>228      </svg>229    </div>230    <div class="tool-icon">231      <!-- Image icon -->232      <svg viewBox="0 0 64 64">233        <rect x="8" y="10" width="48" height="44" rx="6" ry="6" stroke="#BDBDBD" stroke-width="4" fill="none"/>234        <circle cx="22" cy="24" r="5" stroke="#BDBDBD" stroke-width="4" fill="none"/>235        <path d="M16 44 L30 34 L40 40 L52 30" stroke="#BDBDBD" stroke-width="4" fill="none"/>236      </svg>237    </div>238  </div>239 240  <!-- Gesture pill -->241  <div class="gesture-pill"></div>242 243</div>244</body>245</html>