fix landing page issues - use relative path for static resources

Hexlet · Nov 23, 2022 · 8f96f0c · 8f96f0c
1 parent 690c14d
commit 8f96f0c
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 45 deletions.
diff --git a/...ic/hexlet-correction screen2 (edited).png → ...s/static/img/landing/typo-form-screen.png b/...ic/hexlet-correction screen2 (edited).png → ...s/static/img/landing/typo-form-screen.png
diff --git a/...urces/static/hexlet-correction screen.png → ...s/static/img/landing/typo-info-screen.png b/...urces/static/hexlet-correction screen.png → ...s/static/img/landing/typo-info-screen.png
diff --git a/src/main/resources/templates/landing.html b/src/main/resources/templates/landing.html
@@ -1,32 +1,29 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-
-<head th:replace="../templates/fragments/header.html :: head"></head>
-
+<head th:replace="fragments/header :: head"></head>
 <body>
   <div class="container-fluid d-flex flex-column p-0 m-0">
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark text-light mb-5 mt-0">
       <div class="container-fluid">Hexlet Typo Reporter</div>
     </nav>
     <div class=" bg-light mx-auto mt-0">
       <main class="bg-light p-3">
-        <h1 class="display-1">Hexlet-correction</h1>
+          <h1 class="display-1">Hexlet Typo Reporter</h1>
         <p class="display-6">Сервис для отправки сообщений об ошибках в тексте на Вашем сайте</p>
         <div class="row">
           <div class="d-flex justify-content-evenly m-3 border">
-            <img class="w-70" src="../static/hexlet-correction screen2 (edited).png" alt="modal window example" />
+              <img alt="modal window example" class="w-70" src="" th:src="@{img/landing/typo-form-screen.png}" />
             <p class="fs-4 m-2 p-2">
               Добавьте на страницу <b>виджет</b>, через который пользователи смогут сообщать об опечатках
             </p>
           </div>
           <div class="d-flex justify-content-evenly m-3 border">
             <div class="fs-4 m-2 p-2">
               <p>Отслеживайте ошибки и их <b>статус</b></p>
-              <a class="btn btn-primary border" href="https://hexlet-correction.herokuapp.com/" target="_blank">Перейти
-                в
-                сервис</a>
+                <a class="btn btn-primary border" target="_blank" th:href="@{/}">Перейти в сервис</a>
             </div>
-            <img class="w-50" src="../static/hexlet-correction screen.png" alt="app screenshot with typo statuses" />
+              <img alt="app screenshot with typo statuses" class="w-50" src=""
+                   th:src="@{img/landing/typo-info-screen.png}" />
           </div>
         </div>
       </main>
@@ -38,54 +35,89 @@ <h1 class="display-1">Hexlet-correction</h1>
             <a class="text-dark px-0 py-0 text-decoration-none " href="https://ru.hexlet.io">
               <p class="h3 mb-2 text-light">© Hexlet</p>
             </a>
-            <ul class="nav flex-column">
-              <li class="nav-item"><a class="nav-link px-0 py-1 text-light"
-                  href="https://sicp.hexlet.io/ru/pages/about">О
-                  проекте</a></li>
-              <li class="nav-item"><a class="nav-link px-0 py-1 text-light" target="_blank"
-                  href="https://github.com/Hexlet/hexlet-correction">Исходный код</a></li>
-              <li class="nav-item"><a class="nav-link px-0 py-1 text-light" target="_blank"
-                  href="https://slack-ru.hexlet.io/">Slack
-                  #hexlet-volunteers</a></li>
-            </ul>
+              <ul class="nav flex-column">
+                  <li class="nav-item">
+                      <a class="nav-link px-0 py-1 text-light" href="https://sicp.hexlet.io/ru/pages/about">
+                          О проекте
+                      </a>
+                  </li>
+                  <li class="nav-item">
+                      <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-correction"
+                         target="_blank">
+                          Исходный код
+                      </a>
+                  </li>
+                  <li class="nav-item">
+                      <a class="nav-link px-0 py-1 text-light" href="https://slack-ru.hexlet.io/"
+                         target="_blank">
+                          Slack #hexlet-volunteers
+                      </a>
+                  </li>
+              </ul>
           </div>
           <div class="col-sm-6 col-md-3 col-lg-auto">
             <p class="h5 mb-3">Помощь</p>
