add checkbox and fix spaces in name fields

Reviewed-on: #1

.gitea/workflows/ci.yml

@@ -11,8 +11,8 @@ jobs:
 
       - name: Setup SSH key
         run: |
-          echo "${{ secrets.SSH_PRIVATE_KEY }}" > /tmp/id_fin 
-          chmod 600 /tmp/id_fin 
+          echo "${{ secrets.SSH_PRIVATE_KEY_RU }}" > /tmp/id_ru 
+          chmod 600 /tmp/id_ru
 #ключ машины
       - name: Create .env file
         run: echo "${{ secrets.RUNNER_ENV }}" > .env
@@ -28,7 +28,7 @@ jobs:
       - name: Run Ansible playbook
         run: ansible-playbook -i tmp-repo/ansible/inventory.ini tmp-repo/ansible/deploy.yml -e @tmp-repo/ansible/secrets.yml -e env_file="$(pwd)/.env"
         env:
-          ANSIBLE_PRIVATE_KEY_FILE: /tmp/id_fin
+          ANSIBLE_PRIVATE_KEY_FILE: /tmp/id_ru
           ANSIBLE_HOST_KEY_CHECKING: "False"
 
   build:
@@ -36,9 +36,13 @@ jobs:
     needs: deploy
     steps:
       - uses: actions/checkout@v4
+      
+      - name: Login to Docker Hub
+        run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u mh.dmitrii@homyk.space --password-stdin
 
       - name: Create .env file
         run: echo "${{ secrets.WEDDING_SITE_ENV  }}" > .env
+
       - name: Check env
         run: cat .env
 #env для проекта

ansible/deploy.yml

@@ -16,6 +16,11 @@
       args:
         creates: /usr/bin/docker
 
+    - name: Install Docker Compose plugin
+      apt:
+        name: docker-compose-plugin
+        state: present
+
     - name: Ensure /opt/infra exists
       file:
         path: /opt/infra
@@ -38,4 +43,7 @@
         creates: /opt/infra/node-docker.yaml
 
     - name: Start node-docker
-      shell: docker-compose -f /opt/infra/node-docker.yaml up -d
+      shell: docker compose -f /opt/infra/node-docker.yaml up -d
+    
+    - name: Docker system prune
+      shell: docker system prune -a -f

ansible/inventory.ini

@@ -1,2 +1,2 @@
 [servers]
-myserver ansible_host=38.244.136.102 ansible_user=root
+myserver ansible_host=81.19.135.168 ansible_user=root

docker/caddy/caddy.yaml

@@ -8,6 +8,7 @@ services:
     volumes:
       - caddy_data:/data
       - caddy_config:/config
+      - /root/.docker/config.json:/root/.docker/config.json:ro
     networks:
       - docker_wedding-site-network
     healthcheck: 

docker/caddy/conf/Caddyfile

@@ -40,20 +40,3 @@ https://ru.homyk.space {
         format json
     }
 }
-https://music.homyk.space {
-    encode gzip
-
-    # --- API ---
-    handle {
-        reverse_proxy koel:80
-    }
-
-    log {
-        output file /data/logs/caddy1.log {
-            roll_size 5mb
-            roll_keep 5
-            roll_keep_for 72h
-        }
-        format json
-    }
-}

docker/docker-compose.yaml

@@ -4,6 +4,7 @@ services:
     container_name: wedding-site
     volumes:
       - /home/sevice/DB:/home/backend/server/backend/database/DB
+      - /root/.docker/config.json:/root/.docker/config.json:ro
     expose:
       - "${PORT}"
     networks:
@@ -13,6 +14,11 @@ services:
       interval: 5s
       timeout: 30s
       retries: 1
+    logging:
+      driver: syslog
+      options:
+        syslog-address: "unixgram:///dev/log"
+        tag: wedding-site
 networks:
   wedding-site-network:
     driver: bridge

docker/gitea_runners/node-docker.yaml

@@ -5,6 +5,7 @@ services:
     volumes:
       - ./data/act_runner:/data
       - /var/run/docker.sock:/var/run/docker.sock
+      - /root/.docker/config.json:/root/.docker/config.json:ro
     environment:
       - GITEA_INSTANCE_URL=${GITEA_INSTANCE_URL}
       - GITEA_RUNNER_REGISTRATION_TOKEN=${TOKEN}

