source: resources/views/welcome.blade.php@ c454c0f

main
Last change on this file since c454c0f was c454c0f, checked in by bube-ristovska <ristovska725@…>, 11 months ago

First commit
  • Property mode set to 100644
File size: 18.6 KB
Line 
1<!DOCTYPE html>
2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6
7 <title>Laravel</title>
8
9 <!-- Fonts -->
10 <link rel="preconnect" href="https://fonts.bunny.net">
11 <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
12
13 <!-- Styles -->
14 <style>
15 @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap');
16 .font-family-karla { font-family: karla; }
17 .bg-sidebar { background: #3d68ff; }
18 .cta-btn { color: #3d68ff; }
19 .upgrade-btn { background: #1947ee; }
20 .upgrade-btn:hover { background: #0038fd; }
21 .active-nav-link { background: #1947ee; }
22 .nav-item:hover { background: #1947ee; }
23 .account-link:hover { background: #3d68ff; }
24 </style>
25 <script src="https://cdn.tailwindcss.com"></script>
26
27 </head>
28 <body class="bg-gray-100 font-family-karla flex">
29 <aside class="relative bg-sidebar h-screen w-64 hidden sm:block shadow-xl">
30 <div class="p-6">
31 <a href="#" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Началник</a>
32 <button class="w-full bg-white cta-btn font-semibold py-2 mt-5 rounded-br-lg rounded-bl-lg rounded-tr-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center">
33 <i class="fas fa-plus mr-3"></i> Додади полицаец
34 </button>
35 </div>
36 <nav class="text-white text-base font-semibold pt-3">
37 <a href="index.html" class="flex items-center active-nav-link text-white py-4 pl-6 nav-item">
38 <i class="fas fa-tachometer-alt mr-3"></i>
39 Dashboard
40 </a>
41 <a href="blank.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
42 <i class="fas fa-sticky-note mr-3"></i>
43 Blank Page
44 </a>
45 <a href="tables.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
46 <i class="fas fa-table mr-3"></i>
47 Tables
48 </a>
49 <a href="forms.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
50 <i class="fas fa-align-left mr-3"></i>
51 Forms
52 </a>
53 <a href="tabs.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
54 <i class="fas fa-tablet-alt mr-3"></i>
55 Tabbed Content
56 </a>
57 <a href="calendar.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-4 pl-6 nav-item">
58 <i class="fas fa-calendar mr-3"></i>
59 Calendar
60 </a>
61 </nav>
62 <a href="#" class="absolute w-full upgrade-btn bottom-0 active-nav-link text-white flex items-center justify-center py-4">
63 <i class="fas fa-arrow-circle-up mr-3"></i>
64 Upgrade to Pro!
65 </a>
66 </aside>
67
68 <div class="w-full flex flex-col h-screen overflow-y-hidden">
69 <!-- Desktop Header -->
70 <header class="w-full items-center bg-white py-2 px-6 hidden sm:flex">
71 <div class="w-1/2"></div>
72 <div x-data="{ isOpen: false }" class="relative w-1/2 flex justify-end">
73 <button @click="isOpen = !isOpen" class="realtive z-10 w-12 h-12 rounded-full overflow-hidden border-4 border-gray-400 hover:border-gray-300 focus:border-gray-300 focus:outline-none">
74 <img src="https://source.unsplash.com/uJ8LNVCBjFQ/400x400">
75 </button>
76 <button x-show="isOpen" @click="isOpen = false" class="h-full w-full fixed inset-0 cursor-default"></button>
77 <div x-show="isOpen" class="absolute w-32 bg-white rounded-lg shadow-lg py-2 mt-16">
78 <a href="#" class="block px-4 py-2 account-link hover:text-white">Account</a>
79 <a href="#" class="block px-4 py-2 account-link hover:text-white">Support</a>
80 <a href="#" class="block px-4 py-2 account-link hover:text-white">Sign Out</a>
81 </div>
82 </div>
83 </header>
84
85 <!-- Mobile Header & Nav -->
86 <header x-data="{ isOpen: false }" class="w-full bg-sidebar py-5 px-6 sm:hidden">
87 <div class="flex items-center justify-between">
88 <a href="index.html" class="text-white text-3xl font-semibold uppercase hover:text-gray-300">Admin</a>
89 <button @click="isOpen = !isOpen" class="text-white text-3xl focus:outline-none">
90 <i x-show="!isOpen" class="fas fa-bars"></i>
91 <i x-show="isOpen" class="fas fa-times"></i>
92 </button>
93 </div>
94
95 <!-- Dropdown Nav -->
96 <nav :class="isOpen ? 'flex': 'hidden'" class="flex flex-col pt-4">
97 <a href="index.html" class="flex items-center active-nav-link text-white py-2 pl-4 nav-item">
98 <i class="fas fa-tachometer-alt mr-3"></i>
99 Dashboard
100 </a>
101 <a href="blank.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
102 <i class="fas fa-sticky-note mr-3"></i>
103 Blank Page
104 </a>
105 <a href="tables.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
106 <i class="fas fa-table mr-3"></i>
107 Tables
108 </a>
109 <a href="forms.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
110 <i class="fas fa-align-left mr-3"></i>
111 Forms
112 </a>
113 <a href="tabs.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
114 <i class="fas fa-tablet-alt mr-3"></i>
115 Tabbed Content
116 </a>
117 <a href="calendar.html" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
118 <i class="fas fa-calendar mr-3"></i>
119 Calendar
120 </a>
121 <a href="#" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
122 <i class="fas fa-cogs mr-3"></i>
123 Support
124 </a>
125 <a href="#" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
126 <i class="fas fa-user mr-3"></i>
127 My Account
128 </a>
129 <a href="#" class="flex items-center text-white opacity-75 hover:opacity-100 py-2 pl-4 nav-item">
130 <i class="fas fa-sign-out-alt mr-3"></i>
131 Sign Out
132 </a>
133 <button class="w-full bg-white cta-btn font-semibold py-2 mt-3 rounded-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center">
134 <i class="fas fa-arrow-circle-up mr-3"></i> Upgrade to Pro!
135 </button>
136 </nav>
137 <!-- <button class="w-full bg-white cta-btn font-semibold py-2 mt-5 rounded-br-lg rounded-bl-lg rounded-tr-lg shadow-lg hover:shadow-xl hover:bg-gray-300 flex items-center justify-center">
138 <i class="fas fa-plus mr-3"></i> New Report
139 </button> -->
140 </header>
141
142 <div class="w-full overflow-x-hidden border-t flex flex-col">
143 <main class="w-full flex-grow p-6">
144 <h1 class="text-3xl text-black pb-6">Dashboard</h1>
145
146 <div class="flex flex-wrap mt-6">
147 <div class="w-full lg:w-1/2 pr-0 lg:pr-2">
148 <p class="text-xl pb-3 flex items-center">
149 <i class="fas fa-plus mr-3"></i> Месечни извештаи
150 </p>
151 <div class="p-6 bg-white">
152 <canvas id="chartOne" width="400" height="200"></canvas>
153 </div>
154 </div>
155 <div class="w-full lg:w-1/2 pl-0 lg:pl-2 mt-12 lg:mt-0">
156 <p class="text-xl pb-3 flex items-center">
157 <i class="fas fa-check mr-3"></i> Resolved Reports
158 </p>
159 <div class="p-6 bg-white">
160 <canvas id="chartTwo" width="400" height="200"></canvas>
161 </div>
162 </div>
163 </div>
164
165 <div class="w-full mt-12">
166 <p class="text-xl pb-3 flex items-center">
167 <i class="fas fa-list mr-3"></i> Latest Reports
168 </p>
169 <div class="bg-white overflow-auto">
170 <table class="min-w-full bg-white">
171 <thead class="bg-gray-800 text-white">
172 <tr>
173 <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Name</th>
174 <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm">Last name</th>
175 <th class="text-left py-3 px-4 uppercase font-semibold text-sm">Phone</th>
176 <th class="text-left py-3 px-4 uppercase font-semibold text-sm">Email</th>
177 </tr>
178 </thead>
179 <tbody class="text-gray-700">
180 <tr>
181 <td class="w-1/3 text-left py-3 px-4">Lian</td>
182 <td class="w-1/3 text-left py-3 px-4">Smith</td>
183 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
184 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
185 </tr>
186 <tr class="bg-gray-200">
187 <td class="w-1/3 text-left py-3 px-4">Emma</td>
188 <td class="w-1/3 text-left py-3 px-4">Johnson</td>
189 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
190 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
191 </tr>
192 <tr>
193 <td class="w-1/3 text-left py-3 px-4">Oliver</td>
194 <td class="w-1/3 text-left py-3 px-4">Williams</td>
195 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
196 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
197 </tr>
198 <tr class="bg-gray-200">
199 <td class="w-1/3 text-left py-3 px-4">Isabella</td>
200 <td class="w-1/3 text-left py-3 px-4">Brown</td>
201 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
202 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
203 </tr>
204 <tr>
205 <td class="w-1/3 text-left py-3 px-4">Lian</td>
206 <td class="w-1/3 text-left py-3 px-4">Smith</td>
207 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
208 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
209 </tr>
210 <tr class="bg-gray-200">
211 <td class="w-1/3 text-left py-3 px-4">Emma</td>
212 <td class="w-1/3 text-left py-3 px-4">Johnson</td>
213 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
214 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
215 </tr>
216 <tr>
217 <td class="w-1/3 text-left py-3 px-4">Oliver</td>
218 <td class="w-1/3 text-left py-3 px-4">Williams</td>
219 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
220 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
221 </tr>
222 <tr class="bg-gray-200">
223 <td class="w-1/3 text-left py-3 px-4">Isabella</td>
224 <td class="w-1/3 text-left py-3 px-4">Brown</td>
225 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="tel:622322662">622322662</a></td>
226 <td class="text-left py-3 px-4"><a class="hover:text-blue-500" href="mailto:jonsmith@mail.com">jonsmith@mail.com</a></td>
227 </tr>
228 </tbody>
229 </table>
230 </div>
231 </div>
232 </main>
233
234 <footer class="w-full bg-white text-right p-4">
235 Built by <a target="_blank" href="https://davidgrzyb.com" class="underline">David Grzyb</a>.
236 </footer>
237 </div>
238
239 </div>
240
241 <!-- AlpineJS -->
242 <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
243 <!-- Font Awesome -->
244 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
245 <!-- ChartJS -->
246 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
247
248 <script>
249 var chartOne = document.getElementById('chartOne');
250 var myChart = new Chart(chartOne, {
251 type: 'bar',
252 data: {
253 labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
254 datasets: [{
255 label: '# of Votes',
256 data: [12, 19, 3, 5, 2, 3],
257 backgroundColor: [
258 'rgba(255, 99, 132, 0.2)',
259 'rgba(54, 162, 235, 0.2)',
260 'rgba(255, 206, 86, 0.2)',
261 'rgba(75, 192, 192, 0.2)',
262 'rgba(153, 102, 255, 0.2)',
263 'rgba(255, 159, 64, 0.2)'
264 ],
265 borderColor: [
266 'rgba(255, 99, 132, 1)',
267 'rgba(54, 162, 235, 1)',
268 'rgba(255, 206, 86, 1)',
269 'rgba(75, 192, 192, 1)',
270 'rgba(153, 102, 255, 1)',
271 'rgba(255, 159, 64, 1)'
272 ],
273 borderWidth: 1
274 }]
275 },
276 options: {
277 scales: {
278 yAxes: [{
279 ticks: {
280 beginAtZero: true
281 }
282 }]
283 }
284 }
285 });
286
287 var chartTwo = document.getElementById('chartTwo');
288 var myLineChart = new Chart(chartTwo, {
289 type: 'line',
290 data: {
291 labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
292 datasets: [{
293 label: '# of Votes',
294 data: [12, 19, 3, 5, 2, 3],
295 backgroundColor: [
296 'rgba(255, 99, 132, 0.2)',
297 'rgba(54, 162, 235, 0.2)',
298 'rgba(255, 206, 86, 0.2)',
299 'rgba(75, 192, 192, 0.2)',
300 'rgba(153, 102, 255, 0.2)',
301 'rgba(255, 159, 64, 0.2)'
302 ],
303 borderColor: [
304 'rgba(255, 99, 132, 1)',
305 'rgba(54, 162, 235, 1)',
306 'rgba(255, 206, 86, 1)',
307 'rgba(75, 192, 192, 1)',
308 'rgba(153, 102, 255, 1)',
309 'rgba(255, 159, 64, 1)'
310 ],
311 borderWidth: 1
312 }]
313 },
314 options: {
315 scales: {
316 yAxes: [{
317 ticks: {
318 beginAtZero: true
319 }
320 }]
321 }
322 }
323 });
324 </script>
325 </body>
326</html>
Note: See TracBrowser for help on using the repository browser.