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 Editor Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#111314; color:#EDEDED;13  }14 15  /* Status bar */16  .status-bar{17    position:absolute; top:0; left:0; right:0;18    height:96px; padding:0 36px;19    display:flex; align-items:center; justify-content:space-between;20    color:#EAEAEA; font-weight:600; letter-spacing:1px;21    font-size:34px; opacity:0.9;22  }23  .status-icons{ display:flex; align-items:center; gap:24px; }24  .dot{ width:10px; height:10px; background:#D9D9D9; border-radius:50%; display:inline-block; opacity:0.9; }25 26  /* App bar */27  .app-bar{28    position:absolute; top:96px; left:0; right:0;29    height:120px; padding:0 24px 0 24px;30    display:flex; align-items:center; justify-content:space-between;31  }32  .app-left{ display:flex; align-items:center; gap:20px; }33  .icon-btn{34    width:72px; height:72px; border-radius:36px;35    display:flex; align-items:center; justify-content:center;36    color:#D0D0D0; opacity:0.85;37  }38  .app-right{ display:flex; align-items:center; gap:32px; }39  .app-right .icon-btn{ opacity:0.6; }40 41  /* Content */42  .content{43    position:absolute; left:64px; right:64px; top:260px;44  }45  .title{46    font-size:72px; font-weight:600; color:#CFCFCF; line-height:1.15;47    margin:24px 0 16px;48  }49  .subtitle{50    font-size:46px; color:#8B8F92; font-weight:500;51  }52 53  /* Bottom sheet */54  .bottom-sheet{55    position:absolute; left:0; right:0; bottom:0;56    height:720px; background:#1B1D1E; border-top:1px solid #2B2E30;57    box-shadow:0 -6px 18px rgba(0,0,0,0.45);58    padding-top:24px;59  }60  .sheet-list{61    padding:24px 48px 0;62    display:flex; flex-direction:column; gap:36px;63  }64  .sheet-item{65    display:flex; align-items:center; gap:28px;66    color:#E7E7E7;67  }68  .sheet-item .text{69    font-size:48px; font-weight:500; letter-spacing:0.2px;70  }71  .sheet-icon{72    width:72px; height:72px; border-radius:12px;73    display:flex; align-items:center; justify-content:center;74    color:#E7E7E7; opacity:0.9;75  }76 77  /* Gesture pill */78  .pill{79    position:absolute; left:50%; transform:translateX(-50%);80    bottom:46px; width:320px; height:14px; border-radius:10px;81    background:#E5E5E5; opacity:0.85;82  }83</style>84</head>85<body>86<div id="render-target">87 88  <!-- Status bar -->89  <div class="status-bar">90    <div>9:16</div>91    <div class="status-icons">92      <span class="dot"></span>93      <span class="dot"></span>94      <span class="dot"></span>95      <!-- simple wifi -->96      <svg width="40" height="28" viewBox="0 0 40 28" fill="none">97        <path d="M3 10c9-8 25-8 34 0" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.9"/>98        <path d="M9 16c6-5 16-5 22 0" stroke="#fff" stroke-width="3" stroke-linecap="round" opacity="0.9"/>99        <circle cx="20" cy="22" r="3.5" fill="#fff"/>100      </svg>101      <!-- battery -->102      <svg width="48" height="28" viewBox="0 0 48 28" fill="none">103        <rect x="1.5" y="4.5" width="38" height="19" rx="3" stroke="#fff" stroke-width="3"/>104        <rect x="6" y="7.5" width="28" height="13" rx="2" fill="#fff"/>105        <rect x="41.5" y="9" width="5" height="10" rx="1.5" fill="#fff"/>106      </svg>107    </div>108  </div>109 110  <!-- App bar -->111  <div class="app-bar">112    <div class="app-left">113      <div class="icon-btn">114        <svg width="60" height="60" viewBox="0 0 60 60" fill="none">115          <path d="M36 12 L18 30 L36 48" stroke="#E0E0E0" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>116        </svg>117      </div>118    </div>119    <div class="app-right">120      <!-- bell -->121      <div class="icon-btn">122        <svg width="60" height="60" viewBox="0 0 60 60" fill="none">123          <path d="M30 50c4 0 6-2 6-5H24c0 3 2 5 6 5Z" fill="#CFCFCF" opacity="0.3"/>124          <path d="M44 40H16c2-3 4-7 4-15 0-7 4-12 10-12s10 5 10 12c0 8 2 12 4 15Z" stroke="#CFCFCF" stroke-width="4" stroke-linejoin="round"/>125        </svg>126      </div>127      <!-- lock -->128      <div class="icon-btn">129        <svg width="60" height="60" viewBox="0 0 60 60" fill="none">130          <rect x="14" y="28" width="32" height="22" rx="4" stroke="#CFCFCF" stroke-width="4"/>131          <path d="M20 28v-6a10 10 0 0 1 20 0v6" stroke="#CFCFCF" stroke-width="4" stroke-linecap="round"/>132        </svg>133      </div>134      <!-- download box -->135      <div class="icon-btn">136        <svg width="60" height="60" viewBox="0 0 60 60" fill="none">137          <rect x="12" y="12" width="36" height="36" rx="6" stroke="#CFCFCF" stroke-width="4"/>138          <path d="M30 18v16m0 0l-8-8m8 8l8-8" stroke="#CFCFCF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>139        </svg>140      </div>141    </div>142  </div>143 144  <!-- Content -->145  <div class="content">146    <div class="title">New Gardening Tools</div>147    <div class="subtitle">Note</div>148  </div>149 150  <!-- Bottom Sheet -->151  <div class="bottom-sheet">152    <div style="height:10px;"></div>153    <div class="sheet-list">154      <div class="sheet-item">155        <div class="sheet-icon">156          <!-- camera -->157          <svg width="60" height="60" viewBox="0 0 60 60" fill="none">158            <rect x="8" y="16" width="44" height="30" rx="6" stroke="#EDEDED" stroke-width="4"/>159            <circle cx="30" cy="31" r="9" stroke="#EDEDED" stroke-width="4"/>160            <rect x="18" y="10" width="10" height="8" rx="2" fill="#EDEDED"/>161          </svg>162        </div>163        <div class="text">Take photo</div>164      </div>165 166      <div class="sheet-item">167        <div class="sheet-icon">168          <!-- image -->169          <svg width="60" height="60" viewBox="0 0 60 60" fill="none">170            <rect x="8" y="12" width="44" height="36" rx="6" stroke="#EDEDED" stroke-width="4"/>171            <circle cx="22" cy="24" r="5" fill="#EDEDED"/>172            <path d="M12 44l14-14 10 10 6-6 8 10" stroke="#EDEDED" stroke-width="4" stroke-linejoin="round"/>173          </svg>174        </div>175        <div class="text">Add image</div>176      </div>177 178      <div class="sheet-item">179        <div class="sheet-icon">180          <!-- drawing pen -->181          <svg width="60" height="60" viewBox="0 0 60 60" fill="none">182            <path d="M44 12l4 4L30 34l-8 2 2-8L44 12Z" stroke="#EDEDED" stroke-width="4" fill="none"/>183            <path d="M26 36l-2 8" stroke="#EDEDED" stroke-width="4" stroke-linecap="round"/>184          </svg>185        </div>186        <div class="text">Drawing</div>187      </div>188 189      <div class="sheet-item">190        <div class="sheet-icon">191          <!-- mic -->192          <svg width="60" height="60" viewBox="0 0 60 60" fill="none">193            <rect x="22" y="12" width="16" height="26" rx="8" stroke="#EDEDED" stroke-width="4"/>194            <path d="M16 30c0 8 6 14 14 14s14-6 14-14M30 44v8" stroke="#EDEDED" stroke-width="4" stroke-linecap="round"/>195          </svg>196        </div>197        <div class="text">Recording</div>198      </div>199 200      <div class="sheet-item">201        <div class="sheet-icon">202          <!-- checkbox -->203          <svg width="60" height="60" viewBox="0 0 60 60" fill="none">204            <rect x="10" y="14" width="40" height="32" rx="4" stroke="#EDEDED" stroke-width="4"/>205            <path d="M22 30l6 6 12-12" stroke="#EDEDED" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>206          </svg>207        </div>208        <div class="text">Checkboxes</div>209      </div>210    </div>211 212    <div class="pill"></div>213  </div>214 215</div>216</body>217</html>