makefile

@@ -1,7 +1,7 @@
-#VENV=source ./.venv/bin/activate;
-#ALEMBIC=alembic -c ./server/backend/database/alembic/alembic.ini
-VENV= .venv\Scripts\activate #Windows
-ALEMBIC=alembic -c server\backend\database\alembic\alembic.ini
+VENV=source ./.venv/bin/activate;
+ALEMBIC=alembic -c ./server/backend/database/alembic/alembic.ini
+#VENV= .venv\Scripts\activate #Windows
+#ALEMBIC=alembic -c server\backend\database\alembic\alembic.ini
 .PHONY: run run_debug migrate_head migrate_down migrate_history migrate_current migrate_heads migrate_stamp migrate
 run:
 	$(VENV) python run.py --user_name admin

readme.md

@@ -1 +1 @@
-test 2
+test 2d

run.py

@@ -26,7 +26,9 @@ def start(log_level: str):
         port=settings.PORT,
         reload=False,
         log_level=log_level,
-        access_log=True
+        access_log=True,
+        proxy_headers=True,
+        forwarded_allow_ips="*",
     )
 
 parser = argparse.ArgumentParser(description="logging and admin creation")

server/backend/endpoints/endpoints.py

@@ -8,9 +8,9 @@ security = HTTPBearer(auto_error=False)
 
 async def get_current_user(
     credentials: HTTPAuthorizationCredentials = Depends(security),
-    token_cookie: str = Cookie(default=None)
+    token: str = Cookie(default=None)
 ):
-    token = credentials.credentials if credentials else token_cookie
+    token = credentials.credentials if credentials else token
     if not token:
         raise HTTPException(status_code=401, detail="Not authenticated")
     user = decodeJWT(token)
@@ -31,7 +31,8 @@ async def update_user(data: pydantic.UserUpdate, user=Depends(get_current_user))
     if not user_check:
         raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="User not found")
     if not user_check.admin:
-        if data.code != user_check.code:
+        print(data.code)
+        if data.code != user_check.code and data.code:
             raise HTTPException(
                 status_code=status.HTTP_403_FORBIDDEN,
                 detail="Ordinary users cannot change their code"

server/backend/schema/pydantic.py

@@ -10,7 +10,7 @@ NameStr = Annotated[
     StringConstraints(
         min_length=2,
         max_length=50,
-        pattern=r'^[A-Za-zА-ЯЁа-яё]+$'
+        pattern=r'^[A-Za-zА-ЯЁа-яё ]+$'
     )
 ]
 class UserAccess(BaseModel):

server/frontend/auth/login.css

@@ -25,6 +25,7 @@ body, html {
     margin: 0;
     padding: 0;
 }
+body{  background-color: #c68a5e;}
 .bg {
     position: fixed;
     inset: 0;

server/frontend/auth/login.js

@@ -34,7 +34,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 }
             }
         } catch (err) {
-            showError(['Connection error: ' + err.message]);
+            showError(['Connection error :(']);
         }
     });
 });
@@ -45,13 +45,13 @@ function showError(messages) {
         errorElem = document.createElement('div');
         errorElem.id = 'formError';
         errorElem.style.cssText = `
-            color: red;
-            margin-top: 20px;
-            margin-bottom: 20px;
-            font-size: 14px;
-            font-weight: 100;
-            line-height: 120%;
-            transition: 3s;
+          color: red;
+          font-size: medium;
+          line-height: 100%;
+          transition: 3s;
+          text-decoration: underline;
+          font-weight: bold;
+          font-family: Arial, sans-serif;
         `;
         document.getElementById('loginForm').insertAdjacentElement('afterend', errorElem);
     }

server/frontend/main/api.js

@@ -15,19 +15,19 @@ document.addEventListener("DOMContentLoaded", () => {
         window.location.href = '/';
     });
 
