-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlearn.html
More file actions
171 lines (148 loc) · 7.76 KB
/
learn.html
File metadata and controls
171 lines (148 loc) · 7.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebDevination - Tarot Learning Game</title>
<!-- seo meta data -->
<meta name="description" content="Enter the world of WebDevination. Discover your fate through tarot and consult the AI oracle — powered by code and creativity.">
<meta name="keywords" content="WebDevination, tarot, online tarot, AI oracle, digital tarot deck, tarot reading, GPT oracle, creative coding, mystic UI, Kim Piffy">
<meta name="author" content="Kim Piffy">
<meta name="robots" content="index, follow">
<meta name="googlebot" content="index, follow">
<meta name="google" content="notranslate">
<meta name="theme-color" content="#aeff00">
<link rel="canonical" href="https://webdevination.onrender.com/learn.html">
<!-- open graph info -->
<meta property="og:title" content="WebDevination – Unravel Your Cosmic Coding">
<meta property="og:description" content="Let the machine guide your fate. The cards are waiting…">
<meta property="og:image" content="https://webdevination.onrender.com/assets/images/ogimage.webp">
<meta property="og:image:type" content="image/webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://webdevination.onrender.com">
<meta property="og:type" content="website">
<meta property="og:site_name" content="WebDevination">
<meta property="og:locale" content="en_GB">
<!-- twitter card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="WebDevination – Unravel Your Cosmic Coding">
<meta name="twitter:description" content="Let the machine guide your fate. The cards are waiting…">
<meta name="twitter:image" content="https://webdevination.onrender.com/assets/images/ogimage.webp">
<!-- apple mobile -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
<link rel="manifest" href="./assets/favicon/site.webmanifest">
<!-- fonts & icons -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@1,600&display=swap">
<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=Source+Code+Pro:ital,wght@1,600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Tourney:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://kit.fontawesome.com/40e23bfd7e.js" crossorigin="anonymous"></script>
<!-- bootstrap css link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- css styles -->
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body class="learn text-glow">
<!-- preloader -->
<div id="preloader">
<div class="sparkles"></div>
<div class="mask-center"></div> <!-- ← the stencil mask -->
<div class="portal-ring"></div>
</div>
<!-- header and navigation -->
<header class="fixed-top text-glow">
<nav class="navbar navbar-expand-lg text-glow">
<div class="container-fluid text-glow">
<!-- logo linking back to homepage -->
<a class="navbar-brand text-glow" href="index.html" aria-label="Go to Homepage">
<i class="fa-kit fa-pasted-svg-1 fa-2x fa-fade text-glow"></i>
</a>
<!-- glowing hamburger toggler for mobile -->
<button class="navbar-toggler collapsed glow-toggle text-glow" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
aria-label="Expand page navigation.">
<span class="bar text-glow"></span>
<span class="bar text-glow"></span>
<span class="bar text-glow"></span>
</button>
<!-- navigation links -->
<div class="collapse navbar-collapse text-glow" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto text-glow">
<!-- link back to oracle/info page-->
<a class="nav-link" href="info.html">Oracle</a>
<!-- readings dropdown (corrected structure) -->
<div class="nav-item dropdown text-glow">
<a class="nav-link dropdown-toggle text-glow" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Readings
</a>
<ul class="dropdown-menu text-glow" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="onecard.html">One Card</a></li>
<li><a class="dropdown-item" href="threecard.html">Three Cards</a></li>
</ul>
</div>
<!-- other direct links -->
<a class="nav-link" href="cards.html">Cards</a>
<a class="nav-link" href="learn.html">Learn</a>
</div>
</div>
</div>
</nav>
</header>
<!-- main content -->
<main class="container min-vh-100 text-glow">
<section class="row game-container text-glow">
<!-- heading and intro -->
<h1>learn tarot</h1>
<p class="cardgame-text text-glow">
Test your knowledge of tarot cards with this fun and interactive game! Match the correct card image with its
description to score points. You can score a maximum of 78 points by matching all the cards correctly. The game
is designed to help you learn about the meanings and symbolism of each card in the tarot deck. Good luck and
have fun!
</p>
<!-- card selection section -->
<div class="col-12 col-md-6 cardgame-select text-glow">
<div id="card-choices" class="card-choices text-glow">
<!-- the 4 card choices will be dynamically inserted here -->
</div>
</div>
<!-- card display and description section -->
<div class="col-12 col-md-6 cardgame-display text-glow">
<!-- prompt -->
<p>Match this description to the correct card image:</p>
<!-- description text -->
<div id="card-description" class="card-description text-glow">
<!-- description of the card will appear here -->
</div>
<!-- score display -->
<div id="score" class="score text-glow">
Score: 0
</div>
<!-- restart button -->
<button id="restart-button" class="btn btn-primary text-glow">Restart</button>
</div>
</section>
</main>
<!-- footer -->
<footer class="text-center text-glow">
<p>© <span id="current-year"></span> WebDevination. All Rights Reserved.</p>
<p>Made with <i class="fa-solid fa-heart text-glow"></i> by Kim Piffy</p>
</footer>
<!-- js bootstrap bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- js game logic -->
<script src="./assets/js/learn.js"></script>
<!-- js dynamically set the current year in the footer -->
<script>document.getElementById('current-year').textContent = new Date().getFullYear();</script>
<!-- js for nav hover colors and preloader portal-->
<script src="assets/js/nav.js"></script>
</body>
</html>