Skip to content

Commit

Permalink
Add A PlaceHolder And Change Button Styling (#6)
Browse files Browse the repository at this point in the history 
* Add A PlaceHolder And Change Button Styling

* update fs and dependencies

* Change The Styling Of Button

---------

Co-authored-by: HauseMaster <113833707+HauseMasterZ@users.noreply.github.com>
  • Loading branch information
@kratin01 @HauseMasterZ
kratin01 and HauseMasterZ authored Oct 6, 2023
1 parent 9fd63b6 commit 379e454
Show file tree
Hide file tree
Showing 2 changed files with 158 additions and 122 deletions.
263 changes: 145 additions & 118 deletions src/public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,136 +1,163 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<meta name="keywords" content="Swift Type, typing game, HauseMaster" />
<title>Swift Type ~ HauseMaster</title>
<link rel="stylesheet" href="../styles/style.css" />
<link rel="icon" type="image/png" href="../static/icon/favicon-64x64.png" />
</head>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
<meta name="keywords" content="Swift Type, typing game, HauseMaster">
<title>Swift Type ~ HauseMaster</title>
<link rel="stylesheet" href="../styles/style.css" />
<link rel="icon" type="image/png" href="../static/icon/favicon-64x64.png">
</head>

<body class="dark">
<div class="container">
<h1 id="title"><span>Swift</span> <span>Type</span> ~ HauseMaster</h1>
<div class="dark-light">
<i class='bx bx-moon moon'></i>
<i class='bx bx-sun sun'></i>
</div>
<div class="github">
<a href="https://github.com/HauseMasterZ/swift-type" target="_blank">
<i class='bx bxl-github'></i>
</a>
</div>
<div class="spinner-border" style="display: none; position: absolute; justify-content: center; align-items: center;"
role="status"></div>
<p class="instruction">Type the following text:</p>
<span class="cursor"></span>
<div id="quote"></div>
<input type="text" id="inputBox" autofocus disabled>
<div>
<button class="button" id="refreshButton">Refresh</button>
<button class="button" id="repeatButton">Repeat</button>
<button class="button" id="customButton">Custom Text</button>
<button class="button" id="clearButton">Clear Text</button>
</div>
<br>
<div id="timerDisplay">Time: 0s</div>
<div class="stats">
<div class="stat">
<div id="wpmDisplay">Current WPM: 0</div>
</div>
<div class="stat">
<div id="accuracyDisplay">Accuracy: 100%</div>
</div>
<div class="stat">
<div id="errorsDisplay">Errors: 0</div>
</div>
</div>
<div class="stats">
<div class="stat">
<div id="grossWPMDisplay">Gross WPM: 0</div>
<body class="dark">
<div class="container">
<h1 id="title"><span>Swift</span> <span>Type</span> ~ HauseMaster</h1>
<div class="dark-light">
<i class="bx bx-moon moon"></i>
<i class="bx bx-sun sun"></i>
</div>
<div class="stat">
<div id="netWPMDisplay">Net WPM: 0</div>
<div class="github">
<a href="https://github.com/HauseMasterZ/swift-type" target="_blank">
<i class="bx bxl-github"></i>
</a>
</div>
</div>
<div class="stats">
<div class="stat" id="quote-label">
<label>
Quote Length:
</label>
<div
class="spinner-border"
style="
display: none;
position: absolute;
justify-content: center;
align-items: center;
"
role="status"
></div>
<p class="instruction">Type the following text:</p>
<span class="cursor"></span>
<div id="quote"></div>
<input type="text" id="inputBox" autofocus disabled />
<div>
<button class="button" id="refreshButton">Refresh</button>
<button class="button" id="repeatButton">Repeat</button>
<button class="button" id="customButton">Custom Text</button>
<button class="button" id="clearButton">Clear Text</button>

</div>
<div class="radio-container">
<label>
<input type="radio" name="quoteLength" value="random" checked>
Random
</label>
<label>
<input type="radio" name="quoteLength" value="small">
Small
</label>
<label>
<input type="radio" name="quoteLength" value="medium">
Medium
</label>
<label>
<input type="radio" name="quoteLength" value="large">
Large
</label>
<br />
<div id="timerDisplay">Time: 0s</div>
<div class="stats">
<div class="stat">
<div id="wpmDisplay">Current WPM: 0</div>
</div>
<div class="stat">
<div id="accuracyDisplay">Accuracy: 100%</div>
</div>
<div class="stat">
<div id="errorsDisplay">Errors: 0</div>
</div>
</div>
</div>
<div class="stats">
<div class="stat">
<div id="smoothCursor">Smooth Caret: <span class="correct">ON</span></div>
<div class="stats">
<div class="stat">
<div id="grossWPMDisplay">Gross WPM: 0</div>
</div>
<div class="stat">
<div id="netWPMDisplay">Net WPM: 0</div>
</div>
</div>
<div class="stat">
<div id="highlighted-words">Highlighting: <span class="incorrect">OFF</span></div>
<div class="stats">
<div class="stat" id="quote-label">
<label> Quote Length: </label>
</div>
<div class="radio-container">
<label>
<input type="radio" name="quoteLength" value="random" checked />
Random
</label>
<label>
<input type="radio" name="quoteLength" value="small" />
Small
</label>
<label>
<input type="radio" name="quoteLength" value="medium" />
Medium
</label>
<label>
<input type="radio" name="quoteLength" value="large" />
Large
</label>
</div>
</div>
<div class="stat">
<div id="font-family">
<label for="font-select" id="font-select-label">Font family:</label>
<select id="font-select">
<option value="Open Sans" selected>Open Sans</option>
<option value="Roboto">Roboto</option>
<option value="Oswald">Oswald</option>
<option value="Play">Play</option>
<option value="Ubuntu">Ubuntu</option>
</select>
<div class="stats">
<div class="stat">
<div id="smoothCursor">
Smooth Caret: <span class="correct">ON</span>
</div>
</div>
<div class="stat">
<div id="highlighted-words">
Highlighting: <span class="incorrect">OFF</span>
</div>
</div>
<div class="stat">
<div id="font-family">
<label for="font-select" id="font-select-label">Font family:</label>
<select id="font-select">
<option value="Open Sans" selected>Open Sans</option>
<option value="Roboto">Roboto</option>
<option value="Oswald">Oswald</option>
<option value="Play">Play</option>
<option value="Ubuntu">Ubuntu</option>
</select>
</div>
</div>
</div>
</div>
<div class="stats">
<div class="stat">
<div id="categoryDisplay"></div>
<div id="capslockWarning">Caps Lock is ON</div>
<div class="stats">
<div class="stat">
<div id="categoryDisplay"></div>
<div id="capslockWarning">Caps Lock is ON</div>
</div>
</div>
</div>
<div class="stats">
<div class="stat">
<div id="customTextModal" class="modal">
<div class="modal-content">
<label>
<h2>Enter Custom Text</h2>
<input type="text" id="customTextInput" placeholder="Enter Custom Text">
</label>
<button class="button">Apply</button>
<button class="button">Cancel</button>
<div class="stats">
<div class="stat">
<div id="customTextModal" class="modal">
<div class="modal-content">
<!-- <h2>Enter Custom Text</h2> -->
<!-- Insted Of A H2 Tag Add A placeholder -->
<input
placeholder="Enter Custom Text"
type="text"
id="customTextInput"
/>
<button class="button">Apply</button>
<button class="button">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<div class="stats">
<div class="stat">
<div id="resultImgParent">
<img id="resultImg" class="hidden" src="" alt="Result Speed Image" srcset="">
<div class="stats">
<div class="stat">
<div id="resultImgParent">
<img
id="resultImg"
class="hidden"
src=""
alt="Result Speed Image"
srcset=""
/>
</div>
</div>
</div>
</div>
</div>
<script async type="module" src="../dist/bundle.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/spin.js@2.3.2/spin.min.js"></script>
<script async src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>
<script async type="module" src="../dist/bundle.js"></script>
<script
async
src="https://cdn.jsdelivr.net/npm/spin.js@2.3.2/spin.min.js"
></script>
<script
async
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
></script>
</body>
</html>
17 changes: 13 additions & 4 deletions src/styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
body {
overflow-x: hidden;
font-family: "Open Sans", sans-serif, Arial;
background-color: var(--body-color);
/* background-color: var(--body-color); */
background-color: #26282a;
color: var(--text-color);
transition: background-color 1s ease;
}
Expand Down Expand Up @@ -487,10 +488,18 @@ option[value=Ubuntu] {
display: inline-block;
overflow: hidden;
padding: 10px min(2vw, 20px);
background-color: var(--input-background-color);
color: var(--text-color);
background-color: #a2d2ff;
color: black;
transition: background-color 1s ease;
border: 1px solid var(--text-color);
border-radius: 0%;

box-shadow: 10px 10px rgba(0,0,0,.15);
transition: all .4s ease;
}
.button:hover {
border-radius: 0% 0% 50% 50% / 0% 0% 10% 10% ;
box-shadow: 5px 5px rgba(0,0,0,.25);
}

.button:focus {
Expand All @@ -502,7 +511,7 @@ option[value=Ubuntu] {
}

.button:active {
color: rgb(15, 95, 240);
color: #a2d2ff;
outline: none;
}

Expand Down

0 comments on commit 379e454

Please sign in to comment.