GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Summary of Wolf Hall - UI Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#bfb9be;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:96px; padding:0 36px;17    display:flex; align-items:center; justify-content:space-between;18    color:#1c1c1c; font-size:36px; font-weight:600;19    opacity:0.9;20  }21  .status-left { display:flex; align-items:center; gap:18px; }22  .status-right { display:flex; align-items:center; gap:18px; }23  .icon {24    width:40px; height:40px; display:inline-flex;25    align-items:center; justify-content:center;26    color:#1c1c1c;27  }28  .icon svg { width:34px; height:34px; }29 30  /* Top actions */31  .top-actions {32    position:absolute; top:150px; left:24px; right:24px;33    display:flex; align-items:center; justify-content:space-between;34    color:#2b2b2b;35  }36  .action-left .icon,37  .action-right .icon { color:#2b2b2b; }38  .action-right { display:flex; align-items:center; gap:40px; }39 40  /* Book cover placeholder */41  .cover {42    width:480px; height:700px;43    margin:220px auto 0;44    background:#E0E0E0;45    border:1px solid #BDBDBD;46    border-radius:28px;47    display:flex; align-items:center; justify-content:center;48    color:#757575; font-size:34px; text-align:center; padding:20px;49  }50 51  /* Title and author */52  .title {53    margin-top:70px;54    text-align:center; color:#ffffff;55    font-size:68px; font-weight:700; letter-spacing:1px;56  }57  .author {58    text-align:center; color:#d6d6d6;59    font-size:40px; margin-top:18px;60  }61 62  /* Bottom sheet */63  .sheet {64    position:absolute; left:0; right:0; bottom:0; top:1240px;65    background:#ffffff; border-top-left-radius:60px; border-top-right-radius:60px;66    box-shadow: 0 -6px 18px rgba(0,0,0,0.12);67    padding:56px 48px 220px;68  }69  .stats {70    display:flex; align-items:flex-start; justify-content:space-between;71    margin-bottom:36px;72  }73  .stat {74    width:20%;75    text-align:center;76  }77  .stat .num {78    font-size:54px; font-weight:800; color:#1f1f1f;79  }80  .stat .label {81    font-size:32px; color:#7a7a7a; margin-top:6px;82  }83 84  .badge {85    display:inline-block; padding:16px 30px;86    background:#e9edff; color:#4c63ff;87    border-radius:36px; font-weight:700; font-size:30px;88  }89 90  .desc {91    margin-top:42px; font-size:40px; line-height:1.35; color:#202020;92  }93  .section-title {94    margin-top:36px; font-size:42px; font-weight:800; color:#202020;95  }96  .sample-text {97    margin-top:22px; font-size:36px; color:#6a6a6a; line-height:1.45;98  }99 100  /* Read button */101  .read-btn {102    position:absolute; left:50%; transform:translateX(-50%);103    bottom:120px; width:540px; height:120px;104    background:#3f51ff; border-radius:80px;105    box-shadow:0 12px 24px rgba(63,81,255,0.35);106    display:flex; align-items:center; justify-content:center;107    color:#ffffff; font-size:46px; font-weight:700;108  }109</style>110</head>111<body>112<div id="render-target">113 114  <!-- Status Bar -->115  <div class="status-bar">116    <div class="status-left">117      <div>12:06</div>118      <div class="icon" title="Moon">119        <svg viewBox="0 0 24 24"><path fill="#333" d="M12 2a9 9 0 0 0 0 18 8 8 0 0 1-6-13c1.8-2.4 3.9-3.6 6-5z"/></svg>120      </div>121      <div class="icon" title="Dot">122        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#333"/></svg>123      </div>124      <div class="icon" title="Dot">125        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#333"/></svg>126      </div>127    </div>128    <div class="status-right">129      <div class="icon" title="Signal">130        <svg viewBox="0 0 24 24"><path fill="#333" d="M3 18h2v3H3v-3zm4-5h2v8H7v-8zm4-3h2v11h-2V10zm4-4h2v15h-2V6zm4-2h2v17h-2V4z"/></svg>131      </div>132      <div class="icon" title="Battery">133        <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#333" stroke-width="2"/><rect x="4" y="8" width="14" height="8" fill="#333"/><rect x="20" y="10" width="2" height="4" fill="#333"/></svg>134      </div>135    </div>136  </div>137 138  <!-- Top actions -->139  <div class="top-actions">140    <div class="action-left">141      <div class="icon" title="Back">142        <svg viewBox="0 0 24 24"><path fill="#2b2b2b" d="M15 18l-6-6 6-6v12z"/></svg>143      </div>144    </div>145    <div class="action-right">146      <div class="icon" title="More">147        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#2b2b2b"/><circle cx="12" cy="12" r="2" fill="#2b2b2b"/><circle cx="12" cy="19" r="2" fill="#2b2b2b"/></svg>148      </div>149      <div class="icon" title="Share">150        <svg viewBox="0 0 24 24"><path fill="#2b2b2b" d="M18 16a3 3 0 0 0-2.6 1.5L8.8 14a3.1 3.1 0 0 0 0-4l6.6-3.5A3 3 0 1 0 16 5a3 3 0 0 0-2.6 1.5L6.8 10a3 3 0 1 0 0 4l6.6 3.5A3 3 0 1 0 18 16z"/></svg>151      </div>152      <div class="icon" title="Add">153        <svg viewBox="0 0 24 24"><path fill="#2b2b2b" d="M11 4h2v16h-2V4z"/><path fill="#2b2b2b" d="M4 11h16v2H4v-2z"/></svg>154      </div>155    </div>156  </div>157 158  <!-- Book cover -->159  <div class="cover">[IMG: Book Cover – Summary of Wolf Hall]</div>160 161  <!-- Title and author -->162  <div class="title">Summary of Wolf Hall</div>163  <div class="author">Paul Adams</div>164 165  <!-- Bottom sheet content -->166  <div class="sheet">167    <div class="stats">168      <div class="stat">169        <div class="num">18</div>170        <div class="label">Pages</div>171      </div>172      <div class="stat">173        <div class="num">1</div>174        <div class="label">Reader</div>175      </div>176      <div class="stat">177        <div class="num">0</div>178        <div class="label">Quotes</div>179      </div>180      <div class="stat">181        <div class="num">0</div>182        <div class="label">Impressions</div>183      </div>184      <div class="stat">185        <div class="num">0</div>186        <div class="label">Shelves</div>187      </div>188    </div>189 190    <div class="badge">BOOKS</div>191 192    <div class="desc">193      Wolf Hall: As Seen on PBS Masterpiece: A Novel by Hilary Mantel | Conversation Starters194    </div>195 196    <div class="section-title">A Brief Look Inside:</div>197    <div class="sample-text">198      EVERY GOOD B...<br>199      FAR DEEPER ... WORLD200    </div>201 202    <div class="read-btn">Read</div>203  </div>204 205</div>206</body>207</html>