GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Note Detail - Dark</title>6<meta name="viewport" content="width=1080, initial-scale=1">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", "Inter", Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #EDEDED;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 96px;19    padding: 0 36px;20    display: flex; align-items: center; justify-content: space-between;21    color: #EDEDED; font-size: 32px;22  }23  .status-left { display: flex; align-items: center; gap: 16px; opacity: 0.9; }24  .status-right { display: flex; align-items: center; gap: 24px; opacity: 0.9; }25 26  /* App bar */27  .appbar {28    position: absolute; top: 96px; left: 0; right: 0;29    height: 120px;30    padding: 0 36px;31    display: flex; align-items: center; justify-content: space-between;32  }33  .appbar-left { display: flex; align-items: center; gap: 16px; }34  .appbar-right { display: flex; align-items: center; gap: 36px; }35  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }36 37  /* Content */38  .content {39    position: absolute; left: 36px; right: 36px; top: 240px;40  }41  .title {42    font-size: 64px; font-weight: 800; line-height: 1.2; color: #F5F5F5;43    margin-bottom: 20px;44  }45  .meta-row {46    display: flex; align-items: center; justify-content: space-between;47    color: #9E9E9E; font-size: 28px; margin-bottom: 28px;48  }49  .divider { height: 2px; background: #2A2A2A; margin: 20px 0 24px; }50  .body-text { font-size: 44px; color: #E0E0E0; }51 52  /* Bottom bubble */53  .edit-bubble {54    position: absolute; left: 50%; transform: translateX(-50%);55    bottom: 300px;56    background: #2C2C2C; color: #EDEDED;57    border-radius: 48px;58    padding: 24px 32px;59    display: flex; align-items: center; gap: 20px;60    box-shadow: 0 6px 20px rgba(0,0,0,0.35);61    font-size: 34px;62  }63  .bubble-icon {64    width: 72px; height: 72px; border-radius: 50%; background: #FFD54F;65    display: flex; align-items: center; justify-content: center;66    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.2);67  }68 69  /* Bottom toolbar */70  .bottom-bar {71    position: absolute; left: 0; right: 0; bottom: 120px;72    height: 120px; background: #1C1C1C;73    display: flex; align-items: center; justify-content: space-between;74    padding: 0 40px;75  }76  .bottom-left {77    font-size: 48px; color: #EDEDED; letter-spacing: 2px;78    display: flex; align-items: center; gap: 8px;79  }80  .gesture {81    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);82    width: 220px; height: 12px; background: #EDEDED; border-radius: 8px; opacity: 0.9;83  }84 85  /* Helper styles for SVG icons */86  svg { display: block; }87  .icon-stroke { stroke: #EDEDED; stroke-width: 4; fill: none; }88  .icon-muted { stroke: #9E9E9E; fill: none; stroke-width: 4; }89  .icon-fill { fill: #EDEDED; }90  .icon-yellow { fill: #FFC400; }91</style>92</head>93<body>94<div id="render-target">95 96  <!-- Status bar -->97  <div class="status-bar">98    <div class="status-left">99      <span>3:11</span>100      <span>72°</span>101      <span>✓</span>102      <span>en</span>103      <span>•</span>104    </div>105    <div class="status-right">106      <!-- Wi-Fi -->107      <svg width="40" height="40" viewBox="0 0 40 40">108        <path class="icon-stroke" d="M6 14c7-6 21-6 28 0"/>109        <path class="icon-stroke" d="M10 18c5-4 15-4 20 0"/>110        <path class="icon-stroke" d="M14 22c3-2 9-2 12 0"/>111        <circle class="icon-fill" cx="20" cy="26" r="2.5"></circle>112      </svg>113      <!-- Battery -->114      <svg width="44" height="40" viewBox="0 0 44 40">115        <rect x="4" y="10" width="30" height="18" rx="3" class="icon-stroke"></rect>116        <rect x="7" y="13" width="24" height="12" rx="2" class="icon-fill"></rect>117        <rect x="35" y="14" width="5" height="10" rx="2" class="icon-stroke"></rect>118      </svg>119    </div>120  </div>121 122  <!-- App bar -->123  <div class="appbar">124    <div class="appbar-left">125      <!-- Back arrow -->126      <div class="icon-btn">127        <svg width="56" height="56" viewBox="0 0 56 56">128          <path class="icon-stroke" d="M34 10 L18 28 L34 46"></path>129        </svg>130      </div>131    </div>132    <div class="appbar-right">133      <!-- Yellow reminder icon -->134      <div class="icon-btn">135        <svg width="64" height="64" viewBox="0 0 64 64">136          <circle cx="32" cy="32" r="18" class="icon-yellow"></circle>137          <circle cx="32" cy="32" r="18" fill="none" stroke="#FFD54F" stroke-width="2"></circle>138        </svg>139      </div>140      <!-- Pin icon -->141      <div class="icon-btn">142        <svg width="64" height="64" viewBox="0 0 64 64">143          <path class="icon-stroke" d="M22 18 L42 26 L32 28 L32 44 L28 48"></path>144          <circle cx="22" cy="18" r="3" class="icon-fill"></circle>145        </svg>146      </div>147      <!-- More (vertical dots) -->148      <div class="icon-btn">149        <svg width="64" height="64" viewBox="0 0 64 64">150          <circle cx="32" cy="18" r="4" class="icon-fill"></circle>151          <circle cx="32" cy="32" r="4" class="icon-fill"></circle>152          <circle cx="32" cy="46" r="4" class="icon-fill"></circle>153        </svg>154      </div>155    </div>156  </div>157 158  <!-- Content -->159  <div class="content">160    <div class="title">Reminder to buy groceries</div>161    <div class="meta-row">162      <div>Edited: 12-13 13:59</div>163      <!-- Calendar icon -->164      <svg width="56" height="56" viewBox="0 0 56 56">165        <rect x="8" y="14" width="40" height="32" rx="4" class="icon-muted"></rect>166        <line x1="8" y1="22" x2="48" y2="22" class="icon-muted"></line>167        <line x1="18" y1="8" x2="18" y2="18" class="icon-muted"></line>168        <line x1="38" y1="8" x2="38" y2="18" class="icon-muted"></line>169      </svg>170    </div>171    <div class="divider"></div>172    <div class="body-text">Milk, eggs and chicken</div>173  </div>174 175  <!-- Bottom bubble -->176  <div class="edit-bubble">177    <div class="bubble-icon">178      <svg width="44" height="44" viewBox="0 0 44 44">179        <rect x="8" y="10" width="28" height="24" rx="4" fill="#FFF8E1"></rect>180        <line x1="12" y1="18" x2="32" y2="18" stroke="#D4AF37" stroke-width="3"></line>181        <line x1="12" y1="24" x2="28" y2="24" stroke="#D4AF37" stroke-width="3"></line>182      </svg>183    </div>184    <div>Double tap to edit</div>185  </div>186 187  <!-- Bottom toolbar -->188  <div class="bottom-bar">189    <div class="bottom-left">Aa</div>190    <div class="icon-btn">191      <!-- Pencil icon -->192      <svg width="72" height="72" viewBox="0 0 72 72">193        <path class="icon-stroke" d="M18 48 L16 56 L24 54 L52 26 L46 20 Z"></path>194        <line x1="44" y1="22" x2="50" y2="28" class="icon-stroke"></line>195      </svg>196    </div>197  </div>198 199  <!-- Gesture pill -->200  <div class="gesture"></div>201 202</div>203</body>204</html>