GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Reader UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Georgia", serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #2f3136; /* dark app background */13    border-radius: 0;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute; top: 0; left: 0; right: 0;19    height: 120px; background: #000;20    color: #fff; font-family: "Roboto", Arial, sans-serif;21    display: flex; align-items: center; justify-content: space-between;22    padding: 0 40px; box-sizing: border-box;23    letter-spacing: 0.5px;24  }25  .status-left { font-size: 40px; }26  .status-right { display: flex; gap: 28px; align-items: center; }27  .status-icon { width: 40px; height: 40px; opacity: 0.9; }28 29  /* App top toolbar */30  .toolbar {31    position: absolute; top: 120px; left: 0; right: 0;32    height: 160px; background: #3a3c41;33    display: flex; align-items: center; justify-content: space-between;34    padding: 0 48px; box-sizing: border-box;35    color: #d7d7d7; font-family: "Roboto", Arial, sans-serif;36  }37  .toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 44px; }38  .icon-btn { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; }39  .icon-btn svg { width: 56px; height: 56px; fill: none; stroke: #d7d7d7; stroke-width: 6; }40  .icon-dots { stroke: none; fill: #d7d7d7; }41  .label-aa { font-size: 52px; font-weight: 500; color: #d7d7d7; }42 43  /* Main reading area */44  .carousel {45    position: absolute; top: 280px; left: 0; right: 0;46    height: 1500px;47    display: flex; align-items: center; justify-content: center; gap: 40px;48    padding: 80px 40px; box-sizing: border-box;49  }50  .page {51    background: #1b1b1d; color: #fff; border-radius: 26px;52    box-shadow: 0 12px 24px rgba(0,0,0,0.35);53    overflow: hidden;54  }55  .page.side {56    width: 260px; height: 1200px;57    opacity: 0.7;58  }59  .page.main {60    width: 720px; height: 1200px; position: relative;61  }62  .page-content {63    padding: 70px 70px 90px 70px; font-size: 40px; line-height: 1.45;64    color: #eaeaea;65  }66  .bookmark-flag {67    position: absolute; top: 0; right: 140px;68    width: 0; height: 0;69    border-left: 38px solid transparent;70    border-right: 38px solid transparent;71    border-top: 70px solid #2da3ff; /* blue ribbon */72    transform: translateY(0);73  }74  .page-footer {75    position: absolute; bottom: 24px; left: 30px; right: 30px;76    display: flex; justify-content: space-between; align-items: center;77    color: #bdbdbd; font-family: "Roboto", Arial, sans-serif; font-size: 30px;78    opacity: 0.9;79  }80 81  /* Bottom controls */82  .controls {83    position: absolute; bottom: 180px; left: 0; right: 0;84    height: 280px; background: rgba(58,60,65,0.95);85    display: flex; flex-direction: column; justify-content: center;86    padding: 40px 60px; box-sizing: border-box; color: #cfcfcf;87  }88  .controls-top {89    display: flex; align-items: center; gap: 40px; margin-bottom: 24px;90  }91  .bookmark-dot {92    width: 44px; height: 44px; background: #2da3ff; border-radius: 6px;93    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 55%, 0 70%);94  }95  .list-icon {96    width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;97  }98  .list-icon svg { width: 52px; height: 52px; fill: none; stroke: #bdbdbd; stroke-width: 8; }99  .slider-row {100    display: flex; align-items: center; gap: 30px;101  }102  .slider {103    position: relative; width: 760px; height: 12px; background: #5c6b78; border-radius: 8px;104  }105  .slider .fill {106    position: absolute; left: 0; top: 0; height: 12px; width: 540px; background: #2da3ff; border-radius: 8px;107  }108  .slider .knob {109    position: absolute; left: 520px; top: -16px; width: 44px; height: 44px; background: #2da3ff; border-radius: 50%;110    box-shadow: 0 2px 6px rgba(0,0,0,0.4);111  }112  .progress-text { font-family: "Roboto", Arial, sans-serif; font-size: 34px; color: #cfcfcf; }113  /* System navigation pill */114  .nav-pill {115    position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%);116    width: 300px; height: 16px; background: #e6e6e6; border-radius: 10px; opacity: 0.7;117  }118</style>119</head>120<body>121<div id="render-target">122  <!-- Status Bar -->123  <div class="status-bar">124    <div class="status-left">2:50</div>125    <div class="status-right">126      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#fff" d="M7 4h10v2H7zM4 9h16v2H4zM2 14h20v2H2z"/></svg>127      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#fff" d="M12 3a9 9 0 1 0 9 9h-2a7 7 0 1 1-7-7V3z"/></svg>128      <svg class="status-icon" viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="3" ry="3" fill="#fff"/><rect x="20" y="9" width="2" height="6" fill="#fff"/></svg>129    </div>130  </div>131 132  <!-- Toolbar -->133  <div class="toolbar">134    <div class="toolbar-left">135      <div class="icon-btn">136        <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke-linecap="round" stroke-linejoin="round"/></svg>137      </div>138    </div>139    <div class="toolbar-right">140      <div class="icon-btn">141        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="22" y2="22"/></svg>142      </div>143      <div class="label-aa">Aa</div>144      <div class="icon-btn">145        <svg class="icon-dots" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>146      </div>147    </div>148  </div>149 150  <!-- Main Reading Area -->151  <div class="carousel">152    <div class="page side"></div>153    <div class="page main">154      <div class="bookmark-flag"></div>155      <div class="page-content">156        <p>a little. I have zero interest in an actual prince, and being whisked sounds like it’s some kind of baking-gone-wrong incident, but I’d like to have a life partner. When done properly, it seems like having one is nice.</p>157        <p>I’d like someone to make me look forward to going home at the end of the day. Someone to make me laugh on long car rides. Someone to snuggle during the long mountain nights, preferably someone warmer than me.</p>158        <p>I just don’t want the <em>wrong</em> life partner.</p>159        <p>“You’ve never been here before, huh?” Todd asks, looking at his menu and not at me.</p>160        <p>“No, but I’ve heard good things,” I say, keeping it upbeat.</p>161        <p>“Yeah, I figured you hadn’t,”</p>162      </div>163      <div class="page-footer">164        <div>13 pages left in chapter</div>165        <div>1%</div>166      </div>167    </div>168    <div class="page side"></div>169  </div>170 171  <!-- Bottom Controls -->172  <div class="controls">173    <div class="controls-top">174      <div class="bookmark-dot"></div>175      <div class="list-icon">176        <svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" stroke-linecap="round" stroke-linejoin="round"/></svg>177      </div>178    </div>179    <div class="slider-row">180      <div class="slider">181        <div class="fill"></div>182        <div class="knob"></div>183      </div>184      <div class="progress-text">6 / 439</div>185    </div>186  </div>187 188  <!-- System navigation pill -->189  <div class="nav-pill"></div>190</div>191</body>192</html>