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>Alarm Time Picker</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: #e0e0e0; border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,0.35);12  }13  /* Status bar */14  .status-bar {15    height: 110px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;16    color: #ffffff; font-size: 34px; letter-spacing: 1px;17  }18  .status-right { display: flex; align-items: center; gap: 28px; }19  /* App bar */20  .app-bar {21    height: 120px; display: flex; align-items: center; padding: 0 30px; color: #d0d0d0;22    border-bottom: 1px solid rgba(255,255,255,0.06);23  }24  .app-title { font-size: 46px; margin-left: 22px; }25  .app-actions { margin-left: auto; display: flex; align-items: center; gap: 26px; }26  /* Content area */27  .content { padding: 20px 30px; }28  .time-row {29    height: 240px; display: flex; align-items: center; padding: 0 10px 0 6px;30    border-bottom: 1px solid rgba(255,255,255,0.06);31  }32  .big-time { font-size: 140px; color: #7f7f7f; font-weight: 300; letter-spacing: 2px; }33  .time-suffix { font-size: 52px; color: #7f7f7f; margin-left: 14px; }34  .toggle { margin-left: auto; width: 128px; height: 72px; background: #303030; border-radius: 72px; position: relative; }35  .toggle::after {36    content: ""; position: absolute; top: 8px; left: 8px; width: 56px; height: 56px; background: #5a5a5a; border-radius: 50%;37  }38  .row { padding: 36px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }39  .row-title { color: #c7932a; font-size: 40px; margin-bottom: 12px; }40  .row-sub { color: #a5a5a5; font-size: 38px; }41  /* Bottom buttons in page */42  .page-actions {43    position: absolute; bottom: 200px; left: 30px; right: 30px;44    display: flex; justify-content: space-between; color: #c7932a; font-size: 42px;45  }46  /* Dialog overlay */47  .overlay {48    position: absolute; left: 0; top: 0; width: 100%; height: 100%;49    background: rgba(18,18,18,0.65);50  }51  .dialog {52    position: absolute; left: 50%; top: 980px; transform: translateX(-50%);53    width: 860px; background: #222; border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,0.7);54    border: 1px solid rgba(255,255,255,0.08);55  }56  .dialog-header {57    display: flex; justify-content: space-between; align-items: center;58    padding: 30px 32px 0 32px; color: #f0f0f0;59  }60  .typed-time { font-size: 80px; font-weight: 300; letter-spacing: 2px; color: #f5f5f5; }61  .pad {62    padding: 12px 32px 16px 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;63    align-items: center; justify-items: center;64  }65  .pad .num {66    width: 220px; height: 160px; display: flex; align-items: center; justify-content: center;67    font-size: 120px; color: #e8e8e8; font-weight: 300;68  }69  .pad .label { font-size: 66px; color: #696969; align-self: end; }70  .dialog-actions {71    display: flex; justify-content: space-between; align-items: center; padding: 24px 32px 36px 32px;72    font-size: 42px;73  }74  .cancel { color: #c7932a; }75  .ok { color: #6b6b6b; }76  /* Home indicator */77  .home-indicator {78    position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%);79    width: 240px; height: 12px; background: #e6e6e6; border-radius: 10px; opacity: 0.75;80  }81  /* Simple icon styles */82  .icon { width: 48px; height: 48px; }83  .icon-large { width: 56px; height: 56px; }84  .kebab { width: 10px; height: 44px; display: flex; flex-direction: column; justify-content: space-between; }85  .dot { width: 10px; height: 10px; background: #b0b0b0; border-radius: 50%; }86</style>87</head>88<body>89<div id="render-target">90 91  <!-- Status bar -->92  <div class="status-bar">93    <div>12:41</div>94    <div class="status-right">95      <span>66°</span>96      <!-- Simple circular icons to represent status items -->97      <svg class="icon" viewBox="0 0 24 24">98        <circle cx="12" cy="12" r="10" fill="#cfcfcf"></circle>99      </svg>100      <svg class="icon" viewBox="0 0 24 24">101        <circle cx="12" cy="12" r="2" fill="#cfcfcf"></circle>102      </svg>103      <svg class="icon" viewBox="0 0 24 24">104        <path d="M2 21h20L12 3z" fill="#cfcfcf"></path>105      </svg>106      <svg class="icon-large" viewBox="0 0 24 24">107        <path d="M3 7h18v10H3z" fill="none" stroke="#ffffff" stroke-width="2"></path>108        <rect x="5" y="9" width="14" height="6" fill="#ffffff"></rect>109      </svg>110    </div>111  </div>112 113  <!-- App bar -->114  <div class="app-bar">115    <!-- Back arrow -->116    <svg class="icon-large" viewBox="0 0 24 24">117      <path d="M15 6L9 12l6 6" fill="none" stroke="#d0d0d0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>118    </svg>119    <div class="app-title">Alarms</div>120    <div class="app-actions">121      <div class="kebab">122        <div class="dot"></div><div class="dot"></div><div class="dot"></div>123      </div>124    </div>125  </div>126 127  <!-- Content area -->128  <div class="content">129    <div class="time-row">130      <div class="big-time">12:40</div>131      <div class="time-suffix">PM</div>132      <div class="toggle"></div>133    </div>134 135    <div class="row">136      <div class="row-title">Repeat</div>137      <div class="row-sub">Never</div>138    </div>139    <div class="row">140      <div class="row-title">Ringtone</div>141      <div class="row-sub">Default</div>142    </div>143    <div class="row">144      <div class="row-title">Gentle</div>145      <div class="row-sub">Off</div>146    </div>147    <div class="row">148      <div class="row-title">Label</div>149      <div class="row-sub">-</div>150    </div>151  </div>152 153  <!-- Page footer actions -->154  <div class="page-actions">155    <div class="cancel">CANCEL</div>156    <div class="cancel" style="opacity:0.8;">OK</div>157  </div>158 159  <!-- Modal overlay: keypad time picker -->160  <div class="overlay"></div>161  <div class="dialog">162    <div class="dialog-header">163      <div class="typed-time">--:53--</div>164      <!-- Close icon -->165      <svg class="icon-large" viewBox="0 0 24 24">166        <rect x="3" y="3" width="18" height="18" rx="3" ry="3" fill="#d9d9d9"></rect>167        <path d="M8 8l8 8M16 8l-8 8" stroke="#333" stroke-width="2" stroke-linecap="round"></path>168      </svg>169    </div>170    <div class="pad">171      <div class="num">1</div><div class="num">2</div><div class="num">3</div>172      <div class="num">4</div><div class="num">5</div><div class="num">6</div>173      <div class="num">7</div><div class="num">8</div><div class="num">9</div>174      <div class="label">AM</div><div class="num">0</div><div class="label">PM</div>175    </div>176    <div class="dialog-actions">177      <div class="cancel">CANCEL</div>178      <div class="ok">OK</div>179    </div>180  </div>181 182  <!-- Home indicator -->183  <div class="home-indicator"></div>184 185</div>186</body>187</html>