-    document.querySelector(".form-info").addEventListener("submit", async (e) => {
+    document.querySelector(".form-connect").addEventListener("submit", async (e) => {
         e.preventDefault();
 
         const guestData = {
             name:          document.getElementById('ffname').value || "",
             middlename:    document.getElementById('fmname').value || "",
             surname:       document.getElementById('flname').value || "",
-            text_field:    document.getElementById('text_field')?.value || "",
+            text_field:    document.getElementById('text_field')?.value || "Пожеланий Нет",
             activated:     true,
-            types_of_food: document.querySelector('input[name="food"]:checked')?.value || "",
+            type_of_food: document.querySelector('input[name="food"]:checked')?.value || "Мясо (Дефолт)",
             types_of_alco: Array.from(document.querySelectorAll('input[name="drink"]:checked'))
                                .map(el => el.value)
-                               .join(', ')
+                               .join(', ') || "Сок"
         };
 
         try {
@@ -49,7 +49,48 @@ document.addEventListener("DOMContentLoaded", () => {
 
         } catch (err) {
             console.error(err);
-            alert('Ошибка: ' + err.message);
+            window.location.href = '#answer';
+            showErrors(JSON.parse(err.message));
         }
     });
-});
+});
+
+const fieldMap = {
+    'name': 'ffname',
+    'middlename': 'fmname',
+    'surname': 'flname'
+  };
+  
+  function showErrors(errors) {
+    let errorElements = document.querySelectorAll(".formError")
+    if (errorElements.length === 0) {
+      document.querySelectorAll('.label_style').forEach(el => {
+        const errorElem = document.createElement('div');
+        errorElem.className = 'formError';
+        errorElem.style.cssText = `
+          color: red;
+          font-size: medium;
+          line-height: 100%;
+          transition: 3s;
+          text-decoration: underline;
+          font-weight: bold;
+          font-family: Arial, sans-serif;
+        `;
+        el.after(errorElem);
+      });
+    }  
+    errors.forEach(error => {
+      const fieldName = error.loc[1]; // 'name', 'middlename', 'surname'
+      const inputId = fieldMap[fieldName];
+      if (!inputId) return;
+  
+      const input = document.getElementById(inputId);
+      if (!input) return;
+      const label = input.closest('.label_style');
+      if (label && label.nextElementSibling?.classList.contains('formError')) {
+        label.nextElementSibling.textContent = error.msg;
+      }
+    });
+  }
+  
+

server/frontend/main/index.html

@@ -3,12 +3,14 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <link rel="icon" type="icon" sizes="32x32" href="images/free-icon-wedding-ring-4155044.ico">
     <title>Wedding invitation</title>
     <link rel="stylesheet" href="reset.css">
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
     <link rel="preload" href="fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin>
+    
 </head>
 
 <body>
@@ -82,6 +84,10 @@
                         Наша история
                     </h2>
                     <h3 class="heading_date">22 августа 2026</h3>
+                               <!-- КНОПКА -->
+            <button class="story_btn">
+                Открыть историю
+            </button>
                     <p class="heading_text">
                         Мы — та самая история, которая началась со странного сообщения и превратилась в нечто настоящее.
                         В нас есть легкость и смех, который когда-то стал началом всего, любовь к простым вещам вроде
@@ -352,7 +358,7 @@
                 Фотографии
             </h4>
             <!-- Slider main container -->
-            <div class="swiper">
+            <div class="swiper photos_slider">
                 <!-- Additional required wrapper -->
                 <div class="swiper-wrapper">
                     <!-- Slides -->
@@ -407,6 +413,17 @@
                 <!-- If we need scrollbar -->
                 <div class="swiper-scrollbar"></div>
             </div>
+            <!-- COLLAGE -->
+    <div class="photos_collage">
+        <img src="images/photos/1.webp" alt="">
+        <img src="images/photos/2.webp" alt="">
+        <img src="images/photos/3.webp" alt="">
+        <img src="images/photos/4.webp" alt="">
+        <img src="images/photos/5.webp" alt="">
+        <img src="images/photos/6.webp" alt="">
+        <img src="images/photos/8.webp" alt="">
+        <img src="images/photos/9.webp" alt="">
+    </div>
         </section>
         <section class="to-do-list" id="to-do-list">
             <h4 class="do-list_title">
@@ -576,21 +593,20 @@
 
                     <!-- Левая колонка -->
                     <div class="form_name">
