Skip to content

Commit

Permalink
1
Browse files Browse the repository at this point in the history
  • Loading branch information
@tanmoy-12
tanmoy-12 committed Mar 29, 2024
1 parent a8cb9d9 commit 8318f71
Show file tree
Hide file tree
Showing 9 changed files with 651 additions and 114 deletions.
173 changes: 59 additions & 114 deletions 1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,122 +3,67 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Gallery</title>
<style>

.wrapper {
display: flex;
width: 90%;
justify-content: center;
}

.employeecard {
width: 200px;
height: 280px;
margin: 20px;
border-radius: 15px;
padding: 1.5rem;
background: white;
position: relative;
display: flex;
align-items: flex-end;
transition: 0.4s ease-out;
box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
}

.employeecard:hover {
transform: translateY(20px);
}

.employeecard:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 15px;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
transition: 0.5s;
opacity: 0;
}

.employeecard:hover:before {
opacity: 1;
}

.employeecard img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
border-radius: 15px;
}

.employeecard .info {
position: relative;
z-index: 3;
color: white;
opacity: 0;
transform: translateY(30px);
transition: 0.5s;
}

.employeecard:hover .info {
opacity: 1;
transform: translateY(0px);
}

.employeecard .info h1 {
margin: 0px;
}

.employeecard .info p {
letter-spacing: 1px;
font-size: 16px;
font-weight: 700;
margin-top: 8px;
}

.employeecard .info button {
padding: 0.6rem;
outline: none;
border: none;
border-radius: 3px;
background: white;
color: black;
font-weight: bold;
cursor: pointer;
transition: 0.4s ease;
}

.employeecard .info button:hover {
background: dodgerblue;
color: white;
}

</style>
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="employeecard">
<img src="R.png" alt="Mountain">
<div class="info">
<h1>Mountain</h1>
<p>Lorem Ipsum is simply dummy text from the printing and typeseting industry</p>
</div>
<form id="appointment-form">
<div class="formbold-mb-5">
<label for="name" class="formbold-form-label">Full Name</label>
<input type="text" name="name" id="name" placeholder="Full Name" class="formbold-form-input" />
</div>
<div class="employeecard">
<img src="R.png" alt="Road">
<div class="info">
<h1>Road</h1>
<p>Lorem Ipsum is simply dummy text from the printing and typeseting industry</p>
</div>
<div class="formbold-mb-5">
<label for="phone" class="formbold-form-label">Phone Number</label>
<input type="text" name="phone" id="phone" placeholder="Enter your phone number" class="formbold-form-input" />
</div>
</div>
<div class="formbold-mb-5">
<label for="email" class="formbold-form-label">Email Address</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="formbold-form-input" />
</div>
<div class="formbold-mb-5">
<label for="message" class="formbold-form-label">Message</label>
<input type="message" name="message" id="message" placeholder="Enter your message" class="formbold-form-input" />
</div>
<!-- Add appointment date and time input fields here -->
<!-- Example: <input type="datetime-local" name="appointmentDateTime" id="appointmentDateTime" /> -->

<button type="button" onclick="sendAppointment()">Book Appointment</button>
</form>
<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
<script>
// Initialize EmailJS with your user ID
emailjs.init('lEUcQj8FrMJspVoh7');

// Function to send the appointment details
function sendAppointment() {
const form = document.getElementById('appointment-form');
const name = form.elements.name.value;
const email = form.elements.email.value;
const phone = form.elements.phone.value;
const message = form.elements.message.value;
// Get the appointment date and time (if you added that field)

// Set up the email template
const templateParams = {
to_email: '[email protected]', // Replace with your recipient's email address
from_name: name,
from_email: email,
phone: phone,
message: message,
// Add appointment date and time to templateParams if needed
};

// Send the email
emailjs.send('service_c4z771e', 'template_w2jm7lo', templateParams)
.then(function (response) {
console.log('Email sent successfully:', response);
// Show a confirmation message to the user
alert('Mail Sent, Waiting for confirmation');
})
.catch(function (error) {
console.error('Error sending email:', error);
});
}
</script>

</body>
</html>
</html>
100 changes: 100 additions & 0 deletions appointment.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", Arial, Helvetica, sans-serif;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/* background: linear-gradient(rgba(250,250,250, 0.6),
rgba(250,250,250, 0.8)),url('https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIzLTA4L3Jhd3BpeGVsX29mZmljZV8yNV9zaW1wbGVfM2RfaWxsdXN0cmF0aW9uX29mX2FfcmVjb3Zlcnlfcm9vbV93aV80ZjhkNDIwNC02N2I4LTQwMDQtYTBlNy05YjljMjIyMzE2ZGVfMS5qcGc.jpg'); */
}
.formbold-mb-5 {
margin-bottom: 20px;
}
.formbold-pt-3 {
padding-top: 12px;
}
.formbold-main-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
}

