This commit is contained in:
parent
02074aa4a6
commit
dfb21aa0f8
@ -19,31 +19,35 @@
|
||||
<!-- Add Family Form Modal -->
|
||||
<div id="addFamilyModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" onclick="toggleAddFamilyForm()">×</span>
|
||||
<h2>Add New Family Location</h2>
|
||||
<form id="addFamilyForm" onsubmit="addFamily(event)">
|
||||
<div class="form-group">
|
||||
<label for="familyName">Family Name:</label>
|
||||
<input type="text" id="familyName" required placeholder="e.g., Cohen (כהן)" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cityName">City:</label>
|
||||
<input type="text" id="cityName" required placeholder="e.g., Jerusalem (ירושלים)" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="latitude">Latitude:</label>
|
||||
<input type="number" id="latitude" required step="0.0001" min="-90" max="90" placeholder="e.g., 31.7683" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="longitude">Longitude:</label>
|
||||
<input type="number" id="longitude" required step="0.0001" min="-180" max="180" placeholder="e.g., 35.2137" />
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Add Family</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="toggleAddFamilyForm()">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
<div id="formMessage" class="form-message"></div>
|
||||
<div class="modal-header">
|
||||
<h2>Add New Family Location</h2>
|
||||
<span class="close" onclick="toggleAddFamilyForm()">×</span>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="formMessage" class="form-message"></div>
|
||||
<form id="addFamilyForm" onsubmit="addFamily(event)">
|
||||
<div class="form-group">
|
||||
<label for="familyName">Family Name</label>
|
||||
<input type="text" id="familyName" required placeholder="e.g., Cohen (כהן)" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cityName">City</label>
|
||||
<input type="text" id="cityName" required placeholder="e.g., Jerusalem (ירושלים)" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="latitude">Latitude</label>
|
||||
<input type="number" id="latitude" required step="0.0001" min="-90" max="90" placeholder="e.g., 31.7683" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="longitude">Longitude</label>
|
||||
<input type="number" id="longitude" required step="0.0001" min="-180" max="180" placeholder="e.g., 35.2137" />
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn-submit">Add Family</button>
|
||||
<button type="button" class="btn-cancel" onclick="toggleAddFamilyForm()">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -97,7 +97,7 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Modal styles */
|
||||
/* Modern Modal styles with animations */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
@ -106,133 +106,247 @@
|
||||
top: 0;
|
||||
width: 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 {
|
||||
background-color: #fefefe;
|
||||
margin: 5% auto;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||
margin: 8% auto;
|
||||
padding: 0;
|
||||
border-radius: 20px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
max-width: 480px;
|
||||
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 {
|
||||
margin-bottom: 20px;
|
||||
color: #2c3e50;
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.modal-content h2::before {
|
||||
content: "📍";
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 32px;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
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:focus {
|
||||
color: #000;
|
||||
.close:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
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 {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
font-size: 15px;
|
||||
transition: all 0.3s ease;
|
||||
background-color: white;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
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 {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
gap: 12px;
|
||||
margin-top: 28px;
|
||||
padding-top: 20px;
|
||||
border-top: 2px solid #f1f3f5;
|
||||
}
|
||||
|
||||
.form-actions button {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
padding: 14px 24px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border-radius: 12px;
|
||||
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 {
|
||||
background-color: #27ae60;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.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 {
|
||||
background-color: #95a5a6;
|
||||
color: white;
|
||||
background-color: #e2e8f0;
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background-color: #7f8c8d;
|
||||
background-color: #cbd5e0;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-cancel::before {
|
||||
content: "✕";
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.form-message {
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
padding: 14px 18px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
animation: slideUp 0.3s ease-out;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-message.success {
|
||||
background-color: #d4edda;
|
||||
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
border: 2px solid #b1dfbb;
|
||||
box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
|
||||
}
|
||||
|
||||
.form-message.error {
|
||||
background-color: #f8d7da;
|
||||
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
|
||||
color: #721c24;
|
||||
border: 1px solid #f5c6cb;
|
||||
border: 2px solid #f1b0b7;
|
||||
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
|
||||
}
|
||||
|
||||
.form-message.info {
|
||||
background-color: #d1ecf1;
|
||||
background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
|
||||
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 {
|
||||
padding: 10px 15px;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
background-color: #27ae60;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-weight: 600;
|
||||
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 {
|
||||
background-color: #229954;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn-add-family:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user