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>Mobile UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #121212; color: #E0E0E0;13    font-family: Roboto, Arial, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0;19    width: 100%; height: 120px;20    padding: 28px 36px;21    box-sizing: border-box;22    display: flex; align-items: center; justify-content: space-between;23    color: #FFFFFF;24    font-weight: 500;25  }26  .status-left { display: flex; align-items: center; gap: 20px; font-size: 40px; }27  .status-right { display: flex; align-items: center; gap: 22px; font-size: 34px; opacity: 0.9; }28 29  /* Main empty state */30  .empty-state {31    position: absolute; left: 0; width: 100%;32    top: 980px; text-align: center;33  }34  .empty-state .caption {35    margin-top: 50px; font-size: 44px; color: #D0D0D0;36  }37 38  /* Snackbar */39  .snackbar {40    position: absolute; left: 36px; right: 36px;41    bottom: 240px; height: 140px;42    background: #E8E8E8; color: #222;43    border-radius: 26px;44    box-shadow: 0 8px 24px rgba(0,0,0,0.35);45    display: flex; align-items: center; justify-content: space-between;46    padding: 0 36px; box-sizing: border-box;47    font-size: 40px;48  }49  .snackbar .undo { color: #3B7DED; font-weight: 600; }50 51  /* Bottom bar */52  .bottom-bar {53    position: absolute; left: 0; bottom: 0; width: 100%;54    height: 170px; background: #1A1A1A;55    box-shadow: 0 -8px 20px rgba(0,0,0,0.35);56    display: flex; align-items: center; justify-content: space-around;57  }58  .bottom-item {59    width: 120px; height: 120px;60    display: flex; align-items: center; justify-content: center;61    opacity: 0.95;62  }63 64  /* FAB */65  .fab {66    position: absolute; right: 36px; bottom: 140px;67    width: 144px; height: 144px; border-radius: 50%;68    background: #2B2B2B;69    box-shadow: 0 18px 36px rgba(0,0,0,0.45);70  }71  .fab-inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; }72  .fab-inner .bar {73    position: absolute; background: #FFFFFF; border-radius: 10px;74  }75  .fab-inner .v-top   { width: 18px; height: 42px; left: 37px; top: 0; background: #DB4437; }76  .fab-inner .v-bottom{ width: 18px; height: 42px; left: 37px; bottom: 0; background: #F4B400; }77  .fab-inner .h-left  { width: 42px; height: 18px; left: 0; top: 37px; background: #4285F4; }78  .fab-inner .h-right { width: 42px; height: 18px; right: 0; top: 37px; background: #0F9D58; }79 80  /* Gesture bar */81  .gesture {82    position: absolute; bottom: 74px; left: 50%;83    transform: translateX(-50%);84    width: 300px; height: 12px; background: #EDEDED; border-radius: 8px;85    opacity: 0.9;86  }87 88  /* Helper styles for SVG icons */89  svg { display: block; }90</style>91</head>92<body>93<div id="render-target">94 95  <!-- Status Bar -->96  <div class="status-bar">97    <div class="status-left">98      <div>1:45</div>99      <!-- small notes icon -->100      <svg width="44" height="44" viewBox="0 0 24 24">101        <rect x="3" y="3" width="18" height="18" rx="3" fill="#FFFFFF" opacity="0.15"/>102        <rect x="6" y="7" width="12" height="2" fill="#FFFFFF" opacity="0.9"/>103        <rect x="6" y="11" width="10" height="2" fill="#FFFFFF" opacity="0.9"/>104        <rect x="6" y="15" width="8" height="2" fill="#FFFFFF" opacity="0.9"/>105      </svg>106    </div>107    <div class="status-right">108      <!-- wifi icon -->109      <svg width="48" height="48" viewBox="0 0 24 24">110        <path d="M3 8c4.5-4 13.5-4 18 0" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.9" />111        <path d="M6 12c3-2.5 9-2.5 12 0" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.9" />112        <path d="M9 16c1.8-1.2 4.2-1.2 6 0" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.9" />113        <circle cx="12" cy="19" r="1.6" fill="#FFFFFF"/>114      </svg>115      <!-- battery icon + percentage -->116      <svg width="52" height="48" viewBox="0 0 24 24">117        <rect x="2" y="6" width="18" height="12" rx="2" stroke="#FFFFFF" stroke-width="2" fill="none"/>118        <rect x="21" y="9" width="2" height="6" rx="1" fill="#FFFFFF"/>119        <rect x="4" y="8" width="12" height="8" fill="#FFFFFF" opacity="0.9"/>120      </svg>121      <div>100%</div>122    </div>123  </div>124 125  <!-- Empty State Bell -->126  <div class="empty-state">127    <svg width="330" height="330" viewBox="0 0 330 330" style="margin: 0 auto;">128      <!-- bell outline -->129      <path d="M70 240 V120 A95 95 0 0 1 260 120 V240" stroke="#E6E8EB" stroke-width="24" fill="none" stroke-linecap="round" stroke-linejoin="round"/>130      <!-- top knob -->131      <circle cx="165" cy="100" r="14" fill="#E6E8EB"/>132      <!-- base bar -->133      <rect x="60" y="240" width="210" height="26" fill="#E6E8EB" rx="4"/>134      <!-- clapper -->135      <circle cx="165" cy="280" r="18" fill="#E6E8EB"/>136    </svg>137    <div class="caption">Notes with upcoming reminders appear here</div>138  </div>139 140  <!-- Snackbar -->141  <div class="snackbar">142    <div>Note moved to trash</div>143    <div class="undo">Undo</div>144  </div>145 146  <!-- Bottom Bar with actions -->147  <div class="bottom-bar">148    <div class="bottom-item">149      <!-- checklist icon -->150      <svg width="72" height="72" viewBox="0 0 24 24">151        <rect x="4" y="4" width="16" height="16" rx="3" stroke="#EDEDED" stroke-width="2" fill="none" opacity="0.95"/>152        <path d="M7 9l2 2 4-4" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round" />153        <rect x="7" y="13" width="10" height="2" fill="#EDEDED" opacity="0.9"/>154      </svg>155    </div>156    <div class="bottom-item">157      <!-- brush icon -->158      <svg width="72" height="72" viewBox="0 0 24 24">159        <path d="M16 4l4 4-9 9-4 1 1-4z" fill="none" stroke="#EDEDED" stroke-width="2" stroke-linejoin="round"/>160        <path d="M7 18c0 2-2 3-3 3 2 0 3-1 3-3z" fill="#EDEDED" opacity="0.9"/>161      </svg>162    </div>163    <div class="bottom-item">164      <!-- mic icon -->165      <svg width="72" height="72" viewBox="0 0 24 24">166        <rect x="9" y="4" width="6" height="10" rx="3" fill="none" stroke="#EDEDED" stroke-width="2"/>167        <path d="M6 11c0 3 2.7 5 6 5s6-2 6-5" fill="none" stroke="#EDEDED" stroke-width="2"/>168        <path d="M12 16v4" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>169        <rect x="9" y="20" width="6" height="1.8" fill="#EDEDED"/>170      </svg>171    </div>172    <div class="bottom-item">173      <!-- image icon -->174      <svg width="72" height="72" viewBox="0 0 24 24">175        <rect x="3" y="4" width="18" height="16" rx="2" stroke="#EDEDED" stroke-width="2" fill="none"/>176        <circle cx="8" cy="9" r="2" fill="#EDEDED"/>177        <path d="M4 18l6-6 4 4 3-3 4 5" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linejoin="round"/>178      </svg>179    </div>180  </div>181 182  <!-- Floating Action Button -->183  <div class="fab">184    <div class="fab-inner">185      <div class="bar v-top"></div>186      <div class="bar v-bottom"></div>187      <div class="bar h-left"></div>188      <div class="bar h-right"></div>189    </div>190  </div>191 192  <!-- Gesture bar -->193  <div class="gesture"></div>194 195</div>196</body>197</html>