-                        <label class="label_style">Имя
-                            <input type="text" name="firstName" id="ffname" required>
-                        </label>
-
-                        <label class="label_style">Отчество
-                            <input type="text" name="middleName" id="fmname" required>
-                        </label>
 
                         <label class="label_style">Фамилия
                             <input type="text" name="lastName" id="flname" required>
                         </label>
+                        <label class="label_style">Имя
+                            <input type="text" name="firstName" id="ffname" required>
+                        </label>
+                        <label class="label_style">Отчество
+                            <input type="text" name="middleName" id="fmname" required>
+                        </label>
 
                         <label class="label_1">Комментарий
-                            <textarea cols="1.5" rows="1" type="text" name="lastName" id="fename"
-                                placeholder="Напишите здесь о ваших особых предпочтениях и аллергиях"></textarea>
+                            <textarea cols="1.5" rows="1" type="text" name="lastName" id="text_field"
+                                placeholder="Напишите здесь о ваших особых предпочтениях и аллергиях" style="resize: both; max-width: 300px; max-height: 300px; min-height: 150px; min-width: 150px;"></textarea>
                         </label>
 
                     </div>
@@ -605,7 +621,7 @@
                         </label>
 
                         <label class="option">
-                            <input type="radio" name="food" id="rfish" value="fish">
+                            <input type="radio" name="food" id="rfish" value="fish" required>
                             Рыба
                         </label>
                     </div>
@@ -623,6 +639,8 @@
                             Виски</label>
                         <label class="option"><input type="checkbox" name="drink" value="tequila" id="ctequila">
                             Текила</label>
+                        <label class="option"><input type="checkbox" name="drink" value="sam" id="sam">
+                            Самогон</label>
                     </div>
 
 

server/frontend/main/main.js

@@ -88,4 +88,19 @@ links.forEach(link => {
         burger.classList.remove('active');
         nav.classList.remove('active');
     });
+});
+
+const btn = document.querySelector('.story_btn');
+const text = document.querySelector('.heading_text');
+
+btn.addEventListener('click', () => {
+
+    text.classList.toggle('active');
+
+    if (text.classList.contains('active')) {
+        btn.textContent = 'Скрыть историю';
+    } else {
+        btn.textContent = 'Открыть историю';
+    }
+
 });

server/frontend/main/style.css

@@ -23,27 +23,32 @@
 
 
 /* --------------------------------MAIN-------------------------------- */
+html, body {
+  height: 100vh;
+}
 
 body {
-    margin: 0;
-    font-family: "MurreyC";
-    font-size: 16px;
-    font-weight: 400;
-    letter-spacing: 3px;
+  font-family: "MurreyC";
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 3px;
+  background-color: #c68a5e;
 }
 
 .bg {
-    position: fixed;
-    inset: 0;
-
-    background: url("images/ChatGPT\ Image\ 5\ янв.\ 2026\ г.\,\ 15_49_39.webp") center center / cover no-repeat;
-
-    z-index: -1;
+  position: fixed;
+  top: -100px;
+  left: 0;
+  right: 0;
+  bottom: -100px;
+  background: url("images/ChatGPT Image 5 янв. 2026 г., 15_49_39.webp") center center / cover no-repeat ;
+  z-index: -1;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
 }
