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; }7  #render-target {8    width: 1080px; height: 2400px; position: relative; overflow: hidden;9    background: #1d191c; border-radius: 36px;10  }11  /* Header */12  .top-header {13    position: absolute; left: 36px; top: 30px; height: 70px; display: flex; align-items: center; gap: 18px; color: #EDE7EA;14  }15  .top-header .label { font-size: 40px; font-weight: 600; letter-spacing: 0.5px; }16  .status-icons { position: absolute; right: 26px; top: 32px; display: flex; gap: 18px; align-items: center; }17  .status-dot { width: 22px; height: 22px; border-radius: 50%; background: #dddddd1a; border: 1px solid #72656b; }18  /* Alarm card */19  .alarm-card {20    position: absolute; left: 50px; top: 150px; width: 980px; height: 330px;21    background: #5e3345; border-radius: 52px; box-shadow: 0 18px 60px rgba(0,0,0,0.45);22    color: #efe6ea; padding: 38px 40px;23  }24  .alarm-top {25    display: flex; align-items: center; justify-content: space-between;26  }27  .alarm-info { display: flex; align-items: center; gap: 22px; }28  .alarm-title { font-size: 44px; font-weight: 700; }29  .alarm-time { font-size: 32px; margin-top: 6px; opacity: 0.95; }30  .chip-btn {31    height: 100px; padding: 0 40px; border-radius: 60px; background: #fff; color: #3a2430;32    display: inline-flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; box-shadow: 0 6px 10px rgba(0,0,0,0.25);33  }34  .alarm-actions { margin-top: 34px; display: flex; gap: 40px; }35  .arrow-btn {36    width: 84px; height: 84px; border-radius: 42px; background: #76515f; display: flex; align-items: center; justify-content: center;37  }38  /* Stopwatch ring */39  .ring {40    position: absolute; left: 110px; top: 620px; width: 860px; height: 860px; border-radius: 50%;41    border: 26px solid #4b4247;42    display: flex; align-items: center; justify-content: center; color: #f5eef1;43  }44  .ring .big { font-size: 220px; font-weight: 700; line-height: 1; }45  .ring .small { font-size: 160px; font-weight: 600; line-height: 0.9; margin-top: -30px; }46  /* Play button */47  .play-btn {48    position: absolute; left: 380px; bottom: 310px; width: 320px; height: 320px; border-radius: 50%;49    background: #f6b3c8; display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 60px rgba(0,0,0,0.45);50  }51  .play-triangle { width: 0; height: 0; border-left: 48px solid #602c3c; border-top: 30px solid transparent; border-bottom: 30px solid transparent; }52  /* Bottom nav */53  .bottom-nav {54    position: absolute; left: 0; bottom: 0; width: 1080px; height: 250px; padding-top: 38px;55    background: #1d191c;56    border-top: 2px solid #3a3337;57    display: flex; justify-content: space-around; align-items: flex-start;58    color: #d9d4d7;59  }60  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; }61  .nav-item .label { font-size: 34px; }62  .nav-selected {63    background: #4b3a41; padding: 22px 38px; border-radius: 40px; color: #fff;64    display: flex; flex-direction: column; align-items: center; gap: 16px;65  }66  /* Utility */67  .icon-wrap { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }68  svg { display: block; }69</style>70</head>71<body>72<div id="render-target">73 74  <!-- Header -->75  <div class="top-header">76    <div class="icon-wrap">77      <svg width="56" height="56" viewBox="0 0 56 56">78        <circle cx="28" cy="30" r="16" fill="none" stroke="#EDE7EA" stroke-width="4"></circle>79        <path d="M28 30 L28 20 M28 30 L36 34" stroke="#EDE7EA" stroke-width="4" stroke-linecap="round"></path>80        <path d="M16 8 L22 14" stroke="#EDE7EA" stroke-width="4" stroke-linecap="round"></path>81        <path d="M40 8 L34 14" stroke="#EDE7EA" stroke-width="4" stroke-linecap="round"></path>82      </svg>83    </div>84    <div class="label">Clock</div>85  </div>86  <div class="status-icons">87    <div class="status-dot"></div>88    <div class="status-dot"></div>89    <div class="status-dot"></div>90  </div>91 92  <!-- Alarm Card -->93  <div class="alarm-card">94    <div class="alarm-top">95      <div class="alarm-info">96        <div class="icon-wrap">97          <svg width="64" height="64" viewBox="0 0 64 64">98            <circle cx="32" cy="36" r="18" fill="none" stroke="#F3E9EC" stroke-width="4"></circle>99            <path d="M32 36 L32 26 M32 36 L40 40" stroke="#F3E9EC" stroke-width="4" stroke-linecap="round"></path>100            <path d="M16 12 L24 18" stroke="#F3E9EC" stroke-width="4" stroke-linecap="round"></path>101            <path d="M48 12 L40 18" stroke="#F3E9EC" stroke-width="4" stroke-linecap="round"></path>102          </svg>103        </div>104        <div>105          <div class="alarm-title">Work</div>106          <div class="alarm-time">Fri 9:20 PM</div>107        </div>108      </div>109      <div class="arrow-btn">110        <svg width="36" height="36" viewBox="0 0 36 36">111          <path d="M8 14 L18 24 L28 14" fill="none" stroke="#EDE7EA" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>112        </svg>113      </div>114    </div>115    <div class="alarm-actions">116      <div class="chip-btn">Snooze</div>117      <div class="chip-btn">Stop</div>118    </div>119  </div>120 121  <!-- Stopwatch Ring -->122  <div class="ring">123    <div style="text-align:center;">124      <div class="big">00</div>125      <div class="small">00</div>126    </div>127  </div>128 129  <!-- Play Button -->130  <div class="play-btn">131    <div class="play-triangle"></div>132  </div>133 134  <!-- Bottom Navigation -->135  <div class="bottom-nav">136    <div class="nav-item">137      <div class="icon-wrap">138        <svg width="60" height="60" viewBox="0 0 60 60">139          <circle cx="30" cy="32" r="16" fill="none" stroke="#d9d4d7" stroke-width="4"></circle>140          <path d="M30 32 L30 22 M30 32 L38 36" stroke="#d9d4d7" stroke-width="4" stroke-linecap="round"></path>141        </svg>142      </div>143      <div class="label">Alarm</div>144    </div>145    <div class="nav-item">146      <div class="icon-wrap">147        <svg width="60" height="60" viewBox="0 0 60 60">148          <circle cx="30" cy="30" r="18" fill="none" stroke="#d9d4d7" stroke-width="4"></circle>149          <path d="M30 30 L30 20 M30 30 L40 30" stroke="#d9d4d7" stroke-width="4" stroke-linecap="round"></path>150        </svg>151      </div>152      <div class="label">Clock</div>153    </div>154    <div class="nav-item">155      <div class="icon-wrap">156        <svg width="60" height="60" viewBox="0 0 60 60">157          <path d="M18 16 H42 L32 28 L42 40 H18 L28 28 Z" fill="none" stroke="#d9d4d7" stroke-width="4" stroke-linejoin="round"></path>158        </svg>159      </div>160      <div class="label">Timer</div>161    </div>162    <div class="nav-selected">163      <div class="icon-wrap">164        <svg width="60" height="60" viewBox="0 0 60 60">165          <circle cx="30" cy="34" r="16" fill="none" stroke="#ffffff" stroke-width="4"></circle>166          <path d="M30 20 L36 14" stroke="#ffffff" stroke-width="4" stroke-linecap="round"></path>167          <path d="M30 34 L38 38" stroke="#ffffff" stroke-width="4" stroke-linecap="round"></path>168        </svg>169      </div>170      <div class="label">Stopwatch</div>171    </div>172    <div class="nav-item">173      <div class="icon-wrap">174        <svg width="60" height="60" viewBox="0 0 60 60">175          <rect x="12" y="28" width="18" height="12" fill="none" stroke="#d9d4d7" stroke-width="4"></rect>176          <rect x="32" y="30" width="16" height="10" fill="none" stroke="#d9d4d7" stroke-width="4"></rect>177          <path d="M10 40 H50" stroke="#d9d4d7" stroke-width="4"></path>178        </svg>179      </div>180      <div class="label">Bedtime</div>181    </div>182  </div>183 184</div>185</body>186</html>