projet-integrateur/IPreoject-CLientSide/templates/new-game.html
2022-01-20 12:04:51 +01:00

66 wiersze
No EOL
2,9 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cards's Game</title>
<meta name="description" content="">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet prefetch" href="https://fonts.googleapis.com/css?family=Coda">
<link rel="stylesheet" href="../static/css/new-g.css">
<style>
body {
background: #ffffff url('../static/images/geometry2.png'); /* Background pattern from Subtle Patterns */
font-family: 'Coda', cursive;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Fast Detection Game</h1>
</header>
<section class="score-panel">
<ul class="stars">
<li>
<i class="fa fa-star gold-star"></i>
</li>
</ul>
<span class="moves">Score : </span><span id="score"> 0</span>
<div class="restart">
<i class="fa fa-repeat" onclick="restartGame()"></i> Restart game
</div>
</section>
<div id="basicUsage" style="text-align: center;"><i style="display: inline-block; margin-right: 6px;" class="fa fa-clock-o"></i><h5 style="display: inline-block;" ><time></time></h5></div>
<ul class="deck1" style="justify-content: center; display: flex; position: relative;">
<h4 style="position: absolute; color: white; top: -15px; left: 32%; width: 100%;">Click on the common object here</h4>
<!-- <img src="../static/images/card11.png" alt="simpl console.log(typeof(image));
document.getElementById('test').appendChild(image)e card" id="clickme" style="cursor: pointer; margin-top: 10px;" onclick="clickEvent(event)"> -->
<img src="../static/images/temp/card1.jpg" alt="simple card" id="card1" style="cursor: pointer; margin-top: 10px;" onclick="clickEvent(event)">
</ul>
<hr style="border: #44464778 dashed 1px; width: 80%; margin: 19px 0 9px;">
<ul class="deck2" style="justify-content: center; display: flex; position: relative;">
<h4 style="position: absolute; color: white; top: -8px; left: 42%; width: 100%;">Central Card</h4>
<img src="../static/images/temp/card2.jpg" alt="simple card" id="card2" style="cursor: pointer; margin-top: 10px;">
</ul>
</div>
<div class="popup">
<div class="content">
<span class="close">&times;</span>
<h1>Congratulations,</h1>
<p>You completed the game in time
<span id="timer"> 00:00:00 </span> with total number of moves:
<span id="moves">0</span>
<br/> your star rating:
<span id="rating">0</span> out of 3</p>
</div>
</div>
<script type="text/javascript" src="../static/js/new-g.js?n=1"></script>
</body>
</html>