-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (118 loc) · 3.7 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.75, minimum-scale=0.75"/>
<link rel="icon" href="https://glitch.com/favicon.ico" />
<title>tarot cards</title>
<link rel="canonical" href="https://glitch-hello-website.glitch.me/" />
<meta
name="description"
content="...obtain wisdom from the cyber oracles..."
/>
<meta name="robots" content="index,follow" />
<meta property="og:title" content="tarot cards" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://tarotcards.glitch.me/" />
<meta
property="og:description"
content="...obtain hidden wisdom from the cyber oracles..."
/>
<meta
property="og:image"
content="https://cdn.glitch.me/6f22b01f-863d-42d0-b982-19a1a5d07120/1M.JPG?v=1639789266862"
/>
<meta name="twitter:card" content="summary" />
<link rel="stylesheet" href="/style.css" />
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script src="/cards.js" defer></script>
<script src="/card.js" defer></script>
<script src="/script.js" defer></script>
</head>
<body>
<header class="sr-only">
<h1>
An interactive tarot card deck.
</h1>
</header>
<main id="table">
<h2 class="sr-only">The table</h2>
<img class="deck" src="https://cdn.glitch.me/6f22b01f-863d-42d0-b982-19a1a5d07120/deck.svg?v=1639873153389" alt="" />
<ul id="table-cards">
<li id="card-template" tabindex="0">
<h3 class="sr-only">The top card on the deck</h3>
<div class="inner-card">
<img src="#" alt="" />
</div>
<div class="buttons">
<button class="button rotateRight">→</button>
<button class="button rotateLeft">←</button>
<button class="button flip">↑</button>
</div>
</li>
</ul>
</main>
<div id="open-explainer">
<button>divinatory text</button>
</div>
<div id="explainer">
<div class="explainer-titlebar">
<div class="explainer-title">
Divinatory text
</div>
<div class="explainer-button">
✕
</div>
</div>
<div class="explanation-placeholder">
<p>Select a card to see its interpretation.</p>
</div>
<div class="explanation-main">
<div class="explanation-positive">
<p>
Regular interpretation of the card.
</p>
</div>
<div class="explanation-negative">
<h1>Negative</h1>
<p>
Negative interpretation of the card.
</p>
</div>
</div>
<div id="explainer-options">
<label>
<input type="radio" id="cs" checked name="interpretation" value="cs">
Coleman-Smith
</label>
<label>
<input type="radio" id="waite" name="interpretation" value="waite">
Waite
</label>
</div>
</div>
<!-- The footer holds our remix button — you can use it for structure or cut it out ✂ -->
<footer class="footer">
<div class="credits">
<p>
All cards are from the 1996 <a href="http://www.m31.de/colman-smith/index.html">Coleman-Smith</a> deck.
</p>
<p>
The Divinatory Texts are from Coleman-Smith (1996) and The Pictorial Key to the Tarot by A.E. Waite (1910).
</p>
</div>
<div class="links"></div>
<a
class="btn--remix"
target="_top"
href="https://glitch.com/edit/#!/remix/glitch-hello-website"
>
<img
src="https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FLogo_Color.svg?v=1618199565140"
alt=""
/>
Remix on Glitch
</a>
</footer>
</body>
</html>