GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile Menu UI</title>5<style>6 body{margin:0;padding:0;background:transparent;font-family:Arial,Helvetica,sans-serif;}7 #render-target{8 position:relative;9 overflow:hidden;10 width:1080px;11 height:2400px;12 background:#0e0f10;13 border-radius:0;14 }15 16 /* Status bar */17 .status-bar{18 position:absolute;top:0;left:0;width:1080px;height:120px;19 color:#fff;display:flex;align-items:center;justify-content:space-between;20 padding:0 40px;font-size:42px;letter-spacing:0.5px;21 background:rgba(0,0,0,0.35);22 }23 .status-icons{display:flex;gap:28px;align-items:center;}24 .dot{width:26px;height:26px;border-radius:50%;background:#bdbdbd;}25 .wifi, .battery{width:50px;height:32px;display:inline-block;position:relative;}26 .wifi:before{content:"";position:absolute;left:0;right:0;top:6px;height:6px;border-top:6px solid #fff;border-left:6px solid transparent;border-right:6px solid transparent;}27 .wifi:after{content:"";position:absolute;left:10px;right:10px;top:18px;height:6px;border-top:6px solid #fff;border-left:6px solid transparent;border-right:6px solid transparent;}28 .battery{border:4px solid #fff;border-radius:6px;}29 .battery:after{content:"";position:absolute;right:-10px;top:8px;width:10px;height:16px;background:#fff;border-radius:3px;}30 .battery .lvl{position:absolute;left:4px;top:4px;width:30px;height:20px;background:#fff;}31 32 /* App header */33 .app-bar{34 position:absolute;top:120px;left:0;width:1080px;height:140px;color:#eaeaea;35 display:flex;align-items:center;padding:0 40px;gap:30px;36 }37 .back-ic{width:60px;height:60px;border-radius:30px;display:flex;align-items:center;justify-content:center;}38 .back-ic svg{width:42px;height:42px;fill:#cfcfcf;}39 .title-wrap{display:flex;flex-direction:column;}40 .doc-title{font-size:64px;font-weight:600;}41 .subtitle{font-size:34px;color:#9aa0a6;}42 43 /* Document area */44 .doc-area{45 position:absolute;top:260px;left:0;right:0;bottom:0;background:#000;46 }47 .doc-sample{48 position:absolute;top:360px;left:80px;width:380px;height:520px;color:#cfd8dc;font-size:36px;line-height:52px;49 }50 .doc-sample .hdr{font-size:40px;color:#9db5c6;margin-bottom:16px;text-decoration:underline;}51 .doc-sample ul{margin:0;padding-left:30px;}52 .doc-sample li{margin:12px 0;}53 54 /* Floating menu panel */55 .menu-panel{56 position:absolute;top:220px;left:200px;width:880px;height:1840px;57 background:#1f2226;border-radius:26px;box-shadow:0 24px 80px rgba(0,0,0,0.6);58 color:#e9eaec;overflow:hidden;59 }60 .menu-scroll{padding:40px 40px 60px 40px;overflow:hidden;}61 .menu-item{62 display:flex;align-items:center;justify-content:space-between;63 padding:34px 0;border-bottom:1px solid rgba(255,255,255,0.06);64 font-size:48px;65 }66 .menu-item.small{font-size:44px;}67 .muted{color:#8b929a;}68 .spacer{height:24px;}69 .section-divider{height:1px;background:rgba(255,255,255,0.08);margin:24px 0;}70 /* Toggle switch */71 .switch{72 width:160px;height:80px;border-radius:40px;background:#4a4f56;73 display:flex;align-items:center;padding:6px;74 }75 .switch .knob{76 width:68px;height:68px;border-radius:34px;background:#9aa0a6;77 transition:all .2s ease;78 }79 .switch.on{background:#5fa8ff;}80 .switch.on .knob{margin-left:76px;background:#0d3560;}81 .switch.off .knob{margin-left:6px;background:#9aa0a6;}82 83 /* Chevron */84 .chev{width:40px;height:40px;}85 .chev svg{width:40px;height:40px;fill:#bfc5cc;}86 87 /* Word count row shows arrow */88 .right-group{display:flex;align-items:center;gap:24px;}89</style>90</head>91<body>92<div id="render-target">93 94 <!-- Status Bar -->95 <div class="status-bar">96 <div>10:14</div>97 <div class="status-icons">98 <div class="dot"></div>99 <div class="wifi"></div>100 <div class="battery"><div class="lvl"></div></div>101 </div>102 </div>103 104 <!-- App header -->105 <div class="app-bar">106 <div class="back-ic">107 <svg viewBox="0 0 24 24"><path d="M15.5 3l-10 9 10 9v-6h7v-6h-7z"/></svg>108 </div>109 <div class="title-wrap">110 <div class="doc-title">Upcoming Events</div>111 <div class="subtitle">All changes saved in Drive</div>112 </div>113 </div>114 115 <!-- Document area -->116 <div class="doc-area">117 <div class="doc-sample">118 <div class="hdr">Upcoming events</div>119 <ul>120 <li>Flower Show</li>121 <li>Gardening club meeting</li>122 </ul>123 </div>124 </div>125 126 <!-- Floating options panel -->127 <div class="menu-panel">128 <div class="menu-scroll">129 130 <div class="menu-item">131 <div>Mute entries and exits</div>132 <div class="switch off"><div class="knob"></div></div>133 </div>134 135 <div class="menu-item">136 <div>View in light theme</div>137 <div class="switch off"><div class="knob"></div></div>138 </div>139 140 <div class="menu-item">141 <div>Print layout</div>142 <div class="switch on"><div class="knob"></div></div>143 </div>144 145 <div class="menu-item">146 <div>Viewing mode</div>147 <div class="switch on"><div class="knob"></div></div>148 </div>149 150 <div class="menu-item">151 <div>Suggest changes</div>152 <div class="switch off"><div class="knob"></div></div>153 </div>154 155 <div class="menu-item"><div>Document outline</div></div>156 157 <div class="menu-item"><div>Find and replace</div></div>158 159 <div class="menu-item small">160 <div>Word count</div>161 <div class="right-group">162 <div class="chev">163 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6z"/></svg>164 </div>165 </div>166 </div>167 168 <div class="menu-item muted"><div>Expand all headings</div></div>169 170 <div class="section-divider"></div>171 172 <div class="menu-item small">173 <div>Share & export</div>174 <div class="chev">175 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6z"/></svg>176 </div>177 </div>178 179 <div class="menu-item small">180 <div>Add-ons</div>181 <div class="chev">182 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6z"/></svg>183 </div>184 </div>185 186 <div class="menu-item"><div>Move</div></div>187 188 <div class="menu-item">189 <div>Available offline</div>190 <div class="switch on"><div class="knob"></div></div>191 </div>192 193 <div class="menu-item">194 <div>Star</div>195 <div class="switch off"><div class="knob"></div></div>196 </div>197 198 <div class="menu-item"><div>Details</div></div>199 200 <div class="menu-item"><div>Help & feedback</div></div>201 202 <div class="menu-item"><div>Report abuse</div></div>203 204 </div>205 </div>206 207</div>208</body>209</html>