-            <ul class="nav flex-column">
-              <li class="nav-item"><a class="nav-link px-0 py-1 text-light" href="https://ru.hexlet.io/blog">Блог</a>
-              </li>
-              <li class="nav-item"><a class="nav-link px-0 py-1 text-light" href="https://ru.hexlet.io/knowledge">База
-                  знаний</a></li>
-              <li class="nav-item"><a class="nav-link px-0 py-1 text-light"
-                  href="https://ru.hexlet.io/pages/recommended-books">Рекомендуемые книги</a></li>
-            </ul>
+              <ul class="nav flex-column">
+                  <li class="nav-item">
+                      <a class="nav-link px-0 py-1 text-light" href="https://ru.hexlet.io/blog">
+                          Блог
+                      </a>
+                  </li>
+                  <li class="nav-item">
+                      <a class="nav-link px-0 py-1 text-light" href="https://ru.hexlet.io/knowledge">
+                          База знаний
+                      </a>
+                  </li>
+                  <li class="nav-item">
+                      <a class="nav-link px-0 py-1 text-light" href="https://ru.hexlet.io/pages/recommended-books">
+                          Рекомендуемые книги
+                      </a>
+                  </li>
+              </ul>
           </div>
           <div class="col-sm-6 col-md-3 col-lg-auto">
             <p class="h5 mb-3">Другие open-source проекты</p>
-            <ul class="nav flex-column">
-              <li class="nav-item"><a class="nav-link px-0 py-1 text-light"
-                  href="https://github.com/Hexlet/hexlet-cv">Хекслет-резюме</a></li>
-              <li class="nav-item"><a class="nav-link px-0 py-1 text-light"
-                  href="https://github.com/Hexlet/hexlet-editor">Хекслет-редактор</a></li>
-              <li class="nav-item"><a class="nav-link px-0 py-1 text-light"
-                  href="https://github.com/Hexlet/hexlet-friends">Друзья Хекслета</a></li>
-            </ul>
+              <ul class="nav flex-column">
+                  <li class="nav-item">
+                      <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-cv">
+                          Хекслет-резюме
+                      </a>
+                  </li>
+                  <li class="nav-item">
+                      <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-editor">
+                          Хекслет-редактор
+                      </a>
+                  </li>
+                  <li class="nav-item">
+                      <a class="nav-link px-0 py-1 text-light" href="https://github.com/Hexlet/hexlet-friends">
+                          Друзья Хекслета
+                      </a>
+                  </li>
+              </ul>
           </div>
           <div class="col-sm-6 col-md-3 col-lg-auto">
             <p class="h5 mb-3">Дополнительно</p>
-            <ul class="nav flex-column">
-              <li class="nav-item"><a class="nav-link px-0 py-1 text-light" href="https://ru.code-basics.com/">Code
-                  Basics</a></li>
-              <li class="nav-item"><a class="nav-link px-0 py-1 text-light"
-                  href="https://codebattle.hexlet.io/">Кодбаттл</a></li>
-              <li class="nav-item"><a class="nav-link px-0 py-1 text-light" href="https://guides.hexlet.io/">Гайды
-                  Хекслета</a></li>
-            </ul>
+              <ul class="nav flex-column">
+                  <li class="nav-item">
+                      <a class="nav-link px-0 py-1 text-light" href="https://ru.code-basics.com/">
+                          Code Basics
+                      </a>
+                  </li>
+                  <li class="nav-item">
+                      <a class="nav-link px-0 py-1 text-light" href="https://codebattle.hexlet.io/">
+                          Кодбаттл
+                      </a>
+                  </li>
+                  <li class="nav-item">
+                      <a class="nav-link px-0 py-1 text-light" href="https://guides.hexlet.io/">
+                          Гайды Хекслета
+                      </a>
+                  </li>
+              </ul>
           </div>
         </div>
       </div>
     </footer>
   </div>
 </body>
-
-</html>
+</html>