GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Clock UI Mock</title>5<style>6  body{margin:0;padding:0;background:transparent;font-family:Arial, Helvetica, sans-serif;color:#f0e6dd;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background: radial-gradient(1400px 800px at 50% -200px,#2a201a,#1b1411);10    border-radius:40px;11  }12  .statusbar{13    height:90px;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;color:#e9dfd6;14  }15  .left-head{display:flex;align-items:center;gap:16px;font-size:38px;font-weight:600;}16  .round-ico{width:44px;height:44px;border-radius:50%;background:#2f241d;display:flex;align-items:center;justify-content:center;}17  .sig{display:flex;gap:18px;align-items:center;}18  .mini{19    width:22px;height:22px;border-radius:4px;background:#e7dccf;opacity:.9;20  }21 22  .section{padding:18px 28px 0 28px;}23  .panel{24    background:#231a15;border-radius:36px;padding:26px;margin-bottom:26px;25    box-shadow:0 12px 24px rgba(0,0,0,.2) inset;26  }27 28  .now-alarm{background:#6a431b;border-radius:32px;padding:28px;position:relative;}29  .now-alarm .hdr{display:flex;align-items:center;gap:16px;font-size:42px;font-weight:700;margin-bottom:10px;}30  .now-alarm .sub{font-size:38px;opacity:.95;margin-bottom:24px;}31  .chip-row{display:flex;gap:28px;}32  .chip{33    padding:22px 40px;background:#fff;color:#2a1a10;border-radius:60px;34    font-size:40px;font-weight:700;35    box-shadow:0 6px 10px rgba(0,0,0,.25);36  }37  .chev{38    position:absolute;right:22px;top:22px;width:68px;height:68px;border-radius:50%;39    background:#7b5427;display:flex;align-items:center;justify-content:center;color:#e9d2c0;font-weight:900;40  }41 42  .row-title{display:flex;align-items:center;justify-content:space-between;padding:18px 8px 6px 12px;}43  .row-title span{font-size:44px;font-weight:700;color:#e9dfd6;}44  .switch{width:160px;height:80px;background:#6d461c;border-radius:50px;position:relative;}45  .switch .knob{46    position:absolute;top:10px;right:12px;width:60px;height:60px;background:#f6d1b3;border-radius:50%;47    box-shadow:0 2px 0 rgba(0,0,0,.3) inset;48  }49 50  .alarm-card{position:relative;background:#1f1712;border-radius:36px;padding:30px;margin:18px 0 26px 0;}51  .alarm-card .caret{52    position:absolute;right:24px;top:24px;width:64px;height:64px;border-radius:50%;background:#4f3a2a;53    display:flex;align-items:center;justify-content:center;color:#d8c2b2;font-weight:900;54  }55  .title{font-size:44px;color:#d9cabc;margin-bottom:18px;}56  .time{font-size:170px;line-height:1;font-weight:900;letter-spacing:2px;}57  .ampm{font-size:70px;margin-left:16px;font-weight:800;vertical-align:top;}58  .repeat{font-size:44px;margin-top:16px;color:#d2c6ba;opacity:.95;}59  .toggle-wrap{display:flex;justify-content:flex-end;margin-top:18px;}60  .switch.small{transform:scale(.9);transform-origin:right center;}61 62  /* Floating Add Button */63  .fab{64    position:absolute;left:410px;bottom:430px;width:270px;height:270px;border-radius:50%;65    background:#ffbe86;display:flex;align-items:center;justify-content:center;66    color:#6d3f18;font-size:140px;font-weight:900;box-shadow:0 16px 26px rgba(0,0,0,.3);67  }68 69  /* Bottom navigation */70  .bottom-nav{71    position:absolute;bottom:0;left:0;width:100%;height:200px;background:#221913;72    display:flex;align-items:center;justify-content:space-around;padding-bottom:16px;73    box-shadow:0 -8px 16px rgba(0,0,0,.35) inset;74  }75  .nav-item{display:flex;flex-direction:column;align-items:center;gap:16px;color:#d7c8bc;font-size:36px;}76  .nav-ico{width:66px;height:66px;border-radius:50%;border:3px solid #d7c8bc;position:relative;}77  .nav-item.active .nav-ico{background:#3a2a20;border-color:#ffe2c8;}78  .nav-item.active{color:#ffe2c8;font-weight:700;}79  /* Simple icons using pseudo shapes */80  .clock-face:before{81    content:"";position:absolute;left:50%;top:50%;width:6px;height:24px;background:#d7c8bc;transform:translate(-50%,-50%);82  }83  .clock-face:after{84    content:"";position:absolute;left:50%;top:50%;width:22px;height:6px;background:#d7c8bc;transform:translate(-50%,-50%);85  }86  .timer-ico:after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;border:6px solid #d7c8bc;border-radius:50%;transform:translate(-50%,-50%);}87  .stopwatch-ico:after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;border:6px solid #d7c8bc;border-radius:50%;transform:translate(-50%,-50%);}88  .bed-ico:after{content:"";position:absolute;left:18px;top:36px;width:36px;height:18px;background:#d7c8bc;border-radius:4px;}89  .alarm-ico:after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;border:6px solid #d7c8bc;border-radius:50%;transform:translate(-50%,-50%);}90</style>91</head>92<body>93<div id="render-target">94 95  <!-- Status/Header -->96  <div class="statusbar">97    <div class="left-head">98      <div class="round-ico">99        <!-- small alarm glyph -->100        <svg width="28" height="28" viewBox="0 0 24 24" fill="#e8dccf">101          <circle cx="12" cy="13" r="6" stroke="#e8dccf" stroke-width="2" fill="none"></circle>102          <path d="M12 13 L12 9 M12 13 L15 15" stroke="#e8dccf" stroke-width="2" stroke-linecap="round"></path>103        </svg>104      </div>105      <div>Clock</div>106    </div>107    <div class="sig">108      <div class="mini"></div>109      <div class="mini"></div>110      <div class="mini"></div>111    </div>112  </div>113 114  <div class="section">115    <!-- Big alert panel -->116    <div class="panel">117      <div class="now-alarm">118        <div class="chev">⌄</div>119        <div class="hdr">120          <div class="round-ico" style="background:#7b5427;">121            <svg width="30" height="30" viewBox="0 0 24 24" fill="#f2e3d5">122              <circle cx="12" cy="13" r="6" stroke="#f2e3d5" stroke-width="2" fill="none"></circle>123              <path d="M12 13 L12 9 M12 13 L15 15" stroke="#f2e3d5" stroke-width="2" stroke-linecap="round"></path>124            </svg>125          </div>126          <div>Alarm</div>127        </div>128        <div class="sub">Fri 12:20 AM</div>129        <div class="chip-row">130          <div class="chip">Snooze</div>131          <div class="chip">Stop</div>132        </div>133      </div>134    </div>135 136    <!-- Today row -->137    <div class="panel" style="padding:20px 26px;">138      <div class="row-title">139        <span>Today</span>140        <div class="switch"><div class="knob"></div></div>141      </div>142    </div>143 144    <!-- Alarm cards -->145    <div class="alarm-card">146      <div class="caret">⌄</div>147      <div class="title">time to walk</div>148      <div>149        <span class="time">7:15</span><span class="ampm">AM</span>150      </div>151      <div class="repeat">Every day</div>152      <div class="toggle-wrap">153        <div class="switch small"><div class="knob"></div></div>154      </div>155    </div>156 157    <div class="alarm-card">158      <div class="caret">⌄</div>159      <div class="title">Office time</div>160      <div>161        <span class="time">8:00</span><span class="ampm">AM</span>162      </div>163      <div class="repeat">Mon, Tue, Wed, Thu, Fri</div>164      <div class="toggle-wrap">165        <div class="switch small"><div class="knob"></div></div>166      </div>167    </div>168 169    <div class="alarm-card" style="padding-bottom:120px;">170      <div class="caret">⌄</div>171      <div class="title">Gym time</div>172      <div>173        <span class="time">8:00</span><span class="ampm">PM</span>174      </div>175      <div class="repeat">Mon, Tue, Wed, Thu</div>176      <div class="toggle-wrap">177        <div class="switch small"><div class="knob"></div></div>178      </div>179    </div>180  </div>181 182  <!-- Floating Add Button -->183  <div class="fab">+</div>184 185  <!-- Bottom navigation -->186  <div class="bottom-nav">187    <div class="nav-item active">188      <div class="nav-ico alarm-ico"></div>189      <div>Alarm</div>190    </div>191    <div class="nav-item">192      <div class="nav-ico clock-face"></div>193      <div>Clock</div>194    </div>195    <div class="nav-item">196      <div class="nav-ico timer-ico"></div>197      <div>Timer</div>198    </div>199    <div class="nav-item">200      <div class="nav-ico stopwatch-ico"></div>201      <div>Stopwatch</div>202    </div>203    <div class="nav-item">204      <div class="nav-ico bed-ico"></div>205      <div>Bedtime</div>206    </div>207  </div>208 209</div>210</body>211</html>