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<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #ffffff; border-radius: 0;11    box-sizing: border-box;12  }13  /* Status bar */14  .status-bar {15    height: 120px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between;16    color: #000; font-size: 40px;17  }18  .status-left { display: flex; align-items: center; gap: 24px; }19  .status-right { display: flex; align-items: center; gap: 24px; }20  /* App bar */21  .app-bar {22    height: 160px; display: flex; align-items: center; gap: 24px;23    padding: 0 32px 0 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.08);24  }25  .back-btn {26    width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;27  }28  .app-title {29    font-size: 60px; font-weight: 600; color: #222;30  }31  /* Content */32  .content { padding: 40px; }33  .summary-card {34    background: #D9E1EA; border-radius: 28px; padding: 30px; display: flex; align-items: center; gap: 30px;35  }36  .avatar {37    width: 160px; height: 160px; border-radius: 50%;38    background: #E0E0E0; border: 1px solid #BDBDBD;39    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; text-align: center; padding: 10px;40  }41  .card-text { display: flex; flex-direction: column; }42  .card-sub {43    font-size: 38px; color: #61707D;44  }45  .card-date {46    font-size: 58px; font-weight: 700; color: #1f1f1f; margin-top: 12px;47  }48  .section-title {49    margin-top: 48px; font-size: 44px; color: #666;50  }51  .days-row {52    margin-top: 24px; display: flex; align-items: flex-start; gap: 34px;53  }54  .day {55    width: 120px; display: flex; flex-direction: column; align-items: center; gap: 16px;56  }57  .circle {58    width: 100px; height: 100px; border-radius: 50%; background: #5E90F5; display: flex; align-items: center; justify-content: center;59  }60  .day-label { font-size: 34px; color: #808080; }61  .divider {62    height: 2px; background: #E3E3E3; margin: 36px 0;63  }64  .row {65    display: flex; align-items: center; justify-content: space-between; padding: 0 0;66  }67  .row .label { font-size: 44px; color: #7a7a7a; }68  .row .value { font-size: 56px; color: #9aa0a6; font-weight: 600; }69  .link {70    margin-top: 60px; text-align: center; color: #1976D2; font-size: 42px; font-weight: 600; letter-spacing: 0.5px;71  }72  /* Bottom button */73  .bottom-bar {74    position: absolute; left: 0; bottom: 0; width: 100%; height: 170px; background: #1976D2;75    display: flex; align-items: center; justify-content: center;76  }77  .bottom-bar .btn-text {78    color: #fff; font-size: 48px; font-weight: 700;79  }80</style>81</head>82<body>83<div id="render-target">84  <!-- Status bar -->85  <div class="status-bar">86    <div class="status-left">87      <span>5:46</span>88      <!-- simple status icons placeholders -->89      <span>◻︎</span><span>⬤</span><span>🔍</span><span>•</span>90    </div>91    <div class="status-right">92      <span>📶</span><span>📡</span><span>95%</span>93    </div>94  </div>95 96  <!-- App bar -->97  <div class="app-bar">98    <div class="back-btn">99      <svg width="64" height="64" viewBox="0 0 24 24">100        <path d="M15.5 4.5L7 12l8.5 7.5" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>101      </svg>102    </div>103    <div class="app-title">Your Plan summary</div>104  </div>105 106  <!-- Content -->107  <div class="content">108    <div class="summary-card">109      <div class="avatar">[IMG: City photo]</div>110      <div class="card-text">111        <div class="card-sub">You should be able to reach Beginner A1 by:</div>112        <div class="card-date">January 12, 2024</div>113      </div>114    </div>115 116    <div class="section-title">Days</div>117    <div class="days-row">118      <div class="day">119        <div class="circle">120          <svg width="56" height="56" viewBox="0 0 24 24">121            <circle cx="12" cy="12" r="0" fill="none"></circle>122            <path d="M5 12l4 4 10-10" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>123          </svg>124        </div>125        <div class="day-label">Mon</div>126      </div>127      <div class="day">128        <div class="circle">129          <svg width="56" height="56" viewBox="0 0 24 24">130            <path d="M5 12l4 4 10-10" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>131          </svg>132        </div>133        <div class="day-label">Tue</div>134      </div>135      <div class="day">136        <div class="circle">137          <svg width="56" height="56" viewBox="0 0 24 24">138            <path d="M5 12l4 4 10-10" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>139          </svg>140        </div>141        <div class="day-label">Wed</div>142      </div>143      <div class="day">144        <div class="circle">145          <svg width="56" height="56" viewBox="0 0 24 24">146            <path d="M5 12l4 4 10-10" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>147          </svg>148        </div>149        <div class="day-label">Thu</div>150      </div>151      <div class="day">152        <div class="circle">153          <svg width="56" height="56" viewBox="0 0 24 24">154            <path d="M5 12l4 4 10-10" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>155          </svg>156        </div>157        <div class="day-label">Fri</div>158      </div>159      <div class="day">160        <div class="circle">161          <svg width="56" height="56" viewBox="0 0 24 24">162            <path d="M5 12l4 4 10-10" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>163          </svg>164        </div>165        <div class="day-label">Sat</div>166      </div>167      <div class="day">168        <div class="circle">169          <svg width="56" height="56" viewBox="0 0 24 24">170            <path d="M5 12l4 4 10-10" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>171          </svg>172        </div>173        <div class="day-label">Sun</div>174      </div>175    </div>176 177    <div class="divider"></div>178 179    <div class="row">180      <div class="label">Time</div>181      <div class="value">11:00 AM</div>182    </div>183 184    <div class="divider"></div>185 186    <div class="row">187      <div class="label">Minutes / day</div>188      <div class="value">5</div>189    </div>190 191    <div class="divider"></div>192 193    <div class="link">EDIT YOUR STUDY PLAN</div>194  </div>195 196  <!-- Bottom action button -->197  <div class="bottom-bar">198    <div class="btn-text">Continue</div>199  </div>200</div>201</body>202</html>