-
Notifications
You must be signed in to change notification settings - Fork 0
/
success.html
118 lines (113 loc) · 5.02 KB
/
success.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
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Success | GameHub</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<meta name="description" content="GameHub, purchase success!" />
<script>
//check local storage
let localS = localStorage.getItem('theme'),
themeToSet = localS
//If local storage is not set, we check the OS preference
if (!localS) {
themeToSet = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
//set the correct theme
document.documentElement.setAttribute('data-theme', themeToSet);
</script>
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.7/dist/iconify-icon.min.js"></script>
<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=Nunito+Sans:wght@400;600&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" />
<script src="./js/main.js" type="module"></script>
</head>
<body>
<header>
<div class="nav-wrapper">
<nav>
<a href="games.html" aria-label="Navigate to Games page">
<div class="nav-items">
<iconify-icon icon="cil:gamepad"></iconify-icon> Games
</div>
</a>
<a href="signin.html">
<div class="nav-items">
<iconify-icon icon="mdi:user"></iconify-icon> Sign in
</div>
</a>
<a href="cart.html">
<div class="nav-items">
<iconify-icon icon="ic:baseline-shopping-cart"></iconify-icon> Cart
</div>
</a>
</nav>
<div id="theme-switcher">
<svg aria-label="Sun icon, switch to light-theme" width="24" height="24" viewbox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" id="icon-sun">
<path
d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg aria-label="Moon icon, switch to dark-theme" width="24" height="24" viewbox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" id="icon-moon">
<path
d="M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z"
stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<!-- LOGO -->
<a href="index.html" aria-label="Navigate to homepage">
<img class="logo-gamehub-png" src="./images/gamehub-logo-sky-transparent.png" alt="Gamehub logo">
</a>
</header>
<main>
<section>
<div class="content-wrapper success-page">
<iconify-icon icon="icon-park-solid:success" class="success-icon"></iconify-icon>
<h1>Success!</h1>
<div class="paragrafs">
<p>Thank you for choosing our video games!</p>
<p>We appreciate your purchase and support.</p>
<p>Please contact us if you need any assistance</p>
<p>Happy gaming!</p>
</div>
<div class="success-button">
<a href="games.html" class="button button-turquoise">Back to all the games</a>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-nav">
<a href="about.html" class="nav-items">About us</a>
<a href="contact.html" class="nav-items">Contact us</a>
</div>
<ul class="footer-some">
<li>
<div class="some">
<a aria-label="twich" href="https://www.twitch.tv/" aria-hidden="true"><iconify-icon icon="mdi:twitch"
width="2em"></iconify-icon>
</a>
<a aria-label="instagram" href="https://www.instagram.com/" aria-hidden="true"><iconify-icon
icon="mdi:instagram" width="2em"></iconify-icon>
</a>
<a aria-label="tiktok" href="https://www.tiktok.com/" aria-hidden="true"><iconify-icon
icon="ic:baseline-tiktok" width="2em"></iconify-icon>
</a>
<a aria-label="discord" href="https://discord.com/" aria-hidden="true"><iconify-icon
icon="ic:baseline-discord" width="2em"></iconify-icon>
</a>
</div>
<span class="text">Connect with the community</span>
</li>
</ul>
</footer>
</body>
</html>