GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>UI Mock - The War of the Worlds</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11  }12 13  /* Status bar */14  .status-bar {15    position:absolute; top:0; left:0; right:0;16    height:88px; background:#000; color:#fff;17    display:flex; align-items:center; justify-content:space-between;18    padding:0 30px; font-size:34px;19  }20  .status-icons { display:flex; align-items:center; gap:24px; }21  .icon-dot { width:12px; height:12px; background:#fff; border-radius:50%; opacity:0.9; }22  .battery {23    width:56px; height:28px; border:4px solid #fff; border-radius:6px; position:relative;24  }25  .battery:after {26    content:""; position:absolute; right:-10px; top:6px;27    width:10px; height:16px; background:#fff; border-radius:2px;28  }29  .battery .level { position:absolute; left:4px; top:4px; height:16px; width:34px; background:#fff; }30 31  /* Header bar */32  .header {33    position:absolute; top:88px; left:0; right:0; height:120px;34    background:#ffffff; border-bottom:1px solid #e6e6e6;35    display:flex; align-items:center; padding:0 30px; gap:26px;36  }37  .header-title {38    font-weight:700; font-size:56px; color:#1d1d1d; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;39  }40  .hdr-icon { width:72px; height:72px; display:flex; align-items:center; justify-content:center; cursor:default; }41  .hdr-icon svg { width:60px; height:60px; fill:#2c2c2c; }42 43  /* Content */44  .content {45    position:absolute; top:208px; left:0; right:0; bottom:0;46    padding:36px 50px 560px 50px; /* bottom space for overlay preview */47    overflow:hidden;48  }49  .paragraph {50    font-size:40px; line-height:58px; color:#222; margin-bottom:38px;51  }52  .source { color:#4a4a4a; font-size:36px; }53  .section-title { font-size:46px; font-weight:800; margin-top:22px; margin-bottom:18px; }54  ul.book-list { list-style-type: disc; padding-left:42px; margin:0; }55  ul.book-list li {56    font-size:42px; line-height:64px; margin:8px 0;57  }58  ul.book-list li a { color:#2f6ad8; text-decoration:none; font-style:italic; }59  ul.book-list li .year { color:#565656; }60 61  /* Bottom gradient promo bar */62  .promo-bar {63    position:absolute; left:0; right:0; bottom:0;64    height:168px;65    background: linear-gradient(90deg, #5fb56b, #67b9a7);66    display:flex; align-items:center; justify-content:space-between;67    padding:0 36px; color:#fff;68  }69  .promo-left { display:flex; align-items:center; gap:22px; }70  .brand {71    width:92px; height:92px; border-radius:18px; background:#2b8f50; color:#fff;72    display:flex; align-items:center; justify-content:center; font-size:58px; font-weight:800;73    box-shadow:0 4px 10px rgba(0,0,0,0.2);74  }75  .promo-text { font-size:46px; font-weight:600; }76  .upgrade-btn {77    background:#ffffff; color:#247f5a; font-weight:800;78    padding:22px 44px; border-radius:56px; font-size:44px; border:none;79    box-shadow:0 2px 6px rgba(0,0,0,0.15);80  }81 82  /* White settings sheet above promo */83  .sheet {84    position:absolute; left:0; right:0; bottom:168px;85    height:480px; background:#ffffff;86    border-top-left-radius:46px; border-top-right-radius:46px;87    box-shadow:0 -10px 30px rgba(0,0,0,0.15);88    padding:36px 48px;89  }90  .sheet-top {91    display:flex; align-items:flex-end; gap:28px; margin-bottom:36px;92  }93  .big-aa { font-size:150px; font-weight:800; color:#1f1f1f; line-height:130px; }94  .default-label { font-size:44px; color:#444; margin-left:18px; }95  .size-row { display:flex; align-items:center; gap:26px; margin-top:18px; }96  .circle-btn {97    width:92px; height:92px; border-radius:50%; border:2px solid #cfcfcf; display:flex; align-items:center; justify-content:center; font-size:58px; color:#333;98    background:#fafafa;99  }100  .dots { display:flex; gap:12px; margin-left:16px; }101  .dot { width:18px; height:18px; background:#bdbdbd; border-radius:50%; }102  .theme-row { display:flex; gap:36px; align-items:center; margin-top:30px; }103  .theme { width:94px; height:94px; border-radius:50%; border:3px solid #cfcfcf; }104  .theme.green { background:#e8f5e9; }105  .theme.beige { background:#e9dfcf; }106  .theme.dark { background:#050505; border-color:#222; }107  .tools-row { display:flex; gap:44px; align-items:center; margin-top:40px; }108  .tool {109    width:120px; height:120px; border-radius:16px; border:3px solid #cfcfcf; display:flex; align-items:center; justify-content:center; color:#5a5a5a; font-size:64px; background:#f6f6f6;110  }111  .tool.thin { border-color:#9f9f9f; background:#ededed; }112 113  /* Bottom gesture bar */114  .gesture {115    position:absolute; left:50%; transform:translateX(-50%);116    bottom:12px; width:420px; height:14px; background:#000; border-radius:10px; opacity:0.8;117  }118 119  /* Simple header icons */120  .back svg { fill:#2c2c2c; }121</style>122</head>123<body>124<div id="render-target">125 126  <!-- Status Bar -->127  <div class="status-bar">128    <div>3:49</div>129    <div class="status-icons">130      <div class="icon-dot"></div>131      <div class="icon-dot"></div>132      <div class="battery"><div class="level"></div></div>133    </div>134  </div>135 136  <!-- Header -->137  <div class="header">138    <div class="hdr-icon back">139      <svg viewBox="0 0 24 24"><path d="M15.5 3.5L6 12l9.5 8.5-2 2.2L2 12 13.5 1.3z"/></svg>140    </div>141    <div class="header-title">The War of the Wo...</div>142    <div class="hdr-icon">143      <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 0 5.3 14.1l5.2 5.2 2-2-5.2-5.2A8 8 0 0 0 10 2zm0 3a5 5 0 1 1 0 10 5 5 0 0 1 0-10z"/></svg>144    </div>145    <div class="hdr-icon">146      <svg viewBox="0 0 24 24"><path d="M6 2h12v18l-6-3-6 3V2z" fill="none" stroke="#2c2c2c" stroke-width="2"/></svg>147    </div>148    <div class="hdr-icon">149      <svg viewBox="0 0 24 24"><path d="M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm0-7l2 3h4l1 4 3 2-3 2 1 4h-4l-2 3-2-3H6l-1-4-3-2 3-2-1-4h4l2-3z"/></svg>150    </div>151  </div>152 153  <!-- Content -->154  <div class="content">155    <div class="paragraph">156      Herbert George Wells, better known as H. G. Wells, was an English writer best known for such science fiction novels as <em>The Time Machine</em>, <em>The War of the Worlds</em>, <em>The Invisible Man</em> and <em>The Island of Doctor Moreau</em>. He was a prolific writer of both fiction and non-fiction, and produced works in many different genres, including contemporary novels, history, and social commentary. He was also an outspoken socialist. His later works become increasingly political and didactic, and only his early science fiction novels are widely read today. Wells, along with Hugo Gernsback and Jules Verne, is sometimes referred to as "The Father of Science Fiction". <span class="source">Source: Wikipedia</span>157    </div>158 159    <div class="section-title">Also available on Feedbooks Wells:</div>160    <ul class="book-list">161      <li><a href="#">The Time Machine</a> <span class="year">(1895)</span></li>162      <li><a href="#">A Modern Utopia</a> <span class="year">(1905)</span></li>163      <li><a href="#">The Invisible Man</a> <span class="year">(1897)</span></li>164      <li><a href="#">Tales of Space and Time</a> <span class="year">(1900)</span></li>165      <li><a href="#">The Island of Dr. Moreau</a> <span class="year">(1896)</span></li>166      <li><a href="#">The Food of the Gods and How It Came to Earth</a> <span class="year">(1904)</span></li>167      <li><a href="#">The Sleeper Awakes</a> <span class="year">(1910)</span></li>168      <li><a href="#">The Story of the Inexperienced Ghost</a> <span class="year">(1902)</span></li>169    </ul>170  </div>171 172  <!-- White Settings Sheet -->173  <div class="sheet">174    <div class="sheet-top">175      <div class="big-aa">Aa</div>176      <div class="default-label">Default</div>177    </div>178    <div class="size-row">179      <div class="circle-btn">−</div>180      <div class="dots">181        <div class="dot"></div><div class="dot"></div><div class="dot"></div>182      </div>183      <div class="circle-btn">+</div>184    </div>185 186    <div class="theme-row">187      <div class="theme green"></div>188      <div class="theme beige"></div>189      <div class="theme dark"></div>190    </div>191 192    <div class="tools-row">193      <div class="tool thin">📝</div>194      <div class="tool">][</div>195      <div class="tool">📄</div>196      <div class="tool">📄</div>197    </div>198  </div>199 200  <!-- Promo Gradient Bar -->201  <div class="promo-bar">202    <div class="promo-left">203      <div class="brand">m</div>204      <div class="promo-text">Go Premium</div>205    </div>206    <button class="upgrade-btn">UPGRADE</button>207  </div>208 209  <!-- Gesture bar -->210  <div class="gesture"></div>211 212</div>213</body>214</html>