Ihor_Zhekov/Websites
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Ihor_Zhekov
2026-01-28 14:02:01 +01:00
commit 8ad8129a9d
71 changed files with 5601 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

408
style/lead-details.css Normal file
View File

@@ -0,0 +1,408 @@
/* Lead Details Page Styles */
.lead-details-container {
max-width: 900px;
margin: 0 auto;
padding: 120px 20px 20px 20px;
}
.lead-header {
text-align: center;
margin-bottom: 50px;
padding-bottom: 30px;
border-bottom: 3px solid var(--accent-teal);
}
.lead-icon {
font-size: 72px;
margin-bottom: 20px;
display: block;
}
.lead-title {
font-size: 42px;
color: var(--primary-dark);
margin-bottom: 15px;
font-weight: 600;
}
.lead-subtitle {
font-size: 20px;
color: var(--primary-mid);
line-height: 1.6;
max-width: 600px;
margin: 0 auto;
}
.lead-details-card {
background: white;
border-radius: 20px;
box-shadow: 0 8px 30px rgba(79, 71, 71, 0.1);
overflow: hidden;
}
.detail-section {
padding: 40px;
border-bottom: 1px solid rgba(119, 119, 100, 0.1);
}
.detail-section:last-child {
border-bottom: none;
}
.section-title {
font-size: 24px;
color: var(--primary-dark);
margin-bottom: 20px;
font-weight: 600;
}
/* Status Styles */
.status-container {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.status-badge {
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
display: inline-block;
}
.status-new {
background: #e3f2fd;
color: #1976d2;
}
.status-in-progress {
background: #fff3e0;
color: #f57c00;
}
.status-completed {
background: #e8f5e8;
color: #2e7d32;
}
.status-cancelled {
background: #ffebee;
color: #c62828;
}
.status-info {
color: var(--primary-mid);
font-size: 14px;
}
/* Info Grid */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.info-item {
background: var(--primary-light);
padding: 20px;
border-radius: 12px;
border-left: 4px solid var(--accent-teal);
}
.info-label {
font-size: 14px;
color: var(--primary-mid);
margin-bottom: 8px;
font-weight: 500;
}
.info-value {
font-size: 18px;
color: var(--primary-dark);
font-weight: 500;
}
/* Service Info */
.service-info {
display: flex;
align-items: center;
gap: 20px;
background: var(--primary-light);
padding: 30px;
border-radius: 16px;
}
.service-icon {
font-size: 48px;
flex-shrink: 0;
}
.service-details {
flex: 1;
}
.service-title {
font-size: 24px;
color: var(--accent-teal);
margin-bottom: 10px;
}
.service-description {
color: var(--primary-mid);
line-height: 1.5;
}
/* Description Box */
.description-box {
background: var(--primary-light);
padding: 30px;
border-radius: 16px;
border-left: 4px solid var(--accent-teal);
}
.description-text {
color: var(--primary-dark);
line-height: 1.6;
font-size: 16px;
white-space: pre-wrap;
}
/* Timeline */
.timeline {
position: relative;
padding-left: 30px;
}
.timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 2px;
background: rgba(119, 119, 100, 0.2);
}
.timeline-item {
position: relative;
margin-bottom: 30px;
padding-left: 30px;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-dot {
position: absolute;
left: -22px;
top: 5px;
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(119, 119, 100, 0.3);
border: 2px solid white;
}
.timeline-item.active .timeline-dot {
background: var(--accent-teal);
box-shadow: 0 0 0 4px rgba(38, 166, 154, 0.2);
}
.timeline-content h4 {
color: var(--primary-dark);
margin-bottom: 5px;
font-size: 18px;
}
.timeline-content p {
color: var(--primary-mid);
font-size: 14px;
}
/* Action Buttons */
.action-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.action-btn {
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.action-btn.primary {
background: var(--accent-teal);
color: white;
}
.action-btn.primary:hover {
background: #1e8e82;
transform: translateY(-2px);
}
.action-btn.secondary {
background: var(--primary-light);
color: var(--primary-dark);
border: 1px solid rgba(119, 119, 100, 0.2);
}
.action-btn.secondary:hover {
background: var(--primary-mid);
color: white;
transform: translateY(-2px);
}
/* Navigation Buttons */
.navigation-buttons {
display: flex;
gap: 20px;
justify-content: center;
margin-top: 40px;
flex-wrap: wrap;
}
.cta-btn {
padding: 16px 32px;
border-radius: 30px;
font-size: 18px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
}
.cta-btn.primary {
background: var(--accent-teal);
color: white;
border: 2px solid var(--accent-teal);
}
.cta-btn.primary:hover {
background: white;
color: var(--accent-teal);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(38, 166, 154, 0.3);
}
.cta-btn.secondary {
background: transparent;
color: var(--primary-dark);
border: 2px solid var(--primary-dark);
}
.cta-btn.secondary:hover {
background: var(--primary-dark);
color: white;
transform: translateY(-2px);
}
/* Error Message */
.error-message {
text-align: center;
padding: 60px 20px;
background: white;
border-radius: 20px;
box-shadow: 0 8px 30px rgba(79, 71, 71, 0.1);
}
.error-message h2 {
color: var(--primary-dark);
margin-bottom: 15px;
}
.error-message p {
color: var(--primary-mid);
margin-bottom: 25px;
}
/* Responsive Design */
@media (max-width: 768px) {
.lead-details-container {
padding: 100px 15px 20px 15px;
}
.lead-icon {
font-size: 56px;
}
.lead-title {
font-size: 32px;
}
.lead-subtitle {
font-size: 18px;
}
.detail-section {
padding: 30px 20px;
}
.section-title {
font-size: 20px;
}
.info-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.service-info {
flex-direction: column;
text-align: center;
}
.service-icon {
font-size: 64px;
}
.status-container {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.action-buttons,
.navigation-buttons {
flex-direction: column;
align-items: center;
}
.action-btn,
.cta-btn {
width: 100%;
max-width: 300px;
}
}
/* Print Styles */
@media print {
.top-banner,
.slide-menu,
.overlay,
.navigation-buttons,
.action-buttons {
display: none !important;
}
.lead-details-container {
padding: 20px;
}
.lead-details-card {
box-shadow: none;
border: 1px solid #ddd;
}
}