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>Basic geometry and measurement</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F1F2F4;15  }16 17  /* Header */18  .header {19    position: relative;20    width: 100%;21    height: 460px;22    background: #0C2447; /* deep navy */23    color: #fff;24    box-sizing: border-box;25    padding: 140px 48px 40px 48px;26  }27  .back-btn {28    position: absolute;29    top: 92px;30    left: 28px;31    width: 72px;32    height: 72px;33    display: flex;34    align-items: center;35    justify-content: center;36    opacity: 0.95;37  }38  .category {39    font-size: 38px;40    color: #A9B9CF;41    margin-bottom: 8px;42    letter-spacing: 0.2px;43  }44  .title {45    font-size: 64px;46    font-weight: 800;47    line-height: 1.18;48    max-width: 940px;49  }50 51  /* Content */52  .content {53    position: absolute;54    top: 460px;55    left: 0;56    right: 0;57    bottom: 310px; /* space for tab bar + safe area */58    background: #EEEEF0;59  }60 61  /* Spinner */62  .spinner {63    position: absolute;64    left: 50%;65    top: 54%;66    width: 240px;67    height: 240px;68    transform: translate(-50%, -50%);69    border-radius: 50%;70    border: 22px solid #D5D7DA;71    border-left-color: transparent;72    border-bottom-color: transparent;73    animation: spin 1.2s linear infinite;74    opacity: 0.9;75  }76  @keyframes spin {77    to { transform: translate(-50%, -50%) rotate(360deg); }78  }79 80  /* Bottom navigation */81  .tabbar {82    position: absolute;83    left: 0;84    right: 0;85    bottom: 120px; /* keep space for home indicator zone */86    height: 190px;87    background: #FFFFFF;88    border-top: 1px solid #E5E7EB;89    display: flex;90    align-items: center;91    justify-content: space-around;92  }93  .tab {94    display: flex;95    flex-direction: column;96    align-items: center;97    gap: 18px;98  }99  .tab svg {100    width: 72px;101    height: 72px;102  }103  .tab .label {104    font-size: 36px;105    color: #9AA0A6;106  }107  .tab.active .label {108    color: #1572FF;109    font-weight: 600;110  }111  .tab .icon-outline {112    stroke: #A1A6AD;113  }114  .tab.active .icon-outline {115    stroke: #1572FF;116  }117 118  /* Safe area / home indicator */119  .safe-area {120    position: absolute;121    left: 0;122    right: 0;123    bottom: 0;124    height: 120px;125    background: #000;126    display: flex;127    align-items: center;128    justify-content: center;129  }130  .home-pill {131    width: 240px;132    height: 14px;133    background: #E5E7EB;134    border-radius: 10px;135    opacity: 0.9;136  }137</style>138</head>139<body>140<div id="render-target">141 142  <!-- Header -->143  <div class="header">144    <div class="back-btn" aria-label="Back">145      <svg viewBox="0 0 24 24" fill="none">146        <path d="M15 19L8 12L15 5" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>147      </svg>148    </div>149    <div class="category">Math</div>150    <div class="title">Basic geometry and measurement</div>151  </div>152 153  <!-- Content area -->154  <div class="content">155    <div class="spinner" aria-hidden="true"></div>156  </div>157 158  <!-- Bottom navigation -->159  <div class="tabbar">160    <div class="tab">161      <svg viewBox="0 0 24 24" fill="none">162        <!-- Hexagon outline icon -->163        <path class="icon-outline" d="M8 3l8 0l4 5l0 8l-4 5l-8 0l-4-5l0-8l4-5z" stroke-width="1.6"/>164      </svg>165      <div class="label">Home</div>166    </div>167 168    <div class="tab active">169      <svg viewBox="0 0 24 24" fill="none">170        <!-- Search icon -->171        <circle cx="11" cy="11" r="6.5" class="icon-outline" stroke-width="2.2"/>172        <path d="M20 20l-4.2-4.2" class="icon-outline" stroke-width="2.2" stroke-linecap="round"/>173      </svg>174      <div class="label">Explore</div>175    </div>176 177    <div class="tab">178      <svg viewBox="0 0 24 24" fill="none">179        <!-- Bookmark icon -->180        <path class="icon-outline" d="M6 3h12v18l-6-3-6 3V3z" stroke-width="1.8" stroke-linejoin="round"/>181      </svg>182      <div class="label">Bookmarks</div>183    </div>184  </div>185 186  <!-- Safe area with home indicator -->187  <div class="safe-area">188    <div class="home-pill"></div>189  </div>190 191</div>192</body>193</html>