-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
151 lines (146 loc) · 6.45 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Listings Directory</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: "class",
};
</script>
</head>
<body
class="bg-gray-100 dark:bg-gray-900 transition-colors duration-300 flex flex-col min-h-screen"
>
<div class="container mx-auto px-4 py-8 max-w-4xl flex-grow">
<div class="flex justify-end mb-4">
<button
id="darkModeToggle"
class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
>
Toggle Dark Mode
</button>
</div>
<div
id="tabContainer"
class="hidden mb-4 flex space-x-4 justify-center"
></div>
<div
id="listingsContainer"
class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 space-y-4"
></div>
</div>
<footer class="bg-gray-200 dark:bg-gray-800 py-8 mt-8">
<div class="container mx-auto px-4 max-w-6xl">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="font-bold text-lg mb-4 dark:text-white">Project</h3>
<ul class="space-y-2">
<li>
<a
href="https://github.com/meysam81/listings-directory"
class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
>GitHub Repository</a
>
</li>
<li>
<a
href="https://github.com/meysam81/listings-directory/issues"
class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
>Issues</a
>
</li>
<li>
<a
href="https://github.com/meysam81/listings-directory/releases"
class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
>Releases</a
>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-lg mb-4 dark:text-white">
Documentation
</h3>
<ul class="space-y-2">
<li>
<a
href="https://meysam81.github.io/listings-directory"
class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
>Quick Start</a
>
</li>
<li>
<a
href="https://github.com/meysam81/listings-directory/blob/main/CONTRIBUTING.md"
class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
>Contributing Guide</a
>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-lg mb-4 dark:text-white">Community</h3>
<ul class="space-y-2">
<li>
<a
href="https://github.com/meysam81/listings-directory/discussions"
class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
>Discussions</a
>
</li>
</ul>
</div>
<div>
<h3 class="font-bold text-lg mb-4 dark:text-white">Legal</h3>
<ul class="space-y-2">
<li>
<a
href="https://github.com/meysam81/listings-directory/blob/main/LICENSE"
class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
>License</a
>
</li>
</ul>
</div>
</div>
<div
class="mt-8 pt-8 border-t border-gray-300 dark:border-gray-700 text-center"
>
<div class="flex justify-center space-x-4 mb-4">
<a
href="https://github.com/meysam81"
class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
/>
</svg>
</a>
<a
href="https://x.com/meysamazing"
class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400"
>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
<path
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
/>
</svg>
</a>
</div>
<p class="text-gray-500 dark:text-gray-400">
© <span id="currentYear"></span>Listings Directory. Licensed under the Apache License, Version 2.0.
</p>
<p class="text-sm text-gray-400 dark:text-gray-500 mt-2">
Built with ❤️ using Vanilla JavaScript and Tailwind CSS
</p>
</div>
</div>
</footer>
<script type="module" src="/src/index.js"></script>
</body>
</html>