moeny/freesched
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove unneeded files

Browse Source
This commit is contained in:
moeny-matt 2025-03-11 16:11:18 -04:00
parent a9161d138e
commit fa7b4cf9c1
7 changed files with 3 additions and 2590 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1549
public/admin.js
View File

File diff suppressed because it is too large Load Diff

0
public/avatar.jpg → public/images/avatar.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

245
public/script.js
View File

@ -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
});

380
public/styles.css
View File

@ -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 */
}

413
public/timepicker.css
View File

@ -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;
}

2
views/admin.html
View File

@ -16,7 +16,7 @@
<div class="row g-0">
<div class="col-md-4 sidebar bg-light border-end border-gray-300">
<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>
<h3 class="fs-6 text-muted mb-2">30 Minute Meeting</h3>
<p class="text-muted fs-6">30 min</p>

4
views/index.html
View File

@ -6,7 +6,7 @@
<title>FreeSched Meeting Scheduler</title>
<!-- Bootstrap CSS -->
<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 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
</head>
@ -21,7 +21,7 @@
<div class="row g-0">
<div class="col-md-4 sidebar bg-light border-end border-gray-300">
<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>
<h3 class="fs-6 text-muted mb-2">30 Minute Meeting</h3>
<p class="text-muted fs-6">30 min</p>