Kgshop commited on
Commit
b90ce12
·
verified ·
1 Parent(s): b59ff06

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +39 -39
app.py CHANGED
@@ -141,8 +141,8 @@ LANDING_TEMPLATE = '''
141
  <head>
142
  <meta charset="UTF-8">
143
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
144
- <title>Раина Климат Систем - Вентиляция и Кондиционирование</title>
145
- <meta name="description" content="Профессиональные услуги по проектированию, монтажу и обслуживанию систем вентиляции и кондиционирования в Кыргызстане. Многолетний опыт, тысячи реализованных проектов.">
146
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
147
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
148
  <style>
@@ -226,7 +226,7 @@ LANDING_TEMPLATE = '''
226
  .nav-links a {
227
  color: var(--text-primary);
228
  text-decoration: none;
229
- font-weight: 500; /* Slightly less bold than 600 */
230
  transition: color 0.3s ease, transform 0.3s ease;
231
  padding-bottom: 5px;
232
  position: relative;
@@ -274,9 +274,9 @@ LANDING_TEMPLATE = '''
274
  border-color: var(--border-hover-color);
275
  box-shadow: 0 12px 35px var(--accent-glow);
276
  }
277
- .service-card i { font-size: 3rem; color: var(--accent-primary); margin-bottom: 25px; display: block; } /* Made icon larger and block */
278
 
279
- .turnkey-card { padding: 0; display: flex; flex-direction: column; overflow: hidden; /* For image border radius */ }
280
  .turnkey-img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--card-border-radius) var(--card-border-radius) 0 0; transition: transform 0.3s ease; }
281
  .turnkey-card:hover .turnkey-img { transform: scale(1.05); }
282
  .turnkey-content { padding: 35px; flex-grow: 1;}
@@ -284,8 +284,8 @@ LANDING_TEMPLATE = '''
284
  .turnkey-card:hover .turnkey-content h3 i { color: var(--accent-secondary); }
285
 
286
 
287
- #turnkey { background-color: var(--bg-medium); } /* Section specific bg */
288
- #contact { background-color: var(--bg-medium); } /* Section specific bg */
289
 
290
  .equipment-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 50px; }
291
  .filter-btn {
@@ -375,17 +375,17 @@ LANDING_TEMPLATE = '''
375
  width: min(80vw, 320px); height: 100vh;
376
  background-color: var(--bg-medium);
377
  flex-direction: column; justify-content: center; align-items: center;
378
- transition: right 0.45s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Swing effect */
379
  box-shadow: -8px 0 25px rgba(0,0,0,0.25);
380
- gap: 40px; /* Increased gap for mobile nav */
381
  }
382
  .nav-links.active { right: 0; }
383
  .menu-toggle { display: block; z-index: 1001; }
384
  h1 { font-size: 2.2rem; }
385
  h2 { margin-bottom: 50px; font-size: 1.8rem; }
386
  .projects-grid { grid-template-columns: 1fr; }
387
- .services-grid { grid-template-columns: 1fr; } /* Stack service cards on mobile */
388
- .equipment-grid { grid-template-columns: 1fr; } /* Stack equipment cards on mobile */
389
  .btn { padding: 12px 28px; }
390
  }
391
 
@@ -395,14 +395,14 @@ LANDING_TEMPLATE = '''
395
  z-index: 1001;
396
  left: 0; top: 0; width: 100%; height: 100%;
397
  overflow: auto;
398
- background-color: rgba(17, 24, 39, 0.9); /* Darker overlay */
399
- padding-top: 5vh; /* Responsive padding */
400
  backdrop-filter: blur(5px);
401
  }
402
  .modal-content {
403
  position: relative;
404
  margin: 5% auto;
405
- padding: 30px; /* Increased padding */
406
  width: 90%;
407
  max-width: 800px;
408
  background-color: var(--bg-medium);
@@ -413,7 +413,7 @@ LANDING_TEMPLATE = '''
413
  }
414
  .modal-content img {
415
  max-width: 100%;
416
- max-height: 65vh; /* Adjusted max height */
417
  border-radius: 10px;
418
  margin-bottom: 25px;
419
  object-fit: contain;
@@ -438,12 +438,12 @@ LANDING_TEMPLATE = '''
438
  background-color: var(--accent-primary);
439
  color: white;
440
  border: none;
441
- padding: 12px 18px; /* Slightly larger padding */
442
  border-radius: var(--button-border-radius);
443
  margin: 0 8px;
444
  cursor: pointer;
445
  transition: all 0.3s ease;
446
- font-size: 1.3rem; /* Larger icons */
447
  }