-
 .content {
     position: relative;
-    min-height: 100vh;
+    min-height: 100dvh;
 }
 button {
     background-color: #3a1f09;
@@ -61,21 +66,19 @@ button:hover {
 img {
     max-width: 100%;
 }
-.content {
-}
 
 
 /* -------------------------------HEADER------------------------------ */
 .header {
-    width: 100%;
-    background-color: #663c24;
-    padding: 20px 180px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
-}
-.nav {
+  width: 100%;
+  background-color: #663c24;
+  padding: 20px 180px;
+  padding-top: calc(20px + env(safe-area-inset-top));
+
+  margin-bottom: 40px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
 }
+
 .menu {
     display: flex;
     justify-content: center;
@@ -95,12 +98,9 @@ img {
     font-weight: 900;
     transition: all .3s;
     text-shadow: 1px 2px #322624;
-}
-.item:hover {
-    
 }
 .link {
-    
+    white-space: nowrap;
     transition: all .3s;
 }
 .link:hover {
@@ -166,6 +166,8 @@ img {
         border-radius: 10px;
         margin-left: 40px;
         box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+        
+        
     }
 
     .burger {
@@ -173,27 +175,22 @@ img {
         display: flex;
     }
 
-    .nav {
-    position: fixed;
-    top: 0;
-    left: 0; /* ВАЖНО */
-    width: 100%;
-    height: 100vh;
-
-    background: rgba(102, 60, 36, 0.97);
-    backdrop-filter: blur(12px);
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    transform: translateY(-100%);
-    transition: 0.5s ease;
-    z-index: 1000;
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba(102, 60, 36, 0.97);
+  backdrop-filter: blur(12px);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
 }
 
 .nav.active {
-    transform: translateY(0);
+  display: flex;
 }
 .nav::before {
     content: "";
@@ -238,9 +235,9 @@ img {
 .heading {
     background: url("images/25.webp") 50% 100% / cover;
     margin: 0px 400px;
-    /* border: 10px solid rgb(184, 136, 48); */
-    /* border: 15px double rgb(184, 136, 48); */
-    height: 640px;
+    padding-bottom: 40px; /* можно оставить */
+    padding-top: 60px;
+    /* ❌ height: 640px;  УДАЛИТЬ */
     box-shadow: 0 2px 6px rgba(0,0,0,0.2);
 }
 .heading_content {
@@ -293,8 +290,6 @@ img {
 .btn_link {
   font-size: 30px;
 }
-.asise {
-}
 .time{
     padding-top: 15px;
     font-size: 110px;
@@ -302,6 +297,10 @@ img {
     text-shadow: #000 2px 2px 6px;
 }
 
+.story_btn {
+    display: none;
+}
+
 /* -----------------------------------PEOPLE-------------------------------------- */
 
 .people {
@@ -361,8 +360,7 @@ h4 {
 .newlywed_info {
     font-size: 26px;
 }
-.guest_list {
-}
+
 .guest_inner {
     display: flex;
     justify-content: space-around;
@@ -378,9 +376,6 @@ h4 {
     font-weight: 900;
     font-style: italic;
     color: rgb(252, 220, 180);
-}
-.guest_item_list {
-    
 }
 .guest_name {
     font-size: 36px;
@@ -436,17 +431,13 @@ h4 {
     text-align: center;
     border-radius: 33px;
     margin: 0 20px;
-}
-.time_img_box {
-    
 }
 .time_img {
     width: 60px;
     height: 60px;
     margin-bottom: 10px;
 }
-.time_line {
-}
+
 .time_row_down {
     display: flex;
     justify-content: space-between;
@@ -471,8 +462,6 @@ h4 {
     margin-bottom: 60px;
     padding-top: 40px;
 }
-.transfer_title {
-}
 .transfer_inner {
     margin-top: 60px;
 }
@@ -495,6 +484,7 @@ h4 {
     border: none;
 }
 .map_adress {
+  line-height: 1.6;
     font-size: 50px;
     margin-top: 20px;
     font-weight: 900;
@@ -547,9 +537,6 @@ h4 {
 
     font-size: 24px;
     backdrop-filter: blur(5px);
-}
-.map_div {
-
 }
 .map {
     width: 650px;
@@ -565,6 +552,9 @@ h4 {
 .photos_title {
     margin-bottom: 100px;
 }
+.photos_collage {
+    display: none;
+}
 .swiper_img {
     height: 500px;
     border: 5px dotted #000;
@@ -600,8 +590,7 @@ h4 {
     padding-bottom: 100px;
     padding-top: 40px;
 }
-.do-list_title {
-}
+
 .to-do-list_wrapper {
     width: 100%;
     padding-top: 40px;
@@ -826,8 +815,6 @@ textarea {
     font-size: 36px;
     margin-bottom: 25px;
 }
-.footer_copyright {
-}
 
 
 /* --------------------------------------------------------ADAPTIVE------------------------------------------------------ */
@@ -1304,7 +1291,7 @@ textarea {
         margin-bottom: 20px;
         background: none;
         box-shadow: none;
-        height: 450px;
+        height: 550px;
     }
     .heading_content {
         padding: 0;
@@ -1369,6 +1356,7 @@ textarea {
 @media (max-width: 720px) {
         .heading {
         margin: 40px 0;
+        height: 550px;
     }
       .newlywed {
     width: 85%;
@@ -1422,9 +1410,6 @@ textarea {
   }
   .items_up, .items_down {
     flex-direction: column;
-  }
-     .heading {
-    height: 450px;
   }
     .map > div {
     width: 400px;
@@ -1470,7 +1455,7 @@ textarea {
   }
   .swiper_img {
     height: 250px;
-    max-width: 70%;
+    max-width: 50%;
   }
   .swiper-scrollbar {
     display: none;
@@ -1496,14 +1481,23 @@ textarea {
     padding: 0px 20px;
   }
     .heading {
-    height: 500px;
+    height: 600px;
   }
-.map_div {
-  display: none;
-}
+
 .map_adress {
   margin-bottom: 10px;
-  color: #502c01;
+  text-decoration: underline;
+}
+
+.transfer_inner {
+  margin: 0;
+  padding: 0;
+}
+.transfer_map {
+  gap: 20px;
+}
+.transfer {
+  margin-bottom: 0;
 }
 
 }
@@ -1517,8 +1511,8 @@ textarea {
   }
     .map > div {
         border-radius: 0px;
-        width: auto;
-    height: 350px;
+        width: 300px;
+    height: 200px;
     overflow: none;
   }
     .form_name input[type="text"] {
@@ -1532,12 +1526,14 @@ textarea {
     width: 100%;
     text-align: start;
   }
-  .heading_text {
-    display: none;
-  }
-    .heading {
-    height: 200px;
-  }
+.heading {
+    min-height: 225px;
+    height: auto;
+    padding-bottom: 0px;
+}
+.heading_cont {
+    overflow: hidden;
+}
   .img_newlywed {
     display: none;
   }
@@ -1547,12 +1543,46 @@ textarea {
     .header {
     width: 15%;
   }
-  .photos {
-    display: none;
-  }
-  .item_none {
-    display: none;
-  }
+.photos_slider {
+        display: none !important;
+    }
+
+    .photos_collage {
+        display: grid !important;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+        padding: 0 10px;
+    }
+
+    .photos_collage img {
+        width: 100%;
+        height: 180px;
+        object-fit: cover;
+        border-radius: 18px;
+        display: block;
+    }
+
+    .photos_collage img:nth-child(3) {
+        grid-column: span 2;
+        height: 240px;
+    }
+
+        .photos_collage img:nth-child(6) {
+        grid-column: span 2;
+        height: 240px;
+    }
+
+    .photos {
+        margin: 0 15px;
+        padding-bottom: 50px;
+    }
+
+    .photos_title {
+        margin-bottom: 40px;
+    }
+    .photos_collage {
+      padding-top: 40px;
+    }
          .time_row_up, .time_row_down {
         width: 100%;
        }
@@ -1579,13 +1609,56 @@ textarea {
         align-items: start;
         padding: 30px;
        }
+ .story_btn {
+        display: inline-block;
+
+        margin-top: 20px;
+        padding: 12px 28px;
+        font-size: 22px;
+        cursor: pointer;
+    }
+
+.heading_text {
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+
+    transition:
+        max-height 0.6s ease,
+        opacity 0.4s ease,
+        padding 0.4s ease;
+
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.heading_text.active {
+    max-height: 1000px;
+    opacity: 1;
+
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+    .time {
+  padding-top: 0px;
+    }
+    .story_btn {
+      background-color: #a8582a;
+      border: 1px solid #000;
+    }
+    .map_btn {
+      display: none;
+    }
+      .map_link {
+    height: 200px;
+  }
+    .map_preview {
+    height: 200px;
+  }
 
 }
 
 @media (max-width: 420px) {
-      .map > div{
-    height: 300px;
-      }
 
          .time {
     font-size: 60px;
@@ -1621,20 +1694,20 @@ textarea {
     white-space: wrap;
     margin-bottom: 10px;
   }
+      .heading_text.active {
+        min-height: 450px;
+    }
 }
 
 @media (max-width: 320px) {
      .header {
     width: 23%;
   }
-    .heading {
-    height: 240px;
+  .heading_text {
+    padding: 0;
   }
     .time {
     font-size: 35px;
     font-weight: 900;
   }
-    .map > div {
-    height: 220px;
-  }
 }