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 - Dark</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: #1f2023; /* dark app surface */15    color: #ECEFF1;16    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* STATUS BAR */20  .status-bar {21    height: 100px;22    padding: 0 32px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #e5e5e5;27    font-size: 28px;28    letter-spacing: .3px;29  }30  .status-left span { margin-right: 16px; color: #cfcfcf; }31  .status-right { display: flex; align-items: center; gap: 18px; }32  .icon { display: inline-flex; align-items: center; justify-content: center; }33  .icon svg { display: block; }34 35  /* APP BAR */36  .app-bar {37    height: 120px;38    display: flex;39    align-items: center;40    padding: 0 24px 0 16px;41  }42  .app-left { width: 120px; display: flex; align-items: center; justify-content: center; }43  .app-right {44    margin-left: auto;45    display: flex;46    align-items: center;47    gap: 28px;48    padding-right: 16px;49  }50 51  /* CONTENT */52  .content {53    padding: 8px 48px 0 48px;54  }55  .title {56    font-size: 64px;57    font-weight: 800;58    color: #ffffff;59    line-height: 1.15;60    margin: 8px 0 18px 16px;61  }62  .meta-row {63    display: flex;64    align-items: center;65    justify-content: space-between;66    margin: 0 16px 26px 16px;67  }68  .edited {69    font-size: 30px;70    color: #9aa1a6;71  }72  .divider {73    height: 2px;74    background: #2d2f33;75    margin: 0 16px 18px 16px;76  }77  .note-body {78    margin: 28px 16px;79    font-size: 44px;80    line-height: 1.5;81    color: #eaeaea;82  }83 84  /* BOTTOM ACTION BAR */85  .bottom-bar {86    position: absolute;87    left: 0; right: 0; bottom: 56px;88    height: 132px;89    background: #2a2c30;90    display: flex;91    align-items: center;92    justify-content: space-between;93    padding: 0 28px;94    color: #dcdcdc;95    font-size: 42px;96    letter-spacing: 0.3px;97  }98  .bottom-bar .right { display: flex; align-items: center; gap: 16px; }99  .gesture-pill {100    position: absolute;101    left: 50%;102    bottom: 18px;103    transform: translateX(-50%);104    width: 220px;105    height: 12px;106    background: #e6e6e6;107    border-radius: 8px;108    opacity: 0.95;109  }110 111  /* Utility icon sizing/colors */112  .icon-24 svg { width: 48px; height: 48px; }113  .icon-28 svg { width: 56px; height: 56px; }114  .muted { color: #b0b6bb; }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- Status Bar -->121  <div class="status-bar">122    <div class="status-left">123      <span>3:12</span>124      <span>72°</span>125      <span class="icon" title="check">126        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">127          <path d="M4 12l5 5 11-11"></path>128        </svg>129      </span>130      <span>A</span>131      <span>en</span>132      <span>•</span>133    </div>134    <div class="status-right">135      <span class="icon" title="wifi">136        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#e5e5e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">137          <path d="M2 8c5-4 15-4 20 0"></path>138          <path d="M5 12c4-3 10-3 14 0"></path>139          <path d="M8 16c3-2 5-2 8 0"></path>140          <circle cx="12" cy="20" r="1.6" fill="#e5e5e5" stroke="none"></circle>141        </svg>142      </span>143      <span class="icon" title="battery">144        <svg width="48" height="48" viewBox="0 0 26 14" fill="none">145          <rect x="1" y="1" width="20" height="12" rx="2" stroke="#e5e5e5" stroke-width="2"/>146          <rect x="3" y="3" width="14" height="8" fill="#e5e5e5"/>147          <rect x="22" y="5" width="3" height="4" rx="1" fill="#e5e5e5"/>148        </svg>149      </span>150    </div>151  </div>152 153  <!-- App Bar -->154  <div class="app-bar">155    <div class="app-left">156      <span class="icon icon-28" title="Back">157        <svg viewBox="0 0 48 48" fill="none" stroke="#eaeaea" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">158          <path d="M30 8L16 24l14 16"></path>159        </svg>160      </span>161    </div>162    <div class="app-right">163      <!-- Reminder/Target (yellow ring) -->164      <span class="icon" title="Reminder">165        <svg width="56" height="56" viewBox="0 0 24 24" fill="none">166          <circle cx="12" cy="12" r="8" stroke="#FFC107" stroke-width="3"></circle>167          <circle cx="12" cy="12" r="2" fill="#FFC107"></circle>168        </svg>169      </span>170      <!-- Pin -->171      <span class="icon" title="Pin">172        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#eaeaea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">173          <path d="M8 4l8 6-3 3 5 5"></path>174          <path d="M5 11l6-3"></path>175          <path d="M12 18l-7 3 3-7"></path>176        </svg>177      </span>178      <!-- Kebab menu -->179      <span class="icon" title="More">180        <svg width="48" height="48" viewBox="0 0 24 24" fill="#eaeaea">181          <circle cx="12" cy="5" r="2"/>182          <circle cx="12" cy="12" r="2"/>183          <circle cx="12" cy="19" r="2"/>184        </svg>185      </span>186    </div>187  </div>188 189  <!-- Content -->190  <div class="content">191    <div class="title">Reminder to buy groceries</div>192    <div class="meta-row">193      <div class="edited">Edited: 12-13 13:59</div>194      <div class="icon" title="Calendar">195        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#7e858b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">196          <rect x="3" y="5" width="18" height="16" rx="2"></rect>197          <path d="M8 3v4M16 3v4"></path>198          <path d="M3 10h18"></path>199        </svg>200      </div>201    </div>202    <div class="divider"></div>203    <div class="note-body">Milk, eggs and chicken</div>204  </div>205 206  <!-- Bottom Action Bar -->207  <div class="bottom-bar">208    <div> Aa</div>209    <div class="right icon">210      <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#e5e5e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">211        <path d="M12 20h9"></path>212        <path d="M16.5 3.5a2.1 2.1 0 013 3L8 18l-4 1 1-4 11.5-11.5z"></path>213      </svg>214    </div>215  </div>216 217  <!-- Gesture Pill -->218  <div class="gesture-pill"></div>219</div>220</body>221</html>