448
  .carousel-nav button:hover { background-color: var(--accent-secondary); transform: scale(1.1); }
449
  .carousel-nav button:disabled { background-color: var(--text-muted); cursor: not-allowed; transform: scale(1); }
@@ -466,8 +466,8 @@ LANDING_TEMPLATE = '''
466
 
467
  <section id="hero">
468
  <div class="container hero-content">
469
- <h1>Раина Климат Систем: Эксперты в Вентиляции и Кондиционировании</h1>
470
- <p>Профессиональный подход к созданию идеального микроклимата. Мы предлагаем комплексные решения для вашего комфорта и здоровья.</p>
471
  <a href="#contact" class="btn">Получить консультацию</a>
472
  </div>
473
  </section>
@@ -478,12 +478,12 @@ LANDING_TEMPLATE = '''
478
  <div class="grid-2">
479
  <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Команда Раина" class="about-img">
480
  <div>
481
- <h3>Профессионализм и Опыт</h3>
482
- <p>Компания "Раина Климат Систем" обладает многолетним опытом и глубокими знаниями в области HVAC. Мы стремимся к инновациям и совершенству.</p>
483
- <h3>Наша Миссия</h3>
484
- <p>Наша миссия создание оптимального микроклимата для наших клиентов, обеспечивающего комфорт, здоровье и высокую производительность.</p>
485
- <h3>Квалифицированная Команда</h3>
486
- <p>Наша команда состоит из высококвалифицированных инженеров и техников, обладающих глубокими знаниями и опытом в области климатических систем.</p>
487
  </div>
488
  </div>
489
  </div>
@@ -493,17 +493,17 @@ LANDING_TEMPLATE = '''
493
  <div class="container">
494
  <h2>Наши Услуги</h2>
495
  <div class="services-grid">
496
- <div class="service-card"><i class="fas fa-drafting-compass"></i><h3>Проектирование</h3><p>Точные расчеты, 3D-модели и вся необходимая проектная документация.</p></div>
497
- <div class="service-card"><i class="fas fa-tools"></i><h3>Монтаж</h3><p>Профессиональная установка всех типов систем HVAC, от бытовых до промышленных.</p></div>
498
- <div class="service-card"><i class="fas fa-headset"></i><h3>Сервис 24/7</h3><p>Плановое обслуживание и оперативный аварийный ремонт в любое время.</p></div>
499
- <div class="service-card"><i class="fas fa-sync-alt"></i><h3>Модернизация</h3><p>Повышение энергоэффективности и снижение расходов на эксплуатацию.</p></div>
500
  </div>
501
  </div>
502
  </section>
503
 
504
  <section id="turnkey">
505
  <div class="container">
506
- <h2>Услуги "под ключ"</h2>
507
  {% if services %}
508
  <div class="services-grid">
509
  {% for service in services %}
@@ -526,7 +526,7 @@ LANDING_TEMPLATE = '''
526
 
527
  <section id="equipment">
528
  <div class="container">
529
- <h2>Наше Оборудование</h2>
530
  {% if equipment %}
531
  <div class="equipment-filters">
532
  <button class="filter-btn active" data-filter="all">Все</button>
@@ -544,7 +544,7 @@ LANDING_TEMPLATE = '''
544
  {% endif %}
545
  <h3>{{ item.name }}</h3>
546
  <p class="price">{{ "%.2f"|format(item.price) }} KGS</p>
547
- <a href="https://api.whatsapp.com/send?phone={{ whatsapp_phone }}&text=Здравствуйте, интересует оборудование: {{ item.name|urlencode }}" target="_blank" class="btn"><span style="color: white;">Запросить</span></a>
548
  </div>
549
  {% endfor %}
550
  </div>
@@ -557,7 +557,7 @@ LANDING_TEMPLATE = '''
557
  <section id="contact">
558
  <div class="container contact-content">
559
  <h2>Контакты</h2>
560
- <p>Готовы стать вашим надежным партнером в создании идеального климата. Свяжитесь с нами для консультации или заказа услуг.</p>
561
  <div class="contact-info">
562
  <p><strong>Телефон:</strong> <a href="tel:{{ contact_phone }}">{{ contact_phone }}</a></p>
563
  <a href="https://api.whatsapp.com/send?phone={{ whatsapp_phone }}&text=Здравствуйте, я хотел(а) бы получить консультацию по вашим услугам." target="_blank" class="btn"><i class="fab fa-whatsapp"></i> Написать в WhatsApp</a>
