dvirlabs/oramap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modern the button
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
dvirlabs 2026-03-25 02:38:39 +02:00
parent 02074aa4a6
commit dfb21aa0f8
2 changed files with 196 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/public/index.html
View File

@ -19,31 +19,35 @@
<!-- Add Family Form Modal --> <!-- Add Family Form Modal -->
<div id="addFamilyModal" class="modal"> <div id="addFamilyModal" class="modal">
<div class="modal-content"> <div class="modal-content">
<span class="close" onclick="toggleAddFamilyForm()">&times;</span> <div class="modal-header">
<h2>Add New Family Location</h2> <h2>Add New Family Location</h2>
<form id="addFamilyForm" onsubmit="addFamily(event)"> <span class="close" onclick="toggleAddFamilyForm()">&times;</span>
<div class="form-group"> </div>
<label for="familyName">Family Name:</label> <div class="modal-body">
<input type="text" id="familyName" required placeholder="e.g., Cohen (כהן)" /> <div id="formMessage" class="form-message"></div>
</div> <form id="addFamilyForm" onsubmit="addFamily(event)">
<div class="form-group"> <div class="form-group">
<label for="cityName">City:</label> <label for="familyName">Family Name</label>
<input type="text" id="cityName" required placeholder="e.g., Jerusalem (ירושלים)" /> <input type="text" id="familyName" required placeholder="e.g., Cohen (כהן)" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="latitude">Latitude:</label> <label for="cityName">City</label>
<input type="number" id="latitude" required step="0.0001" min="-90" max="90" placeholder="e.g., 31.7683" /> <input type="text" id="cityName" required placeholder="e.g., Jerusalem (ירושלים)" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="longitude">Longitude:</label> <label for="latitude">Latitude</label>
<input type="number" id="longitude" required step="0.0001" min="-180" max="180" placeholder="e.g., 35.2137" /> <input type="number" id="latitude" required step="0.0001" min="-90" max="90" placeholder="e.g., 31.7683" />
</div> </div>
<div class="form-actions"> <div class="form-group">
<button type="submit" class="btn btn-primary">Add Family</button> <label for="longitude">Longitude</label>
<button type="button" class="btn btn-secondary" onclick="toggleAddFamilyForm()">Cancel</button> <input type="number" id="longitude" required step="0.0001" min="-180" max="180" placeholder="e.g., 35.2137" />
</div> </div>
</form> <div class="form-actions">
<div id="formMessage" class="form-message"></div> <button type="submit" class="btn-submit">Add Family</button>
<button type="button" class="btn-cancel" onclick="toggleAddFamilyForm()">Cancel</button>
</div>
</form>
</div>
</div> </div>
</div> </div>

220
frontend/public/style.css
View File

@ -97,7 +97,7 @@
flex-direction: column; flex-direction: column;
} }
/* Modal styles */ /* Modern Modal styles with animations */
.modal { .modal {
display: none; display: none;
position: fixed; position: fixed;
@ -106,133 +106,247 @@
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
} }
.modal-content { .modal-content {
background-color: #fefefe; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
margin: 5% auto; margin: 8% auto;
padding: 30px; padding: 0;
border-radius: 10px; border-radius: 20px;
width: 90%; width: 90%;
max-width: 500px; max-width: 480px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
animation: slideUp 0.4s ease-out;
overflow: hidden;
}
.modal-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 24px 30px;
color: white;
position: relative;
} }
.modal-content h2 { .modal-content h2 {
margin-bottom: 20px; margin: 0;
color: #2c3e50; font-size: 24px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.modal-content h2::before {
content: "📍";
font-size: 28px;
} }
.close { .close {
color: #aaa; position: absolute;
float: right; right: 20px;
font-size: 28px; top: 50%;
font-weight: bold; transform: translateY(-50%);
line-height: 20px; color: rgba(255, 255, 255, 0.9);
font-size: 32px;
font-weight: 300;
line-height: 1;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
} }
.close:hover, .close:hover {
.close:focus { background-color: rgba(255, 255, 255, 0.2);
color: #000; transform: translateY(-50%) rotate(90deg);
color: white;
}
.modal-body {
padding: 30px;
} }
.form-group { .form-group {
margin-bottom: 15px; margin-bottom: 20px;
} }
.form-group label { .form-group label {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 8px;
font-weight: bold; font-weight: 600;
color: #2c3e50; color: #2d3748;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.form-group label::before {
content: "•";
color: #667eea;
font-size: 20px;
} }
.form-group input { .form-group input {
width: 100%; width: 100%;
padding: 10px; padding: 12px 16px;
border: 1px solid #ddd; border: 2px solid #e2e8f0;
border-radius: 5px; border-radius: 12px;
font-size: 14px; font-size: 15px;
transition: all 0.3s ease;
background-color: white;
font-family: inherit;
} }
.form-group input:focus { .form-group input:focus {
outline: none; outline: none;
border-color: #3498db; border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
transform: translateY(-1px);
}
.form-group input:hover {
border-color: #cbd5e0;
} }
.form-actions { .form-actions {
display: flex; display: flex;
gap: 10px; gap: 12px;
margin-top: 20px; margin-top: 28px;
padding-top: 20px;
border-top: 2px solid #f1f3f5;
} }
.form-actions button { .form-actions button {
flex: 1; flex: 1;
padding: 10px; padding: 14px 24px;
border: none; border: none;
border-radius: 5px; border-radius: 12px;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: 600;
font-size: 15px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
} }
.btn-submit { .btn-submit {
background-color: #27ae60; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; color: white;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
} }
.btn-submit:hover { .btn-submit:hover {
background-color: #229954; transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}
.btn-submit:active {
transform: translateY(0);
}
.btn-submit::before {
content: "✓";
font-size: 18px;
} }
.btn-cancel { .btn-cancel {
background-color: #95a5a6; background-color: #e2e8f0;
color: white; color: #4a5568;
} }
.btn-cancel:hover { .btn-cancel:hover {
background-color: #7f8c8d; background-color: #cbd5e0;
transform: translateY(-2px);
}
.btn-cancel::before {
content: "✕";
font-size: 18px;
} }
.form-message { .form-message {
padding: 10px; padding: 14px 18px;
border-radius: 5px; border-radius: 12px;
margin-bottom: 15px; margin-bottom: 20px;
text-align: center; text-align: center;
font-weight: bold; font-weight: 500;
animation: slideUp 0.3s ease-out;
font-size: 14px;
} }
.form-message.success { .form-message.success {
background-color: #d4edda; background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
color: #155724; color: #155724;
border: 1px solid #c3e6cb; border: 2px solid #b1dfbb;
box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
} }
.form-message.error { .form-message.error {
background-color: #f8d7da; background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
color: #721c24; color: #721c24;
border: 1px solid #f5c6cb; border: 2px solid #f1b0b7;
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
} }
.form-message.info { .form-message.info {
background-color: #d1ecf1; background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
color: #0c5460; color: #0c5460;
border: 1px solid #bee5eb; border: 2px solid #a6d9e3;
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
} }
/* Add Family button */ /* Add Family button with modern style */
.btn-add-family { .btn-add-family {
padding: 10px 15px; padding: 12px 20px;
border: none; border: none;
border-radius: 5px; border-radius: 10px;
background-color: #27ae60; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; color: white;
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: 600;
margin-left: 8px; margin-left: 8px;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
display: inline-flex;
align-items: center;
gap: 6px;
} }
.btn-add-family:hover { .btn-add-family:hover {
background-color: #229954; transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.btn-add-family:active {
transform: translateY(0);
} }