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>Calendar Edit Mock</title>6<style>7  body{margin:0;padding:0;background:transparent;font-family:Roboto, Arial, Helvetica, sans-serif;}8  #render-target{9    width:1080px;height:2400px;position:relative;overflow:hidden;10    background:#121015;color:#EDE7F6;11  }12  /* status bar */13  .status-bar{14    height:96px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;15    color:#fff;opacity:.9;font-size:36px;letter-spacing:.5px;16  }17  .status-icons span{margin-left:22px;opacity:.9}18  /* header */19  .header{20    padding:28px 36px 18px 36px;border-bottom:1px solid rgba(255,255,255,.06);21  }22  .header-top{23    display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;24  }25  .back-btn{26    width:64px;height:64px;border-radius:32px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;27  }28  .back-btn svg{width:40px;height:40px;fill:#C7C0F4}29  .save-btn{30    background:#C9A8FF;color:#2E1D47;font-weight:700;border:none;border-radius:38px;31    padding:22px 34px;font-size:36px;32  }33  .title{34    font-size:64px;line-height:74px;font-weight:700;color:#F4F0FF;35  }36  /* content area */37  .content{padding-bottom:120px;}38  .section{border-bottom:1px solid rgba(255,255,255,.06);}39  .row{40    display:flex;align-items:center;justify-content:space-between;41    padding:32px 40px;font-size:38px;color:#E9E3FF;42  }43  .row .left{display:flex;align-items:center;gap:24px;}44  .icon-circle{45    width:64px;height:64px;border-radius:50%;background:#3A2D4B;display:flex;align-items:center;justify-content:center;46  }47  .icon-circle.small{width:52px;height:52px}48  .blue-dot{width:16px;height:16px;background:#4DB2FF;border-radius:50%;margin-right:12px}49  .email{color:#B8B0D8;font-size:34px;margin-top:8px}50  .label{color:#CFC8EE}51  .value{color:#EDE7F6}52  .switch{53    width:164px;height:86px;background:#292433;border-radius:48px;padding:10px;position:relative;border:2px solid #494159;54  }55  .switch .knob{56    width:66px;height:66px;border-radius:50%;background:#8E86A6;position:absolute;right:12px;top:9px;57  }58  .subtext{font-size:34px;color:#B8B0D8;margin-top:8px}59  /* avatar + calendar label */60  .account{61    padding:28px 40px 22px 40px;display:flex;align-items:flex-start;gap:24px;62  }63  .avatar{64    width:84px;height:84px;border-radius:50%;background:#EA8DA1;display:flex;align-items:center;justify-content:center;font-weight:700;color:#1C0F18;font-size:40px;65  }66  .calendar-meta .line{display:flex;align-items:center;gap:14px;color:#CFC8EE;font-size:40px}67  .timezone, .repeat{color:#CFC8EE}68  .button-outline{69    padding:18px 28px;border:2px solid #5B5471;border-radius:18px;color:#EDE7F6;background:transparent;font-size:34px;70  }71  .row.stack{flex-direction:column;align-items:flex-start}72  .link-block{73    padding:28px 40px 40px 112px;color:#EDE7F6;line-height:1.4;font-size:36px;74  }75  .location-pin{76    position:absolute;left:40px;margin-top:2px;width:56px;height:56px;border-radius:10px;background:#322946;display:flex;align-items:center;justify-content:center;77  }78  .location-pin svg{width:34px;height:34px;fill:#CFC8EE}79  .x-icon{80    width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;81  }82  .x-icon svg{width:40px;height:40px;fill:#B8B0D8}83  .thin-divider{height:1px;background:rgba(255,255,255,.06)}84</style>85</head>86<body>87<div id="render-target">88  <!-- Status Bar -->89  <div class="status-bar">90    <div>2:09</div>91    <div class="status-icons">92      <span>✉️</span>93      <span>📶</span>94      <span>🔋</span>95    </div>96  </div>97 98  <!-- Header -->99  <div class="header">100    <div class="header-top">101      <div class="back-btn" aria-label="Close">102        <svg viewBox="0 0 24 24"><path d="M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/></svg>103      </div>104      <button class="save-btn">Save</button>105    </div>106    <div class="title">Zoom meeting invitation - ABC</div>107  </div>108 109  <!-- Account / Calendar -->110  <div class="account section">111    <div class="avatar">C</div>112    <div class="calendar-meta">113      <div class="line">114        <span class="blue-dot"></span>115        <span>Events</span>116      </div>117      <div class="email">dbwscratch.test.id4@gmail.com</div>118    </div>119  </div>120 121  <div class="content">122 123    <!-- All-day toggle -->124    <div class="row section">125      <div class="left">126        <div class="icon-circle small">127          <svg viewBox="0 0 24 24" width="28" height="28">128            <path fill="#CFC8EE" d="M12 7a5 5 0 1 0 0 10A5 5 0 0 0 12 7zm0-5a1 1 0 0 1 1 1v2h-2V3a1 1 0 0 1 1-1zM3 11H1v2h2v-2zm20 0h-2v2h2v-2zM12 19h-1v2h2v-2h-1z"/>129          </svg>130        </div>131        <div class="label">All-day</div>132      </div>133      <div class="switch">134        <div class="knob"></div>135      </div>136    </div>137 138    <!-- Start date/time -->139    <div class="row section">140      <div class="left">141        <div class="icon-circle small">142          <svg viewBox="0 0 24 24" width="28" height="28">143            <path fill="#CFC8EE" d="M7 2v2H5a2 2 0 0 0-2 2v3h18V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm14 9H3v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9zM8 14h4v4H8v-4z"/>144          </svg>145        </div>146        <div>147          <div class="label">Wed, Jul 26, 2023</div>148        </div>149      </div>150      <div class="value">1:30 PM</div>151    </div>152 153    <!-- End date/time -->154    <div class="row section">155      <div class="left">156        <div class="icon-circle small">157          <svg viewBox="0 0 24 24" width="28" height="28">158            <path fill="#CFC8EE" d="M12 7a5 5 0 1 0 0 10A5 5 0 0 0 12 7zm1 2v3.6l2.6 1.5-.8 1.4L11 13V9h2z"/>159          </svg>160        </div>161        <div class="label">Wed, Jul 26, 2023</div>162      </div>163      <div class="value">2:00 PM</div>164    </div>165 166    <!-- Timezone -->167    <div class="row section">168      <div class="left">169        <div class="icon-circle small">170          <svg viewBox="0 0 24 24" width="28" height="28"><path fill="#CFC8EE" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 9h5v2h-7V6h2v5z"/></svg>171        </div>172        <div class="label">India Standard Time</div>173      </div>174      <div></div>175    </div>176 177    <!-- Repeat -->178    <div class="row section">179      <div class="left">180        <div class="icon-circle small">181          <svg viewBox="0 0 24 24" width="28" height="28"><path fill="#CFC8EE" d="M7 7h9V4l4 4-4 4V9H8a3 3 0 0 0-3 3 3 3 0 0 0 .5 1.6l-1.7 1A5 5 0 0 1 7 7zm10 10H8v3l-4-4 4-4v3h8a3 3 0 0 0 3-3c0-.6-.2-1.1-.5-1.6l1.7-1A5 5 0 0 1 17 17z"/></svg>182        </div>183        <div class="label">Does not repeat</div>184      </div>185    </div>186 187    <!-- Add people -->188    <div class="row section">189      <div class="left">190        <div class="icon-circle small">191          <svg viewBox="0 0 24 24" width="28" height="28"><path fill="#CFC8EE" d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm-7 8v-2a6 6 0 0 1 12 0v2H5z"/></svg>192        </div>193        <div class="label">Add people</div>194      </div>195      <button class="button-outline">View schedules</button>196    </div>197 198    <!-- Add video conferencing -->199    <div class="row section">200      <div class="left">201        <div class="icon-circle small">202          <svg viewBox="0 0 24 24" width="30" height="30"><path fill="#CFC8EE" d="M3 6h11a2 2 0 0 1 2 2v2l4-3v10l-4-3v2a2 2 0 0 1-2 2H3V6z"/></svg>203        </div>204        <div class="label">Add video conferencing</div>205      </div>206    </div>207 208    <!-- Location / link block (Zoom URL) -->209    <div class="section" style="position:relative;">210      <div class="location-pin">211        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>212      </div>213      <div class="link-block">214        https://us05web.zoom.us/j/83912965774?pwd=KK3Kn03sl2dDEcms1GNVUV8ahbl8w4.1215      </div>216    </div>217 218    <!-- Notification -->219    <div class="row section">220      <div class="left">221        <div class="icon-circle small">222          <svg viewBox="0 0 24 24" width="28" height="28"><path fill="#CFC8EE" d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zM18 16v-5a6 6 0 1 0-12 0v5L4 18v2h16v-2l-2-2z"/></svg>223        </div>224        <div class="label">15 minutes before</div>225      </div>226      <div class="x-icon">227        <svg viewBox="0 0 24 24"><path d="M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/></svg>228      </div>229    </div>230 231    <!-- Add notification hint (thin bar under) -->232    <div class="thin-divider"></div>233    <div class="row" style="padding-top:26px;padding-bottom:26px;color:#CFC8EE;">234      Add notification235    </div>236 237  </div>238</div>239</body>240</html>