@@ -622,15 +622,15 @@ LANDING_TEMPLATE = '''
622
  `;
623
  } else if (currentType === 'equipment') {
624
  content = `
625
- ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/equipment/${item.photo}" alt="${item.name}">` : '<img src="https://via.placeholder.com/400x300.png?text=No+Image" alt="No Image Available">'}
626
  <h3>${item.name || 'Оборудование'}</h3>
627
  <p><strong>Категория:</strong> ${item.category || 'Не указана'}</p>
628
  <p class="price" style="font-size: 1.8rem; color: var(--accent-primary); margin: 20px 0;">${(item.price || 0).toFixed(2)} KGS</p>
629
- <a href="https://api.whatsapp.com/send?phone={{ whatsapp_phone }}&text=Здравствуйте, интересует оборудование: ${encodeURIComponent(item.name || '')}" target="_blank" class="btn" style="padding: 14px 30px; font-size: 1.05rem;"><span style="color: white;">Запросить</span></a>
630
  `;
631
  } else if (currentType === 'project') {
632
  content = `
633
- ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/projects/${item.photo}" alt="${item.title}">` : '<img src="https://via.placeholder.com/400x300.png?text=Project+Image+Not+Available" alt="Project Image Not Available">'}
634
  <h3>${item.title || 'Проект'}</h3>
635
  <p>${item.description || 'Описание отсутствует.'}</p>
636
  `;
@@ -676,7 +676,7 @@ LANDING_TEMPLATE = '''
676
  });
677
 
678
  document.getElementById('detailsModal').addEventListener('click', function(event) {
679
- if (event.target === this) {
680
  closeDetailsModal();
681
  }
682
  });
@@ -738,7 +738,7 @@ ADMIN_TEMPLATE = '''
738
  body { font-family: 'Poppins', sans-serif; background-color: #f4f7f9; color: #333; padding: 20px; line-height: 1.6; }
739
  .container { max-width: 1200px; margin: 0 auto; background-color: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); }
740
  .header { padding-bottom: 15px; margin-bottom: 25px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;}
741
- h1, h2, h3 { font-weight: 600; color: #6a0dad; margin-bottom: 15px; }
742
  h1 { font-size: 1.8rem; }
743
  h2 { font-size: 1.5rem; margin-top: 30px; display: flex; align-items: center; gap: 8px; }
744
  .section { margin-bottom: 30px; padding: 20px; background-color: #fafafa; border: 1px solid #e9e9e9; border-radius: 8px; }
@@ -755,7 +755,7 @@ ADMIN_TEMPLATE = '''
755
  .item-actions { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; }
