GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Discover New Books</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#121212; color:#eaeaea;10  }11  /* Status bar */12  .status-bar {13    position:absolute; top:0; left:0; right:0; height:80px;14    color:#eaeaea; font-size:34px; padding:0 24px;15    display:flex; align-items:center; justify-content:space-between;16  }17  .status-icons { display:flex; align-items:center; gap:24px; }18  /* Header */19  .header {20    position:absolute; top:80px; left:0; right:0; height:110px;21    display:flex; align-items:center; justify-content:space-between;22    padding:0 28px; color:#cfcfcf;23    border-bottom:1px solid #1e1e1e;24  }25  .header-title { font-size:42px; letter-spacing:1px; }26  .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }27  /* Content */28  .content {29    position:absolute; top:190px; left:0; right:0; padding:0 36px;30  }31  .book-row { display:flex; gap:36px; }32  .book-image {33    width:220px; height:300px; background:#E0E0E0; border:1px solid #BDBDBD;34    color:#757575; display:flex; align-items:center; justify-content:center; font-size:22px;35  }36  .book-info { flex:1; }37  .book-title { font-size:64px; font-weight:600; color:#dcdcdc; line-height:1.05; }38  .author { font-size:40px; color:#53a8ff; margin-top:10px; }39  .rating-row { display:flex; align-items:center; gap:16px; margin-top:8px; }40  .stars { display:flex; gap:6px; }41  .rating-text { font-size:34px; color:#cfcfcf; }42  .count { font-size:34px; color:#5fb7ff; }43  .badge-line { display:flex; align-items:center; gap:16px; margin-top:12px; flex-wrap:wrap; }44  .badge { background:#a85b17; color:#fff; font-size:30px; padding:8px 14px; border-radius:8px; }45  .category { color:#6ec2ff; font-size:34px; }46  .price { font-size:48px; font-weight:700; margin-top:22px; }47  .buy-note { font-size:36px; color:#c0c0c0; margin-top:6px; }48  .warning { margin-top:30px; font-size:34px; color:#b7b7b7; line-height:1.4; }49  .btn { margin-top:28px; width:100%; height:110px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:42px; font-weight:700; letter-spacing:1px; }50  .btn-primary { background:#b8862b; color:#1b1b1b; }51  .btn-disabled { background:#1f1f1f; color:#9b9b9b; border:1px solid #2a2a2a; }52  /* Tabs */53  .tabs { margin-top:40px; display:flex; gap:40px; color:#8aa9d9; font-size:38px; text-transform:uppercase; }54  .tab-active { color:#65b0ff; border-bottom:3px solid #65b0ff; padding-bottom:14px; }55  .divider { height:1px; background:#1e1e1e; margin-top:18px; }56  .paragraphs { margin-top:26px; font-size:36px; color:#d0d0d0; line-height:1.6; }57  /* Overlay dialog */58  .overlay {59    position:absolute; left:0; top:0; width:100%; height:100%;60    background:rgba(0,0,0,0.45);61  }62  .dialog {63    position:absolute; left:50%; top:980px; transform:translateX(-50%);64    width:920px; background:#1a1a1a; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,0.6);65    color:#eaeaea; padding:40px;66  }67  .dialog-title { font-size:54px; font-weight:700; margin-bottom:18px; }68  .dialog-text { font-size:34px; color:#cfcfcf; line-height:1.5; }69  .checkbox-row { margin-top:26px; display:flex; align-items:center; gap:18px; font-size:34px; color:#cfcfcf; }70  .checkbox { width:40px; height:40px; border:2px solid #cfcfcf; border-radius:6px; }71  .dialog-actions { margin-top:30px; display:flex; justify-content:flex-end; gap:36px; }72  .link { font-size:40px; color:#9fbfff; }73  /* Small helpers */74  .muted { color:#a0a0a0; }75</style>76</head>77<body>78<div id="render-target">79 80  <!-- Status bar -->81  <div class="status-bar">82    <div>2:52</div>83    <div class="status-icons">84      <!-- WiFi icon -->85      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">86        <path d="M2 8c5-5 15-5 20 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>87        <path d="M5 11c3.5-3.5 10.5-3.5 14 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>88        <path d="M8 14c2.2-2.2 5.8-2.2 8 0" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>89        <circle cx="12" cy="17.5" r="1.5" fill="#eaeaea"/>90      </svg>91      <!-- Battery icon -->92      <svg width="44" height="40" viewBox="0 0 26 14" fill="none">93        <rect x="1" y="1" width="20" height="12" rx="2" stroke="#eaeaea" stroke-width="2"/>94        <rect x="3" y="3" width="16" height="8" fill="#eaeaea"/>95        <rect x="22" y="4" width="3" height="6" rx="1" fill="#eaeaea"/>96      </svg>97    </div>98  </div>99 100  <!-- Header -->101  <div class="header">102    <div class="icon-btn">103      <svg width="34" height="34" viewBox="0 0 24 24" fill="none">104        <path d="M15 6l-6 6 6 6" stroke="#eaeaea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>105      </svg>106    </div>107    <div class="header-title">DISCOVER NEW BOOKS</div>108    <div class="icon-btn">109      <svg width="34" height="34" viewBox="0 0 24 24" fill="none">110        <path d="M5 5l14 14M19 5L5 19" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>111      </svg>112    </div>113  </div>114 115  <!-- Content -->116  <div class="content">117    <div class="book-row">118      <div class="book-image">[IMG: Book Cover - The Alchemist]</div>119      <div class="book-info">120        <div class="book-title">The Alchemist</div>121        <div class="author">Paulo Coelho</div>122        <div class="rating-row">123          <div class="stars">124            <!-- 4.5 stars -->125            <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#d8a83c" d="M12 2l2.9 5.9 6.5.9-4.7 4.5 1.1 6.5L12 17l-5.8 3.8 1.1-6.5-4.7-4.5 6.5-.9z"/></svg>126            <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#d8a83c" d="M12 2l2.9 5.9 6.5.9-4.7 4.5 1.1 6.5L12 17l-5.8 3.8 1.1-6.5-4.7-4.5 6.5-.9z"/></svg>127            <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#d8a83c" d="M12 2l2.9 5.9 6.5.9-4.7 4.5 1.1 6.5L12 17l-5.8 3.8 1.1-6.5-4.7-4.5 6.5-.9z"/></svg>128            <svg width="28" height="28" viewBox="0 0 24 24"><path fill="#d8a83c" d="M12 2l2.9 5.9 6.5.9-4.7 4.5 1.1 6.5L12 17l-5.8 3.8 1.1-6.5-4.7-4.5 6.5-.9z"/></svg>129            <svg width="28" height="28" viewBox="0 0 24 24">130              <defs><clipPath id="half"><rect x="0" y="0" width="12" height="24"/></clipPath></defs>131              <path fill="#d8a83c" clip-path="url(#half)" d="M12 2l2.9 5.9 6.5.9-4.7 4.5 1.1 6.5L12 17l-5.8 3.8 1.1-6.5-4.7-4.5 6.5-.9z"/>132              <path d="M12 2l2.9 5.9 6.5.9-4.7 4.5 1.1 6.5L12 17l-5.8 3.8 1.1-6.5-4.7-4.5 6.5-.9z" fill="none" stroke="#d8a83c" stroke-width="2"/>133            </svg>134          </div>135          <div class="rating-text">4.6</div>136          <div class="count">143,827</div>137        </div>138 139        <div class="badge-line">140          <div class="badge">#1 Best Seller</div>141          <div class="category">in Two-Hour Education &amp; Reference Short Reads</div>142        </div>143 144        <div class="price">$14.99</div>145        <div class="buy-note" style="color:#cfcfcf;">Buy on Amazon.com</div>146 147        <div class="warning">This app does not support purchasing Kindle books. To buy, visit Amazon.com/ebooks.</div>148      </div>149    </div>150 151    <div class="btn btn-primary">ADD TO LIST</div>152    <div class="btn btn-disabled">DOWNLOAD SAMPLE</div>153 154    <div class="tabs">155      <div class="tab-active">BOOK OVERVIEW</div>156      <div>DESCRIPTION</div>157      <div>EDITORIAL REVIEWS</div>158    </div>159    <div class="divider"></div>160 161    <div class="paragraphs">162      A special 25th anniversary edition of the extraordinary international bestseller, including a new Foreword by Paulo Coelho.<br><br>163      Combining magic, mysticism, wisdom and wonder into an inspiring tale of self-discovery, The Alchemist has become a modern classic, selling millions of copies around the world and transforming the lives of countless readers across generations.<br><br>164      Paulo Coelho's masterpiece tells the mystical story of a young shepherd's journey and the lessons discovered along the way.165    </div>166  </div>167 168  <!-- System overlay dialog -->169  <div class="overlay">170    <div class="dialog">171      <div class="dialog-title">Allow USB debugging?</div>172      <div class="dialog-text">173        The computer's RSA key fingerprint is:<br>174        0D:3C:F8:B2:92:B6:95:EC:68:76:23:16:6D:C B:00:B9175      </div>176      <div class="checkbox-row">177        <div class="checkbox"></div>178        <div>Always allow from this computer</div>179      </div>180      <div class="dialog-actions">181        <div class="link muted">Cancel</div>182        <div class="link">Allow</div>183      </div>184    </div>185  </div>186 187</div>188</body>189</html>