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>Events Settings UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #121212; color: #EAEAEA;12    font-family: Arial, Helvetica, sans-serif;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 96px; padding: 0 36px;19    display: flex; align-items: center; justify-content: space-between;20    color: #DCDCDC; font-size: 40px; letter-spacing: 0.5px;21  }22  .status-right { display: flex; align-items: center; gap: 28px; }23  .icon { width: 44px; height: 44px; fill: #DCDCDC; }24 25  /* App bar */26  .app-bar {27    position: absolute; top: 96px; left: 0; right: 0;28    height: 140px; border-bottom: 1px solid #232323;29    display: flex; align-items: center; justify-content: space-between;30    padding: 0 36px;31  }32  .app-left { display: flex; align-items: center; gap: 24px; }33  .title { font-size: 60px; font-weight: 600; color: #F1F1F1; }34 35  .menu-dots { display: grid; grid-template-rows: repeat(3, 12px); row-gap: 10px; }36  .menu-dots span {37    width: 12px; height: 12px; background: #DCDCDC; border-radius: 50%;38    display: block;39  }40 41  /* Content */42  .content {43    position: absolute; top: 236px; left: 0; right: 0; bottom: 0;44    padding: 0 36px;45  }46  .row {47    display: flex; align-items: center; gap: 36px;48    height: 160px; border-bottom: 1px solid #1E1E1E;49  }50  .color-dot {51    width: 64px; height: 64px; border-radius: 50%;52    background: #4D7FB8; /* Peacock-like blue */53  }54  .primary { font-size: 50px; font-weight: 600; color: #F5F5F5; }55  .secondary { font-size: 36px; color: #9BA3AA; margin-top: 10px; }56 57  .stack { display: flex; flex-direction: column; }58  .section-title {59    font-size: 38px; color: #A6A6A6; margin: 34px 0 10px 0;60  }61  .item-row {62    height: 140px; display: flex; align-items: center;63    border-bottom: 1px solid #1E1E1E; font-size: 46px; color: #EDEDED;64  }65  .item-row.subtle { color: #C7C7C7; }66 67  /* Bottom gesture bar */68  .gesture-bar {69    position: absolute; bottom: 36px; left: 50%;70    transform: translateX(-50%);71    width: 520px; height: 16px; background: #FFFFFF; border-radius: 8px; opacity: 0.85;72  }73</style>74</head>75<body>76<div id="render-target">77 78  <!-- Status bar -->79  <div class="status-bar">80    <div class="status-left">2:59</div>81    <div class="status-right">82      <!-- Wi‑Fi icon -->83      <svg class="icon" viewBox="0 0 24 24">84        <path d="M12 17a2 2 0 1 0 .001 4.001A2 2 0 0 0 12 17zm-6.6-6.2a12 12 0 0 1 13.2 0l-1.7 1.7a9.5 9.5 0 0 0-9.8 0l-1.7-1.7zm3.8 3.7a7 7 0 0 1 8.6 0l-1.7 1.7a4.8 4.8 0 0 0-5.2 0l-1.7-1.7z"/>85      </svg>86      <!-- Battery icon -->87      <svg class="icon" viewBox="0 0 24 24">88        <path d="M20 7h1v10h-1v2H4V5h16v2zm-2 0H6v10h12V7z"/>89      </svg>90    </div>91  </div>92 93  <!-- App bar -->94  <div class="app-bar">95    <div class="app-left">96      <!-- Back arrow -->97      <svg class="icon" viewBox="0 0 24 24">98        <path d="M15.5 19l-7-7 7-7 1.5 1.5L11 12l6 6-1.5 1z"/>99      </svg>100      <div class="title">Events</div>101    </div>102    <div class="menu-dots">103      <span></span><span></span><span></span>104    </div>105  </div>106 107  <!-- Content -->108  <div class="content">109 110    <!-- Color row -->111    <div class="row">112      <div class="color-dot"></div>113      <div class="stack">114        <div class="primary">Color</div>115        <div class="secondary">Peacock</div>116      </div>117    </div>118 119    <!-- Default notifications -->120    <div class="section-title">Default notifications</div>121    <div class="item-row">30 minutes before</div>122    <div class="item-row subtle">Add another notification</div>123 124    <!-- All-day events -->125    <div class="section-title">Default notifications for all-day events</div>126    <div class="item-row subtle">Add a notification</div>127 128  </div>129 130  <!-- Bottom gesture bar -->131  <div class="gesture-bar"></div>132 133</div>134</body>135</html>