remove unneeded files
This commit is contained in:
parent
a9161d138e
commit
fa7b4cf9c1
1549
public/admin.js
1549
public/admin.js
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
245
public/script.js
245
public/script.js
@ -1,245 +0,0 @@
|
|||||||
// public/public.js (for index.html)
|
|
||||||
document.addEventListener('DOMContentLoaded', async () => {
|
|
||||||
const calendarDates = document.getElementById('calendarDates');
|
|
||||||
const monthYear = document.getElementById('monthYear');
|
|
||||||
const prevMonthBtn = document.getElementById('prevMonth');
|
|
||||||
const nextMonthBtn = document.getElementById('nextMonth');
|
|
||||||
const currentTimeElement = document.getElementById('currentTime');
|
|
||||||
const timeSlotsContainer = document.getElementById('timeSlots');
|
|
||||||
|
|
||||||
// Check if navigation buttons exist before adding event listeners
|
|
||||||
if (!prevMonthBtn || !nextMonthBtn) {
|
|
||||||
console.error('Navigation buttons (prevMonth or nextMonth) not found in the DOM');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let currentDate = new Date();
|
|
||||||
let currentMonth = currentDate.getMonth();
|
|
||||||
let currentYear = currentDate.getFullYear();
|
|
||||||
let selectedDate = null; // Track selected date
|
|
||||||
|
|
||||||
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
|
||||||
|
|
||||||
// Fetch available dates from the API
|
|
||||||
async function fetchAvailability() {
|
|
||||||
try {
|
|
||||||
const response = await fetch('/api/availability');
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`HTTP error! status: ${response.status}`);
|
|
||||||
}
|
|
||||||
const availability = await response.json();
|
|
||||||
return availability;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching availability:', error);
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Render the calendar with available dates highlighted and automatically select/display the current date
|
|
||||||
async function renderCalendar(month, year) {
|
|
||||||
// Fetch availability first to ensure data is ready
|
|
||||||
const availability = await fetchAvailability();
|
|
||||||
|
|
||||||
calendarDates.innerHTML = '';
|
|
||||||
monthYear.textContent = `${months[month]} ${year}`;
|
|
||||||
|
|
||||||
const firstDay = new Date(year, month, 1).getDay();
|
|
||||||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
||||||
const today = new Date();
|
|
||||||
|
|
||||||
// Start of today (midnight)
|
|
||||||
const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
|
||||||
|
|
||||||
// Create blank cells for days before the first day of the month
|
|
||||||
for (let i = 0; i < firstDay; i++) {
|
|
||||||
const blank = document.createElement('div');
|
|
||||||
blank.classList.add('date-item', 'p-2', 'rounded-pill', 'text-center', 'text-muted');
|
|
||||||
calendarDates.appendChild(blank);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Populate the calendar with days
|
|
||||||
for (let i = 1; i <= daysInMonth; i++) {
|
|
||||||
const day = document.createElement('div');
|
|
||||||
day.classList.add('date-item', 'p-2', 'rounded-pill', 'text-center');
|
|
||||||
day.textContent = i;
|
|
||||||
const date = new Date(year, month, i);
|
|
||||||
const dateStr = date.toISOString().split('T')[0];
|
|
||||||
|
|
||||||
// Check if date is in the past
|
|
||||||
const isPastDate = date < startOfToday;
|
|
||||||
|
|
||||||
if (date.toDateString() === today.toDateString()) {
|
|
||||||
day.classList.add('current');
|
|
||||||
}
|
|
||||||
if (availability[dateStr]) {
|
|
||||||
day.classList.add('available');
|
|
||||||
}
|
|
||||||
if (isPastDate) {
|
|
||||||
day.classList.add('text-muted');
|
|
||||||
day.style.cursor = 'not-allowed';
|
|
||||||
} else {
|
|
||||||
day.addEventListener('click', () => selectDate(date, firstDay));
|
|
||||||
day.style.cursor = 'pointer';
|
|
||||||
}
|
|
||||||
calendarDates.appendChild(day);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Only try to select today if we're in the current month and year
|
|
||||||
if (today.getMonth() === month && today.getFullYear() === year) {
|
|
||||||
await selectDate(today, firstDay); // Use await to ensure selection and display complete
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle date selection
|
|
||||||
async function selectDate(date, firstDay) {
|
|
||||||
// Check if the date is in the past
|
|
||||||
const today = new Date();
|
|
||||||
const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
|
||||||
if (date < startOfToday) {
|
|
||||||
console.warn('Attempted to select a past date');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedDate = date;
|
|
||||||
const dateItems = document.querySelectorAll('#calendarDates .date-item');
|
|
||||||
dateItems.forEach(item => item.classList.remove('selected')); // Ensure only one date is selected
|
|
||||||
// Find the exact date item for the clicked or auto-selected date
|
|
||||||
const selectedDay = Array.from(dateItems).find(item => {
|
|
||||||
const dayText = item.textContent;
|
|
||||||
const itemDate = new Date(currentYear, currentMonth, parseInt(dayText));
|
|
||||||
return itemDate.toDateString() === date.toDateString();
|
|
||||||
});
|
|
||||||
if (selectedDay) selectedDay.classList.add('selected');
|
|
||||||
await updateTimeSlots(date); // Update time slots based on selected date, ensuring async completion
|
|
||||||
}
|
|
||||||
|
|
||||||
// Helper function to convert time string to minutes for sorting
|
|
||||||
function timeToMinutes(timeStr) {
|
|
||||||
console.log('Converting time:', timeStr);
|
|
||||||
const match = timeStr.match(/([0-9]+)(?::([0-9]+))?(am|pm)/i);
|
|
||||||
if (!match) {
|
|
||||||
console.warn('No match for time:', timeStr);
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
let [_, hours, minutes, period] = match;
|
|
||||||
hours = parseInt(hours);
|
|
||||||
minutes = minutes ? parseInt(minutes) : 0;
|
|
||||||
period = period.toLowerCase();
|
|
||||||
|
|
||||||
if (period === 'pm' && hours !== 12) hours += 12;
|
|
||||||
if (period === 'am' && hours === 12) hours = 0;
|
|
||||||
|
|
||||||
const totalMinutes = hours * 60 + minutes;
|
|
||||||
console.log(`${timeStr} -> ${totalMinutes} minutes`);
|
|
||||||
return totalMinutes;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update time slots based on selected date
|
|
||||||
async function updateTimeSlots(date) {
|
|
||||||
const availability = await fetchAvailability();
|
|
||||||
const dateStr = date.toISOString().split('T')[0];
|
|
||||||
let times = [];
|
|
||||||
if (availability[dateStr]) {
|
|
||||||
// Ensure availability[dateStr] is a string or array before processing
|
|
||||||
if (typeof availability[dateStr] === 'string') {
|
|
||||||
times = availability[dateStr].split(',').map(t => t.trim());
|
|
||||||
} else if (Array.isArray(availability[dateStr])) {
|
|
||||||
times = availability[dateStr].map(t => t.trim());
|
|
||||||
} else {
|
|
||||||
console.warn(`Unexpected data format for date ${dateStr}:`, availability[dateStr]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear available time slots or message
|
|
||||||
timeSlotsContainer.innerHTML = '';
|
|
||||||
|
|
||||||
// Get current time in minutes for comparison
|
|
||||||
const now = new Date();
|
|
||||||
const currentMinutes = now.getHours() * 60 + now.getMinutes();
|
|
||||||
const isToday = date.toDateString() === now.toDateString();
|
|
||||||
|
|
||||||
// Filter out past times if it's today
|
|
||||||
if (isToday) {
|
|
||||||
times = times.filter(time => timeToMinutes(time) > currentMinutes);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sort remaining times chronologically
|
|
||||||
times.sort((a, b) => timeToMinutes(a) - timeToMinutes(b));
|
|
||||||
|
|
||||||
if (times.length === 0) {
|
|
||||||
// Display appropriate message based on context
|
|
||||||
const noAvailabilityMsg = document.createElement('p');
|
|
||||||
noAvailabilityMsg.classList.add('text-muted', 'text-center', 'fw-bold', 'fs-5', 'py-3');
|
|
||||||
|
|
||||||
let message;
|
|
||||||
if (isToday) {
|
|
||||||
if (currentMinutes > timeToMinutes('5:00pm')) {
|
|
||||||
message = 'No more availability today.';
|
|
||||||
} else {
|
|
||||||
message = 'No available time slots for today.';
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
message = 'No availability on selected date.';
|
|
||||||
}
|
|
||||||
|
|
||||||
noAvailabilityMsg.textContent = message;
|
|
||||||
timeSlotsContainer.appendChild(noAvailabilityMsg);
|
|
||||||
} else {
|
|
||||||
// Populate time slots dynamically
|
|
||||||
times.forEach(time => {
|
|
||||||
const button = document.createElement('button');
|
|
||||||
button.classList.add('time-slot', 'btn', 'rounded-pill', 'w-100', 'mb-2');
|
|
||||||
button.classList.add('btn-outline-primary', 'available');
|
|
||||||
button.textContent = time;
|
|
||||||
button.addEventListener('click', () => {
|
|
||||||
if (button.classList.contains('available') && selectedDate) {
|
|
||||||
const allTimeSlots = timeSlotsContainer.querySelectorAll('.time-slot');
|
|
||||||
allTimeSlots.forEach(s => s.classList.remove('selected'));
|
|
||||||
button.classList.add('selected');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
timeSlotsContainer.appendChild(button);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Navigate to previous month
|
|
||||||
prevMonthBtn.addEventListener('click', () => {
|
|
||||||
currentMonth--;
|
|
||||||
if (currentMonth < 0) {
|
|
||||||
currentMonth = 11;
|
|
||||||
currentYear--;
|
|
||||||
}
|
|
||||||
renderCalendar(currentMonth, currentYear);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Navigate to next month
|
|
||||||
nextMonthBtn.addEventListener('click', () => {
|
|
||||||
currentMonth++;
|
|
||||||
if (currentMonth > 11) {
|
|
||||||
currentMonth = 0;
|
|
||||||
currentYear++;
|
|
||||||
}
|
|
||||||
renderCalendar(currentMonth, currentYear);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update current time in Eastern Time (US & Canada)
|
|
||||||
function updateCurrentTime() {
|
|
||||||
const options = {
|
|
||||||
timeZone: 'America/New_York',
|
|
||||||
hour: '2-digit',
|
|
||||||
minute: '2-digit',
|
|
||||||
hour12: true
|
|
||||||
};
|
|
||||||
const time = new Date().toLocaleTimeString('en-US', options);
|
|
||||||
currentTimeElement.textContent = time;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update time every second
|
|
||||||
setInterval(updateCurrentTime, 1000);
|
|
||||||
updateCurrentTime(); // Initial call
|
|
||||||
|
|
||||||
// Initial render (set to current date, automatically selecting and displaying it)
|
|
||||||
await renderCalendar(currentMonth, currentYear); // Use await to ensure the initial render completes
|
|
||||||
});
|
|
||||||
@ -1,380 +0,0 @@
|
|||||||
/* Custom styles to modernize and align with Calendly-inspired design */
|
|
||||||
:root {
|
|
||||||
--primary-color: #007bff; /* Blue from Calendly */
|
|
||||||
--secondary-color: #6c757d; /* Gray for muted elements */
|
|
||||||
--light-bg: #f8f9fa; /* Light background for modern look */
|
|
||||||
--shadow-color: rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: 'Arial', sans-serif; /* Matches Calendly font */
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-fluid {
|
|
||||||
max-width: 1000px;
|
|
||||||
margin: 20px auto;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0 2px 4px var(--shadow-color);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
width: 30%;
|
|
||||||
padding: 20px;
|
|
||||||
border-right: 1px solid #e1e8ed;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-pic {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
box-shadow: 0 2px 4px var(--shadow-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar h2 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar h3 {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.duration {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
width: 70%;
|
|
||||||
padding: 20px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calendar-header h1 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
color: #333;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month-nav {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #333;
|
|
||||||
padding: 0.5rem 0;
|
|
||||||
border-bottom: 1px solid #e1e8ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month-nav button {
|
|
||||||
color: var(--secondary-color);
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month-nav button:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.days-of-week, .dates {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(7, 1fr);
|
|
||||||
gap: 5px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.days-of-week span {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #666;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dates .date-item {
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dates .date-item.disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
color: var(--secondary-color);
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dates .date-item:hover {
|
|
||||||
background-color: #f0f8ff;
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dates .date-item.available {
|
|
||||||
background-color: #e9f2ff;
|
|
||||||
border: 2px solid var(--primary-color);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dates .date-item.selected {
|
|
||||||
background-color: #0d6efd !important;
|
|
||||||
color: #fff !important;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-weight: 600;
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dates .date-item.current {
|
|
||||||
background-color: #e9f2ff;
|
|
||||||
border: 2px solid var(--primary-color);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-slot {
|
|
||||||
font-size: 1rem;
|
|
||||||
padding: 0.75rem 1.5rem;
|
|
||||||
transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-slot.available {
|
|
||||||
background-color: #e9f2ff;
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-slots .text-muted {
|
|
||||||
color: #6c757d; /* Muted text color, matching Calendly */
|
|
||||||
font-size: rem; /* Slightly larger font, e.g., 20px instead of 16px */
|
|
||||||
font-weight: bold; /* Bold text */
|
|
||||||
padding: 2.2rem 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-slot.available:hover, .time-slot:hover {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
color: #fff;
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timezone {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #666;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#timezone {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.powered-by {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: #666;
|
|
||||||
opacity: 0.8;
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
z-index: 10;
|
|
||||||
background-color: transparent;
|
|
||||||
padding: 5px;
|
|
||||||
margin-left: auto; /* Push to the right */
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.powered-by.text-end {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.powered-by a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.powered-by a.github-link {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #e9e9e9;
|
|
||||||
color: #333;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.octocat-icon {
|
|
||||||
margin-right: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.octocat-icon svg {
|
|
||||||
fill: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.powered-by:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Admin-specific powered-by styling */
|
|
||||||
.admin-powered-by {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 20px;
|
|
||||||
right: 20px;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Index-specific powered-by styling */
|
|
||||||
.index-powered-by {
|
|
||||||
text-align: right;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-left: auto;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add clearance for elements with flex classes */
|
|
||||||
.d-flex.flex-column.gap-2.mt-3 {
|
|
||||||
margin-bottom: 50px; /* Increased margin to ensure these elements don't overlap with the powered-by button */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Admin-specific styles */
|
|
||||||
#admin .calendar {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#admin .form-control, #admin .form-select {
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#admin .btn-primary, #admin .btn-danger {
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#availabilityList .list-group-item {
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive adjustments */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.container-fluid {
|
|
||||||
margin: 10px;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar, .main-content {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
border-right: none;
|
|
||||||
border-bottom: 1px solid #e1e8ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
#admin .row {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
#admin .col-md-6 {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.powered-by {
|
|
||||||
position: relative;
|
|
||||||
bottom: auto;
|
|
||||||
right: auto;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-powered-by {
|
|
||||||
position: relative;
|
|
||||||
bottom: auto;
|
|
||||||
right: auto;
|
|
||||||
text-align: right;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.index-powered-by {
|
|
||||||
position: relative;
|
|
||||||
text-align: right;
|
|
||||||
margin-left: auto;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar buttons styling */
|
|
||||||
.sidebar .btn {
|
|
||||||
padding: 12px 20px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 500;
|
|
||||||
border: none;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .btn-success {
|
|
||||||
background-color: #2e8b57; /* Money green color */
|
|
||||||
border-color: #2e8b57;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .btn-success:hover {
|
|
||||||
background-color: #267349;
|
|
||||||
border-color: #267349;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .btn-warning {
|
|
||||||
background-color: #ffc107;
|
|
||||||
border-color: #ffc107;
|
|
||||||
color: #212529;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .btn-warning:hover {
|
|
||||||
background-color: #e0a800;
|
|
||||||
border-color: #e0a800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .btn-danger {
|
|
||||||
background-color: #dc3545;
|
|
||||||
border-color: #dc3545;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .btn-danger:hover {
|
|
||||||
background-color: #c82333;
|
|
||||||
border-color: #c82333;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dev Tools button styling */
|
|
||||||
.sidebar .btn-info {
|
|
||||||
background-color: #00bfff; /* Neon blue color */
|
|
||||||
border-color: #00bfff;
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 0 10px rgba(0, 191, 255, 0.5); /* Neon glow effect */
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar .btn-info:hover {
|
|
||||||
background-color: #0099cc;
|
|
||||||
border-color: #0099cc;
|
|
||||||
box-shadow: 0 0 15px rgba(0, 191, 255, 0.7); /* Enhanced glow on hover */
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-slots {
|
|
||||||
margin-bottom: 50px; /* Increased margin to ensure time slots don't overlap with the powered-by button */
|
|
||||||
}
|
|
||||||
@ -1,413 +0,0 @@
|
|||||||
/**
|
|
||||||
* Timepicker styling
|
|
||||||
*/
|
|
||||||
/* Core timepicker styling */
|
|
||||||
.timepicker-wrapper {
|
|
||||||
--fs-timepicker-wrapper-bg: rgba(0, 0, 0, 0.4);
|
|
||||||
--fs-timepicker-elements-min-width: 310px;
|
|
||||||
--fs-timepicker-elements-min-height: 325px;
|
|
||||||
--fs-timepicker-elements-background: #fff;
|
|
||||||
--fs-timepicker-elements-border-top-right-radius: 0.6rem;
|
|
||||||
--fs-timepicker-elements-border-top-left-radius: 0.6rem;
|
|
||||||
--fs-timepicker-head-bg: #3b71ca;
|
|
||||||
--fs-timepicker-head-height: 100px;
|
|
||||||
--fs-timepicker-head-border-top-right-radius: 0.5rem;
|
|
||||||
--fs-timepicker-head-border-top-left-radius: 0.5rem;
|
|
||||||
--fs-timepicker-head-padding-y: 10px;
|
|
||||||
--fs-timepicker-head-padding-right: 24px;
|
|
||||||
--fs-timepicker-head-padding-left: 50px;
|
|
||||||
--fs-timepicker-button-font-size: 0.8rem;
|
|
||||||
--fs-timepicker-button-min-width: 64px;
|
|
||||||
--fs-timepicker-button-font-weight: 500;
|
|
||||||
--fs-timepicker-button-line-height: 40px;
|
|
||||||
--fs-timepicker-button-border-radius: 10px;
|
|
||||||
--fs-timepicker-button-color: #4f4f4f;
|
|
||||||
--fs-timepicker-button-hover-bg: rgba(0, 0, 0, 0.08);
|
|
||||||
--fs-timepicker-button-focus-bg: rgba(0, 0, 0, 0.08);
|
|
||||||
--fs-timepicker-button-padding-x: 10px;
|
|
||||||
--fs-timepicker-button-height: 40px;
|
|
||||||
--fs-timepicker-button-margin-bottom: 10px;
|
|
||||||
--fs-timepicker-current-font-size: 3.75rem;
|
|
||||||
--fs-timepicker-current-font-weight: 300;
|
|
||||||
--fs-timepicker-current-line-height: 1.2;
|
|
||||||
--fs-timepicker-current-color: #fff;
|
|
||||||
--fs-timepicker-current-opacity: 0.54;
|
|
||||||
--fs-timepicker-clock-wrapper-min-width: 310px;
|
|
||||||
--fs-timepicker-clock-wrapper-max-width: 325px;
|
|
||||||
--fs-timepicker-clock-wrapper-min-height: 305px;
|
|
||||||
--fs-timepicker-clock-wrapper-text-color: #4f4f4f;
|
|
||||||
--fs-timepicker-mode-wrapper-font-size: 18px;
|
|
||||||
--fs-timepicker-mode-wrapper-color: rgba(255, 255, 255, 0.54);
|
|
||||||
--fs-timepicker-clock-width: 260px;
|
|
||||||
--fs-timepicker-clock-height: 260px;
|
|
||||||
--fs-timepicker-clock-face-bg: #f0f0f0;
|
|
||||||
--fs-timepicker-time-tips-inner-active-color: #fff;
|
|
||||||
--fs-timepicker-time-tips-inner-active-bg: #3b71ca;
|
|
||||||
--fs-timepicker-time-tips-inner-active-font-weight: 400;
|
|
||||||
--fs-timepicker-dot-font-weight: 300;
|
|
||||||
--fs-timepicker-dot-line-height: 1.2;
|
|
||||||
--fs-timepicker-dot-color: #fff;
|
|
||||||
--fs-timepicker-dot-font-size: 3.75rem;
|
|
||||||
--fs-timepicker-dot-opacity: 0.54;
|
|
||||||
--fs-timepicker-item-middle-dot-width: 6px;
|
|
||||||
--fs-timepicker-item-middle-dot-height: 6px;
|
|
||||||
--fs-timepicker-item-middle-dot-border-radius: 50%;
|
|
||||||
--fs-timepicker-item-middle-dot-bg: #3b71ca;
|
|
||||||
--fs-timepicker-hand-pointer-bg: #3b71ca;
|
|
||||||
--fs-timepicker-hand-pointer-bottom: 50%;
|
|
||||||
--fs-timepicker-hand-pointer-height: 40%;
|
|
||||||
--fs-timepicker-hand-pointer-left: calc(50% - 1px);
|
|
||||||
--fs-timepicker-hand-pointer-width: 2px;
|
|
||||||
--fs-timepicker-circle-top: -21px;
|
|
||||||
--fs-timepicker-circle-left: -15px;
|
|
||||||
--fs-timepicker-circle-width: 4px;
|
|
||||||
--fs-timepicker-circle-border-width: 14px;
|
|
||||||
--fs-timepicker-circle-border-color: #3b71ca;
|
|
||||||
--fs-timepicker-circle-height: 4px;
|
|
||||||
--fs-timepicker-circle-active-background-color: #fff;
|
|
||||||
--fs-timepicker-hour-mode-color: #fff;
|
|
||||||
--fs-timepicker-hour-mode-opacity: 0.54;
|
|
||||||
--fs-timepicker-hour-mode-hover-bg: rgba(0, 0, 0, 0.15);
|
|
||||||
--fs-timepicker-hour-mode-active-color: #fff;
|
|
||||||
--fs-timepicker-footer-border-bottom-left-radius: 0.5rem;
|
|
||||||
--fs-timepicker-footer-border-bottom-right-radius: 0.5rem;
|
|
||||||
--fs-timepicker-footer-height: 56px;
|
|
||||||
--fs-timepicker-footer-padding-x: 12px;
|
|
||||||
--fs-timepicker-footer-bg: #fff;
|
|
||||||
--fs-timepicker-clock-animation: show-up-clock 350ms linear;
|
|
||||||
--fs-timepicker-zindex: 1065;
|
|
||||||
|
|
||||||
touch-action: none;
|
|
||||||
z-index: var(--fs-timepicker-zindex);
|
|
||||||
opacity: 1;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background-color: var(--fs-timepicker-wrapper-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation */
|
|
||||||
.animation {
|
|
||||||
animation-fill-mode: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in {
|
|
||||||
animation-name: fadeIn;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes show-up-clock {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.7);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Timepicker components */
|
|
||||||
.timepicker-modal {
|
|
||||||
margin: 0;
|
|
||||||
font-family: "Roboto", sans-serif;
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #4f4f4f;
|
|
||||||
text-align: left;
|
|
||||||
background-color: #fff;
|
|
||||||
z-index: var(--fs-timepicker-zindex);
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure all elements inside the timepicker use border-box */
|
|
||||||
.timepicker-modal *,
|
|
||||||
.timepicker-modal *::before,
|
|
||||||
.timepicker-modal *::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-container {
|
|
||||||
max-height: calc(100% - 64px);
|
|
||||||
overflow-y: auto;
|
|
||||||
box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-elements {
|
|
||||||
min-width: var(--fs-timepicker-elements-min-width);
|
|
||||||
min-height: var(--fs-timepicker-elements-min-height);
|
|
||||||
background: var(--fs-timepicker-elements-background);
|
|
||||||
border-top-right-radius: var(--fs-timepicker-elements-border-top-right-radius);
|
|
||||||
border-top-left-radius: var(--fs-timepicker-elements-border-top-left-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-head {
|
|
||||||
background-color: var(--fs-timepicker-head-bg);
|
|
||||||
height: var(--fs-timepicker-head-height);
|
|
||||||
border-top-right-radius: var(--fs-timepicker-head-border-top-right-radius);
|
|
||||||
border-top-left-radius: var(--fs-timepicker-head-border-top-left-radius);
|
|
||||||
padding: var(--fs-timepicker-head-padding-y) var(--fs-timepicker-head-padding-right) var(--fs-timepicker-head-padding-y) var(--fs-timepicker-head-padding-left);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-current {
|
|
||||||
font-size: var(--fs-timepicker-current-font-size);
|
|
||||||
font-weight: var(--fs-timepicker-current-font-weight);
|
|
||||||
line-height: var(--fs-timepicker-current-line-height);
|
|
||||||
color: var(--fs-timepicker-current-color);
|
|
||||||
opacity: var(--fs-timepicker-current-opacity);
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-current.active {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-dot {
|
|
||||||
font-size: var(--fs-timepicker-dot-font-size);
|
|
||||||
font-weight: var(--fs-timepicker-dot-font-weight);
|
|
||||||
line-height: var(--fs-timepicker-dot-line-height);
|
|
||||||
color: var(--fs-timepicker-dot-color);
|
|
||||||
opacity: var(--fs-timepicker-dot-opacity);
|
|
||||||
border: none;
|
|
||||||
background: transparent;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-mode-wrapper {
|
|
||||||
font-size: var(--fs-timepicker-mode-wrapper-font-size);
|
|
||||||
color: var(--fs-timepicker-mode-wrapper-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-hour-mode {
|
|
||||||
padding: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
color: var(--fs-timepicker-hour-mode-color);
|
|
||||||
opacity: var(--fs-timepicker-hour-mode-opacity);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* These focus styles are overridden later in the file with !important */
|
|
||||||
.timepicker-hour-mode:hover,
|
|
||||||
.timepicker-hour-mode:focus,
|
|
||||||
.timepicker-hour:hover,
|
|
||||||
.timepicker-hour:focus,
|
|
||||||
.timepicker-minute:hover,
|
|
||||||
.timepicker-minute:focus {
|
|
||||||
background-color: var(--fs-timepicker-hour-mode-hover-bg);
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-hour-mode.active,
|
|
||||||
.timepicker-hour.active,
|
|
||||||
.timepicker-minute.active {
|
|
||||||
color: #fff;
|
|
||||||
opacity: 1;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-clock-wrapper {
|
|
||||||
min-width: var(--fs-timepicker-clock-wrapper-min-width);
|
|
||||||
max-width: var(--fs-timepicker-clock-wrapper-max-width);
|
|
||||||
min-height: var(--fs-timepicker-clock-wrapper-min-height);
|
|
||||||
overflow-x: hidden;
|
|
||||||
height: 100%;
|
|
||||||
color: var(--fs-timepicker-clock-wrapper-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-clock {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 100%;
|
|
||||||
width: var(--fs-timepicker-clock-width);
|
|
||||||
height: var(--fs-timepicker-clock-height);
|
|
||||||
cursor: default;
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color: var(--fs-timepicker-clock-face-bg);
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-clock-animation {
|
|
||||||
animation: var(--fs-timepicker-clock-animation);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-middle-dot {
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: var(--fs-timepicker-item-middle-dot-width);
|
|
||||||
height: var(--fs-timepicker-item-middle-dot-height);
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
border-radius: var(--fs-timepicker-item-middle-dot-border-radius);
|
|
||||||
background-color: var(--fs-timepicker-item-middle-dot-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-hand-pointer {
|
|
||||||
background-color: var(--fs-timepicker-hand-pointer-bg);
|
|
||||||
bottom: var(--fs-timepicker-hand-pointer-bottom);
|
|
||||||
height: var(--fs-timepicker-hand-pointer-height);
|
|
||||||
left: var(--fs-timepicker-hand-pointer-left);
|
|
||||||
transform-origin: center bottom 0;
|
|
||||||
width: var(--fs-timepicker-hand-pointer-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-circle {
|
|
||||||
top: var(--fs-timepicker-circle-top);
|
|
||||||
left: var(--fs-timepicker-circle-left);
|
|
||||||
width: var(--fs-timepicker-circle-width);
|
|
||||||
border: var(--fs-timepicker-circle-border-width) solid var(--fs-timepicker-circle-border-color);
|
|
||||||
height: var(--fs-timepicker-circle-height);
|
|
||||||
box-sizing: content-box;
|
|
||||||
border-radius: 100%;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-circle.active {
|
|
||||||
background-color: var(--fs-timepicker-circle-active-background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-time-tips-minutes,
|
|
||||||
.timepicker-time-tips-hours {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 100%;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-weight: 300;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-time-tips-minutes.active,
|
|
||||||
.timepicker-time-tips-hours.active {
|
|
||||||
color: var(--fs-timepicker-time-tips-inner-active-color);
|
|
||||||
background-color: var(--fs-timepicker-time-tips-inner-active-bg);
|
|
||||||
font-weight: var(--fs-timepicker-time-tips-inner-active-font-weight);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-footer {
|
|
||||||
border-bottom-left-radius: var(--fs-timepicker-footer-border-bottom-left-radius);
|
|
||||||
border-bottom-right-radius: var(--fs-timepicker-footer-border-bottom-right-radius);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
height: var(--fs-timepicker-footer-height);
|
|
||||||
padding-left: var(--fs-timepicker-footer-padding-x);
|
|
||||||
padding-right: var(--fs-timepicker-footer-padding-x);
|
|
||||||
background-color: var(--fs-timepicker-footer-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-button {
|
|
||||||
font-size: var(--fs-timepicker-button-font-size);
|
|
||||||
min-width: var(--fs-timepicker-button-min-width);
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-weight: var(--fs-timepicker-button-font-weight);
|
|
||||||
line-height: var(--fs-timepicker-button-line-height);
|
|
||||||
border-radius: var(--fs-timepicker-button-border-radius);
|
|
||||||
letter-spacing: 0.08em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: var(--fs-timepicker-button-color);
|
|
||||||
border: none;
|
|
||||||
background-color: transparent;
|
|
||||||
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
||||||
outline: none;
|
|
||||||
padding: 0 var(--fs-timepicker-button-padding-x);
|
|
||||||
height: var(--fs-timepicker-button-height);
|
|
||||||
margin-bottom: var(--fs-timepicker-button-margin-bottom);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-button:hover {
|
|
||||||
background-color: var(--fs-timepicker-button-hover-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timepicker-button:focus {
|
|
||||||
outline: none;
|
|
||||||
background-color: var(--fs-timepicker-button-focus-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add missing button styling */
|
|
||||||
button {
|
|
||||||
margin: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Remove focus from buttons after clicked **/
|
|
||||||
/* Prevent selection/focus styling on all buttons in the timepicker */
|
|
||||||
.timepicker-modal button {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
touch-action: manipulation;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Override focus styles completely */
|
|
||||||
.timepicker-modal button:focus {
|
|
||||||
outline: none !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
-webkit-box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Prevent text selection on all elements */
|
|
||||||
.timepicker-modal * {
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add this to the body when the timepicker is active */
|
|
||||||
body.timepicker-active {
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add !important to ensure these styles take precedence */
|
|
||||||
.timepicker-current:focus,
|
|
||||||
.timepicker-dot:focus,
|
|
||||||
.timepicker-hour-mode:focus,
|
|
||||||
.timepicker-button:focus {
|
|
||||||
outline: none !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Only apply background color on hover, not on focus */
|
|
||||||
.timepicker-hour-mode:hover,
|
|
||||||
.timepicker-hour:hover,
|
|
||||||
.timepicker-minute:hover,
|
|
||||||
.timepicker-button:hover {
|
|
||||||
background-color: var(--fs-timepicker-hour-mode-hover-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure active states are properly styled */
|
|
||||||
.timepicker-hour-mode.active,
|
|
||||||
.timepicker-hour.active,
|
|
||||||
.timepicker-minute.active {
|
|
||||||
color: #fff !important;
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
@ -16,7 +16,7 @@
|
|||||||
<div class="row g-0">
|
<div class="row g-0">
|
||||||
<div class="col-md-4 sidebar bg-light border-end border-gray-300">
|
<div class="col-md-4 sidebar bg-light border-end border-gray-300">
|
||||||
<div class="d-flex flex-column align-items-center p-4">
|
<div class="d-flex flex-column align-items-center p-4">
|
||||||
<img src="/avatar.jpg" alt="Doug Masiero" class="profile-pic rounded-circle mb-3 shadow-sm">
|
<img src="/images/avatar.jpg" alt="Doug Masiero" class="profile-pic rounded-circle mb-3 shadow-sm">
|
||||||
<h2 class="fs-5 text-dark fw-bold mb-2">Doug Masiero</h2>
|
<h2 class="fs-5 text-dark fw-bold mb-2">Doug Masiero</h2>
|
||||||
<h3 class="fs-6 text-muted mb-2">30 Minute Meeting</h3>
|
<h3 class="fs-6 text-muted mb-2">30 Minute Meeting</h3>
|
||||||
<p class="text-muted fs-6">30 min</p>
|
<p class="text-muted fs-6">30 min</p>
|
||||||
|
|||||||
@ -6,7 +6,7 @@
|
|||||||
<title>FreeSched Meeting Scheduler</title>
|
<title>FreeSched Meeting Scheduler</title>
|
||||||
<!-- Bootstrap CSS -->
|
<!-- Bootstrap CSS -->
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
<link rel="stylesheet" href="/styles.css">
|
<link rel="stylesheet" href="/css/styles.css">
|
||||||
<!-- Bootstrap Icons -->
|
<!-- Bootstrap Icons -->
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
|
||||||
</head>
|
</head>
|
||||||
@ -21,7 +21,7 @@
|
|||||||
<div class="row g-0">
|
<div class="row g-0">
|
||||||
<div class="col-md-4 sidebar bg-light border-end border-gray-300">
|
<div class="col-md-4 sidebar bg-light border-end border-gray-300">
|
||||||
<div class="d-flex flex-column align-items-center p-4">
|
<div class="d-flex flex-column align-items-center p-4">
|
||||||
<img src="/avatar.jpg" alt="Doug Masiero" class="profile-pic rounded-circle mb-3 shadow-sm">
|
<img src="/images/avatar.jpg" alt="Doug Masiero" class="profile-pic rounded-circle mb-3 shadow-sm">
|
||||||
<h2 class="fs-5 text-dark fw-bold mb-2">Doug Masiero</h2>
|
<h2 class="fs-5 text-dark fw-bold mb-2">Doug Masiero</h2>
|
||||||
<h3 class="fs-6 text-muted mb-2">30 Minute Meeting</h3>
|
<h3 class="fs-6 text-muted mb-2">30 Minute Meeting</h3>
|
||||||
<p class="text-muted fs-6">30 min</p>
|
<p class="text-muted fs-6">30 min</p>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user