zach
/
artseyio-typing-tutor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move tutor to learn page

This commit is contained in:
Zach Graham 2023-08-04 23:39:45 -05:00
parent f4744db60a
commit 2e18243da6
4 changed files with 85 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/artsey-tutor.css
View File

@ -36,7 +36,7 @@ body {
align-self: auto;
order: 0;
width: 500px;
font-size: 44px;
font-size: 28px;
text-align: center;
margin: 0 auto 20px;
}
@ -62,7 +62,7 @@ body {
padding: 12px;
margin: 0 auto;
background-color: slategray;
visibility: collapse;
opacity: 0;
}
.keyboard-key {
@ -145,4 +145,10 @@ body {
width: 200px;
font-size: 36px;
background-color: steelblue;
}
#content-area {
border: 2px solid black;
margin-top: 100px;
border-radius: 4px;
}

45
index.html
View File

@ -5,7 +5,7 @@
<title>ARTSEY Typing Tutor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/artsey-tutor.css">
<link rel="stylesheet" href="/artsey-typing-tutor/css/artsey-tutor.css">
</head>
<body>
@ -19,48 +19,35 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ARTSEY Typing Tutor</a>
<a class="navbar-brand" href="/artsey-typing-tutor/index.html">ARTSEY Typing Tutor</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/learn">Learn</a></li>
<li class="active"><a href="/artsey-typing-tutor/index.html">Home</a></li>
<li><a href="/artsey-typing-tutor/about.html">About</a></li>
<li><a href="/artsey-typing-tutor/contact.html">Contact</a></li>
<li><a href="/artsey-typing-tutor/learn.html">Learn</a></li>
</ul>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</div>
</nav>
<div class="flex-container">
<div class="flex-items">
<div id="letterbox">
</div>
<button id="startButton" type="button" class="btn btn-primary">Start!</button>
<div id="content-area" class="container">
<div class="flex-container">
<div class="flex-items">Hello there!</div>
<div class="flex-items"></div>
</div>
<div id="keyboard">
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
</div>
<div class="flex-items"></div>
<form>
<fieldset>
<input id="typing-text" type="text" value="Hello there">
</fieldset>
</form>
</div>
<form>
<fieldset>
<input id="typing-text" type="text" value="Hello there">
</fieldset>
</form>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="js/artsey-tutor.js"></script>
<script src="/artsey-typing-tutor/js/artsey-tutor.js"></script>
</body>
</html>

2
js/artsey-tutor.js
View File

@ -121,7 +121,7 @@ $(document).ready(async function () {
await setTypingText(currentString);
await sleep(500);
await setNextLetter();
$("#keyboard").css({opacity: 0, visibility: "visible"}).animate({opacity: 100}, 200, function () {
$("#keyboard").animate({opacity: 1.0}, 1000, function () {
console.log("keyboard visible!");
});
})

60
learn.html Normal file
View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ARTSEY Typing Tutor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="/artsey-typing-tutor/css/artsey-tutor.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">ARTSEY Typing Tutor</a>
</div>
<div id="navbar" class="navbar-default">
<ul class="nav navbar-nav">
<li><a href="/artsey-typing-tutor/index.html">Home</a></li>
<li><a href="/artsey-typing-tutor/about.html">About</a></li>
<li><a href="/artsey-typing-tutor/contact.html">Contact</a></li>
<li class="active"><a href="/learn.html">Learn</a></li>
</ul>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</div>
</nav>
<div id="content-area" class="container">
<div class="flex-container">
<div class="flex-items">
<div id="letterbox"><div id="instruction-text">Click the button below to start.</div></div>
<button id="startButton" type="button" class="btn btn-primary">Start!</button>
</div>
<div id="keyboard">
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
</div>
<div class="flex-items"></div>
</div>
</div>
<form>
<fieldset>
<input id="typing-text" type="text" value="Hello there">
</fieldset>
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script type="text/javascript" src="/artsey-typing-tutor/js/artsey-tutor.js"></script>
</body>
</html>