-
Notifications
You must be signed in to change notification settings - Fork 20
/
index.html
72 lines (67 loc) · 3.89 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CosmosPersona</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Comfortaa&display=swap">
<link rel="icon" type="image/x-icon" href="images/izeecon.PNG">
</head>
<body>
<div class="quiz-container">
<div class="start-page" id="start-page">
<!--h1>What cosmic ingredient do you taste like?</h1-->
<h1>Cosmos Persona</h1>
<p>Enter a journey across space and time and find out your Persona!</p>
<!-- Add an input field for the user's name -->
<!--input type="text" id="user-name" placeholder="Your Name"-->
<img src="images/main.gif" class="top-image">
<button id="start-button" class="start-button">Play</button>
<a href="Info/" target="_blank" rel="noopener noreferrer"><button class="start-button">Learn</button></a>
<!--a href="gal.html" target="_blank" rel="noopener noreferrer"><button class="start-button">Learn</button></a-->
<br>
<p1>A fun personality quiz inspired by MBTI types, Innate Personality Traits, Cake resume, etc.</p1>
<p1>Made by I-see Warisa Jaidee</p1>
</div>
<div class="quiz-page" id="quiz-page" style="display: none;">
<div id="quiz">
<!-- Questions with images, and choice buttons will be generated here dynamically using JavaScript -->
</div>
<div id="result" style="display: none;">
<p>Feel free to share your result! #CosmosPersona</p>
<div class="result-image">
<img id="result-image" src="" alt="Result Image">
</div>
<!--p>Feedback & Enter Raffle!<a href="https://forms.gle/1SYvtZrZYcD9VtSf6" target="_blank">here</a></p-->
<br>
<p>Made by <a href="https://www.instagram.com/izonfalzo" target="_blank">@izonfalzo</a></p>
<!--p>Shoutout to my sis: <a href="https://www.instagram.com/avocadrawz" target="_blank">@avocadrawz</a></p-->
<div class="hover-container">
<span class="hover-text">Give feedback <a href="https://forms.gle/1SYvtZrZYcD9VtSf6" target="_blank">here</a></span>
<!--span class="tooltip">help me improve this and win prizes!</span-->
</div>
<br>
<a href="index.html" target="_blank" rel="noopener noreferrer"><button class="do-not-press-button">Time Machine</button></a>
<a href="Info/" target="_blank" rel="noopener noreferrer"><button class="do-not-press-button">Explore More!</button></a>
<a href="sub.html" target="_blank" rel="noopener noreferrer"><button class="do-not-press-button">Big Red Button</button></a>
<div class="result-content">
<div class="result-text">
<!-- Result text and keywords will go here -->
</div>
</div>
</div>
<!-- Scores container to display scores for each letter -->
<!--div class="scores-container">
<p>E Score: 0, S Score: 0, T Score: 0, P Score: 0 </p>
<p>I Score: 0, N Score: 0, F Score: 0, J Score: 0</p>
</div-->
<!--button id="restart-button" class="restart-button" style="display: none;">Restart</button-->
<footer>
<a href="https://docs.google.com/document/d/1GKvwQOTK8jjRFDShpuLD_w9_VGU_IVxfSglJngvNWLU/edit?usp=sharing" target="_blank" style="font-size: 10px; text-decoration: none;">© 2024 I-see Warisa Jaidee</a>
</footer>
</div>
</div>
<script src="finalscript.js"></script>
</body>
</html>