-
Notifications
You must be signed in to change notification settings - Fork 1
/
welcome.html
163 lines (157 loc) · 8.42 KB
/
welcome.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UP SLIS Library</title>
<link rel="icon" href="logo_no.png">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="font-sans bg-white text-gray-800">
<!-- Welcome Header -->
<header class="flex relative w-full max-w-2xl px-12 lg:max-w-7xl grid grid-cols-1 items-center gap-2 py-5 lg:grid-cols-1">
<!-- Will work sa Laravel -->
@if (Route::has('login'))
<nav class="justify-start px-6 mt-4">
@auth
<a class="text-base font-bold rounded-md px-3 py-2 text-black">
Welcome!<br></a>
<a
href="{{ url('/dashboard') }}"
class="text-base font-bold rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-amber-600/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-black dark:hover:text-amber-600/80 dark:focus-visible:ring-black"
>
Student0441
</a>
@else
<a
href="{{ route('login') }}"
class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
>
Log in
</a>
@if (Route::has('register'))
<a
href="{{ route('register') }}"
class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
>
Register
</a>
@endif
@endauth
</nav>
@endif
<!-- Main Header -->
<div class="text-center">
<div class="flex justify-center lg:col-start-2">
<a href="/home" class="absolute-top"><img class="h-28 w-auto mr-2" src="library_logo.jpg" alt="Logo"></a>
</div>
<h1 class="text-7xl font-bold text-amber-800 mt-4">UP SLIS LIBRARY</h1>
<nav class="flex justify-between space-x-8 mt-4 mx-60 text-xl font-bold">
<a href="#" class="hover:text-amber-600">About Us</a>
<a href="#" class="hover:text-amber-600">Contact Us</a>
<a href="#" class="hover:text-amber-600">Services</a>
</nav>
</div>
</header>
<!-- Search Bar -->
<div class="flex justify-center mt-6">
<label class="relative block">
<span class="sr-only">Search</span>
<span class="absolute inset-y-0 left-0 flex items-center pl-2">
🔍
</span>
<input class="placeholder:italic placeholder:text-slate-400 block bg-white w-full border border-slate-300 rounded-full py-2 pl-9 pr-3 shadow-sm focus:outline-none focus:border-[#fddc58] focus:ring-[#fddc58] focus:ring-1 sm:text-sm" placeholder="Tuklas" type="text" name="search"/>
</label>
</div>
<!-- New Features Section -->
<section class="mt-12 px-6 mx-12">
<h2 class="text-lg font-bold text-amber-800">NEW FEATURES</h2>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mt-6">
<!-- Card 1 -->
<div class="text-center">
<div class="bg-blue-100 rounded-lg w-full h-40 flex items-center justify-center">
<a href="#"><img src="placeholder-image.png" alt="Feature 1" class="w-24 h-24"></a>
</div>
<a href="#"><p class="mt-4 text-sm font-semibold">ABOUT US</p></a>
</div>
<!-- Card 2 -->
<div class="text-center">
<div class="bg-blue-100 rounded-lg w-full h-40 flex items-center justify-center">
<a href="#"><img src="placeholder-image.png" alt="Feature 2" class="w-24 h-24"></a>
</div>
<a href="#"><p class="mt-4 text-sm font-semibold">ABOUT US</p></a>
</div>
<!-- Card 3 -->
<div class="text-center">
<div class="bg-blue-100 rounded-lg w-full h-40 flex items-center justify-center">
<a href="#"><img src="placeholder-image.png" alt="Feature 3" class="w-24 h-24"></a>
</div>
<a href="#"><p class="mt-4 text-sm font-semibold">ABOUT US</p></a>
</div>
</div>
</section>
<!-- Announcements Section -->
<section class="mt-12 px-6 mx-12">
<h2 class="text-lg font-bold text-amber-800">ANNOUNCEMENTS</h2>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mt-6">
<!-- Card 1 -->
<div class="text-center">
<div class="bg-blue-100 rounded-lg w-full h-40 flex items-center justify-center">
<a href="#"><img src="placeholder-image.png" alt="Feature 1" class="w-24 h-24"></a>
</div>
<a href="#"><p class="mt-4 text-sm font-semibold">ABOUT US</p></a>
</div>
<!-- Card 2 -->
<div class="text-center">
<div class="bg-blue-100 rounded-lg w-full h-40 flex items-center justify-center">
<a href="#"><img src="placeholder-image.png" alt="Feature 2" class="w-24 h-24"></a>
</div>
<a href="#"><p class="mt-4 text-sm font-semibold">ABOUT US</p></a>
</div>
<!-- Card 3 -->
<div class="text-center">
<div class="bg-blue-100 rounded-lg w-full h-40 flex items-center justify-center">
<a href="#"><img src="placeholder-image.png" alt="Feature 3" class="w-24 h-24"></a>
</div>
<a href="#"><p class="mt-4 text-sm font-semibold">ABOUT US</p></a>
</div>
</div>
</section>
<!-- New Arrivals Section -->
<section class="mt-12 px-6 mx-12">
<h2 class="text-lg font-bold text-amber-800">NEW ARRIVALS</h2>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mt-6">
<!-- Card 1 -->
<div class="text-center">
<div class="bg-blue-100 rounded-lg w-full h-40 flex items-center justify-center">
<a href="#"><img src="placeholder-image.png" alt="Feature 1" class="w-24 h-24"></a>
</div>
<a href="#"><p class="mt-4 text-sm font-semibold">ABOUT US</p></a>
</div>
<!-- Card 2 -->
<div class="text-center">
<div class="bg-blue-100 rounded-lg w-full h-40 flex items-center justify-center">
<a href="#"><img src="placeholder-image.png" alt="Feature 2" class="w-24 h-24"></a>
</div>
<a href="#"><p class="mt-4 text-sm font-semibold">ABOUT US</p></a>
</div>
<!-- Card 3 -->
<div class="text-center">
<div class="bg-blue-100 rounded-lg w-full h-40 flex items-center justify-center">
<a href="#"><img src="placeholder-image.png" alt="Feature 3" class="w-24 h-24"></a>
</div>
<a href="#"><p class="mt-4 text-sm font-semibold">ABOUT US</p></a>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
<!-- Footer -->
<img src="gabi_no.png" alt="Mascot" class="absolute left-1/2 transform -translate-x-1/2 w-50 h-48">
<footer class="mt-20 text-center py-4 relative absolute -bottom-24" style='background-color: #fddc58'>
<p class="mt-16 text-sm font-bold">University of the Philippines</p>
<p class="mb-8 text-sm">Address</p>
</footer>
</html>