-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
192 lines (180 loc) · 8.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
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<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>News Tune</title>
<!-- links -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
<!-- tailwind css import -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
}
}
}
</script>
<!-- font awesome kits -->
<script src="https://kit.fontawesome.com/89afacdaea.js" crossorigin="anonymous"></script>
<!-- custom styles -->
<style>
body {
min-height: 100vh;
}
footer {
position: sticky;
top: 100%;
}
</style>
</head>
<body>
<!-- header section -->
<header>
<!-- nav bar section start -->
<nav
class="relative w-full flex flex-wrap items-center justify-between py-4 bg-gray-100 text-gray-500 hover:text-gray-700 focus:text-gray-700 shadow-lg navbar navbar-expand-lg navbar-light">
<div class="container-fluid w-full flex flex-wrap items-center justify-between px-6">
<button class="
navbar-toggler
text-gray-500
border-0
hover:shadow-none hover:no-underline
py-2
px-2.5
bg-transparent
focus:outline-none focus:ring-0 focus:shadow-none focus:no-underline
" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="w-6" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor"
d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z">
</path>
</svg>
</button>
<div class="md:ml-10">
<a href="#" class="flex items-center"><span
class="bg-violet-700 px-2 pb-1 text-3xl font-bold text-white rounded-xl">News</span><span
class="text-3xl font-bold">Tune</span>
</a>
</div>
<div class="collapse navbar-collapse items-center" id="navbarSupportedContent">
<!-- Left links -->
<ul class="navbar-nav flex flex-col pl-0 list-style-none mr-auto md:mr-10">
<li class="nav-item px-2">
<a class="nav-link active text-xl font-medium" aria-current="page"
href="index.html">News</a>
</li>
<li class="nav-item pr-2">
<a class="nav-link text-gray-500 hover:text-gray-700 focus:text-gray-700 text-xl font-medium"
href="blog.html">Blogs</a>
</li>
</ul>
<!-- Left links -->
</div>
<!-- Collapsible wrapper -->
</div>
</nav>
<!-- nav bar section end -->
</header>
<!-- main section -->
<main class="container mx-auto">
<!-- news category section start -->
<section class="mt-5 p-4">
<div id="news-category" class="flex flex-row gap-5 md:gap-10 justify-center flex-wrap">
</div>
</section>
<!-- news category section end -->
<!-- spinner section start -->
<section id="spinner" class="hidden">
<div class="flex justify-center items-center h-48 md:h-96">
<div class="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full text-purple-500"
role="status">
</div>
<span class="visually-hidden">Loading...</span>
</div>
</section>
<!-- spinner section end -->
<!-- new count section start -->
<section class="mt-5">
<div id="news-count">
</div>
</section>
<!-- new count section end -->
<!-- sort by view nonfunctional section start -->
<section id="sort-section" class="hidden w-2/3 mx-auto my-5 flex-col md:flex-row justify-between items-center">
<div class="font-medium mt-1">
Sort By View: <select class="bg-slate-200 px-2 py-1 rounded" disabled="disabled">
<option value="default">Default</option>
</select>
</div>
<div class="font-medium mt-2">
<button class="bg-violet-500 px-2 py-1 rounded my-2 text-white">Today's Pick</button>
<button class="border border-violet-500 px-2 py-1 rounded my-2 text-violet-500">Trending</button>
</div>
</section>
<!-- sort by view nonfunctional section end -->
<!-- news preview section start -->
<section class="mt-5">
<div id="news-preview">
</div>
</section>
<!-- news preview section end -->
<!-- modal section start -->
<section>
<div class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
id="detailsModal" tabindex="-1" aria-labelledby="detailsModal" aria-modal="true" role="dialog">
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable relative w-auto pointer-events-none">
<div
class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
<div
class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
<h5 class="text-md md:text-xl font-medium leading-normal text-gray-800"
id="detailsModalLabel">
No Details
</h5>
<button type="button"
class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:opacity-75 hover:no-underline"
data-bs-dismiss="modal" aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
</div>
<div class="modal-body relative p-4">
<div id="modalImage">
</div>
<p id="modalDetails" class="mt-1">Details not found.
</p>
<div id="author" class="flex items-center mt-2">
</div>
<div id="views" class="mt-2 font-semibold pl-1"></div>
</div>
<div
class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
<button type="button"
class="inline-block px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
</section>
<!-- modal section end -->
</main>
<!-- footer section -->
<footer class="my-10">
<hr>
<p class="my-5 text-center font-semibold">Copyright 2023 NewsTune®</p>
</footer>
<!-- tailwind components -->
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
<!-- javaScripts -->
<script src="js/main.js"></script>
</body>
</html>