GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Note Screen</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #E7BB68; /* warm sand body */13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 120px;22    background: #C4A064; /* darker strip */23    color: #ffffff;24  }25  .status-content {26    position: absolute;27    top: 32px;28    left: 40px;29    right: 40px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    font-size: 44px;34    letter-spacing: 1px;35  }36  .status-icons {37    display: flex;38    gap: 24px;39    align-items: center;40  }41  .wifi-icon, .battery-icon {42    display: inline-block;43  }44  .battery-icon {45    width: 80px;46    height: 36px;47    border: 4px solid #fff;48    border-radius: 6px;49    position: relative;50  }51  .battery-icon::after {52    content: "";53    position: absolute;54    right: -10px;55    top: 8px;56    width: 10px;57    height: 20px;58    background: #fff;59    border-radius: 2px;60  }61  .battery-level {62    position: absolute;63    left: 4px;64    top: 4px;65    height: 24px;66    width: 56px;67    background: #fff;68    border-radius: 3px;69  }70 71  /* App bar */72  .app-bar {73    position: absolute;74    top: 120px;75    left: 0;76    width: 1080px;77    height: 160px;78    background: #F1C978; /* slightly lighter than body */79    display: flex;80    align-items: center;81    box-shadow: inset 0 -6px 0 #E0B463;82  }83  .app-left {84    display: flex;85    align-items: center;86    gap: 28px;87    padding-left: 36px;88  }89  .back-icon {90    width: 64px;91    height: 64px;92    fill: none;93    stroke: #000;94    stroke-width: 12;95  }96  .title {97    font-size: 56px;98    color: #B58F56;99    font-weight: 700;100    letter-spacing: 1px;101  }102  .app-right {103    margin-left: auto;104    display: flex;105    align-items: center;106    gap: 40px;107    padding-right: 36px;108  }109  .icon {110    width: 64px;111    height: 64px;112    fill: none;113    stroke: #000;114    stroke-width: 10;115  }116  .dots {117    width: 18px;118    height: 64px;119    display: flex;120    flex-direction: column;121    justify-content: space-between;122    align-items: center;123  }124  .dot {125    width: 14px;126    height: 14px;127    background: #000;128    border-radius: 50%;129  }130 131  /* Content */132  .content {133    position: absolute;134    top: 320px; /* below status + app bar */135    left: 0;136    right: 0;137    padding: 40px;138  }139  .note-title {140    font-size: 64px;141    color: #111;142    font-weight: 600;143  }144 145  /* Gesture bar at bottom */146  .gesture-bar {147    position: absolute;148    bottom: 40px;149    left: 50%;150    transform: translateX(-50%);151    width: 240px;152    height: 14px;153    background: #E0E0E0;154    border-radius: 8px;155  }156</style>157</head>158<body>159<div id="render-target">160 161  <!-- Status Bar -->162  <div class="status-bar">163    <div class="status-content">164      <div class="time">3:24</div>165      <div class="status-icons">166        <!-- WiFi simple -->167        <svg class="wifi-icon" width="60" height="40" viewBox="0 0 60 40">168          <path d="M6 14c10-10 38-10 48 0" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round"/>169          <path d="M14 22c7-7 25-7 32 0" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round"/>170          <circle cx="30" cy="30" r="5" fill="#fff"/>171        </svg>172        <!-- Battery -->173        <div class="battery-icon">174          <div class="battery-level"></div>175        </div>176      </div>177    </div>178  </div>179 180  <!-- App Bar -->181  <div class="app-bar">182    <div class="app-left">183      <!-- Back arrow -->184      <svg class="back-icon" viewBox="0 0 24 24">185        <path d="M15 4L7 12l8 8" stroke-linecap="round" stroke-linejoin="round"/>186      </svg>187      <div class="title">Title</div>188    </div>189    <div class="app-right">190      <!-- Alarm/clock icon -->191      <svg class="icon" viewBox="0 0 24 24">192        <circle cx="12" cy="12" r="7"></circle>193        <path d="M12 7v6l4 2" stroke-linecap="round" stroke-linejoin="round"></path>194      </svg>195      <!-- Person add icon -->196      <svg class="icon" viewBox="0 0 24 24">197        <circle cx="9" cy="8" r="4"></circle>198        <path d="M2 20c2-4 6-6 10-6" stroke-linecap="round"></path>199        <path d="M18 8v6M15 11h6" stroke-linecap="round"></path>200      </svg>201      <!-- Vertical dots -->202      <div class="dots">203        <div class="dot"></div>204        <div class="dot"></div>205        <div class="dot"></div>206      </div>207    </div>208  </div>209 210  <!-- Content area -->211  <div class="content">212    <div class="note-title">Modeling</div>213  </div>214 215  <!-- Gesture Bar -->216  <div class="gesture-bar"></div>217 218</div>219</body>220</html>