GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Learn Screen</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8 9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F3F5F7;15  }16 17  /* Top status bar */18  .statusbar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 150px;24    background: #2F3338;25  }26  .statusbar .time {27    position: absolute;28    left: 32px;29    top: 0;30    height: 150px;31    line-height: 150px;32    color: #FFFFFF;33    font-weight: 600;34    font-size: 46px;35    letter-spacing: 0.5px;36  }37  .status-icons {38    position: absolute;39    right: 32px;40    top: 50%;41    transform: translateY(-50%);42    display: flex;43    gap: 30px;44    align-items: center;45  }46 47  /* Page heading */48  .heading {49    position: absolute;50    top: 220px;51    left: 40px;52    font-size: 96px;53    font-weight: 800;54    color: #111111;55  }56 57  /* Settings gear icon */58  .gear {59    position: absolute;60    top: 230px;61    right: 48px;62    width: 70px;63    height: 70px;64  }65 66  /* Center loader */67  .loader {68    position: absolute;69    top: 1100px;70    left: 50%;71    transform: translateX(-50%);72    width: 140px;73    height: 140px;74    border-radius: 50%;75    border: 16px solid rgba(61, 102, 194, 0.25);76    border-top-color: #3D66C2;77    animation: spin 1s linear infinite;78  }79  @keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }80 81  /* Bottom navigation */82  .nav {83    position: absolute;84    bottom: 0;85    left: 0;86    width: 100%;87    height: 220px;88    background: #F7F8FA;89    border-top: 2px solid #E1E5EA;90    display: flex;91    align-items: center;92    justify-content: space-around;93  }94  .nav-item {95    text-align: center;96    color: #8A8F96;97  }98  .nav-item svg { width: 72px; height: 72px; }99  .nav-item .label { font-size: 42px; margin-top: 16px; }100  .nav-item.active { color: #3D66C2; }101 102  /* Home indicator */103  .home-indicator {104    position: absolute;105    bottom: 22px;106    left: 50%;107    transform: translateX(-50%);108    width: 420px;109    height: 12px;110    background: rgba(0,0,0,0.85);111    border-radius: 8px;112  }113</style>114</head>115<body>116<div id="render-target">117 118  <!-- Status Bar -->119  <div class="statusbar">120    <div class="time">8:10</div>121    <div class="status-icons">122      <!-- Wi-Fi icon -->123      <svg viewBox="0 0 24 24" width="60" height="60">124        <path d="M12 18.5c-.9 0-1.6.7-1.6 1.6S11.1 21.7 12 21.7s1.6-.7 1.6-1.6-.7-1.6-1.6-1.6zm-6-5.2c3.5-3.4 8.5-3.4 12 0l1.5-1.5c-4.3-4.1-10.7-4.1-15 0l1.5 1.5zm3.3 3.3c2.7-2.6 6.6-2.6 9.3 0l1.4-1.3c-3.4-3.3-8.7-3.3-12 0l1.3 1.3z" fill="#fff"/>125      </svg>126      <!-- Battery with bolt -->127      <svg viewBox="0 0 40 24" width="70" height="50">128        <rect x="1" y="3" width="32" height="18" rx="3" ry="3" fill="none" stroke="#fff" stroke-width="2"/>129        <rect x="34" y="9" width="5" height="6" fill="#fff"/>130        <path d="M18 6l-6 7h5l-1 5 6-7h-5l1-5z" fill="#fff"/>131      </svg>132    </div>133  </div>134 135  <!-- Screen Title -->136  <div class="heading">Learn</div>137 138  <!-- Settings Gear Icon -->139  <svg class="gear" viewBox="0 0 24 24">140    <circle cx="12" cy="12" r="3.5" fill="none" stroke="#8A8F96" stroke-width="2"/>141    <path d="M12 2.7l2 1 .7 2.2 2.3.8 1.5 2-1.5 2 1.5 2-1.5 2-2.3.8-.7 2.2-2 1-2-1-.7-2.2-2.3-.8-1.5-2 1.5-2-1.5-2 1.5-2 2.3-.8.7-2.2 2-1z" fill="none" stroke="#8A8F96" stroke-width="2" stroke-linejoin="round"/>142  </svg>143 144  <!-- Loading Spinner -->145  <div class="loader"></div>146 147  <!-- Bottom Navigation -->148  <div class="nav">149    <div class="nav-item">150      <svg viewBox="0 0 24 24">151        <circle cx="11" cy="11" r="7" stroke="#9AA0A6" stroke-width="2" fill="none"/>152        <path d="M20 20l-4.2-4.2" stroke="#9AA0A6" stroke-width="2" stroke-linecap="round"/>153      </svg>154      <div class="label">Explore</div>155    </div>156 157    <div class="nav-item active">158      <svg viewBox="0 0 24 24">159        <path d="M3 5h9v14H3z" fill="none" stroke="#3D66C2" stroke-width="2"/>160        <path d="M12 5h9v14h-9z" fill="none" stroke="#3D66C2" stroke-width="2"/>161        <path d="M3 9h18" stroke="#3D66C2" stroke-width="2"/>162      </svg>163      <div class="label">Learn</div>164    </div>165 166    <div class="nav-item">167      <svg viewBox="0 0 24 24">168        <circle cx="12" cy="8" r="4" stroke="#9AA0A6" stroke-width="2" fill="none"/>169        <path d="M4 21c1.8-4 6-5.5 8-5.5s6.2 1.5 8 5.5" stroke="#9AA0A6" stroke-width="2" fill="none" stroke-linecap="round"/>170      </svg>171      <div class="label">Profile</div>172    </div>173  </div>174 175  <!-- Home indicator -->176  <div class="home-indicator"></div>177</div>178</body>179</html>