104 lines
5.9 KiB
HTML
104 lines
5.9 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="style.css" type="text/css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
|
|
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
|
</head>
|
|
<body id="body">
|
|
<div id="container" class="container">
|
|
<audio id="tts1" src="./sounds/1.mp3"></audio>
|
|
<audio id="tts2" src="./sounds/1.mp3"></audio>
|
|
<audio id="tts3" src="./sounds/1.mp3"></audio>
|
|
<audio id="tts4" src="./sounds/1.mp3"></audio>
|
|
<audio id="tts5" src="./sounds/1.mp3"></audio>
|
|
<audio id="tts6" src="./sounds/1.mp3"></audio>
|
|
<audio id="tts7" src="./sounds/1.mp3"></audio>
|
|
<audio id="tts8" src="./sounds/1.mp3"></audio>
|
|
<audio id="tts9" src="./sounds/1.mp3"></audio>
|
|
<audio id="ttsfinal" src="./sounds/1.mp3"></audio>
|
|
<audio id="ttscrash" src="./sounds/1.mp3"></audio>
|
|
<audio id="ttsspeed" src="./sounds/1.mp3"></audio>
|
|
<audio id="ttsfails" src="./sounds/1.mp3"></audio>
|
|
<img class="logo" src="./img/logo.png">
|
|
<img class="semaforo" src="./img/semafor.png">
|
|
<img class="cone" src="./img/cone.png">
|
|
<img class="carprint" src="./img/carprint.png">
|
|
<!--<img class="carbck" src="./img/carbck.png">-->
|
|
<div id="license-selector" class="license-selector">
|
|
<div id="license-moto" class="license-moto">
|
|
<span class="license-moto-type">A</span>
|
|
<span class="license-moto-type-text">Motorcycle License</span>
|
|
<img class="license-moto-img" src="./img/moto.png">
|
|
<img class="license-moto-ellipse-ext" src="./img/elipseext.png">
|
|
<img class="license-moto-ellipse-int" src="./img/elipseint.png">
|
|
<span id="license-moto-price" class="license-moto-price">2000€</span>
|
|
</div>
|
|
<div id="license-car" class="license-car">
|
|
<span class="license-car-type">B</span>
|
|
<span class="license-car-type-text">Car License</span>
|
|
<img class="license-car-img" src="./img/car.png">
|
|
<img class="license-car-ellipse-ext" src="./img/elipseext.png">
|
|
<img class="license-car-ellipse-int" src="./img/elipseint.png">
|
|
<span id="license-car-price" class="license-car-price">5000€</span>
|
|
</div>
|
|
<div id="license-truck" class="license-truck">
|
|
<span class="license-truck-type">C</span>
|
|
<span class="license-truck-type-text">Truck License</span>
|
|
<img class="license-truck-img" src="./img/truck.png">
|
|
<img class="license-truck-ellipse-ext" src="./img/elipseext.png">
|
|
<img class="license-truck-ellipse-int" src="./img/elipseint.png">
|
|
<span id="license-truck-price" class="license-truck-price">10000€</span>
|
|
</div>
|
|
</div>
|
|
<div id="exam-selector" class="exam-selector">
|
|
<span class="exam-selector-type-text">LICENSE TYPE</span>
|
|
<span id="exam-selector-type" class="exam-selector-type"></span>
|
|
<div id="theorical" class="theorical">
|
|
<div class="exam-selector-ellipse"><img id="exam-selector-check-theorical" class="exam-selector-check" src="./img/check.png"></div>
|
|
<span class="exam-selector-theorical">Theorical</span>
|
|
</div>
|
|
<div id="practice" class="practice">
|
|
<div class="exam-selector-ellipse"><img id="exam-selector-check-practice" class="exam-selector-check" src="./img/check.png"></div>
|
|
<span class="exam-selector-practice">Practice</span>
|
|
</div>
|
|
</div>
|
|
<div id="questions" class="questions">
|
|
<div class="border-left"></div>
|
|
<div class="border-right"></div>
|
|
<div class="border-top"></div>
|
|
<div class="border-bottom"></div>
|
|
<span id="question-text" class="question-text"></span>
|
|
<div id="answer1" class="answer1">
|
|
<div id="answer1-ellipse" class="answer-ellipse"></div>
|
|
<span id="answer1-text" class="answer-text"></span>
|
|
</div>
|
|
<div id="answer2" class="answer2">
|
|
<div id="answer2-ellipse" class="answer-ellipse"></div>
|
|
<span id="answer2-text" class="answer-text"></span>
|
|
</div>
|
|
<div id="answer3" class="answer3">
|
|
<div id="answer3-ellipse" class="answer-ellipse"></div>
|
|
<span id="answer3-text" class="answer-text"></span>
|
|
</div>
|
|
</div>
|
|
<div id="congrats" class="congrats">
|
|
<span class="congrats-title">Congratulations!</span>
|
|
<span class="congrats-text">you have passed the theoretical exam!</span>
|
|
</div>
|
|
<div id="fail" class="congrats">
|
|
<span class="congrats-title">Try again!</span>
|
|
<span class="congrats-text">You have failed too many questions, try again!</span>
|
|
</div>
|
|
<div class="exit">
|
|
<span>EXIT</span>
|
|
</div>
|
|
</div>
|
|
<div id="signals" class="signals">
|
|
<img id="signals-img" class="signals-img" src="./img/60.png">
|
|
<span class="signals-text">Errors</span><span id="signals-errors" class="signals-errors">3/5</span>
|
|
</div>
|
|
<script src="./script.js" type="text/javascript"></script>
|
|
</body>
|
|
</html> |