GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Alarm UI Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#0f1717; color:#e9f3f3;10  }11 12  /* General */13  .pad { padding:0 48px; }14  .title { font-size:68px; font-weight:600; letter-spacing:0.5px; margin-top:20px; margin-bottom:16px; }15  .subtle { color:#b9c7c7; }16 17  /* Status bar */18  #status-bar { height:96px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; color:#e8ecec; font-size:34px; }19  .right-icons { display:flex; align-items:center; gap:20px; }20  .dot { width:10px; height:10px; background:#cfe5e5; border-radius:50%; display:inline-block; opacity:0.8; }21  .wifi, .battery { width:44px; height:28px; }22  .menu-btn { width:44px; height:44px; display:flex; align-items:center; justify-content:center; }23  .menu-btn svg circle { fill:#cfe5e5; }24 25  /* Cards */26  .cards { padding:0 32px; }27  .card {28    background:#131d1d; border-radius:36px;29    margin-bottom:26px;30    padding:34px 36px;31    position:relative;32    box-shadow: 0 6px 18px rgba(0,0,0,0.35) inset;33  }34  .card .chevron { position:absolute; right:28px; top:28px; opacity:0.85; }35  .label { font-size:34px; color:#d2dfdf; margin-bottom:10px; }36  .time-row { display:flex; align-items:flex-end; gap:18px; }37  .time { font-size:154px; font-weight:700; line-height:1; letter-spacing:1px; }38  .ampm { font-size:54px; font-weight:700; margin-bottom:18px; }39  .days { margin-top:18px; font-size:36px; color:#c1cece; }40  .toggle {41    position:absolute; right:36px; bottom:36px;42    width:160px; height:76px; background:#0c3a3a; border-radius:48px; box-shadow: inset 0 0 0 2px #0a2f2f;43  }44  .toggle.on { background:#165d5d; }45  .toggle .knob {46    position:absolute; top:8px; left:8px; width:60px; height:60px; background:#c9ffff; border-radius:50%;47    transition:left .2s;48    box-shadow: 0 2px 6px rgba(0,0,0,0.4);49  }50  .toggle.on .knob { left:92px; }51 52  /* Special elements on last card */53  .today { margin-top:16px; font-size:36px; color:#cde5e5; }54  .dismiss { margin-top:18px; font-size:36px; color:#8bd0d0; text-decoration:none; }55  .big-plus {56    position:absolute; right:260px; bottom:22px;57    width:230px; height:230px; border-radius:50%;58    background:#9fe6e6; display:flex; align-items:center; justify-content:center; color:#0f1717; font-size:120px; font-weight:700;59    box-shadow: 0 10px 22px rgba(0,0,0,0.35);60  }61 62  /* Bottom nav */63  .bottom-nav {64    position:absolute; bottom:0; left:0; width:100%; height:250px; background:#111b1b;65    border-top-left-radius:32px; border-top-right-radius:32px; box-shadow: 0 -6px 16px rgba(0,0,0,0.35) inset;66    display:flex; align-items:center; justify-content:space-around;67  }68  .nav-item { display:flex; flex-direction:column; align-items:center; gap:18px; color:#cfe5e5; }69  .nav-item .icon-wrap { width:92px; height:92px; border-radius:46px; background:#1a2626; display:flex; align-items:center; justify-content:center; }70  .nav-item.active .icon-wrap { background:#203c3c; }71  .nav-item span { font-size:34px; }72  /* gesture pill */73  .gesture {74    position:absolute; bottom:132px; left:50%; transform:translateX(-50%);75    width:460px; height:16px; border-radius:10px; background:#cfd8d8; opacity:0.6;76  }77</style>78</head>79<body>80<div id="render-target">81 82  <!-- Status Bar -->83  <div id="status-bar">84    <div style="display:flex; align-items:center; gap:20px;">85      <div>5:26</div>86      <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>87    </div>88    <div class="right-icons">89      <!-- simple wifi icon -->90      <svg class="wifi" viewBox="0 0 64 40">91        <path d="M6 12 C18 2,46 2,58 12" stroke="#e8ecec" stroke-width="6" fill="none"/>92        <path d="M14 20 C24 12,40 12,50 20" stroke="#e8ecec" stroke-width="6" fill="none"/>93        <circle cx="32" cy="28" r="4" fill="#e8ecec"/>94      </svg>95      <!-- battery -->96      <svg class="battery" viewBox="0 0 80 40">97        <rect x="2" y="8" width="64" height="24" rx="6" ry="6" stroke="#e8ecec" stroke-width="4" fill="none"/>98        <rect x="6" y="12" width="54" height="16" rx="4" fill="#e8ecec"/>99        <rect x="68" y="14" width="8" height="12" rx="2" fill="#e8ecec"/>100      </svg>101      <!-- menu dots -->102      <div class="menu-btn">103        <svg width="36" height="36" viewBox="0 0 36 36">104          <circle cx="18" cy="6" r="3"></circle>105          <circle cx="18" cy="18" r="3"></circle>106          <circle cx="18" cy="30" r="3"></circle>107        </svg>108      </div>109    </div>110  </div>111 112  <!-- Screen Title -->113  <div class="pad">114    <div class="title">Alarm</div>115  </div>116 117  <!-- Cards -->118  <div class="cards">119 120    <!-- Card 1 -->121    <div class="card">122      <div class="time-row">123        <div class="time">9:00</div>124        <div class="ampm">AM</div>125      </div>126      <div class="days">Mon, Tue, Wed, Thu, Fri</div>127      <div class="toggle on">128        <div class="knob"></div>129      </div>130    </div>131 132    <!-- Card 2 -->133    <div class="card">134      <div class="label">Lunch time</div>135      <svg class="chevron" width="44" height="44" viewBox="0 0 44 44">136        <path d="M10 16 L22 28 L34 16" stroke="#cfe5e5" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>137      </svg>138      <div class="time-row">139        <div class="time">12:00</div>140        <div class="ampm">PM</div>141      </div>142      <div class="days">Mon, Tue, Wed, Thu, Fri</div>143      <div class="toggle on"><div class="knob"></div></div>144    </div>145 146    <!-- Card 3 -->147    <div class="card">148      <div class="label">Logout from Work</div>149      <svg class="chevron" width="44" height="44" viewBox="0 0 44 44">150        <path d="M10 16 L22 28 L34 16" stroke="#cfe5e5" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>151      </svg>152      <div class="time-row">153        <div class="time">5:00</div>154        <div class="ampm">PM</div>155      </div>156      <div class="days">Mon, Tue, Wed, Thu, Fri</div>157      <div class="toggle on"><div class="knob"></div></div>158    </div>159 160    <!-- Card 4 -->161    <div class="card" style="padding-bottom:260px;">162      <div class="label">Dance performance meeting</div>163      <svg class="chevron" width="44" height="44" viewBox="0 0 44 44">164        <path d="M10 16 L22 28 L34 16" stroke="#cfe5e5" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>165      </svg>166      <div class="time-row">167        <div class="time">6:00</div>168        <div class="ampm">PM</div>169      </div>170      <div class="today">Today</div>171 172      <div class="big-plus">+</div>173 174      <a class="dismiss" href="#">Dismiss</a>175      <div class="toggle on"><div class="knob"></div></div>176    </div>177 178  </div>179 180  <!-- Bottom Navigation -->181  <div class="bottom-nav">182    <div class="nav-item active">183      <div class="icon-wrap">184        <!-- alarm clock icon -->185        <svg width="54" height="54" viewBox="0 0 54 54">186          <circle cx="27" cy="30" r="16" stroke="#cfe5e5" stroke-width="4" fill="none"/>187          <line x1="27" y1="30" x2="27" y2="20" stroke="#cfe5e5" stroke-width="4" stroke-linecap="round"/>188          <line x1="27" y1="30" x2="35" y2="34" stroke="#cfe5e5" stroke-width="4" stroke-linecap="round"/>189          <path d="M12 12 L18 18" stroke="#cfe5e5" stroke-width="4" stroke-linecap="round"/>190          <path d="M42 12 L36 18" stroke="#cfe5e5" stroke-width="4" stroke-linecap="round"/>191        </svg>192      </div>193      <span>Alarm</span>194    </div>195 196    <div class="nav-item">197      <div class="icon-wrap">198        <!-- clock icon -->199        <svg width="54" height="54" viewBox="0 0 54 54">200          <circle cx="27" cy="27" r="18" stroke="#cfe5e5" stroke-width="4" fill="none"/>201          <line x1="27" y1="27" x2="27" y2="16" stroke="#cfe5e5" stroke-width="4" stroke-linecap="round"/>202          <line x1="27" y1="27" x2="36" y2="27" stroke="#cfe5e5" stroke-width="4" stroke-linecap="round"/>203        </svg>204      </div>205      <span>Clock</span>206    </div>207 208    <div class="nav-item">209      <div class="icon-wrap">210        <!-- hourglass -->211        <svg width="54" height="54" viewBox="0 0 54 54">212          <path d="M16 10 H38 M16 44 H38 M18 12 Q27 22 36 12 M18 42 Q27 32 36 42" stroke="#cfe5e5" stroke-width="4" fill="none" stroke-linecap="round"/>213        </svg>214      </div>215      <span>Timer</span>216    </div>217 218    <div class="nav-item">219      <div class="icon-wrap">220        <!-- stopwatch -->221        <svg width="54" height="54" viewBox="0 0 54 54">222          <circle cx="27" cy="30" r="16" stroke="#cfe5e5" stroke-width="4" fill="none"/>223          <rect x="22" y="10" width="10" height="6" fill="#cfe5e5"/>224          <line x1="27" y1="30" x2="36" y2="26" stroke="#cfe5e5" stroke-width="4" stroke-linecap="round"/>225        </svg>226      </div>227      <span>Stopwatch</span>228    </div>229 230    <div class="nav-item">231      <div class="icon-wrap">232        <!-- bed icon -->233        <svg width="54" height="54" viewBox="0 0 54 54">234          <rect x="10" y="26" width="34" height="12" stroke="#cfe5e5" stroke-width="4" fill="none" rx="3"/>235          <rect x="10" y="20" width="14" height="6" fill="#cfe5e5"/>236        </svg>237      </div>238      <span>Bedtime</span>239    </div>240  </div>241 242  <div class="gesture"></div>243 244</div>245</body>246</html>