Hugging Face's logo

Spaces:
Cezarxil
/
awesome-app
Running

App Files Community
Cezarxil commited on
Commit
539da66
·
verified ·
1 Parent(s): d852c21

Modify it to fit a phone screen - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +16 -16
index.html CHANGED
@@ -2,7 +2,7 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Epiliz Estetique - Client Appointments</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -34,16 +34,16 @@
34
  </style>
35
  </head>
36
  <body class="bg-pink-50 min-h-screen font-sans">
37
- <div class="container mx-auto px-4 py-8">
38
  <!-- Header -->
39
- <header class="flex flex-col md:flex-row justify-between items-center mb-8">
40
- <div class="flex items-center mb-4 md:mb-0">
41
- <div class="bg-pink-200 p-3 rounded-full mr-4">
42
- <i class="fas fa-spa text-pink-600 text-2xl"></i>
43
  </div>
44
- <h1 class="text-3xl font-bold text-pink-800">Epiliz Estetique</h1>
45
  </div>
46
- <div class="flex items-center space-x-4">
47
  <div class="relative">
48
  <button id="notificationBtn" class="bg-pink-200 p-3 rounded-full text-pink-600 hover:bg-pink-300 transition">
49
  <i class="fas fa-bell"></i>
@@ -65,9 +65,9 @@
65
  </header>
66
 
67
  <!-- Main Content -->
68
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
69
  <!-- Appointment Form -->
70
- <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6 border border-pink-200">
71
  <h2 class="text-xl font-semibold text-pink-800 mb-6">Schedule New Appointment</h2>
72
  <form id="appointmentForm" class="space-y-4">
73
  <div>
@@ -134,8 +134,8 @@
134
  </div>
135
  </div>
136
 
137
- <div class="overflow-x-auto">
138
- <table class="min-w-full divide-y divide-pink-200">
139
  <thead class="bg-pink-50">
140
  <tr>
141
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-pink-700 uppercase tracking-wider">Client</th>
@@ -158,7 +158,7 @@
158
  </div>
159
 
160
  <!-- Calendar View -->
161
- <div class="bg-white rounded-xl shadow-md p-6 mt-8 border border-pink-200">
162
  <h2 class="text-xl font-semibold text-pink-800 mb-6">Calendar View</h2>
163
  <div class="grid grid-cols-7 gap-1 mb-2">
164
  <div class="text-center font-medium text-pink-700 py-2">Sun</div>
@@ -179,7 +179,7 @@
179
 
180
  <!-- Success Modal -->
181
  <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
182
- <div class="bg-white rounded-xl p-6 max-w-sm w-full mx-4 transform transition-all fade-in">
183
  <div class="text-center">
184
  <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
185
  <i class="fas fa-check text-green-600"></i>
@@ -339,7 +339,7 @@
339
 
340
  return `
341
  <tr class="hover:bg-pink-50" data-id="${appointment.id}">
342
- <td class="px-6 py-4 whitespace-nowrap">
343
  <div class="flex items-center">
344
  <div class="flex-shrink-0 h-10 w-10 bg-pink-200 rounded-full flex items-center justify-center">
345
  <i class="fas fa-user text-pink-600"></i>
@@ -406,7 +406,7 @@
406
  const isToday = day === today.getDate() && currentMonth === today.getMonth();
407
 
408
  calendarGrid.innerHTML += `
409
- <div class="h-20 border border-pink-100 rounded overflow-hidden ${isToday ? 'bg-pink-100' : ''}">
410
  <div class="text-right p-1 text-sm ${isToday ? 'font-bold text-pink-800' : 'text-pink-700'}">${day}</div>
411
  <div class="overflow-y-auto h-12 text-xs px-1">
412
  ${dayAppointments.map(app => `
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
  <title>Epiliz Estetique - Client Appointments</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
34
  </style>
35
  </head>
36
  <body class="bg-pink-50 min-h-screen font-sans">
37
+ <div class="container mx-auto px-2 py-4">
38
  <!-- Header -->
39
+ <header class="flex flex-col justify-between items-center mb-4">
40
+ <div class="flex items-center mb-2">
41
+ <div class="bg-pink-200 p-2 rounded-full mr-2">
42
+ <i class="fas fa-spa text-pink-600 text-xl"></i>
43
  </div>
44
+ <h1 class="text-xl font-bold text-pink-800">Epiliz Estetique</h1>
45
  </div>
46
+ <div class="flex items-center space-x-2">
47
  <div class="relative">
48
  <button id="notificationBtn" class="bg-pink-200 p-3 rounded-full text-pink-600 hover:bg-pink-300 transition">
49
  <i class="fas fa-bell"></i>
 
65
  </header>
66
 
67
  <!-- Main Content -->
68
+ <div class="flex flex-col gap-4">
69
  <!-- Appointment Form -->
70
+ <div class="bg-white rounded-lg shadow-md p-4 border border-pink-200">
71
  <h2 class="text-xl font-semibold text-pink-800 mb-6">Schedule New Appointment</h2>
72
  <form id="appointmentForm" class="space-y-4">
73
  <div>
 
134
  </div>
135
  </div>
136
 
137
+ <div class="overflow-x-auto -mx-2">
138
+ <table class="min-w-full divide-y divide-pink-200 text-sm">
139
  <thead class="bg-pink-50">
140
  <tr>
141
  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-pink-700 uppercase tracking-wider">Client</th>
 
158
  </div>
159
 
160
  <!-- Calendar View -->
161
+ <div class="bg-white rounded-lg shadow-md p-4 mt-4 border border-pink-200">
162
  <h2 class="text-xl font-semibold text-pink-800 mb-6">Calendar View</h2>
163
  <div class="grid grid-cols-7 gap-1 mb-2">
164
  <div class="text-center font-medium text-pink-700 py-2">Sun</div>
 
179
 
180
  <!-- Success Modal -->
181
  <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
182
+ <div class="bg-white rounded-lg p-4 w-full mx-2 transform transition-all fade-in">
183
  <div class="text-center">
184
  <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
185
  <i class="fas fa-check text-green-600"></i>
 
339
 
340
  return `
341
  <tr class="hover:bg-pink-50" data-id="${appointment.id}">
342
+ <td class="px-2 py-2 whitespace-nowrap">
343
  <div class="flex items-center">
344
  <div class="flex-shrink-0 h-10 w-10 bg-pink-200 rounded-full flex items-center justify-center">
345
  <i class="fas fa-user text-pink-600"></i>
 
406
  const isToday = day === today.getDate() && currentMonth === today.getMonth();
407
 
408
  calendarGrid.innerHTML += `
409
+ <div class="h-12 border border-pink-100 rounded overflow-hidden ${isToday ? 'bg-pink-100' : ''}">
410
  <div class="text-right p-1 text-sm ${isToday ? 'font-bold text-pink-800' : 'text-pink-700'}">${day}</div>
411
  <div class="overflow-y-auto h-12 text-xs px-1">
412
  ${dayAppointments.map(app => `