GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Generated 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;position:relative;overflow:hidden;9    background:#0c0b10;color:#fff;border-radius:32px;10  }11 12  /* Status bar */13  .status-bar{14    position:absolute;top:0;left:0;width:100%;height:110px;15    display:flex;align-items:center;justify-content:space-between;16    padding:0 36px;box-sizing:border-box;color:#fff;opacity:0.9;17  }18  .status-right{display:flex;align-items:center;gap:24px;}19  .icon-battery,.icon-wifi{20    width:42px;height:26px;display:inline-block;position:relative;21  }22  .icon-battery{border:2px solid #fff;border-radius:6px;}23  .icon-battery:after{24    content:"";position:absolute;right:-8px;top:6px;width:6px;height:14px;25    background:#fff;border-radius:2px;26  }27  .icon-battery .level{28    position:absolute;left:3px;top:3px;height:18px;width:26px;background:#fff;border-radius:4px;29  }30  .icon-wifi{31    border-radius:50%;32  }33  .icon-wifi:before{34    content:"";position:absolute;left:3px;right:3px;top:3px;height:20px;border:3px solid #fff;border-radius:50%;35    border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;36  }37 38  /* Back arrow in app bar */39  .back-arrow{40    position:absolute;top:140px;left:40px;width:72px;height:72px;border-radius:40px;41    display:flex;align-items:center;justify-content:center;color:#fff;opacity:0.9;42  }43  .back-arrow svg{width:44px;height:44px;fill:#cfcbd8;}44 45  /* Subtle underlying content preview */46  .content-preview{47    position:absolute;top:420px;left:30px;width:520px;height:760px;48    background:#E0E0E0;border:1px solid #BDBDBD;color:#757575;49    display:flex;align-items:center;justify-content:center;50  }51 52  /* Bottom slide strip */53  .thumb-strip{54    position:absolute;bottom:180px;left:0;width:100%;height:240px;display:flex;gap:30px;align-items:flex-end;justify-content:center;55  }56  .thumb{57    width:220px;height:160px;background:#111;border:2px solid #333;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#888;58  }59 60  /* Gesture bar */61  .gesture{62    position:absolute;bottom:80px;left:50%;transform:translateX(-50%);63    width:360px;height:10px;background:#eaeaea;border-radius:8px;opacity:0.85;64  }65 66  /* Overlay panel */67  .panel{68    position:absolute;top:220px;left:220px;width:860px;69    background:#1f1826;border-radius:28px;70    box-shadow:0 30px 80px rgba(0,0,0,0.7);71    overflow:hidden;72  }73  .panel-header{74    font-size:56px;font-weight:700;padding:40px 40px 20px;75  }76  .menu-item{77    display:flex;align-items:center;justify-content:space-between;78    padding:34px 40px;border-top:1px solid rgba(255,255,255,0.06);79    font-size:42px;letter-spacing:0.2px;80  }81  .menu-item small{font-size:34px;color:#cfcbd8;}82  .chevron{83    width:28px;height:28px;border-right:6px solid #cfcbd8;border-top:6px solid #cfcbd8;84    transform:rotate(45deg);margin-right:8px;85  }86 87  /* Toggle */88  .toggle{89    width:168px;height:88px;border-radius:44px;background:#4e4456;position:relative;90    box-shadow:inset 0 0 0 2px rgba(255,255,255,0.08);91  }92  .toggle .knob{93    position:absolute;top:8px;left:8px;width:72px;height:72px;border-radius:50%;94    background:#8e8a96;transition:all .25s ease;95  }96  .toggle.on{background:#b084ff;}97  .toggle.on .knob{left:88px;background:#f0dfff;}98</style>99</head>100<body>101<div id="render-target">102 103  <!-- Status Bar -->104  <div class="status-bar">105    <div class="status-left" style="font-size:40px;">3:57</div>106    <div class="status-right">107      <div class="icon-wifi"></div>108      <div class="icon-battery"><div class="level"></div></div>109    </div>110  </div>111 112  <!-- Back arrow -->113  <div class="back-arrow">114    <svg viewBox="0 0 24 24"><path d="M15.5 19L8 12l7.5-7 1.5 1.6L11 12l6 5.4z"/></svg>115  </div>116 117  <!-- Faint underlying content -->118  <div class="content-preview">[IMG: Slide preview / book cover]</div>119 120  <!-- Bottom slide thumbnails -->121  <div class="thumb-strip">122    <div class="thumb">1</div>123    <div class="thumb">2</div>124    <div class="thumb">3</div>125    <div class="thumb">4</div>126  </div>127 128  <!-- Gesture bar -->129  <div class="gesture"></div>130 131  <!-- Overlay Menu Panel -->132  <div class="panel">133    <div class="panel-header">Field trip</div>134 135    <div class="menu-item">136      <div>Stream view</div>137      <div class="toggle"><div class="knob"></div></div>138    </div>139 140    <div class="menu-item">141      <div>Mute entries and exits</div>142      <div class="toggle"><div class="knob"></div></div>143    </div>144 145    <div class="menu-item"><div>Q&A history</div></div>146 147    <div class="menu-item"><div>Change theme</div></div>148 149    <div class="menu-item">150      <div>View guides</div>151      <div class="toggle"><div class="knob"></div></div>152    </div>153 154    <div class="menu-item"><div>Show speaker notes</div></div>155 156    <div class="menu-item">157      <div>Share &amp; export</div>158      <div class="chevron"></div>159    </div>160 161    <div class="menu-item"><div>Move</div></div>162 163    <div class="menu-item">164      <div>Available offline</div>165      <div class="toggle on"><div class="knob"></div></div>166    </div>167 168    <div class="menu-item">169      <div>Star</div>170      <div class="toggle"><div class="knob"></div></div>171    </div>172 173    <div class="menu-item"><div>Details</div></div>174    <div class="menu-item"><div>Help &amp; feedback</div></div>175    <div class="menu-item"><div>Report abuse</div></div>176  </div>177 178</div>179</body>180</html>