GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Alarm UI Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#1c1f23;11  }12 13  /* Header */14  .blue-header { position:relative; width:100%; height:420px; background:#2166d7; color:#fff; }15  .status-bar { height:90px; display:flex; align-items:center; justify-content:space-between; padding:0 36px; }16  .time-section { display:flex; align-items:center; gap:20px; }17  .time-section .time { font-size:46px; font-weight:700; letter-spacing:1px; }18  .squares { display:flex; gap:10px; }19  .square-icon { width:42px; height:42px; border:2px solid rgba(255,255,255,0.85); display:flex; align-items:center; justify-content:center; font-size:18px; border-radius:4px; }20  .right-icons { display:flex; align-items:center; gap:26px; opacity:0.95; }21 22  .ad-banner {23    margin:8px 24px; height:140px;24    background:#E0E0E0; border:1px solid #BDBDBD;25    display:flex; align-items:center; justify-content:center;26    color:#757575; font-size:30px; letter-spacing:0.3px;27  }28 29  .title-row { height:170px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; }30  .title-left { display:flex; align-items:center; gap:22px; }31  .title-text { font-size:64px; font-weight:700; }32  .title-right { display:flex; align-items:center; gap:28px; }33 34  /* Content area */35  .content { position:absolute; left:0; right:0; top:420px; bottom:0; }36 37  .alarm-card {38    width:1000px; margin:40px auto 0; padding:40px;39    background:#2a2d31; color:#fff; border-radius:24px;40    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06), 0 6px 16px rgba(0,0,0,0.45);41    position:relative;42  }43  .card-top { display:flex; align-items:center; justify-content:space-between; }44  .time-text { font-size:96px; font-weight:800; letter-spacing:1px; }45  .dismiss { display:flex; align-items:center; gap:14px; color:#3d7bff; font-size:42px; }46  .toggle {47    position:absolute; top:40px; right:40px;48    width:170px; height:80px; border-radius:40px; background:#317dff;49    display:flex; align-items:center; justify-content:flex-end; padding-right:10px;50    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);51  }52  .knob { width:64px; height:64px; background:#fff; border-radius:32px; box-shadow:0 2px 6px rgba(0,0,0,0.3); }53  .days { margin-top:22px; display:flex; gap:32px; color:#3d7bff; font-size:32px; }54 55  /* Floating action button */56  .fab {57    position:absolute; right:60px; bottom:540px;58    width:160px; height:160px; border-radius:80px; background:#2f84ff;59    display:flex; align-items:center; justify-content:center;60    color:#fff; font-size:120px; font-weight:800;61    box-shadow:0 18px 28px rgba(0,0,0,0.45);62  }63 64  /* Bottom ad */65  .bottom-ad {66    position:absolute; left:0; bottom:220px; width:100%; height:190px;67    background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;68    display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px;69  }70 71  /* Bottom navigation */72  .navbar {73    position:absolute; left:0; bottom:0; width:100%; height:200px;74    background:#232629; display:flex; align-items:center; justify-content:space-around;75    color:#9aa0a6;76  }77  .nav-item { width:25%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }78  .nav-item span { font-size:34px; }79  .nav-item.active { color:#3d7bff; }80 81  .gesture { position:absolute; left:50%; transform:translateX(-50%); bottom:10px; width:260px; height:12px; background:#ffffff; border-radius:6px; opacity:0.85; }82</style>83</head>84<body>85<div id="render-target">86 87  <div class="blue-header">88    <div class="status-bar">89      <div class="time-section">90        <div class="time">12:26</div>91        <div class="squares">92          <div class="square-icon">TH</div>93          <div class="square-icon">TOI</div>94          <div class="square-icon">TOI</div>95        </div>96      </div>97      <div class="right-icons">98        <!-- Location -->99        <svg width="32" height="32" viewBox="0 0 24 24">100          <path d="M12 2c3.3 0 6 2.7 6 6 0 5-6 12-6 12S6 13 6 8c0-3.3 2.7-6 6-6z" fill="none" stroke="#fff" stroke-width="2"/>101          <circle cx="12" cy="8" r="2" fill="#fff"/>102        </svg>103        <!-- WiFi -->104        <svg width="32" height="32" viewBox="0 0 24 24">105          <path d="M2 9c5-4 15-4 20 0M5 12c4-3 10-3 14 0M8 15c3-2 7-2 10 0" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>106          <circle cx="12" cy="18" r="2" fill="#fff"/>107        </svg>108        <!-- Battery -->109        <svg width="36" height="32" viewBox="0 0 28 20">110          <rect x="2" y="3" width="20" height="14" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>111          <rect x="4" y="5" width="14" height="10" fill="#fff"/>112          <rect x="22" y="7" width="4" height="6" rx="1" fill="#fff"/>113        </svg>114      </div>115    </div>116 117    <div class="ad-banner">118      [IMG: Ad banner - Colours by Kohler]119    </div>120 121    <div class="title-row">122      <div class="title-left">123        <!-- Hexagon/settings icon -->124        <svg width="62" height="62" viewBox="0 0 24 24">125          <path d="M12 2l7 4v8l-7 4-7-4V6z" fill="none" stroke="#ffffff" stroke-width="2"/>126        </svg>127        <div class="title-text">Alarm</div>128      </div>129      <div class="title-right">130        <!-- Gem icon -->131        <svg width="54" height="54" viewBox="0 0 24 24">132          <path d="M12 2l6 5-6 15-6-15z" fill="#ffc74d" stroke="#e0a500" stroke-width="1"/>133          <path d="M6 7h12" stroke="#e0a500" stroke-width="1"/>134        </svg>135        <!-- Moon icon -->136        <svg width="54" height="54" viewBox="0 0 24 24">137          <path d="M13 2a9 9 0 0 0 0 20 9 9 0 0 1-6-3.5 9 9 0 0 1 6-16.5z" fill="none" stroke="#ffffff" stroke-width="2"/>138        </svg>139      </div>140    </div>141  </div>142 143  <div class="content">144    <div class="alarm-card">145      <div class="card-top">146        <div class="time-text">09:21 AM</div>147        <div class="dismiss">148          <!-- Bell icon -->149          <svg width="44" height="44" viewBox="0 0 24 24">150            <path d="M12 21h8M6 17h16c-1-3-1-6-6-7 0-2-2-3-4-3s-4 1-4 3c-5 1-5 4-6 7z" fill="none" stroke="#3d7bff" stroke-width="2" stroke-linecap="round"/>151          </svg>152          <span>Dismiss</span>153        </div>154        <div class="toggle"><div class="knob"></div></div>155      </div>156      <div class="days">157        <div>M</div><div>Tu</div><div>W</div><div>Th</div><div>F</div><div>Sa</div><div>Su</div>158      </div>159    </div>160 161    <div class="fab">+</div>162 163    <div class="bottom-ad">[IMG: Ad banner - Booking.com]</div>164 165    <div class="navbar">166      <div class="nav-item">167        <!-- Globe icon -->168        <svg width="48" height="48" viewBox="0 0 24 24">169          <circle cx="12" cy="12" r="10" fill="none" stroke="#9aa0a6" stroke-width="2"/>170          <path d="M2 12h20M12 2v20" stroke="#9aa0a6" stroke-width="2"/>171        </svg>172        <span>World Clock</span>173      </div>174      <div class="nav-item active">175        <!-- Alarm clock icon -->176        <svg width="48" height="48" viewBox="0 0 24 24">177          <circle cx="12" cy="13" r="8" fill="none" stroke="#3d7bff" stroke-width="2"/>178          <path d="M12 13l4 3M6 4l3 2M18 4l-3 2" stroke="#3d7bff" stroke-width="2" stroke-linecap="round"/>179        </svg>180        <span>Alarm</span>181      </div>182      <div class="nav-item">183        <!-- Timer icon -->184        <svg width="48" height="48" viewBox="0 0 24 24">185          <rect x="8" y="2" width="8" height="3" fill="#9aa0a6"/>186          <circle cx="12" cy="14" r="8" fill="none" stroke="#9aa0a6" stroke-width="2"/>187          <path d="M12 14l4-2" stroke="#9aa0a6" stroke-width="2" stroke-linecap="round"/>188        </svg>189        <span>Timer</span>190      </div>191      <div class="nav-item">192        <!-- Stopwatch icon -->193        <svg width="48" height="48" viewBox="0 0 24 24">194          <rect x="10" y="2" width="4" height="3" fill="#9aa0a6"/>195          <circle cx="12" cy="14" r="8" fill="none" stroke="#9aa0a6" stroke-width="2"/>196          <path d="M12 14l-3 4" stroke="#9aa0a6" stroke-width="2" stroke-linecap="round"/>197        </svg>198        <span>Stop Watch</span>199      </div>200    </div>201 202    <div class="gesture"></div>203  </div>204 205</div>206</body>207</html>