GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Dark Note Screen</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: #0F1B1E; /* deep dark teal/grey */15    color: #E0E0E0;16    font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 120px;24    padding: 0 36px;25    display: flex;26    align-items: flex-end;27    justify-content: space-between;28    box-sizing: border-box;29    color: #E7ECEE;30  }31  .status-time {32    font-size: 40px;33    letter-spacing: 1px;34    margin-bottom: 20px;35    opacity: 0.95;36  }37  .status-right {38    display: flex;39    align-items: center;40    gap: 20px;41    margin-bottom: 20px;42    font-size: 30px;43    color: #E7ECEE;44  }45  .status-right svg {46    width: 44px; height: 44px;47    stroke: #E7ECEE; fill: none; stroke-width: 2.5;48  }49 50  /* Top actions (back and right-side icons) */51  .top-actions {52    position: absolute;53    top: 120px; left: 0; right: 0;54    height: 120px;55    padding: 0 36px;56    display: flex;57    align-items: center;58    justify-content: space-between;59    box-sizing: border-box;60  }61  .back-btn svg {62    width: 60px; height: 60px;63    stroke: #8FA2A8; fill: none; stroke-width: 3;64  }65  .action-icons {66    display: flex; align-items: center; gap: 40px;67  }68  .action-icons svg {69    width: 60px; height: 60px;70    stroke: #8FA2A8; fill: none; stroke-width: 2.8;71  }72 73  /* Content */74  .content {75    position: absolute;76    left: 72px; right: 72px;77    top: 300px;78  }79  .title {80    font-size: 72px;81    font-weight: 500;82    color: #CFD8DC;83    margin: 40px 0 20px 0;84  }85  .subtitle {86    font-size: 42px;87    color: #93A5AA;88    margin: 0;89  }90 91  /* Bottom tools and gesture bar */92  .bottom-bar {93    position: absolute;94    left: 24px; right: 24px;95    bottom: 120px;96    height: 110px;97  }98 99  .bottom-left {100    position: absolute; left: 0; top: 0; bottom: 0;101    display: flex; align-items: center; gap: 34px;102  }103  .bottom-left svg {104    width: 64px; height: 64px;105    stroke: #8FA2A8; fill: none; stroke-width: 2.6;106    opacity: 0.9;107  }108  .tool-A {109    font-size: 56px; color: #6F7E84; opacity: 0.6; line-height: 1;110    display: flex; align-items: center; justify-content: center;111  }112 113  .bottom-center {114    position: absolute; left: 50%; top: 50%;115    transform: translate(-50%, -50%);116    font-size: 34px; color: #8FA2A8;117  }118  .bottom-right {119    position: absolute; right: 0; top: 0; bottom: 0;120    display: flex; align-items: center; justify-content: center;121  }122  .ellipsis svg {123    width: 60px; height: 60px; fill: #8FA2A8;124  }125 126  .gesture {127    position: absolute;128    left: 50%;129    transform: translateX(-50%);130    bottom: 36px;131    width: 320px; height: 14px;132    background: #E8E8E8; border-radius: 10px;133    opacity: 0.95;134  }135</style>136</head>137<body>138<div id="render-target">139 140  <!-- Status Bar -->141  <div class="status-bar">142    <div class="status-time">11:43</div>143    <div class="status-right">144      <!-- Wi‑Fi -->145      <svg viewBox="0 0 24 24" aria-label="wifi">146        <path d="M2 8c6-5 14-5 20 0"/>147        <path d="M6 12c4-3 8-3 12 0"/>148        <path d="M10 16c2-1 2-1 4 0"/>149        <circle cx="12" cy="19" r="1.7" fill="#E7ECEE" stroke="none"/>150      </svg>151      <!-- Signal -->152      <svg viewBox="0 0 24 24" aria-label="signal">153        <rect x="3" y="14" width="3" height="7" fill="#E7ECEE" stroke="none"/>154        <rect x="9" y="11" width="3" height="10" fill="#E7ECEE" stroke="none" opacity="0.85"/>155        <rect x="15" y="7" width="3" height="14" fill="#E7ECEE" stroke="none" opacity="0.7"/>156        <rect x="21" y="3" width="3" height="18" fill="#E7ECEE" stroke="none" opacity="0.55"/>157      </svg>158      <!-- Battery -->159      <svg viewBox="0 0 28 16" aria-label="battery">160        <rect x="1" y="2" width="22" height="12" rx="2" ry="2" />161        <rect x="24" y="6" width="3" height="4" rx="1" ry="1" />162        <rect x="3" y="4" width="18" height="8" fill="#E7ECEE" stroke="none"/>163      </svg>164      <span>100%</span>165    </div>166  </div>167 168  <!-- Top Navigation & Actions -->169  <div class="top-actions">170    <div class="back-btn" aria-label="Back">171      <svg viewBox="0 0 24 24">172        <path d="M15 4 L7 12 L15 20" stroke-linecap="round" stroke-linejoin="round"/>173      </svg>174    </div>175    <div class="action-icons">176      <!-- Bell -->177      <svg viewBox="0 0 24 24" aria-label="bell">178        <path d="M12 21a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2Z" />179        <path d="M18 15V10a6 6 0 0 0-12 0v5l-2 2h16l-2-2z" />180      </svg>181      <!-- Lock -->182      <svg viewBox="0 0 24 24" aria-label="lock">183        <rect x="5" y="10" width="14" height="10" rx="2" ry="2"/>184        <path d="M8 10V7a4 4 0 0 1 8 0v3" />185      </svg>186      <!-- Download to square -->187      <svg viewBox="0 0 24 24" aria-label="save">188        <rect x="3" y="4" width="18" height="16" rx="2" ry="2"/>189        <path d="M12 7v8" />190        <path d="M8 12l4 4 4-4" />191      </svg>192    </div>193  </div>194 195  <!-- Content -->196  <div class="content">197    <div class="title">Grocery Store Lidl</div>198    <p class="subtitle">Corn syrup and Jam</p>199  </div>200 201  <!-- Bottom tools -->202  <div class="bottom-bar">203    <div class="bottom-left">204      <!-- Square + -->205      <svg viewBox="0 0 24 24" aria-label="add">206        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>207        <path d="M12 7v10M7 12h10"/>208      </svg>209      <!-- Palette -->210      <svg viewBox="0 0 24 24" aria-label="palette">211        <path d="M12 3a9 9 0 1 0 0 18c2 0 3-1 3-2.