Skip to content
Open

code #225

Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions about.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: antiquewhite;
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis accusantium reprehenderit cumque provident. Quae, in eius tempora id, excepturi nobis, quis exercitationem laudantium placeat obcaecati sunt. Facere, atque deserunt aspernatur pariatur, laudantium dolorum, obcaecati commodi facilis nihil eveniet culpa illo nesciunt aliquid aut mollitia distinctio fugiat adipisci at officiis. In, qui saepe, debitis commodi facere voluptas libero magni odit deserunt, magnam quod voluptatibus consequatur quibusdam excepturi provident dicta consequuntur impedit eligendi blanditiis fugiat labore at voluptatum ducimus quis. Fugiat quas ab, magnam, consequuntur debitis, illum beatae assumenda nemo recusandae vitae aperiam molestiae quod dolorem? Cupiditate velit repellat provident, deleniti natus exercitationem. Necessitatibus aliquid at dicta? Facere deserunt fuga, fugiat soluta consequuntur voluptate pariatur quae libero itaque voluptates iure est nisi tempore voluptatum et omnis accusamus? Et, debitis aliquid maxime ipsam rerum minima laudantium blanditiis ad, aspernatur quis ratione quo dolorem odio repudiandae itaque autem commodi distinctio. Perferendis facere magni ipsa aut. Aut nesciunt nihil, magnam dolorem odit architecto quidem nobis odio. Nisi, quos! Sed voluptas rem cum amet labore aspernatur sapiente cupiditate dignissimos eum tempore odit distinctio quo expedita dolores doloremque earum tenetur, modi repudiandae dolorem facere, maxime error pariatur? Odit molestias neque nisi accusantium accusamus non nulla facilis possimus sed atque dolorum illum, voluptatibus reiciendis iste quia vero ut amet. Repellat reprehenderit omnis quaerat hic nemo reiciendis odio earum vero sunt accusamus et ad, eveniet quibusdam itaque repellendus nisi alias qui, voluptates iure aspernatur quia eos ipsa tempora. Sint, modi quibusdam rem dicta repellendus exercitationem debitis, sapiente molestiae laborum aperiam quaerat, perferendis veniam delectus dolorem corporis. Dolor deserunt alias tempora commodi a quisquam minus molestiae iure quibusdam voluptate. Perferendis fugit quibusdam soluta! Suscipit quae provident maiores dolor amet nulla at autem? Vel non debitis amet, voluptatum dolore est? Vel vitae sapiente quis aspernatur eveniet inventore ipsum. Dolor autem nam iusto aperiam quam officia eligendi a porro, consectetur similique error architecto fugiat optio libero expedita. Delectus quod magni, doloremque dolorem odit ea a tenetur? Eveniet laudantium quae, recusandae quaerat hic ipsa accusamus nam quos ullam soluta commodi, eius sequi vitae ad dolor voluptatibus labore laborum temporibus asperiores harum error cumque aspernatur voluptas adipisci. Consequuntur tenetur alias distinctio porro enim assumenda eligendi illo culpa excepturi eius, atque nostrum ipsam voluptatibus possimus quidem beatae reprehenderit aliquid quas rem tempore fugit corrupti! Harum eius consequuntur rerum perferendis alias nobis cum magnam amet deserunt sequi reiciendis blanditiis nemo fugiat nesciunt libero placeat in velit consequatur soluta ex, sapiente culpa itaque quidem perspiciatis. Molestiae corrupti excepturi non culpa enim ab, qui magni animi odit in harum commodi sint optio quo minus? Consequatur at molestias ipsum vitae voluptates, nobis asperiores eos similique, unde esse, id quo magni ipsa inventore cumque nulla quis. Animi quasi recusandae laborum assumenda quis iusto rerum fuga cumque doloribus cum voluptatum, provident aliquam blanditiis earum fugiat nisi maiores praesentium voluptatibus suscipit sequi quaerat. Fuga itaque ipsam atque recusandae enim, beatae quo accusamus laudantium aliquam. Accusamus, nam maiores ut, eligendi, placeat commodi similique eius porro quaerat ullam laborum corrupti pariatur ex non dicta.
</body>
</html>
98 changes: 98 additions & 0 deletions alarm.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
outline: none;

}

body, html {
height: 100%;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}

.container {
text-align: center;
background-color: #fff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1 {
font-size: 2.5em;
margin-bottom: 20px;
}

.buttons {
display: flex;
flex-direction: row;
justify-content: center;
gap: 20px;
margin-top: 20px;
}

button {
padding: 10px 20px;
font-size: 1em;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
cursor: pointer;
transition: background-color 0.3s;
outline: none;
}

button:hover {
background-color: #45a049;
}

.time-container {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}

.time-box {
background-color: #4CAF50;
color: white;
font-size: 1em;
padding: 10px;
width: 120px;
text-align: center;
border-radius: 10px;
}

.time-box input, .time-box select {
width: 100%;
padding: 5px;
margin-top: 5px;
}

.back-button {
margin-top: 30px;
padding: 10px 20px;
font-size: 1em;
border: none;
border-radius: 5px;
background-color: #ff4c4c;
color: white;
cursor: pointer;
transition: background-color 0.3s;
outline: none;
}

.back-button:hover {
background-color: #e04343;
}

.hidden {
display: none;
}
175 changes: 175 additions & 0 deletions alarm.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RR Watch</title>
<link rel="stylesheet" href="alarm.css">
</head>
<body>
<div id="mainPage" class="container">
<h1>Welcome To RR Watch</h1>
<div class="buttons">
<button id="timeBtn">Time</button>
<button id="alarmBtn">Alarm</button>
<button id="stopwatchBtn">StopWatch</button>
</div>
</div>

<div id="timePage" class="container hidden">
<h2>Current Time</h2>
<div class="time-container">
<div class="time-box">
<label for="hour">Hour</label>
<div id="hour">00</div>
</div>
<div class="time-box">
<label for="minute">Minute</label>
<div id="minute">00</div>
</div>
<div class="time-box">
<label for="second">Second</label>
<div id="second">00</div>
</div>
</div>
<button id="backBtn" class="back-button">Back</button>
</div>

<div id="stopwatchPage" class="container hidden">
<h2>Stopwatch</h2>
<div class="time-container">
<div class="time-box">
<label for="stopwatchHour">Hour</label>
<div id="stopwatchHour">00</div>
</div>
<div class="time-box">
<label for="stopwatchMinute">Minute</label>
<div id="stopwatchMinute">00</div>
</div>
<div class="time-box">
<label for="stopwatchSecond">Second</label>
<div id="stopwatchSecond">00</div>
</div>
</div>
<div class="buttons">
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<button id="resetBtn">Reset</button>
</div>
<button id="stopwatchBackBtn" class="back-button">Back</button>
</div>

<div id="alarmPage" class="container hidden">
<h2>Set Alarm</h2>
<div class="time-container">
<div class="time-box">
<label for="alarmHour">Hour</label>
<select id="alarmHour">
<!-- Hours from 1 to 24 -->
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
</select>
</div>
<div class="time-box">
<label for="alarmMinute">Minute</label>
<select id="alarmMinute">
<!-- Minutes from 00 to 59 -->
<option value="0">00</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
</div>
<div class="time-box">
<label for="alarmAmPm">AM/PM</label>
<select id="alarmAmPm">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
</div>
</div>
<button id="setAlarmBtn">Set Alarm</button>
<button id="alarmBackBtn" class="back-button">Back</button>
</div>

<script src="alarm.js"></script>
</body>
</html>
Loading