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>Dark Notes UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #1c1f24; /* dark app background */13    color: #EAECEF;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 100px;20    padding: 0 32px;21    display: flex; align-items: center; justify-content: space-between;22    color: #EAECEF; font-size: 34px; letter-spacing: 0.5px;23  }24  .status-right { display: flex; gap: 24px; align-items: center; }25  .status-icon { width: 42px; height: 42px; }26 27  /* Search area */28  .search-wrap {29    position: absolute; top: 150px; left: 24px; right: 24px;30    height: 116px;31    display: flex; align-items: center;32  }33  .search-pill {34    flex: 1;35    height: 116px;36    background: #2a2e34;37    border-radius: 58px;38    display: flex; align-items: center;39    padding: 0 28px;40    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);41  }42  .hamburger, .view-toggle { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }43  .placeholder {44    flex: 1; color: #b7bcc5; font-size: 40px;45  }46  .avatar {47    margin-left: 18px;48    width: 96px; height: 96px; border-radius: 48px;49    background: #3e4b55;50    display: flex; align-items: center; justify-content: center;51    color: #EAECEF; font-weight: 700; font-size: 44px;52    box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.07);53  }54 55  /* Notes list and card */56  .notes-list { position: absolute; top: 320px; left: 24px; right: 24px; }57  .note-card {58    width: 720px;59    padding: 40px 44px;60    border-radius: 28px;61    border: 2px solid #3a3f46;62    color: #EAECEF;63    box-shadow: 0 2px 0 rgba(255,255,255,0.03);64  }65  .note-card .title { font-size: 48px; font-weight: 700; margin-bottom: 18px; }66  .note-card .subtitle { font-size: 36px; color: #b7bcc5; }67 68  /* Bottom bar */69  .bottom-bar {70    position: absolute; left: 0; right: 0; bottom: 0;71    height: 170px; background: #24282e;72    display: flex; align-items: center;73    padding: 0 48px;74    box-shadow: 0 -1px 0 rgba(255,255,255,0.06) inset;75  }76  .bottom-actions {77    display: flex; gap: 120px; align-items: center;78  }79  .bar-icon { width: 72px; height: 72px; fill: #b7bcc5; }80 81  /* Floating action button */82  .fab {83    position: absolute; right: 48px; bottom: 180px;84    width: 148px; height: 148px;85    background: #1f2329; border-radius: 28px;86    display: flex; align-items: center; justify-content: center;87    box-shadow: 0 10px 20px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.06);88  }89  .plus {90    position: relative; width: 74px; height: 74px;91  }92  .plus::before, .plus::after {93    content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);94    border-radius: 6px;95  }96  .plus::before {97    width: 18px; height: 74px; background:98      linear-gradient(#34a853,#34a853) 0 0/100% 25% no-repeat,99      linear-gradient(#ea4335,#ea4335) 0 75%/100% 25% no-repeat,100      transparent;101  }102  .plus::after {103    width: 74px; height: 18px; background:104      linear-gradient(#fbbc05,#fbbc05) 0 0/50% 100% no-repeat,105      linear-gradient(#4285f4,#4285f4) 50% 0/50% 100% no-repeat,106      transparent;107  }108 109  /* Gesture handle */110  .gesture {111    position: absolute; left: 50%; transform: translateX(-50%);112    bottom: 22px; width: 420px; height: 12px; border-radius: 8px; background: #e7e7e7; opacity: 0.9;113  }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status Bar -->120  <div class="status-bar">121    <div>1:23</div>122    <div class="status-right">123      <!-- simple privacy + edit glyphs to mimic indicators -->124      <svg class="status-icon" viewBox="0 0 24 24">125        <path fill="#EAECEF" d="M12 2a5 5 0 00-5 5v3H6a2 2 0 00-2 2v8h16v-8a2 2 0 00-2-2h-1V7a5 5 0 00-5-5zm-3 8V7a3 3 0 016 0v3H9z"/>126      </svg>127      <svg class="status-icon" viewBox="0 0 24 24">128        <path fill="#EAECEF" d="M3 17.25V21h3.75l11-11L14 6.25 3 17.25zm13.7-8.95l1.99-1.99L17.7 4.02l-1.99 1.99 1.99 2.29z"/>129      </svg>130      <!-- wifi -->131      <svg class="status-icon" viewBox="0 0 24 24">132        <path fill="#EAECEF" d="M12 18.5l3.5 3.5L12 25.5 8.5 22z" opacity="0"></path>133        <path fill="#EAECEF" d="M12 20.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"/>134        <path fill="#EAECEF" d="M12 15c-2.2 0-4.2.9-5.7 2.3l1.4 1.4A6.5 6.5 0 0112 17c1.8 0 3.4.7 4.6 1.7l1.4-1.4A8.96 8.96 0 0012 15z"/>135        <path fill="#EAECEF" d="M12 10c-3.5 0-6.7 1.4-9 3.7l1.4 1.4C6.2 13 8.9 12 12 12s5.8 1 7.6 3.1l1.4-1.4C18.7 11.4 15.5 10 12 10z"/>136      </svg>137      <!-- battery -->138      <svg class="status-icon" viewBox="0 0 24 24">139        <path fill="#EAECEF" d="M16 6h1a2 2 0 012 2v8a2 2 0 01-2 2h-1v1h-2v-1H6a2 2 0 01-2-2V8a2 2 0 012-2h10zM6 8v8h11V8H6z"/>140      </svg>141    </div>142  </div>143 144  <!-- Search -->145  <div class="search-wrap">146    <div class="search-pill">147      <div class="hamburger">148        <svg width="44" height="44" viewBox="0 0 24 24">149          <path fill="#cfd3da" d="M3 6h18v2H3zM3 11h14v2H3zM3 16h18v2H3z"/>150        </svg>151      </div>152      <div class="placeholder">Search your notes</div>153      <div class="view-toggle">154        <svg width="44" height="44" viewBox="0 0 24 24">155          <path fill="#cfd3da" d="M6 7h12v3H6V7zm0 7h12v3H6v-3z"/>156        </svg>157      </div>158    </div>159    <div class="avatar">C</div>160  </div>161 162  <!-- One example note card -->163  <div class="notes-list">164    <div class="note-card">165      <div class="title">My Movies</div>166      <div class="subtitle">Project X</div>167    </div>168  </div>169 170  <!-- Floating Action Button -->171  <div class="fab" aria-label="Add">172    <div class="plus"></div>173  </div>174 175  <!-- Bottom action bar -->176  <div class="bottom-bar">177    <div class="bottom-actions">178      <!-- checkbox -->179      <svg class="bar-icon" viewBox="0 0 24 24">180        <path d="M5 4h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1zm3.5 8.5l2.5 2.5 5-5 1.4 1.4-6.4 6.4-3.9-3.9 1.4-1.4z" fill="#b7bcc5"/>181      </svg>182      <!-- brush/pencil -->183      <svg class="bar-icon" viewBox="0 0 24 24">184        <path d="M3 17.25V21h3.75L18.8 8.95 15.05 5.2 3 17.25zm14.7-8.95l1.99-1.99-2.05-2.04-1.99 1.99 2.05 2.04z" fill="#b7bcc5"/>185      </svg>186      <!-- mic -->187      <svg class="bar-icon" viewBox="0 0 24 24">188        <path d="M12 15a3 3 0 003-3V7a3 3 0 10-6 0v5a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2zM11 22h2v-3h-2v3z" fill="#b7bcc5"/>189      </svg>190      <!-- image -->191      <svg class="bar-icon" viewBox="0 0 24 24">192        <path d="M4 5h16a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V6a1 1 0 011-1zm1 2v10h14V7H5zm3 7l2.5-3 3.5 4H8zm8-5a2 2 0 11-4 0 2 2 0 014 0z" fill="#b7bcc5"/>193      </svg>194    </div>195  </div>196 197  <!-- Gesture handle -->198  <div class="gesture"></div>199 200</div>201</body>202</html>