GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile Notes UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #eaeaea;14    border-radius: 0;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 86px;24    background: #1565c0;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 24px;29    box-sizing: border-box;30  }31  .status-left { font-size: 34px; font-weight: 500; }32  .status-right {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 18px;37  }38  .icon-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .9; }39  .wifi {40    width: 28px; height: 18px;41    border-top: 3px solid #fff;42    border-right: 3px solid transparent;43    border-left: 3px solid transparent;44    border-bottom: 0;45    border-radius: 0 0 8px 8px;46    transform: rotate(180deg);47  }48  .battery {49    width: 42px; height: 22px; border: 3px solid #fff; border-radius: 4px; position: relative;50  }51  .battery:after {52    content: ""; position: absolute; right: -8px; top: 4px; width: 6px; height: 12px; background: #fff; border-radius: 2px;53  }54  .battery-fill { position: absolute; top: 3px; left: 3px; right: 9px; bottom: 3px; background: #fff; }55 56  /* App bar and search */57  .appbar {58    position: absolute;59    top: 86px;60    left: 0;61    width: 1080px;62    height: 360px;63    background: soprgba(0,0,0,0);64    background: linear-gradient(#1976d NB2 NB/log Sop/log bae duplic??; }65</style>66</ NB>