.formbold-form-wrapper {
margin: 0 auto;
max-width: 550px;
width: 100%;
background: rgb(235, 185, 185);
}
.formbold-form-label {
display: block;
font-weight: 500;
font-size: 16px;
color: #07074d;
margin-bottom: 12px;
}
.formbold-form-label-2 {
font-weight: 600;
font-size: 20px;
margin-bottom: 20px;
}

.formbold-form-input {
width: 100%;
padding: 12px 24px;
border-radius: 6px;
border: 1px solid #e0e0e0;
background: white;
font-weight: 500;
font-size: 16px;
color: #6b7280;
outline: none;
resize: none;
}
.formbold-form-input:focus {
border-color: #6a64f1;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}

.formbold-btn {
text-align: center;
font-size: 16px;
border-radius: 6px;
padding: 14px 32px;
border: none;
font-weight: 600;
background-color: #6a64f1;
color: white;
width: 100%;
cursor: pointer;
}
.formbold-btn:hover {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
}

.formbold--mx-3 {
margin-left: -12px;
margin-right: -12px;
}
.formbold-px-3 {
padding-left: 12px;
padding-right: 12px;
}
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.w-full {
width: 100%;
}
@media (min-width: 540px) {
.sm\:w-half {
width: 50%;
}
}
87 changes: 87 additions & 0 deletions appointment.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!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="appointment.css">
<title>Document</title>
</head>

<body style="background-color: #ffffff; padding: 20px;">
<div class="formbold-main-wrapper">
<!-- Author: FormBold Team -->
<!-- Learn More: https://formbold.com -->
<form class="formbold-form-wrapper" style="background-color: rgb(173, 192, 190); padding: 30px;" action="https://formspree.io/f/xvoewqoo" method="POST">
<form>
<div class="formbold-mb-5">
<label for="name" class="formbold-form-label"> Full Name </label>
<input type="text" id="name" name="name" class="formbold-form-input" required />
</div>
<div class="formbold-mb-5">
<label for="phone" class="formbold-form-label"> Phone Number </label>
<input type="tel" id="phone" name="phone" class="formbold-form-input" required />
</div>
<div class="formbold-mb-5">
<label for="email" class="formbold-form-label"> Email Address </label>
<input type="email" id="email" name="email" class="formbold-form-input" required />
</div>
<div class="flex flex-wrap formbold--mx-3">
<div class="w-full sm:w-half formbold-px-3">
<div class="formbold-mb-5 w-full">
<label for="date" class="formbold-form-label"> Prefered Appointment Time </label>
<input type="datetime-local" id="date" name="message" class="formbold-form-input" required />
</div>
</div>
</div>
<button type="submit" class="formbold-btn">Book Appointment</button>
</form>
</div>
</div>



<script>

</script>

<!-- <script>
function scheduleAppointment() {
var name = document.getElementById('name').value;
var phone = document.getElementById('phone').value;
var email = document.getElementById('email').value;
var date = document.getElementById('date').value;
var time = document.getElementById('time').value;
const templateParams = {
to_email: '[email protected]', // Replace with your recipient's email address
sender_name: name,
from_email: email,
sender_phone: phone,
appt_date : date,
appt_time : time,
// Add appointment date and time to templateParams if needed
};
emailjs.send('service_c4z771e', 'template_w2jm7lo', templateParams).then(
(response) => {
console.log('SUCCESS!', response.status, response.text);
},
(error) => {
console.log('FAILED...', error);
},
);
// if (name !== '' && phone !== '' && email !== '' && date !== '' && time !== '') {
// } else {
// alert("All fields are not filled");
// }
} -->
</script>

</body>

</html>
4 changes: 4 additions & 0 deletions event-booking-app-with-javascript-and-firebase/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# How to build an Event Booking App using HTML, CSS, JavaScript and Firebase?

In this tutorial, we are going to build an Event Booking App with HTML, CSS, JavaScript, and Firebase.
Find the [full article](https://www.ibrahima-ndaw.com/blog/build-an-event-booking-app-with-javascript-and-firebase/) on my blog
Loading

0 comments on commit 8318f71

Please sign in to comment.