Skip to content

Commit

Permalink
nueva versión
Browse files Browse the repository at this point in the history
  • Loading branch information
deybis committed Apr 9, 2024
1 parent fc84323 commit 8da5f80
Show file tree
Hide file tree
Showing 9 changed files with 312 additions and 274 deletions.
4 changes: 4 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"editor.indentSize": "tabSize",
"editor.tabSize": 2
}
152 changes: 152 additions & 0 deletions css/app.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,152 @@
:root{
--color-1: #223;
--color-2: #334;
--color-3: #445;
--color-4: #556;
--text-color: #eee;
--transition-effect: 0.2s ease;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Block: background */
.background {
padding: 0px;
margin: 0px;
background-color: var(--color-1);
}

/* Block: main */
.main {
display: flex;
flex-direction: column;
align-items: stretch;
}

/* Block: button-player */
.button-player {
display: inline-block;
border: none;
height: 45vh;
background-color: var(--color-2);
color: var(--text-color);
text-align: center;
text-decoration: none;
font-size: 12vh;
cursor: pointer;
transition: var(--transition-effect);
}

.button-player--rotated {
transform: rotate(180deg);
}

.button-player:disabled {
background-color: var(--color-4);
color: var(--color-1);
}

/* Block: menu-bar */
.menu-bar {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 10vh;
}

.menu-bar__button {
border-radius: 6px;
border: none;
padding: 6px;
background-color: var(--color-2);
cursor: pointer;
}

.menu-bar__button:hover {
background-color: var(--color-3);
}

.menu-bar__button:disabled {
background-color: var(--color-4);
cursor: not-allowed;
}

.menu-bar__icon {
color: var(--text-color);
}

/* Block: modal */
.modal {
display: none;
justify-content: center;
align-items: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}

.modal--opened {
display: flex;
z-index: 1;
}

.modal__content {
background-color: var(--color-1);
color: var(--text-color);
padding: 20px;
border-radius: 12px;
}

.modal__close {
color: var(--color-3);
float: right;
font-size: 28px;
font-weight: bold;
transition: var(--transition-effect);
}

.modal__close:hover,
.modal__close:focus {
color: var(--color-4);
text-decoration: none;
cursor: pointer;
}

.modal__title {
text-align: center;
}

.modal__label {
display: block;
margin-bottom: 6px;
}

.modal__input {
margin-bottom: 12px;
width: 100%;
height: 36px;
font-family: inherit;
}

.modal__footer {
display: flex;
flex-direction: row-reverse;
}
.modal__submit {
display: inline-block;
padding: 12px;
border: none;
border-radius: 6px;
background-color: var(--color-2);
color: var(--text-color);
text-align: center;
text-decoration: none;
cursor: pointer;
}
.modal__submit:hover {
background-color: var(--color-4);
transition: var(--transition-effect);
}
Binary file added favicon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
98 changes: 0 additions & 98 deletions index.css
View file

This file was deleted.

131 changes: 91 additions & 40 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="A simple and free online chess clock with customizable time increments." />
<meta name="keywords" content="digital chess clock, online chess clock, free chess timer" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui"/>
<title>Digital Chess Clock Online - Free Chess Timer</title>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<link type="text/css" rel="stylesheet" href="/css/app.css" media="screen,projection"/>
</head>

<head>
<meta charset="UTF-8" />
<meta name="description" content="A simple Chess Clock online free, allows increments." />
<meta name="keywords" content="chess, clock, online, free" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui" />
<title>Chess Clock Online</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="index.css" media="screen,projection" />
</head>

<body class="background">
<div class="column">
<button id="player1" class="button rotate"></button>
<div class="menu-bar">
<a id="pause" href="#!"><i id="pauseIcon" class="icon material-icons">pause</i></a>
<a id="restart" href="#!"> <i class="icon material-icons">replay</i></a>
<a id="settings" href="#!"><i class="icon material-icons">settings</i></a>
</div>
<button id="player2" class="button"></button>
</div>

<!-- The Modal -->
<div id="settings-menu" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<h1>Settings</h1>
<h2>Minutes per player</h2>
<input id="newmin" type="number" pattern="[0-9]*" min="1" max="180" />
<h2>Increment</h2>
<input id="newinc" type="number" pattern="[0-9]*" min="0" max="180" />
<div class="modal-footer">
<button id="clock" class="setclock">Set Clock</button>
<body class="background" x-data="getData()">
<main class="main">
<button
class="button-player button-player--rotated"
x-text="msToMin(player1Time)"
x-bind:disabled="isPlaying && isPlayer1Turn"
x-on:click="
isPlaying = true,
isPlayer1Turn = true,
player1Time += increment,
interval = setTimer(interval, updateTimePlayer2,$data)">
</button>
<div class="menu-bar">
<button
id="pause"
class="menu-bar__button"
x-bind:disabled="!isPlaying"
x-on:click="isPlaying = !isPlaying, clearInterval(interval)">
<i
class="menu-bar__icon material-icons"
x-text="isPlaying ? 'pause' : 'play_arrow'">
</i>
</button>
<button
id="restart"
class="menu-bar__button"
x-on:click="
player1Time = getTimeMillis(),
player2Time = getTimeMillis(),
increment = getIncMillis(),
isPlaying = false,
isPlayer1Turn = true,
clearInterval(interval)">
<i class="menu-bar__icon material-icons">replay</i>
</button>
<button
id="settings"
class="menu-bar__button"
x-on:click="openModal = true, isPlaying = false, clearInterval(interval)">
<i class="menu-bar__icon material-icons">settings</i>
</button>
</div>
</div>
</div>
<button
id="player2"
class="button-player"
x-text="msToMin(player2Time)"
x-bind:disabled="isPlaying && !isPlayer1Turn"
x-on:click="
isPlaying = true,
isPlayer1Turn = false,
player2Time += increment,
interval = setTimer(interval, updateTimePlayer1,$data)
">
</button>
</main>

<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="menu.js"></script>
</body>
<!-- The Modal -->
<dialog
id="settings-menu"
class="modal"
x-bind:class="openModal ? 'modal--opened' : ''">
<!-- Modal content -->
<form class="modal__content" method="get">
<span class="modal__close material-icons" x-on:click="openModal = false">close</span>

<h1 class="modal__title">Settings</h1>
<p>
<label class="modal__label" for="time">Minutes per player</label>
<input class="modal__input" id="newmin" type="number" name="time" pattern="\d*" min="1" max="180" x-bind:value="time"/>
</p>
<p>
<label class="modal__label" for="inc">Increment</label>
<input class="modal__input" id="newinc" type="number" name="inc" pattern="\d*" min="0" max="180" x-bind:value="inc"/>
</p>
<div class="modal__footer">
<input class="modal__submit" type="submit" id="clock" class="setclock" value="Set Clock">
</div>
</form>
</dialog>

</html>
<script src="/js/app.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>
Loading

0 comments on commit 8da5f80

Please sign in to comment.