first commit
This commit is contained in:
adlevin
979
assets/css/main.css
Normal file
979
assets/css/main.css
Normal file
@@ -0,0 +1,979 @@
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary-color: #81C784;
|
||||
--primary-dark: #4CAF50;
|
||||
--primary-light: #A5D6A7;
|
||||
--secondary-color: #ffffff;
|
||||
--text-dark: #2c3e50;
|
||||
--text-light: #7f8c8d;
|
||||
--bg-light: #f8f9fa;
|
||||
--bg-gray: #ecf0f1;
|
||||
--shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
--shadow-hover: 0 5px 20px rgba(0, 0, 0, 0.15);
|
||||
--border-radius: 8px;
|
||||
--transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-dark);
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--primary-color);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 24px;
|
||||
border-radius: var(--border-radius);
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: var(--transition);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--secondary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--primary-dark);
|
||||
border-color: var(--primary-dark);
|
||||
color: var(--secondary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent;
|
||||
color: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--secondary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background-color: var(--secondary-color);
|
||||
box-shadow: var(--shadow);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.navbar .container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--text-dark);
|
||||
font-weight: 500;
|
||||
transition: var(--transition);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: var(--primary-color);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-contact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle span {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background-color: var(--text-dark);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.hero-slider {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s ease-in-out;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
|
||||
}
|
||||
|
||||
.hero-slide.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hero-slide::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(33, 143, 54, 0.1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 50%;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.hero-nav {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.hero-nav-btn {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--secondary-color);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.hero-nav-btn.active,
|
||||
.hero-nav-btn:hover {
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.hero-arrows {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.hero-arrow {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: 2px solid var(--secondary-color);
|
||||
color: var(--secondary-color);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.hero-arrow:hover {
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Section Headers */
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.1rem;
|
||||
color: var(--text-light);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Services Section */
|
||||
.services {
|
||||
padding: 5rem 0;
|
||||
background-color: var(--bg-light);
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background-color: var(--secondary-color);
|
||||
padding: 2rem;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
text-align: center;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
}
|
||||
|
||||
/* Service Modal */
|
||||
.service-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.service-modal.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
background-color: var(--secondary-color);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
transform: scale(0.7) translateY(50px);
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.service-modal.active .modal-card {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
padding: 2rem 2rem 1rem;
|
||||
border-bottom: 1px solid var(--bg-gray);
|
||||
}
|
||||
|
||||
.modal-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--secondary-color);
|
||||
font-size: 2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-title-section {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-description {
|
||||
color: var(--text-light);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-light);
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
transition: var(--transition);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background-color: var(--bg-gray);
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.procedures-title {
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.modal-content .procedures-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.modal-content .procedures-list li {
|
||||
padding: 1rem;
|
||||
background-color: var(--bg-light);
|
||||
border-radius: var(--border-radius);
|
||||
border-left: 4px solid var(--primary-color);
|
||||
color: var(--text-dark);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.modal-content .procedures-list li:hover {
|
||||
background-color: var(--primary-light);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 1rem 2rem 2rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--bg-gray);
|
||||
}
|
||||
|
||||
.modal-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1.5rem;
|
||||
color: var(--secondary-color);
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.service-title {
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.service-description {
|
||||
color: var(--text-light);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* About Section */
|
||||
.about {
|
||||
padding: 5rem 0;
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.about-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-features {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.feature i {
|
||||
color: var(--primary-color);
|
||||
font-size: 1.5rem;
|
||||
margin-top: 0.1rem;
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.feature h4 {
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.feature p {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.about-image img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* Contact Section */
|
||||
.contact {
|
||||
padding: 5rem 0;
|
||||
background-color: var(--bg-light);
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 3rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.contact-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--secondary-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contact-details h4 {
|
||||
color: var(--text-dark);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.contact-details p {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.contact-details a {
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
background-color: var(--bg-gray);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background-color: var(--text-dark);
|
||||
color: var(--secondary-color);
|
||||
padding: 3rem 0 1rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.footer-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
height: 30px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.footer-brand h3 {
|
||||
color: var(--secondary-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-section h4 {
|
||||
color: var(--secondary-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.footer-section ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.footer-section li {
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.footer-section a {
|
||||
color: #bdc3c7;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.footer-section a:hover {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.partner-logo-small {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.partner-logo-small img {
|
||||
height: 25px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.partner-logo-small span {
|
||||
font-size: 0.8rem;
|
||||
color: #bdc3c7;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid #34495e;
|
||||
padding-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-bottom p {
|
||||
margin: 0;
|
||||
color: #bdc3c7;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: calc(100vh - 80px);
|
||||
background-color: var(--secondary-color);
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding: 2rem;
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.navbar-menu.active {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 1.1rem;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid var(--bg-gray);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-contact {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.hero {
|
||||
height: 80vh;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.hero-slide {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.about-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.contact-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Modal Mobile Styles */
|
||||
.modal-card {
|
||||
width: 95%;
|
||||
max-height: 90vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 1.5rem 1.5rem 1rem;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.modal-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-content .procedures-list {
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.modal-content .procedures-list li {
|
||||
padding: 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 1rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* Smooth scrolling offset for fixed header */
|
||||
section {
|
||||
scroll-margin-top: 100px;
|
||||
}
|
||||
BIN
assets/images/og-image.png
Normal file
BIN
assets/images/og-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 438 KiB |
503
assets/js/main.js
Normal file
503
assets/js/main.js
Normal file
@@ -0,0 +1,503 @@
|
||||
// Main JavaScript file for FIDEM Medical Center website
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Mobile menu functionality
|
||||
initMobileMenu();
|
||||
|
||||
// Hero slider functionality
|
||||
initHeroSlider();
|
||||
|
||||
// Smooth scrolling for navigation links
|
||||
initSmoothScrolling();
|
||||
|
||||
// Initialize map
|
||||
initMap();
|
||||
|
||||
// Navbar scroll effect
|
||||
initNavbarScroll();
|
||||
|
||||
// Animation on scroll
|
||||
initScrollAnimations();
|
||||
|
||||
// Service modal functionality
|
||||
initServiceModal();
|
||||
});
|
||||
|
||||
// Mobile Menu
|
||||
function initMobileMenu() {
|
||||
const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
|
||||
const navbarMenu = document.getElementById('navbar-menu');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
if (mobileMenuToggle && navbarMenu) {
|
||||
mobileMenuToggle.addEventListener('click', function() {
|
||||
navbarMenu.classList.toggle('active');
|
||||
|
||||
// Animate hamburger menu
|
||||
const spans = mobileMenuToggle.querySelectorAll('span');
|
||||
if (navbarMenu.classList.contains('active')) {
|
||||
spans[0].style.transform = 'rotate(45deg) translateY(7px)';
|
||||
spans[1].style.opacity = '0';
|
||||
spans[2].style.transform = 'rotate(-45deg) translateY(-7px)';
|
||||
} else {
|
||||
spans[0].style.transform = 'none';
|
||||
spans[1].style.opacity = '1';
|
||||
spans[2].style.transform = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking on nav links
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navbarMenu.classList.remove('active');
|
||||
const spans = mobileMenuToggle.querySelectorAll('span');
|
||||
spans[0].style.transform = 'none';
|
||||
spans[1].style.opacity = '1';
|
||||
spans[2].style.transform = 'none';
|
||||
});
|
||||
});
|
||||
|
||||
// Close mobile menu when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!navbarMenu.contains(e.target) && !mobileMenuToggle.contains(e.target)) {
|
||||
navbarMenu.classList.remove('active');
|
||||
const spans = mobileMenuToggle.querySelectorAll('span');
|
||||
spans[0].style.transform = 'none';
|
||||
spans[1].style.opacity = '1';
|
||||
spans[2].style.transform = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Hero Slider
|
||||
function initHeroSlider() {
|
||||
const slides = document.querySelectorAll('.hero-slide');
|
||||
const navBtns = document.querySelectorAll('.hero-nav-btn');
|
||||
const prevBtn = document.querySelector('.hero-arrow-prev');
|
||||
const nextBtn = document.querySelector('.hero-arrow-next');
|
||||
let currentSlide = 0;
|
||||
let slideInterval;
|
||||
|
||||
if (slides.length === 0) return;
|
||||
|
||||
// Function to show specific slide
|
||||
function showSlide(index) {
|
||||
// Remove active class from all slides and nav buttons
|
||||
slides.forEach(slide => slide.classList.remove('active'));
|
||||
navBtns.forEach(btn => btn.classList.remove('active'));
|
||||
|
||||
// Add active class to current slide and nav button
|
||||
slides[index].classList.add('active');
|
||||
if (navBtns[index]) {
|
||||
navBtns[index].classList.add('active');
|
||||
}
|
||||
|
||||
currentSlide = index;
|
||||
}
|
||||
|
||||
// Function to go to next slide
|
||||
function nextSlide() {
|
||||
const next = (currentSlide + 1) % slides.length;
|
||||
showSlide(next);
|
||||
}
|
||||
|
||||
// Function to go to previous slide
|
||||
function prevSlide() {
|
||||
const prev = (currentSlide - 1 + slides.length) % slides.length;
|
||||
showSlide(prev);
|
||||
}
|
||||
|
||||
// Auto-play functionality
|
||||
function startAutoPlay() {
|
||||
slideInterval = setInterval(nextSlide, 5000); // Change slide every 5 seconds
|
||||
}
|
||||
|
||||
function stopAutoPlay() {
|
||||
clearInterval(slideInterval);
|
||||
}
|
||||
|
||||
// Event listeners for navigation buttons
|
||||
navBtns.forEach((btn, index) => {
|
||||
btn.addEventListener('click', () => {
|
||||
showSlide(index);
|
||||
stopAutoPlay();
|
||||
startAutoPlay(); // Restart auto-play
|
||||
});
|
||||
});
|
||||
|
||||
// Event listeners for arrow buttons
|
||||
if (nextBtn) {
|
||||
nextBtn.addEventListener('click', () => {
|
||||
nextSlide();
|
||||
stopAutoPlay();
|
||||
startAutoPlay();
|
||||
});
|
||||
}
|
||||
|
||||
if (prevBtn) {
|
||||
prevBtn.addEventListener('click', () => {
|
||||
prevSlide();
|
||||
stopAutoPlay();
|
||||
startAutoPlay();
|
||||
});
|
||||
}
|
||||
|
||||
// Pause auto-play on hover
|
||||
const heroSection = document.querySelector('.hero');
|
||||
if (heroSection) {
|
||||
heroSection.addEventListener('mouseenter', stopAutoPlay);
|
||||
heroSection.addEventListener('mouseleave', startAutoPlay);
|
||||
}
|
||||
|
||||
// Start auto-play
|
||||
startAutoPlay();
|
||||
|
||||
// Keyboard navigation
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'ArrowLeft') {
|
||||
prevSlide();
|
||||
stopAutoPlay();
|
||||
startAutoPlay();
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
nextSlide();
|
||||
stopAutoPlay();
|
||||
startAutoPlay();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth Scrolling
|
||||
function initSmoothScrolling() {
|
||||
const navLinks = document.querySelectorAll('a[href^="#"]');
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const targetId = this.getAttribute('href');
|
||||
const targetSection = document.querySelector(targetId);
|
||||
|
||||
if (targetSection) {
|
||||
const headerHeight = document.querySelector('.header').offsetHeight;
|
||||
const targetPosition = targetSection.offsetTop - headerHeight - 20;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Navbar Scroll Effect
|
||||
function initNavbarScroll() {
|
||||
const header = document.querySelector('.header');
|
||||
let lastScrollY = window.scrollY;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 100) {
|
||||
header.style.background = 'rgba(255, 255, 255, 0.95)';
|
||||
header.style.backdropFilter = 'blur(10px)';
|
||||
} else {
|
||||
header.style.background = '#ffffff';
|
||||
header.style.backdropFilter = 'none';
|
||||
}
|
||||
|
||||
// Hide/show header on scroll
|
||||
if (currentScrollY > lastScrollY && currentScrollY > 200) {
|
||||
header.style.transform = 'translateY(-100%)';
|
||||
} else {
|
||||
header.style.transform = 'translateY(0)';
|
||||
}
|
||||
|
||||
lastScrollY = currentScrollY;
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll Animations
|
||||
function initScrollAnimations() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('fade-in-up');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements that should animate on scroll
|
||||
const animateElements = document.querySelectorAll('.service-card, .feature, .contact-item, .section-header');
|
||||
animateElements.forEach(el => observer.observe(el));
|
||||
}
|
||||
|
||||
// Initialize Yandex Map
|
||||
function initMap() {
|
||||
// Check if Yandex Maps API is loaded
|
||||
if (typeof ymaps === 'undefined') {
|
||||
console.log('Yandex Maps API not loaded');
|
||||
// Create placeholder for map
|
||||
createMapPlaceholder();
|
||||
return;
|
||||
}
|
||||
|
||||
ymaps.ready(function() {
|
||||
// Точные координаты для г. Слоним, ул. Чапаева, 3
|
||||
const coords = [53.092667, 25.321702];
|
||||
|
||||
const map = new ymaps.Map('map', {
|
||||
center: coords,
|
||||
zoom: 17,
|
||||
controls: ['zoomControl', 'fullscreenControl']
|
||||
});
|
||||
|
||||
// Add placemark for medical center
|
||||
const placemark = new ymaps.Placemark(coords, {
|
||||
balloonContentHeader: 'Медицинский центр ФИДЕМ',
|
||||
balloonContentBody: 'г. Слоним, ул. Чапаева, 3',
|
||||
balloonContentFooter: 'Режим работы: Ежедневно 8:00-20:00, без выходных',
|
||||
hintContent: 'ФИДЕМ - Медицинский центр'
|
||||
}, {
|
||||
iconLayout: 'default#image',
|
||||
iconImageHref: 'data:image/svg+xml;charset=utf-8,<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="12" fill="%2381C784"/><path d="M16 8c-2.2 0-4 1.8-4 4 0 3 4 8 4 8s4-5 4-8c0-2.2-1.8-4-4-4zm0 6c-1.1 0-2-0.9-2-2s0.9-2 2-2 2 0.9 2 2-0.9 2-2 2z" fill="white"/></svg>',
|
||||
iconImageSize: [32, 32],
|
||||
iconImageOffset: [-16, -32]
|
||||
});
|
||||
|
||||
map.geoObjects.add(placemark);
|
||||
|
||||
// Open balloon on load
|
||||
setTimeout(() => {
|
||||
placemark.balloon.open();
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
// Create map placeholder if Yandex Maps API is not available
|
||||
function createMapPlaceholder() {
|
||||
const mapContainer = document.getElementById('map');
|
||||
if (mapContainer) {
|
||||
mapContainer.innerHTML = `
|
||||
<div style="display: flex; align-items: center; justify-content: center; height: 100%; background-color: #ecf0f1; color: #7f8c8d; flex-direction: column; text-align: center; padding: 2rem;">
|
||||
<i class="fas fa-map-marker-alt" style="font-size: 3rem; color: #218F36; margin-bottom: 1rem;"></i>
|
||||
<h3 style="margin-bottom: 0.5rem; color: #2c3e50;">Наш адрес</h3>
|
||||
<p style="margin-bottom: 1rem;">г. Слоним, ул. Чапаева, 3</p>
|
||||
<a href="https://yandex.ru/maps/?text=53.091667,25.315" target="_blank" style="color: #218F36; text-decoration: underline;">
|
||||
Открыть в Яндекс.Картах
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Utility function to throttle scroll events
|
||||
function throttle(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
// Active navigation link highlighting
|
||||
function initActiveNavigation() {
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
|
||||
const highlightNavigation = throttle(() => {
|
||||
const scrollY = window.pageYOffset;
|
||||
const headerHeight = document.querySelector('.header').offsetHeight;
|
||||
|
||||
sections.forEach(section => {
|
||||
const sectionHeight = section.offsetHeight;
|
||||
const sectionTop = section.offsetTop - headerHeight - 50;
|
||||
const sectionId = section.getAttribute('id');
|
||||
|
||||
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.getAttribute('href') === `#${sectionId}`) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
|
||||
window.addEventListener('scroll', highlightNavigation);
|
||||
}
|
||||
|
||||
// Initialize active navigation
|
||||
document.addEventListener('DOMContentLoaded', initActiveNavigation);
|
||||
|
||||
// Phone number formatting for better UX
|
||||
function formatPhoneNumbers() {
|
||||
const phoneLinks = document.querySelectorAll('a[href^="tel:"]');
|
||||
|
||||
phoneLinks.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
// Analytics tracking could be added here
|
||||
console.log('Phone number clicked:', this.href);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize phone number formatting
|
||||
document.addEventListener('DOMContentLoaded', formatPhoneNumbers);
|
||||
|
||||
// Form validation (if contact form is added later)
|
||||
function initFormValidation() {
|
||||
const forms = document.querySelectorAll('form');
|
||||
|
||||
forms.forEach(form => {
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Basic form validation
|
||||
const inputs = form.querySelectorAll('input[required], textarea[required]');
|
||||
let isValid = true;
|
||||
|
||||
inputs.forEach(input => {
|
||||
if (!input.value.trim()) {
|
||||
isValid = false;
|
||||
input.classList.add('error');
|
||||
} else {
|
||||
input.classList.remove('error');
|
||||
}
|
||||
});
|
||||
|
||||
if (isValid) {
|
||||
// Form is valid, submit or process
|
||||
console.log('Form submitted successfully');
|
||||
// Add success message or redirect
|
||||
} else {
|
||||
console.log('Form validation failed');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Loading animation for images
|
||||
function initImageLoading() {
|
||||
const images = document.querySelectorAll('img');
|
||||
|
||||
images.forEach(img => {
|
||||
if (!img.complete) {
|
||||
img.classList.add('loading');
|
||||
img.addEventListener('load', function() {
|
||||
this.classList.remove('loading');
|
||||
this.classList.add('loaded');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize image loading
|
||||
document.addEventListener('DOMContentLoaded', initImageLoading);
|
||||
|
||||
// Accessibility improvements
|
||||
function initAccessibility() {
|
||||
// Skip to main content link
|
||||
const skipLink = document.createElement('a');
|
||||
skipLink.href = '#main';
|
||||
skipLink.textContent = 'Перейти к основному содержанию';
|
||||
skipLink.className = 'skip-link';
|
||||
skipLink.style.cssText = `
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 6px;
|
||||
background: #218F36;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
z-index: 1001;
|
||||
transition: top 0.3s;
|
||||
`;
|
||||
|
||||
skipLink.addEventListener('focus', function() {
|
||||
this.style.top = '6px';
|
||||
});
|
||||
|
||||
skipLink.addEventListener('blur', function() {
|
||||
this.style.top = '-40px';
|
||||
});
|
||||
|
||||
document.body.insertBefore(skipLink, document.body.firstChild);
|
||||
|
||||
// Add main id to main element
|
||||
const main = document.querySelector('main');
|
||||
if (main && !main.id) {
|
||||
main.id = 'main';
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize accessibility features
|
||||
document.addEventListener('DOMContentLoaded', initAccessibility);
|
||||
|
||||
// Service Cards Expand/Collapse
|
||||
// Service Modal
|
||||
function initServiceModal() {
|
||||
const serviceCards = document.querySelectorAll('.service-card');
|
||||
const modal = document.getElementById('service-modal');
|
||||
const modalOverlay = modal.querySelector('.modal-overlay');
|
||||
const modalClose = modal.querySelector('.modal-close');
|
||||
const modalIcon = modal.querySelector('.modal-icon i');
|
||||
const modalTitle = modal.querySelector('.modal-title');
|
||||
const modalDescription = modal.querySelector('.modal-description');
|
||||
const modalProcedures = document.getElementById('modal-procedures');
|
||||
|
||||
// Открытие модального окна
|
||||
serviceCards.forEach(card => {
|
||||
card.addEventListener('click', function() {
|
||||
const serviceKey = card.getAttribute('data-service');
|
||||
const serviceData = servicesData[serviceKey];
|
||||
|
||||
if (serviceData) {
|
||||
// Заполняем данные модального окна
|
||||
modalIcon.className = serviceData.icon;
|
||||
modalTitle.textContent = serviceData.title;
|
||||
modalDescription.textContent = serviceData.description;
|
||||
|
||||
// Очищаем и заполняем список процедур
|
||||
modalProcedures.innerHTML = '';
|
||||
serviceData.procedures.forEach(procedure => {
|
||||
const li = document.createElement('li');
|
||||
li.textContent = procedure;
|
||||
modalProcedures.appendChild(li);
|
||||
});
|
||||
|
||||
// Показываем модальное окно
|
||||
modal.classList.add('active');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Закрытие модального окна
|
||||
function closeModal() {
|
||||
modal.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
modalClose.addEventListener('click', closeModal);
|
||||
modalOverlay.addEventListener('click', closeModal);
|
||||
|
||||
// Закрытие по Escape
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && modal.classList.contains('active')) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
207
assets/js/services-data.js
Normal file
207
assets/js/services-data.js
Normal file
@@ -0,0 +1,207 @@
|
||||
// Данные услуг для модального окна
|
||||
const servicesData = {
|
||||
laboratory: {
|
||||
title: "Лабораторная диагностика",
|
||||
icon: "fas fa-vial",
|
||||
description: "Полный спектр медицинских анализов с быстрыми и точными результатами",
|
||||
procedures: [
|
||||
"Общеклинические исследования",
|
||||
"Биохимические исследования",
|
||||
"Гормональные исследования",
|
||||
"Иммунологические исследования",
|
||||
"Онкомаркеры",
|
||||
"Исследования мочи",
|
||||
"Микробиологические исследования",
|
||||
"Коагулограмма",
|
||||
"Исследования кала",
|
||||
"Аллергологические исследования"
|
||||
]
|
||||
},
|
||||
ultrasound: {
|
||||
title: "Ультразвуковая диагностика",
|
||||
icon: "fas fa-heartbeat",
|
||||
description: "Современное УЗИ-оборудование для точной диагностики",
|
||||
procedures: [
|
||||
"УЗИ органов брюшной полости",
|
||||
"УЗИ щитовидной железы",
|
||||
"УЗИ малого таза",
|
||||
"УЗИ сердца (ЭхоКГ)",
|
||||
"УЗИ сосудов",
|
||||
"УЗИ молочных желез",
|
||||
"УЗИ почек и мочевого пузыря",
|
||||
"УЗИ суставов",
|
||||
"УЗИ мягких тканей",
|
||||
"УЗИ лимфатических узлов"
|
||||
]
|
||||
},
|
||||
gynecology: {
|
||||
title: "Гинекология",
|
||||
icon: "fas fa-female",
|
||||
description: "Комплексная медицинская помощь для женского здоровья",
|
||||
procedures: [
|
||||
"Консультация гинеколога",
|
||||
"Гинекологический осмотр",
|
||||
"Кольпоскопия",
|
||||
"Цитологическое исследование",
|
||||
"Лечение воспалительных заболеваний",
|
||||
"Планирование беременности",
|
||||
"Контрацепция",
|
||||
"Лечение эрозии шейки матки",
|
||||
"Диагностика ИППП",
|
||||
"Ведение беременности"
|
||||
]
|
||||
},
|
||||
urology: {
|
||||
title: "Урология",
|
||||
icon: "fas fa-male",
|
||||
description: "Диагностика и лечение урологических заболеваний",
|
||||
procedures: [
|
||||
"Консультация уролога",
|
||||
"Диагностика заболеваний простаты",
|
||||
"Лечение цистита",
|
||||
"Диагностика мочекаменной болезни",
|
||||
"Лечение инфекций мочевыводящих путей",
|
||||
"Диагностика эректильной дисфункции",
|
||||
"Лечение простатита",
|
||||
"Урологические анализы",
|
||||
"Цистоскопия",
|
||||
"Массаж простаты"
|
||||
]
|
||||
},
|
||||
otolaryngology: {
|
||||
title: "Оториноларингология",
|
||||
icon: "fas fa-ear-listen",
|
||||
description: "Лечение заболеваний уха, горла и носа",
|
||||
procedures: [
|
||||
"Консультация ЛОР-врача",
|
||||
"Эндоскопия носа и горла",
|
||||
"Лечение синуситов",
|
||||
"Удаление серных пробок",
|
||||
"Лечение отитов",
|
||||
"Промывание лакун миндалин",
|
||||
"Лечение ангины",
|
||||
"Диагностика храпа",
|
||||
"Аудиометрия",
|
||||
"Тимпанометрия"
|
||||
]
|
||||
},
|
||||
endocrinology: {
|
||||
title: "Эндокринология",
|
||||
icon: "fas fa-dna",
|
||||
description: "Диагностика и лечение эндокринных нарушений",
|
||||
procedures: [
|
||||
"Консультация эндокринолога",
|
||||
"Диагностика диабета",
|
||||
"Лечение заболеваний щитовидной железы",
|
||||
"Гормональная терапия",
|
||||
"Диагностика ожирения",
|
||||
"Лечение метаболических нарушений",
|
||||
"Диагностика остеопороза",
|
||||
"Лечение надпочечников",
|
||||
"Консультация по питанию",
|
||||
"Школа диабета"
|
||||
]
|
||||
},
|
||||
traumatology: {
|
||||
title: "Травматология",
|
||||
icon: "fas fa-bone",
|
||||
description: "Помощь при травмах и повреждениях опорно-двигательного аппарата",
|
||||
procedures: [
|
||||
"Консультация травматолога",
|
||||
"Лечение переломов",
|
||||
"Лечение вывихов",
|
||||
"Лечение растяжений",
|
||||
"Перевязки и обработка ран",
|
||||
"Иммобилизация конечностей",
|
||||
"Снятие гипса",
|
||||
"Лечение ушибов",
|
||||
"Первичная хирургическая обработка",
|
||||
"Удаление инородных тел"
|
||||
]
|
||||
},
|
||||
orthopedics: {
|
||||
title: "Ортопедия",
|
||||
icon: "fas fa-walking",
|
||||
description: "Диагностика и лечение заболеваний костно-мышечной системы",
|
||||
procedures: [
|
||||
"Консультация ортопеда",
|
||||
"Диагностика заболеваний позвоночника",
|
||||
"Лечение артритов и артрозов",
|
||||
"Коррекция плоскостопия",
|
||||
"Лечение сколиоза",
|
||||
"Подбор ортопедических изделий",
|
||||
"Блокады суставов",
|
||||
"Лечение пяточной шпоры",
|
||||
"Диагностика остеохондроза",
|
||||
"Реабилитация после травм"
|
||||
]
|
||||
},
|
||||
cosmetology: {
|
||||
title: "Косметология",
|
||||
icon: "fas fa-spa",
|
||||
description: "Современные методы эстетической медицины",
|
||||
procedures: [
|
||||
"Консультация косметолога",
|
||||
"Чистка лица",
|
||||
"Пилинги",
|
||||
"Инъекции ботокса",
|
||||
"Мезотерапия",
|
||||
"Лазерная эпиляция",
|
||||
"Контурная пластика",
|
||||
"Биоревитализация",
|
||||
"Фотоомоложение",
|
||||
"Удаление новообразований"
|
||||
]
|
||||
},
|
||||
dermatology: {
|
||||
title: "Дерматовенерология",
|
||||
icon: "fas fa-microscope",
|
||||
description: "Диагностика и лечение кожных заболеваний",
|
||||
procedures: [
|
||||
"Консультация дерматолога",
|
||||
"Дерматоскопия",
|
||||
"Лечение акне",
|
||||
"Лечение экземы и дерматитов",
|
||||
"Диагностика новообразований кожи",
|
||||
"Лечение грибковых заболеваний",
|
||||
"Лечение псориаза",
|
||||
"Удаление папиллом",
|
||||
"Криотерапия",
|
||||
"Аллергологические пробы"
|
||||
]
|
||||
},
|
||||
pediatrics: {
|
||||
title: "Педиатрия",
|
||||
icon: "fas fa-child",
|
||||
description: "Медицинская помощь для детей всех возрастов",
|
||||
procedures: [
|
||||
"Консультация педиатра",
|
||||
"Профилактические осмотры",
|
||||
"Вакцинация",
|
||||
"Диагностика детских заболеваний",
|
||||
"Лечение ОРВИ",
|
||||
"Справки для детских учреждений",
|
||||
"Консультации по питанию",
|
||||
"Оценка физического развития",
|
||||
"Неврологический осмотр",
|
||||
"Консультации по уходу"
|
||||
]
|
||||
},
|
||||
therapy: {
|
||||
title: "Терапия",
|
||||
icon: "fas fa-stethoscope",
|
||||
description: "Общая медицинская помощь и профилактика заболеваний",
|
||||
procedures: [
|
||||
"Консультация терапевта",
|
||||
"Профилактические осмотры",
|
||||
"Диагностика заболеваний",
|
||||
"Лечение хронических заболеваний",
|
||||
"Медицинские справки",
|
||||
"Направления к специалистам",
|
||||
"Контроль артериального давления",
|
||||
"Электрокардиография",
|
||||
"Диспансеризация",
|
||||
"Вакцинация взрослых"
|
||||
]
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user