1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>007.FLAMES</title>
7 <link rel="stylesheet" href="./style.css" />
8 <link rel="stylesheet" href="../assets/common.css" />
9 <link rel="shortcut icon" href="../assets/favicon.png" type="image/png" />
10 <script src="../assets/common.js"></script>
11 </head>
12
13 <body data-disable-warning="true">
14 <!-- Modal Section -->
15 <input class="modal-state" id="modal" type="checkbox" />
16 <div class="modal">
17 <label class="modal__bg" for="modal"></label>
18 <div class="modal__inner" style="width: 30%">
19 <label class="modal__close" for="modal"></label>
20 <h2>007.FLAMES</h2>
21 <div class="modal__p">
22 <ul>
23 <li>
24 Five letters deciding your future. Because who needs
25 <span style="color: var(--lightGold)"> emotional stability? </span>
26 </li>
27 <li>
28 Just type two names, and let the
29 <span style="color: var(--lightGold)">mystical powers of math and childhood chaos</span> reveal
30 your relationship status.
31 </li>
32 <li>
33 Will you be Friends, Lovers, or sworn Enemies?
34 <span style="color: var(--lightGold)">FLAMES never lies*</span> (*except when it totally does).
35 </li>
36 </ul>
37 </div>
38 </div>
39 </div>
40
41 <!-- Main Content -->
42 <h1 id="flamesContainer">
43 <span class="flame-letter">F</span>
44 <span class="flame-letter">L</span>
45 <span class="flame-letter">A</span>
46 <span class="flame-letter">M</span>
47 <span class="flame-letter">E</span>
48 <span class="flame-letter">S</span>
49 </h1>
50 <p id="tooltip">Dare to play !!</p>
51 <div class="container">
52 <div class="group">
53 <label for="p1">P1:</label>
54 <input type="text" id="p1" name="p1" placeholder="Peter Parker" />
55 </div>
56 <div class="group">
57 <label for="p2">P2:</label>
58 <input type="text" id="p2" name="p2" placeholder="Gwen Stacy" />
59 </div>
60 <button id="calcBtn" class="calc">BRING IT ON!!</button>
61 <svg
62 class="hidden"
63 id="reload"
64 onclick="window.location.reload();clearName()"
65 style="margin-top: 25px; cursor: pointer"
66 fill="var(--lightGold)"
67 width="45px"
68 height="45px"
69 viewBox="0 0 24 24"
70 xmlns="http://www.w3.org/2000/svg"
71 >
72 <path
73 d="M19.146 4.854l-1.489 1.489A8 8 0 1 0 12 20a8.094 8.094 0 0 0 7.371-4.886 1 1 0 1 0-1.842-.779A6.071 6.071 0 0 1 12 18a6 6 0 1 1 4.243-10.243l-1.39 1.39a.5.5 0 0 0 .354.854H19.5A.5.5 0 0 0 20 9.5V5.207a.5.5 0 0 0-.854-.353z"
74 />
75 </svg>
76 </div>
77
78 <!-- Footer -->
79 <div class="footer">
80 <label for="modal">(i)</label>
81 <a class="arrow" href="../"></a>
82 </div>
83 </body>
84 <script src="./script.js"></script>
85</html>