-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
234 lines (214 loc) · 12.1 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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<link rel="icon" type="image/x-icon" href="js logo.ico">
<title>Welcome To MUZE.</title>
</head>
<body class="bg-dark">
<nav class="navbar navbar-expand-lg navbar text-danger fixed-top bg-primary">
<div class="container-lg">
<a class="navbar-brand text-bg-dark text-warning fw-bold px-5 rounded-5" href="#">MUZE:ON WEB</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars text-dark "></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link btn btn-info btn-lg p-lg-3 p-2 rounded-5" href="#Home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-info btn-lg p-lg-3 p-2 rounded-5" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-info btn-lg rounded-5 p-lg-3 p-2" href="#Gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-info btn-lg rounded-5 p-lg-3 p-2" href="#Contact">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Home section -->
<section class="home-items py-2" id="Home">
<div class="container-fluid">
<div class="row text-center text-md-start">
<div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
<div class="home-img w-100">
<img src="indmus.png" class="img-fluid rounded-4" style="max-width: 100%; height: auto;" alt="Museum Image Loading...">
</div>
</div>
<div class="col-12 col-md-6 d-flex align-items-center">
<div class="home-text text-success rounded-4">
<h1 class="text-warning">Book Museum Tickets for Your Next Trip</h1>
<p class="fw-bold fs-4 text-primary">
Our museum app is a cross-platform solution, available on web, Android, and iOS devices, ensuring a seamless experience across all platforms. Users can explore museums, interact with a built-in chatbot for assistance, and book tickets effortlessly. The app supports secure payment gateways, making the ticket booking process smooth and reliable. Whether on mobile or desktop, users can enjoy a consistent and feature-rich experience for all their museum visits.
</p>
<a href="https://www.youtube.com/watch?v=WRRfvmBv9ec&t=2s&pp=ygUMbXVzdWVtIGRlbGhp" class="btn btn-warning btn-lg rounded-5">YouTube</a>
</div>
</div>
</div>
</div>
</section>
<!-- About section -->
<section class="bg-dark about-sec py-5" id="about">
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-lg-8 bg-dark rounded-5 text-center">
<div class="section-title">
<h1 class="text-white fw-bolder mb-5 btn btn-primary btn-lg rounded-5 mt-4" id="about">About Me</h1>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<div class="about-text">
<h2 class="text-warning mb-1 fw-bolder text-decoration-underline">Interested In</h2>
<p class="fs-2 text-center text-white">Animation VFX, Character Creation in <span
class="fw-bolder text-danger">Blender, VFX-After Effects,Premier Pro, Photoshop.</span>
Check out my YouTube and Instagram Accounts to know more about my Blender works.</p>
<div class="d-flex flex-column flex-md-row justify-content-center gap-3 gap-md-5 mt-4">
<a href="https://www.instagram.com/jaisuryascreation/"
class="btn btn-danger text-white fw-bold fs-5 btn-lg rounded-5">Instagram</a>
<a href="https://www.linkedin.com/in/jaisurya-s-8b506b2a2"
class="btn btn-primary text-white fw-bold fs-5 btn-lg rounded-5">LinkedIn</a>
<a href="https://www.youtube.com/@jaisuryascreation932"
class="btn btn-danger text-white fw-bold fs-5 btn-lg rounded-5">YouTube</a>
</div>
<div class="container mt-5">
<h2 class="btn btn-primary rounded-5 text-warning">Sample Video</h2>
<p class="text-danger fw-bolder fs-1">Here is a Sample of one of my works from <span
class="btn btn-danger rounded-5 fw-bold">YouTube </span> </p>
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/rqTHYUQJLFA" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Gallery section -->
<section class="service-gallery py-5" id="Gallery">
<div class="container-lg">
<div class="text-center mb-4">
<h1 class="mt-5 btn btn-primary rounded-5 text-warning fs-4 fw-bolder">Some top hits in your area</h1>
<h6 class="fw-bolder text-info">Use left/right buttons to slide and view the images</h6>
</div>
<div id="carouselExampleControls" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item">
<img src="del1high.png" class="d-block w-100 img-thumbnail img-fluid" alt="Image 1">
</div>
<div class="carousel-item">
<img src="indmus.png" class="d-block w-100 img-thumbnail img-fluid" alt="Image 2">
</div>
<div class="carousel-item">
<img src="natdel opnening.jpg" class="d-block w-100 img-thumbnail img-fluid" alt="Image 3">
</div>
<div class="carousel-item active">
<img src="main musm.png" class="d-block w-100 img-thumbnail img-fluid" alt="Image 4">
</div>
<div class="carousel-item">
<img src="jscar.jpg" class="d-block w-100 img-thumbnail img-fluid" alt="Image 5">
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact py-5" id="Contact">
<div class="container-lg py-5">
<div class="row justify-content-center">
<div class="col-lg-8 bg-dark rounded-5 text-center">
<div class="section-title">
<h1 class="text-white fs-1 fw-bolder mb-4 btn btn-primary btn-lg rounded-5">Contact Me</h1>
</div>
</div>
</div>
<div class="row justify-content-center">
<!-- Email Section -->
<div class="col-md-5 d-flex align-items-center mb-4 mb-md-0">
<div class="contact-item d-flex flex-column text-center">
<i class="fas fa-envelope text-primary fs-1"></i>
<h4 class="text-white mt-2">Email-fake</h4>
<p class="fs-4 text-info">muzeappsupport@muzeapp.com</p>
</div>
</div>
<!-- Phone Section -->
<div class="col-md-5 d-flex align-items-center">
<div class="contact-item d-flex flex-column text-center">
<i class="fas fa-phone text-primary fs-1"></i>
<h4 class="text-white mt-2">Call</h4>
<p class="fs-4 text-info">+91 8500922912</p>
</div>
</div>
</div>
</div>
</section>
<!-- Chatbot Section -->
<div id="chatbot" class="position-fixed bottom-0 end-0 p-3">
<div class="card" id="chatbot-card">
<div class="card-header bg-primary text-white">Chat with us!</div>
<div class="card-body" id="chat-body" style="max-height: 300px; overflow-y: auto;">
<div id="chat-log"></div>
</div>
<div class="card-footer">
<input type="text" id="user-input" class="form-control" placeholder="Type a message">
<button class="btn btn-success mt-2" onclick="sendMessage()">Send</button>
</div>
</div>
</div>
<script>
const chatLog = document.getElementById("chat-log");
function sendMessage() {
const userInput = document.getElementById("user-input");
const userMessage = userInput.value;
if (userMessage.trim() !== "") {
// Add user message to chat log
const userBubble = document.createElement("div");
userBubble.className = "user-msg text-end text-white bg-info rounded p-2 my-2";
userBubble.innerText = userMessage;
chatLog.appendChild(userBubble);
// Simulate chatbot response
setTimeout(() => {
const botBubble = document.createElement("div");
botBubble.className = "bot-msg text-start text-white bg-secondary rounded p-2 my-2";
botBubble.innerText = getBotResponse(userMessage);
chatLog.appendChild(botBubble);
}, 500);
userInput.value = "";
chatLog.scrollTop = chatLog.scrollHeight;
}
}
function getBotResponse(input) {
// Basic responses
const responses = {
"hello": "Hi there! How can I help you?",
"hi": "Hello! How can I assist?",
"book": "Would you like to book a ticket?",
"tickets": "You can book museum tickets from the 'Book Tickets' section!",
"bye": "Goodbye! Have a great day!",
};
return responses[input.toLowerCase()] || "I'm not sure how to respond to that.";
}
</script>
</body>
</html>