-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (100 loc) · 5.95 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
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Rahat Rahman">
<meta name="application-name" content="xkcd">
<meta name="description" content="A webcomic of romance, sarcasm, math, and language.">
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="hsl(0 0% 87%)" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="hsl(0 0% 13%)" media="(prefers-color-scheme: dark)">
<!-- favicons -->
<link href="favicon.ico" rel="icon" sizes="any">
<link href="assets/favicons/favicon.svg" rel="icon" type="image/svg+xml">
<link href="assets/favicons/apple-touch-icon.png" rel="apple-touch-icon">
<link href="assets/favicons/site.webmanifest" rel="manifest">
<link href="style.css" rel="stylesheet">
<script src="script.js" defer></script>
<title>xkcd</title>
</head>
<body>
<header class="wrapper">
<div>
<h1>xkcd</h1>
<p>A webcomic of romance, sarcasm, math, and language.</p>
</div>
<div class="theme">
<!-- theme icon -->
</div>
</header>
<main class="wrapper" data-loading="true">
<div class="loading centre">
<div class="loadingio-spinner">
<div class="loadingio-spinner-outer">
<div class="loadingio-spinner-inner">
<!-- loading spinner -->
</div>
</div>
</div>
</div>
<section class="centre" aria-label="xkcd comic">
<article class="comic centre" aria-live="polite">
<!-- xkcd comic -->
</article>
<div class="comic-buttons" aria-label="comic buttons" role="group">
<button id="prev" aria-label="previous">＜ Prev</button>
<button id="random">Random</button>
<button id="next">Next ＞</button>
</div>
<form>
<label for="search">Search Comic</label>
<input type="number" inputmode="numeric" id="search" min="1" autocomplete="off" required>
<button aria-label="Search">
<!-- feathericons | MIT License | https://github.com/feathericons/feather -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<title>Search</title>
<circle cx="11" cy="11" r="8"/>
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
</button>
</form>
<div class="keyboard">
<p>Keyboard shortcuts:</p>
<div>
<ul>
<li><kbd>P</kbd> Prev</li>
<li><kbd>R</kbd> Random</li>
<li><kbd>N</kbd> Next</li>
</ul>
</div>
</div>
</section>
<noscript class="centre">JavaScript is required to view xkcd comics.</noscript>
</main>
<footer class="wrapper">
<small>© Rahat Rahman 2024</small>
<ul>
<li class="new-tab">
<a href="https://rahatrahman.com">Portfolio</a>
</li>
<li class="new-tab">
<a href="https://github.com/rahatbd/xkcd" target="_blank" rel="noopener noreferrer">GitHub</a>
<!-- Yandex UI Icons | MPL License | https://iconduck.com/icons/256946/in-new-tab -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="open in a new tab" role="img" fill="none">
<title>New Tab</title>
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M20 14a1 1 0 0 0-1 1v3.077c0 .459-.022.57-.082.684a.363.363 0 0 1-.157.157c-.113.06-.225.082-.684.082H5.923c-.459 0-.571-.022-.684-.082a.363.363 0 0 1-.157-.157c-.06-.113-.082-.225-.082-.684L4.999 5.5a.5.5 0 0 1 .5-.5l3.5.005a1 1 0 1 0 .002-2L5.501 3a2.5 2.5 0 0 0-2.502 2.5v12.577c0 .76.083 1.185.32 1.627.223.419.558.753.977.977.442.237.866.319 1.627.319h12.154c.76 0 1.185-.082 1.627-.319.419-.224.753-.558.977-.977.237-.442.319-.866.319-1.627V15a1 1 0 0 0-1-1zm-2-9.055v-.291l-.39.09A10 10 0 0 1 15.36 5H14a1 1 0 1 1 0-2l5.5.003a1.5 1.5 0 0 1 1.5 1.5V10a1 1 0 1 1-2 0V8.639c0-.757.086-1.511.256-2.249l.09-.39h-.295a10 10 0 0 1-1.411 1.775l-5.933 5.932a1 1 0 0 1-1.414-1.414l5.944-5.944A10 10 0 0 1 18 4.945z"/>
</svg>
</li>
<li class="new-tab">
<a href="https://xkcd.com/json.html" target="_blank" rel="noopener noreferrer">xkcd</a>
<!-- Yandex UI Icons | MPL License | https://iconduck.com/icons/256946/in-new-tab -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-label="open in a new tab" role="img" fill="none">
<title>New Tab</title>
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M20 14a1 1 0 0 0-1 1v3.077c0 .459-.022.57-.082.684a.363.363 0 0 1-.157.157c-.113.06-.225.082-.684.082H5.923c-.459 0-.571-.022-.684-.082a.363.363 0 0 1-.157-.157c-.06-.113-.082-.225-.082-.684L4.999 5.5a.5.5 0 0 1 .5-.5l3.5.005a1 1 0 1 0 .002-2L5.501 3a2.5 2.5 0 0 0-2.502 2.5v12.577c0 .76.083 1.185.32 1.627.223.419.558.753.977.977.442.237.866.319 1.627.319h12.154c.76 0 1.185-.082 1.627-.319.419-.224.753-.558.977-.977.237-.442.319-.866.319-1.627V15a1 1 0 0 0-1-1zm-2-9.055v-.291l-.39.09A10 10 0 0 1 15.36 5H14a1 1 0 1 1 0-2l5.5.003a1.5 1.5 0 0 1 1.5 1.5V10a1 1 0 1 1-2 0V8.639c0-.757.086-1.511.256-2.249l.09-.39h-.295a10 10 0 0 1-1.411 1.775l-5.933 5.932a1 1 0 0 1-1.414-1.414l5.944-5.944A10 10 0 0 1 18 4.945z"/>
</svg>
</li>
</ul>
</footer>
</body>
</html>