756
  .edit-form-container { margin-top: 15px; padding: 20px; background: #fdf9ff; border: 1px dashed #ddd; border-radius: 6px; display: none; }
757
  details { background-color: #fafafa; border: 1px solid #e9e9e9; border-radius: 8px; margin-bottom: 20px; }
758
- details > summary { cursor: pointer; font-weight: 600; color: #8e44ad; display: block; padding: 15px; position: relative; list-style: none; }
759
  details > summary::after { content: '\\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
760
  details[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
761
  .photo-preview img { max-width: 70px; max-height: 70px; border-radius: 5px; margin: 5px 5px 0 0; object-fit: cover;}
 
141
  <head>
142
  <meta charset="UTF-8">
143
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
144
+ <title>ОсОО "Раина Климат Систем" - Вентиляция и Кондиционирование</title>
145
+ <meta name="description" content="Профессиональные услуги по проектированию, монтажу и обслуживанию систем вентиляции и кондиционирования в Кыргызстане. Опыт и экспертиза в климатических решениях.">
146
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
147
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
148
  <style>
 
226
  .nav-links a {
227
  color: var(--text-primary);
228
  text-decoration: none;
229
+ font-weight: 500;
230
  transition: color 0.3s ease, transform 0.3s ease;
231
  padding-bottom: 5px;
232
  position: relative;
 
274
  border-color: var(--border-hover-color);
275
  box-shadow: 0 12px 35px var(--accent-glow);
276
  }
277
+ .service-card i { font-size: 3rem; color: var(--accent-primary); margin-bottom: 25px; display: block; }
278
 
279
+ .turnkey-card { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
280
  .turnkey-img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--card-border-radius) var(--card-border-radius) 0 0; transition: transform 0.3s ease; }
281
  .turnkey-card:hover .turnkey-img { transform: scale(1.05); }
282
  .turnkey-content { padding: 35px; flex-grow: 1;}
 
284
  .turnkey-card:hover .turnkey-content h3 i { color: var(--accent-secondary); }
285
 
286
 
287
+ #turnkey { background-color: var(--bg-medium); }
288
+ #contact { background-color: var(--bg-medium); }
289
 
290
  .equipment-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 50px; }
291
  .filter-btn {
 
375
  width: min(80vw, 320px); height: 100vh;
376
  background-color: var(--bg-medium);
377
  flex-direction: column; justify-content: center; align-items: center;
378
+ transition: right 0.45s cubic-bezier(0.68, -0.55, 0.27, 1.55);
379
  box-shadow: -8px 0 25px rgba(0,0,0,0.25);
380
+ gap: 40px;
381
  }
382
  .nav-links.active { right: 0; }
383
  .menu-toggle { display: block; z-index: 1001; }
384
  h1 { font-size: 2.2rem; }
385
  h2 { margin-bottom: 50px; font-size: 1.8rem; }
386
  .projects-grid { grid-template-columns: 1fr; }
387
+ .services-grid { grid-template-columns: 1fr; }
388
+ .equipment-grid { grid-template-columns: 1fr; }
389
  .btn { padding: 12px 28px; }
390
  }
391
 
 
395
  z-index: 1001;
396
  left: 0; top: 0; width: 100%; height: 100%;
397
  overflow: auto;
398
+ background-color: rgba(17, 24, 39, 0.9);
399
+ padding-top: 5vh;
400
  backdrop-filter: blur(5px);
401
  }
402
  .modal-content {
403
  position: relative;
404
  margin: 5% auto;
405
+ padding: 30px;
406
  width: 90%;
407
  max-width: 800px;
408
  background-color: var(--bg-medium);
 
413
  }
414
  .modal-content img {
415
  max-width: 100%;
416
+ max-height: 65vh;
417
  border-radius: 10px;
418
  margin-bottom: 25px;
419
  object-fit: contain;
 
438
  background-color: var(--accent-primary);
439
  color: white;
440
  border: none;
441
+ padding: 12px 18px;
442
  border-radius: var(--button-border-radius);
443
  margin: 0 8px;
444
  cursor: pointer;
445
  transition: all 0.3s ease;
446
+ font-size: 1.3rem;
447
  }
448
  .carousel-nav button:hover { background-color: var(--accent-secondary); transform: scale(1.1); }
449
  .carousel-nav button:disabled { background-color: var(--text-muted); cursor: not-allowed; transform: scale(1); }
 
466
 
467
  <section id="hero">
468
  <div class="container hero-content">
469
+ <h1>ОсОО "Раина Климат Систем": Экспертиза в Климатических Решениях</h1>
470
+ <p>Профессиональный подход к вентиляции и кондиционированию. Создаем оптимальный микроклимат для вашего комфорта и здоровья.</p>
471
  <a href="#contact" class="btn">Получить консультацию</a>
472
  </div>
473
  </section>
 
478
  <div class="grid-2">
479
  <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="Команда Раина" class="about-img">
480
  <div>
481
+ <h3>Наш Опыт и Профессионализм</h3>
482
+ <p>Компания "Раина Климат Систем" специализируется на проектировании, монтаже и обслуживании высококачественных систем вентиляции и кондиционирования.</p>
483
+ <h3>Квалифицированные Специалисты</h3>
484
+ <p>Наша команда состоит из сертифицированных инженеров и техников, обладающих глубокими знаниями и многолетним опытом в области HVAC.</p>
485
+ <h3>Современные Технологии</h3>
486
+ <p>Мы используем передовые технологии и оборудование для обеспечения максимальной эффективности, надежности и энергосбережения.</p>
487
  </div>
488
  </div>
489
  </div>
 
493
  <div class="container">
494
  <h2>Наши Услуги</h2>
495
  <div class="services-grid">
496
+ <div class="service-card"><i class="fas fa-drafting-compass"></i><h3>Проектирование</h3><p>Разработка детальных проектов вентиляционных и климатических систем с учетом всех ваших требований.</p></div>
497
+ <div class="service-card"><i class="fas fa-tools"></i><h3>Монтаж</h3><p>Профессиональная установка и пусконаладка климатического оборудования любого уровня сложности.</p></div>
498
+ <div class="service-card"><i class="fas fa-headset"></i><h3>Сервис и Обслуживание</h3><p>Регулярное техническое обслуживание и оперативный ремонт для бесперебойной работы систем.</p></div>
499
+ <div class="service-card"><i class="fas fa-sync-alt"></i><h3>Модернизация и Оптимизация</h3><p>Улучшение существующих систем для повышения энергоэффективности и производительности.</p></div>
500
  </div>
501
  </div>
502
  </section>
503
 
504
  <section id="turnkey">
505
  <div class="container">
506
+ <h2>Комплексные Решения "Под ключ"</h2>
507
  {% if services %}
508
  <div class="services-grid">
509
  {% for service in services %}
 
526
 
527
  <section id="equipment">
528
  <div class="container">
529
+ <h2>Ассортимент Оборудования</h2>
530
  {% if equipment %}
531
  <div class="equipment-filters">
532
  <button class="filter-btn active" data-filter="all">Все</button>
 
544
  {% endif %}
545
  <h3>{{ item.name }}</h3>
546
  <p class="price">{{ "%.2f"|format(item.price) }} KGS</p>
547
+ <a href="https://api.whatsapp.com/send?phone={{ whatsapp_phone }}&text=Здравствуйте, интересует оборудование: {{ item.name|urlencode }}" target="_blank" class="btn">Запросить</a>
548
  </div>
549
  {% endfor %}
550
  </div>
 
557
  <section id="contact">
558
  <div class="container contact-content">
559
  <h2>Контакты</h2>
560
+ <p>Свяжитесь с нами для получения профессиональной консультации и подбора оптимального климатического решения для вас.</p>
561
  <div class="contact-info">
562
  <p><strong>Телефон:</strong> <a href="tel:{{ contact_phone }}">{{ contact_phone }}</a></p>
563
  <a href="https://api.whatsapp.com/send?phone={{ whatsapp_phone }}&text=Здравствуйте, я хотел(а) бы получить консультацию по вашим услугам." target="_blank" class="btn"><i class="fab fa-whatsapp"></i> Написать в WhatsApp</a>
 
622
  `;
623
  } else if (currentType === 'equipment') {
624
  content = `
625
+ ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/equipment/${item.photo}" alt="${item.name}">` : '<img src="https://via.placeholder.com/400x300.png?text=No+Image+Available">'}
626
  <h3>${item.name || 'Оборудование'}</h3>
627
  <p><strong>Категория:</strong> ${item.category || 'Не указана'}</p>
628
  <p class="price" style="font-size: 1.8rem; color: var(--accent-primary); margin: 20px 0;">${(item.price || 0).toFixed(2)} KGS</p>
629
+ <a href="https://api.whatsapp.com/send?phone={{ whatsapp_phone }}&text=Здравствуйте, интересует оборудование: ${encodeURIComponent(item.name || '')}" target="_blank" class="btn" style="padding: 14px 30px; font-size: 1.05rem;">Запросить</a>
630
  `;
631
  } else if (currentType === 'project') {
632
  content = `
633
+ ${item.photo ? `<img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/projects/${item.photo}" alt="${item.title}">` : '<img src="https://via.placeholder.com/400x300.png?text=Project+Image+Not+Available">'}
634
  <h3>${item.title || 'Проект'}</h3>
635
  <p>${item.description || 'Описание отсутствует.'}</p>
636
  `;
 
676
  });
677
 
678
  document.getElementById('detailsModal').addEventListener('click', function(event) {
679
+ if (event.target === this) {
680
  closeDetailsModal();
681
  }
682
  });
 
738
  body { font-family: 'Poppins', sans-serif; background-color: #f4f7f9; color: #333; padding: 20px; line-height: 1.6; }
739
  .container { max-width: 1200px; margin: 0 auto; background-color: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); }
740
  .header { padding-bottom: 15px; margin-bottom: 25px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;}
741
+ h1, h2, h3 { font-weight: 600; color: #9b59b6; margin-bottom: 15px; }
742
  h1 { font-size: 1.8rem; }
743
  h2 { font-size: 1.5rem; margin-top: 30px; display: flex; align-items: center; gap: 8px; }
744
  .section { margin-bottom: 30px; padding: 20px; background-color: #fafafa; border: 1px solid #e9e9e9; border-radius: 8px; }
 
755
  .item-actions { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; }
756
  .edit-form-container { margin-top: 15px; padding: 20px; background: #fdf9ff; border: 1px dashed #ddd; border-radius: 6px; display: none; }
757
  details { background-color: #fafafa; border: 1px solid #e9e9e9; border-radius: 8px; margin-bottom: 20px; }
758
+ details > summary { cursor: pointer; font-weight: 600; color: #9b59b6; display: block; padding: 15px; position: relative; list-style: none; }
759
  details > summary::after { content: '\\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
760
  details[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
761
  .photo-preview img { max-width: 70px; max-height: 70px; border-radius: 5px; margin: 5px 5px 0 0; object-fit: cover;}