GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Settings UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #121212; color: #ECECEC;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 100px;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 36px; font-size: 38px; color: #EDEDED;19  }20  .status-icons { display: flex; align-items: center; gap: 26px; }21  .icon { width: 36px; height: 36px; }22 23  /* App bar */24  .app-bar {25    position: absolute; top: 100px; left: 0; width: 100%; height: 180px;26    display: flex; align-items: center; padding: 0 36px;27  }28  .app-left { display: flex; align-items: center; gap: 24px; }29  .app-title { font-size: 64px; font-weight: 500; color: #FAFAFA; }30  .menu { margin-left: auto; }31  .kebab { width: 40px; height: 80px; display: flex; align-items: center; justify-content: center; }32 33  /* Content */34  .content { position: absolute; top: 280px; left: 0; width: 100%; padding: 0 36px; }35  .list-section { margin-bottom: 36px; }36  .list-item {37    display: flex; align-items: center; height: 110px;38    font-size: 46px; color: #E0E0E0;39  }40  .list-dot { width: 48px; height: 48px; border-radius: 50%; margin-right: 32px; flex: 0 0 auto; }41  .divider { height: 1px; background: #2A2A2A; width: calc(100% + 72px); margin-left: -36px; }42  .email-header { color: #A6ADB3; font-size: 34px; margin: 40px 0 16px; }43  .section-label { color: #9AA0A6; font-size: 34px; margin: 40px 0 8px; }44 45  /* Gesture bar */46  .bottom-gesture {47    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);48    width: 360px; height: 14px; background: #E0E0E0; border-radius: 8px; opacity: 0.85;49  }50</style>51</head>52<body>53<div id="render-target">54  <!-- Status bar -->55  <div class="status-bar">56    <div class="time">6:33</div>57    <div class="status-icons">58      <!-- Wi-Fi -->59      <svg class="icon" viewBox="0 0 24 24" fill="#ECECEC" aria-hidden="true">60        <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-6.3-6.3 1.4 1.4A8 8 0 0 1 12 14a8 8 0 0 1 4.9 1.7l1.4-1.4A10 10 0 0 0 12 12a10 10 0 0 0-6.3 1.7zM2 9.7l1.4 1.4A14 14 0 0 1 12 8c3.8 0 7.3 1.5 9.6 4.1l1.4-1.4A16 16 0 0 0 12 6 16 16 0 0 0 2 9.7z"/>61      </svg>62      <!-- Battery -->63      <svg class="icon" viewBox="0 0 24 24" fill="#ECECEC" aria-hidden="true">64        <path d="M16 6h2v2h-2V6zM3 8c0-1.1.9-2 2-2h9c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V8zm2 0h9v8H5V8z"/>65      </svg>66    </div>67  </div>68 69  <!-- App bar -->70  <div class="app-bar">71    <div class="app-left">72      <!-- Back arrow -->73      <svg width="48" height="48" viewBox="0 0 24 24" fill="#ECECEC" aria-hidden="true">74        <path d="M15.5 19 8.5 12l7-7-1.5-1.5L5.5 12l8.5 8.5z"/>75      </svg>76      <div class="app-title">Settings</div>77    </div>78    <div class="menu">79      <!-- Kebab menu -->80      <svg class="kebab" viewBox="0 0 24 24" fill="#ECECEC" aria-hidden="true">81        <circle cx="12" cy="5" r="2"/>82        <circle cx="12" cy="12" r="2"/>83        <circle cx="12" cy="19" r="2"/>84      </svg>85    </div>86  </div>87 88  <!-- Content -->89  <div class="content">90    <div class="list-section">91      <div class="list-item">General</div>92      <div class="list-item">Events from Gmail</div>93    </div>94 95    <div class="divider"></div>96 97    <div class="email-header">dbwscratch.test.id5@gmail.com</div>98    <div class="list-item">99      <div class="list-dot" style="background:#6EA7DA;"></div>100      <div>Events</div>101    </div>102    <div class="list-item">103      <div class="list-dot" style="background:#8B86F9;"></div>104      <div>Tasks</div>105    </div>106 107    <div class="divider" style="margin-top:20px;"></div>108 109    <div class="email-header">julesdupont205@gmail.com</div>110    <div class="list-item">111      <div class="list-dot" style="background:#6EA7DA;"></div>112      <div>Events</div>113    </div>114    <div class="list-item">115      <div class="list-dot" style="background:#8B86F9;"></div>116      <div>Tasks</div>117    </div>118 119    <div class="divider" style="margin-top:20px;"></div>120 121    <div class="section-label">More</div>122    <div class="list-item">123      <div class="list-dot" style="background:#7BC38C;"></div>124      <div>Birthdays</div>125    </div>126    <div class="list-item">127      <div class="list-dot" style="background:#5FA59B;"></div>128      <div>Holidays</div>129    </div>130  </div>131 132  <!-- Gesture bar -->133  <div class="bottom-gesture"></div>134</div>135</body>136</html>