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>World history - Explore</title>7<style>8  body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#1b1f24; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff;12  }13 14  /* Header */15  .header {16    position: relative;17    background:#0e2a56;18    height:520px;19    padding:80px 56px 40px 56px; /* include status area */20    color:#fff;21  }22  .back-btn {23    position:absolute; left:24px; top:36px; width:120px; height:120px; display:flex; align-items:center; justify-content:center;24  }25  .back-btn svg { width:44px; height:44px; fill:#ffffff; }26  .breadcrumb {27    font-size:44px; color:#a9b7cc; letter-spacing:0.2px; margin-top:60px;28  }29  .title {30    font-size:96px; font-weight:800; margin-top:16px; line-height:1.05;31  }32 33  .content {34    position:absolute; left:0; right:0; top:520px; bottom:0;35    background:#ffffff;36  }37 38  /* Card: Up next */39  .card {40    margin:24px 32px;41    background:#ffffff;42    border:1px solid #e6e6e6;43    border-radius:20px;44    overflow:hidden;45    box-shadow:0 1px 0 rgba(0,0,0,0.02);46  }47  .card .accent {48    height:8px;49    background:#2c6fff;50  }51  .card-body {52    display:flex; align-items:center;53    padding:32px;54    gap:28px;55  }56  .avatar {57    width:140px; height:140px; border-radius:50%;58    background:#E0E0E0; border:1px solid #BDBDBD;59    display:flex; align-items:center; justify-content:center;60    color:#757575; font-size:28px; text-align:center; padding:10px;61  }62  .card-text .sub {63    color:#2c6fff; font-size:42px; margin-bottom:8px;64  }65  .card-text .main {66    color:#0f1721; font-size:60px; font-weight:800;67  }68 69  /* Topic list */70  .list {71    padding:8px 40px 0 40px;72  }73  .topic-item {74    font-size:44px; color:#7c7f85;75    padding:24px 0;76    border-top:1px solid #f1f1f1;77  }78  .topic-item:first-child { border-top:none; }79 80  /* Divider between sections */81  .section-divider {82    height:24px; background:#f6f7f9; border-top:1px solid #ececec; border-bottom:1px solid #ececec;83    margin:28px 0;84  }85 86  /* Second section header card (no blue accent) */87  .card.simple { overflow:visible; }88  .card.simple .card-body { padding:32px; }89  .card.simple .avatar { width:130px; height:130px; }90  .card.simple .card-text .main { font-size:56px; font-weight:800; }91 92  /* Bottom tab bar */93  .tabbar {94    position:absolute; left:0; right:0; bottom:44px;95    height:160px; border-top:1px solid #e6e6e6; background:#ffffff;96    display:flex; align-items:center; justify-content:space-around;97  }98  .tab {99    width:33.33%; text-align:center; color:#9298a1;100    font-size:34px;101  }102  .tab .icon { display:block; margin:0 auto 10px; width:56px; height:56px; }103  .tab.active { color:#2c6fff; }104  .home-indicator {105    position:absolute; bottom:12px; left:50%; transform:translateX(-50%);106    width:320px; height:12px; background:#d1d1d1; border-radius:8px;107  }108</style>109</head>110<body>111<div id="render-target">112  <!-- Header -->113  <div class="header">114    <div class="back-btn" aria-label="Back">115      <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8 1.4-1.4L10.3 12l6.6-6.6L15.5 4z"/></svg>116    </div>117    <div class="breadcrumb">Arts and humanities</div>118    <div class="title">World history</div>119  </div>120 121  <div class="content">122    <!-- Up next card -->123    <div class="card">124      <div class="accent"></div>125      <div class="card-body">126        <div class="avatar">[IMG: Column icon]</div>127        <div class="card-text">128          <div class="sub">Up next for you</div>129          <div class="main">Beginnings - 600 BCE</div>130        </div>131      </div>132    </div>133 134    <!-- List of topics -->135    <div class="list">136      <div class="topic-item">The origin of humans and early human societies</div>137      <div class="topic-item">The Neolithic Revolution and the birth of agriculture</div>138      <div class="topic-item">Ancient Mesopotamia</div>139      <div class="topic-item">Ancient Egypt</div>140      <div class="topic-item">Ancient art and artifacts</div>141      <div class="topic-item">Ancient India</div>142      <div class="topic-item">Shang China</div>143      <div class="topic-item">Ancient Americas</div>144      <div class="topic-item">Human innovation and the environment</div>145    </div>146 147    <div class="section-divider"></div>148 149    <!-- Second card header -->150    <div class="card simple">151      <div class="card-body">152        <div class="avatar">[IMG: Fresco artwork]</div>153        <div class="card-text">154          <div class="main">600 BCE - 600 CE Second-Wave Civilizations</div>155        </div>156      </div>157    </div>158 159    <!-- Second list -->160    <div class="list" style="padding-bottom:240px;">161      <div class="topic-item">Ancient Persia</div>162      <div class="topic-item">Classical Greece</div>163      <div class="topic-item">The rise and fall of empires</div>164      <div class="topic-item">Empire of Alexander the Great</div>165      <div class="topic-item">Rise of Rome</div>166      <div class="topic-item">From Roman Republic to Roman Empire</div>167    </div>168 169    <!-- Bottom navigation -->170    <div class="tabbar">171      <div class="tab">172        <svg class="icon" viewBox="0 0 24 24">173          <path fill="#9298a1" d="M12 3l8 6v10a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1V9l8-6z" fill-opacity="0" />174          <path d="M12 4.2l7 5.2V19h-4v-6H9v6H5V9.4l7-5.2z" fill="none" stroke="#9298a1" stroke-width="1.6"/>175        </svg>176        Home177      </div>178      <div class="tab active">179        <svg class="icon" viewBox="0 0 24 24">180          <circle cx="11" cy="11" r="7" stroke="#2c6fff" stroke-width="2" fill="none"/>181          <path d="M16.5 16.5L21 21" stroke="#2c6fff" stroke-width="2" stroke-linecap="round"/>182        </svg>183        Explore184      </div>185      <div class="tab">186        <svg class="icon" viewBox="0 0 24 24">187          <path d="M6 3h12v18l-6-4-6 4V3z" fill="none" stroke="#9298a1" stroke-width="2" stroke-linejoin="round"/>188        </svg>189        Bookmarks190      </div>191    </div>192    <div class="home-indicator"></div>193  </div>194</div>195</body>196</html>