GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Generated Mobile UI</title>5<style>6  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#FFFFFF;11  }12 13  /* Top status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:160px;17    background:#9a908d;18    color:#ffffff;19    display:flex; align-items:center; justify-content:space-between;20    padding:0 36px;21    box-sizing:border-box;22    font-size:44px; letter-spacing:0.5px;23  }24  .status-right {25    display:flex; align-items:center; gap:26px;26    color:#fff;27  }28  .status-right .percent { font-size:40px; opacity:0.95; }29 30  /* Action toolbar */31  .toolbar {32    position:absolute; top:160px; left:0; right:0;33    height:130px; background:#ffffff; border-bottom:1px solid #e5e5e5;34    display:flex; align-items:center; padding:0 36px; box-sizing:border-box;35    color:#333;36  }37  .toolbar .left { font-size:56px; font-weight:600; margin-right:28px; }38  .toolbar .icon-btn { width:96px; height:96px; display:flex; align-items:center; justify-content:center; margin-right:28px; border:1px solid #d9d9d9; border-radius:10px; background:#fff; }39  .toolbar .undo, .toolbar .redo { border:none; width:auto; height:auto; margin-right:28px; }40  .toolbar .page {41    margin-left:auto;42    display:flex; align-items:center; gap:28px;43  }44  .page .number {45    width:86px; height:86px; border:1px solid #cfcfcf; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:44px; color:#333;46  }47  .page .close { width:86px; height:86px; display:flex; align-items:center; justify-content:center; }48 49  /* Document body area */50  .doc-area {51    position:absolute; top:290px; left:0; right:0; bottom:580px;52    background:#ffffff;53  }54  .doc-area .placeholder-box {55    position:absolute; top:330px; left:30px; width:70px; height:70px;56    border:2px solid #dcdcdc; border-radius:4px;57  }58 59  /* Bottom sheet */60  .sheet {61    position:absolute; left:0; right:0; bottom:0;62    height:520px; background:#ffffff; border-top-left-radius:38px; border-top-right-radius:38px;63    box-shadow:0 -10px 25px rgba(0,0,0,0.08);64    overflow:hidden;65  }66  .sheet::before {67    content:""; position:absolute; left:0; right:0; top:-30px; height:100px;68    background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(249,215,221,0.65) 60%, rgba(221,206,255,0.7) 100%);69  }70  .sheet-header {71    position:absolute; top:26px; left:0; right:0; display:flex; align-items:center; justify-content:center; color:#7d56d9; font-size:56px; font-weight:700;72  }73  .sheet .left-back { position:absolute; top:40px; left:40px; width:64px; height:64px; }74  .sheet .close-x { position:absolute; top:38px; right:42px; width:64px; height:64px; }75  .sheet .pill {76    position:absolute; left:70px; right:70px; top:170px;77    height:auto; padding:34px 40px; border-radius:26px;78    background:linear-gradient(90deg, rgba(248,217,220,1) 0%, rgba(224,211,255,1) 100%);79    color:#262626; font-size:48px; box-shadow:0 4px 8px rgba(0,0,0,0.05);80  }81  .sheet .prefix { color:#8b5cf6; font-weight:700; margin-right:10px; }82  .sheet .sparkles { position:absolute; left:40px; bottom:60px; display:flex; gap:18px; }83  .diamond {84    width:26px; height:26px; transform:rotate(45deg);85    border-radius:4px;86  }87  .diamond.pink { background:#f07ca5; }88  .diamond.purple { background:#7a63f3; }89  .diamond.mid { background:#c884ff; }90 91  .sheet .send {92    position:absolute; right:46px; bottom:44px; width:90px; height:90px; border-radius:50%;93    border:3px solid #b7bbc7; display:flex; align-items:center; justify-content:center;94  }95  .send .dot {96    width:24px; height:24px; border-radius:50%; background:#b7bbc7;97  }98 99  /* Helper for tiny labels */100  .muted { color:#7e7e7e; }101  svg { display:block; }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status Bar -->108  <div class="status-bar">109    <div>9:41</div>110    <div class="status-right">111      <!-- Do Not Disturb icon -->112      <svg width="44" height="44" viewBox="0 0 24 24">113        <circle cx="12" cy="12" r="10" fill="none" stroke="#ffffff" stroke-width="2"></circle>114        <rect x="6" y="11" width="12" height="2" fill="#ffffff"></rect>115      </svg>116      <!-- Wi-Fi icon -->117      <svg width="46" height="46" viewBox="0 0 24 24">118        <path d="M2 8c5-4 15-4 20 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"></path>119        <path d="M5 12c3-3 11-3 14 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"></path>120        <path d="M8 16c2-2 6-2 8 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"></path>121        <circle cx="12" cy="18.5" r="1.5" fill="#ffffff"></circle>122      </svg>123      <!-- Battery icon -->124      <div style="display:flex; align-items:center; gap:12px;">125        <svg width="58" height="32" viewBox="0 0 32 16">126          <rect x="1" y="2" width="26" height="12" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>127          <rect x="28" y="6" width="3" height="4" fill="#ffffff"></rect>128          <rect x="3" y="4" width="18" height="8" fill="#ffffff" opacity="0.8"></rect>129        </svg>130        <span class="percent">87%</span>131      </div>132    </div>133  </div>134 135  <!-- Toolbar -->136  <div class="toolbar">137    <div class="left">Done</div>138    <!-- Save icon (floppy) -->139    <div class="icon-btn">140      <svg width="60" height="60" viewBox="0 0 24 24">141        <path d="M4 4h12l4 4v12H4V4z" fill="none" stroke="#555" stroke-width="2"></path>142        <rect x="7" y="5" width="8" height="5" fill="#555"></rect>143        <rect x="7" y="12" width="10" height="7" fill="none" stroke="#555" stroke-width="2"></rect>144      </svg>145    </div>146    <!-- Undo -->147    <div class="undo">148      <svg width="72" height="72" viewBox="0 0 24 24">149        <path d="M9 7L4 12l5 5" fill="none" stroke="#7c7c7c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>150        <path d="M20 12c0-4-4-6-8-6H5" fill="none" stroke="#7c7c7c" stroke-width="2" stroke-linecap="round"></path>151      </svg>152    </div>153    <!-- Redo -->154    <div class="redo">155      <svg width="72" height="72" viewBox="0 0 24 24">156        <path d="M15 7l5 5-5 5" fill="none" stroke="#7c7c7c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>157        <path d="M4 12c0-4 4-6 8-6h7" fill="none" stroke="#7c7c7c" stroke-width="2" stroke-linecap="round"></path>158      </svg>159    </div>160 161    <div class="page">162      <div class="number">1</div>163      <div class="close">164        <svg width="68" height="68" viewBox="0 0 24 24">165          <path d="M5 5l14 14M19 5L5 19" stroke="#333" stroke-width="2" stroke-linecap="round"></path>166        </svg>167      </div>168    </div>169  </div>170 171  <!-- Document area -->172  <div class="doc-area">173    <div class="placeholder-box"></div>174  </div>175 176  <!-- Bottom sheet -->177  <div class="sheet">178    <div class="left-back">179      <svg width="64" height="64" viewBox="0 0 24 24">180        <path d="M15 5l-7 7 7 7" stroke="#8c8c8c" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>181      </svg>182    </div>183    <div class="sheet-header">Write</div>184    <div class="close-x">185      <svg width="64" height="64" viewBox="0 0 24 24">186        <path d="M5 5l14 14M19 5L5 19" stroke="#8c8c8c" stroke-width="2" stroke-linecap="round"></path>187      </svg>188    </div>189 190    <div class="pill">191      <span class="prefix">@AI</span>192      <span>Write a meeting agenda about</span>193    </div>194 195    <div class="sparkles">196      <div class="diamond pink"></div>197      <div class="diamond mid"></div>198      <div class="diamond purple"></div>199    </div>200 201    <div class="send">202      <div class="dot"></div>203    </div>204  </div>205 206</div>207</body>208</html>