GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, initial-scale=1.0" />6<title>Add Course - Modal</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff;12  }13 14  /* Status bar */15  .status-bar {16    position:absolute; top:0; left:0; right:0; height:120px; background:#000;17    color:#fff; padding:0 36px; display:flex; align-items:center; justify-content:space-between;18    font-weight:600; letter-spacing:1px;19  }20  .sb-left { font-size:42px; }21  .sb-right { display:flex; align-items:center; gap:26px; }22  .sb-icon {23    width:32px; height:32px; border-radius:50%; background:#fff; opacity:0.9;24  }25  .sb-signal {26    width:44px; height:28px; border:3px solid #fff; border-radius:6px; position:relative;27  }28  .sb-battery {29    width:44px; height:24px; border:3px solid #fff; border-radius:6px; position:relative;30  }31  .sb-battery::after {32    content:""; position:absolute; top:6px; right:-8px; width:6px; height:10px; background:#fff; border-radius:2px;33  }34 35  /* App bar */36  .app-bar {37    position:absolute; top:120px; left:0; right:0; height:150px; background:#ffffff;38    display:flex; align-items:center; justify-content:center; border-bottom:1px solid #eee;39  }40  .back-btn {41    position:absolute; left:28px; top:50%; transform:translateY(-50%); width:96px; height:96px; display:flex; align-items:center; justify-content:center;42  }43  .title {44    font-size:56px; color:#5f5068; font-weight:700;45  }46  .icon-arrow { width:44px; height:44px; fill:#b8a9c2; }47 48  /* List area */49  .content {50    position:absolute; top:270px; left:0; right:0; bottom:0; padding:26px 26px 140px;51    overflow:hidden;52  }53  .cards {54    position:absolute; top:0; left:0; right:0;55    padding:22px 26px 0;56  }57  .card {58    position:relative; height:330px; border-radius:28px; margin:24px 0; color:#fff; overflow:hidden;59    box-shadow:0 10px 18px rgba(0,0,0,0.15);60    display:flex; align-items:flex-start;61  }62  .card .shade {63    position:absolute; left:0; top:0; right:0; height:44%; background:rgba(255,255,255,0.08);64  }65  .card .info {66    position:relative; z-index:2; padding:36px; width:58%;67  }68  .card .course {69    font-size:64px; font-weight:700; line-height:1.1;70  }71  .flag {72    width:84px; height:84px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:14px;73    display:inline-flex; align-items:center; justify-content:center; color:#757575; font-size:28px; margin-right:16px;74  }75  .plus {76    position:absolute; left:28px; bottom:22px; font-size:88px; line-height:1; opacity:0.9;77  }78  .art {79    position:absolute; right:26px; top:26px; bottom:26px; width:42%;80    background:#E0E0E0; border:1px solid #BDBDBD; border-radius:22px; color:#757575;81    display:flex; align-items:center; justify-content:center; text-align:center; padding:10px; z-index:1;82  }83 84  .red { background:#c83737; }85  .blue { background:#274a7a; }86  .orange { background:#d59313; }87  .green { background:#678f7f; }88 89  /* Modal overlay */90  .overlay {91    position:absolute; inset:0; background:rgba(0,0,0,0.45);92  }93  .dialog {94    position:absolute; left:60px; right:60px; top:820px;95    background:#fff; border-radius:26px; box-shadow:0 14px 32px rgba(0,0,0,0.35); overflow:hidden;96  }97  .dialog .head {98    padding:38px 40px 10px; text-align:center; font-size:56px; font-weight:800; color:#222;99  }100  .dialog .msg {101    padding:10px 48px 36px; text-align:center; font-size:46px; line-height:1.3; color:#6b6272;102  }103  .dialog .actions {104    display:flex; border-top:1px solid #e5e5e5;105  }106  .dialog .btn {107    flex:1; height:146px; display:flex; align-items:center; justify-content:center;108    font-size:48px; font-weight:700; color:#c18a0c; background:#fff;109  }110  .dialog .btn + .btn { border-left:1px solid #e5e5e5; }111 112  /* Home indicator (gesture bar) */113  .home-indicator {114    position:absolute; bottom:26px; left:50%; transform:translateX(-50%);115    width:340px; height:12px; background:#000; opacity:0.2; border-radius:8px;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status Bar -->123  <div class="status-bar">124    <div class="sb-left">12:35</div>125    <div class="sb-right">126      <div class="sb-icon"></div>127      <div class="sb-icon"></div>128      <div class="sb-icon"></div>129      <div class="sb-icon"></div>130      <div class="sb-signal"></div>131      <div class="sb-battery"></div>132    </div>133  </div>134 135  <!-- App Bar -->136  <div class="app-bar">137    <div class="back-btn">138      <svg class="icon-arrow" viewBox="0 0 24 24">139        <path d="M15.5 19.5L8 12l7.5-7.5" stroke="#b8a9c2" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>140      </svg>141    </div>142    <div class="title">Add Course</div>143  </div>144 145  <!-- Content with cards -->146  <div class="content">147    <div class="cards">148 149      <div class="card red">150        <div class="shade"></div>151        <div class="info">152          <div>153            <span class="flag">[IMG: UK]</span>154            <span class="course">English<br>(British)</span>155          </div>156        </div>157        <div class="art">[IMG: British Guard & Big Ben]</div>158        <div class="plus">+</div>159      </div>160 161      <div class="card blue">162        <div class="shade"></div>163        <div class="info">164          <div>165            <span class="flag">[IMG: USA]</span>166            <span class="course">English<br>(American)</span>167          </div>168        </div>169        <div class="art">[IMG: Statue of Liberty & Clouds]</div>170        <div class="plus">+</div>171      </div>172 173      <div class="card orange">174        <div class="shade"></div>175        <div class="info">176          <div>177            <span class="flag">[IMG: Arab League]</span>178            <span class="course">Arabic</span>179          </div>180        </div>181        <div class="art">[IMG: Bedouin & Camel]</div>182        <div class="plus">+</div>183      </div>184 185      <div class="card green">186        <div class="shade"></div>187        <div class="info">188          <div>189            <span class="flag">[IMG: Bulgaria]</span>190            <span class="course">Bulgarian</span>191          </div>192        </div>193        <div class="art">[IMG: Folk Costume & Cathedral]</div>194        <div class="plus">+</div>195      </div>196 197    </div>198  </div>199 200  <!-- Modal -->201  <div class="overlay"></div>202  <div class="dialog">203    <div class="head">German</div>204    <div class="msg">Do you want to add this course?</div>205    <div class="actions">206      <div class="btn">Cancel</div>207      <div class="btn">Add</div>208    </div>209  </div>210 211  <div class="home-indicator"></div>212</div>213</body>214</html>