Merge pull request #74 from Sejong-Java-Study/feat/Guide

refactor: css 수정
Sejong-Java-Study · Sep 23, 2024 · dc3659f · dc3659f
2 parents e61c7e2 + 8921955
commit dc3659f
Show file tree

Hide file tree

Showing 9 changed files with 108 additions and 36 deletions.
diff --git a/src/main/resources/templates/gonghak/statusForm.html b/src/main/resources/templates/gonghak/statusForm.html
@@ -10,9 +10,11 @@
           <img src="/static/images/questionmark.svg"
                style="height: 40px; width: 40px; padding:10px">
         </button>
-        <button>
-          <img src="/static/images/x.svg" style="height: 40px; width: 40px; padding:10px">
-        </button>
+        <a href="https://elastic-march-a0d.notion.site/gonghak98-8b1448883b524b7aa4af14f19f60e162" target="_blank">
+          <button>
+            <img src="/static/images/x.svg" style="height: 40px; width: 40px; padding:10px">
+          </button>
+        </a>
       </div>
     </div>
     <div class="window-body" style="text-align: center">

diff --git a/src/main/resources/templates/layout/footer.html b/src/main/resources/templates/layout/footer.html
@@ -1,22 +1,52 @@
 <footer class="py-2 mt-auto" style="background: gray; display: flex; justify-content: center;">
   <div class="row" style="width: 100%;">
-    <div class="col-4" style="display: flex; align-items: center; justify-content: center;">
+    <div class="col-12 col-md-4" style="display: flex; align-items: center; justify-content: center;">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16" style="margin-right: 10px; vertical-align: middle;">
         <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"/>
       </svg>
       <p style="margin-bottom: 0;">contact: [email protected]</p>
     </div>
-    <div class="col-4" style="display: flex; align-items: center; justify-content: center;">
+    <div class="col-12 col-md-4" style="display: flex; align-items: center; justify-content: center;">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16" style="margin-right: 10px; vertical-align: middle;">
         <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
       </svg>
       <a style="color:black" href="https://github.com/Sejong-Java-Study/gonghak98">[email protected]</a>
     </div>
-    <div class="col-4" style="display: flex; align-items: center; justify-content: center;">
+    <div class="col-12 col-md-4" style="display: flex; align-items: center; justify-content: center;">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-c-circle" viewBox="0 0 16 16" style="margin-right: 10px; vertical-align: middle;">
         <path d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.146 4.992c-1.212 0-1.927.92-1.927 2.502v1.06c0 1.571.703 2.462 1.927 2.462.979 0 1.641-.586 1.729-1.418h1.295v.093c-.1 1.448-1.354 2.467-3.03 2.467-2.091 0-3.269-1.336-3.269-3.603V7.482c0-2.261 1.201-3.638 3.27-3.638 1.681 0 2.935 1.054 3.029 2.572v.088H9.875c-.088-.879-.768-1.512-1.729-1.512"/>
       </svg>
       <p style="margin-bottom: 0;">copyright2024: 조태현,이희수,홍지섭</p>
     </div>
   </div>
 </footer>
+
+<!-- 미디어 쿼리 추가 -->
+<style>
+  @media (max-width: 768px) {
+    footer .row {
+      flex-direction: column;
+      text-align: center;
+    }
+    footer .col-12 {
+      margin-bottom: 10px;
+    }
+    footer svg {
+      width: 20px;
+      height: 20px;
+    }
+    footer p, footer a {
+      font-size: 14px;
+    }
+  }
+
+  @media (min-width: 769px) {
+    footer svg {
+      width: 16px;
+      height: 16px;
+    }
+    footer p, footer a {
+      font-size: 16px;
+    }
+  }
+</style>
diff --git a/src/main/resources/templates/layout/navbar.html b/src/main/resources/templates/layout/navbar.html
@@ -22,9 +22,6 @@
         <li>
           <a class="nav-link" sec:authorize="isAuthenticated()" th:href="@{/user/logout}">로그아웃</a>
         </li>
-        <li class="nav-item">
-          <a class="nav-link" sec:authorize="isAnonymous()" th:href="@{/user/signup}">회원가입</a>
-        </li>
       </ul>
     </div>
   </div>

diff --git a/src/main/resources/templates/main.html b/src/main/resources/templates/main.html
@@ -1,20 +1,52 @@
 <html layout:decorate="~{layout/layout}">
 <div layout:fragment="content" class="container my-3 text-center">
-  <div style="margin-top: 100px;margin-bottom: 200px">
-    <img src ="/static/images/image3.png" style ="width: 120px; height: 120px ">
-    <p style="font-family: IBM Plex Mono; font-weight: 500; color:white; font-size : 100px">Sejong Auth</p>
+  <div style="margin-top: 10vh; margin-bottom: 20vh">
+    <img src="/static/images/image3.png" style="width: 15vw; height: auto; max-width: 120px; max-height: 120px">
+    <p style="font-family: IBM Plex Mono; font-weight: 500; color:white; font-size: calc(4vw + 40px);">Sejong Auth</p>
   </div>
   <div>
-    <p style="font-family: IBM Plex Mono; color:white; font-weight: 400; font-size: 30px">* 세종대학교 공학인증 요건 검사 사이트. </p>
+    <p style="font-family: IBM Plex Mono; color:white; font-weight: 400; font-size: calc(1.5vw + 10px);">* 세종대학교 공학인증 요건 검사 사이트.</p>
   </div>
-  <div style="margin-bottom: 100px">
-    <p style="font-family: IBM Plex Mono; color:white; font-weight: 400; font-size: 30px">* Engineering Certification Inspection Service of Sejong University.</p>
+  <div style="margin-bottom: 10vh">
+    <p style="font-family: IBM Plex Mono; color:white; font-weight: 400; font-size: calc(1.5vw + 10px);">* Engineering Certification Inspection Service of Sejong University.</p>
   </div>
-  <div style="margin-bottom:50px">
-    <p style="font-family: IBM Plex Mono; color:white; font-weight: 400; font-size: 30px">Press start to continue _</p>
+  <div style="margin-bottom:5vh">
+    <p style="font-family: IBM Plex Mono; color:white; font-weight: 400; font-size: calc(1.5vw + 10px);">Press start to continue _</p>
   </div>
-  <div style="margin-bottom: 50px">
-    <button class ="btn-lg" style="font-family: IBM Plex Mono; font-weight: 400; font-size: 30px; height: 60px; width: 180px" onclick="location.href='/user/login'">Start</button>
+  <div style="margin-bottom: 5vh">
+    <button class="btn-lg" style="font-family: IBM Plex Mono; font-weight: 400; font-size: calc(1.5vw + 10px); height: 60px; width: 180px" onclick="location.href='/user/login'">Start</button>
   </div>
 </div>
+
+<style>
+  /* 반응형을 위한 미디어 쿼리 추가 */
+  @media (max-width: 768px) {
+    div {
+      margin-top: 5vh;
+      margin-bottom: 5vh;
+    }
+    img {
+      width: 40vw;
+      height: auto;
+    }
+    p {
+      font-size: calc(2.5vw + 20px);
+    }
+    button {
+      width: 100%;
+      height: 50px;
+      font-size: calc(2vw + 10px);
+    }
+  }
+
+  @media (max-width: 576px) {
+    p {
+      font-size: calc(3vw + 20px);
+    }
+    img {
+      width: 50vw;
+      height: auto;
+    }
+  }
+</style>
 </html>
diff --git a/src/main/resources/templates/user/changePassword.html b/src/main/resources/templates/user/changePassword.html
@@ -9,9 +9,11 @@
         <button style="margin-right: 20px">
           <img src="/static/images/questionmark.svg" style="height: 40px; width: 40px; padding:10px">
         </button>
-        <button>
-          <img src="/static/images/x.svg" style="height: 40px; width: 40px; padding:10px">
-        </button>
+        <a href="https://elastic-march-a0d.notion.site/gonghak98-8b1448883b524b7aa4af14f19f60e162" target="_blank">
+          <button>
+            <img src="/static/images/x.svg" style="height: 40px; width: 40px; padding:10px">
+          </button>
+        </a>
       </div>
     </div>
     <div class="window-body" style="text-align: center">

diff --git a/src/main/resources/templates/user/information.html b/src/main/resources/templates/user/information.html
@@ -9,9 +9,11 @@
         <button style="margin-right: 20px">
           <img src="/static/images/questionmark.svg" style="height: 40px; width: 40px; padding:10px">
         </button>
-        <button>
-          <img src="/static/images/x.svg" style="height: 40px; width: 40px; padding:10px">
-        </button>
+        <a href="https://elastic-march-a0d.notion.site/gonghak98-8b1448883b524b7aa4af14f19f60e162" target="_blank">
+          <button>
+            <img src="/static/images/x.svg" style="height: 40px; width: 40px; padding:10px">
+          </button>
+        </a>
       </div>
     </div>
     <div class="window-body" style="text-align: center">

diff --git a/src/main/resources/templates/user/login.html b/src/main/resources/templates/user/login.html
@@ -4,15 +4,17 @@
   <div class="window" style="width: 100%;margin-top: 10%">
     <div class="title-bar">
       <div class="title-bar-text " style="font-size: 30px">
-        Welcome to Sejong Auth
+        Welcome to gonghak98
       </div>
       <div class="title-bar-controls" style="margin-right: 10px">
         <button style="margin-right: 20px">
           <img src="/static/images/questionmark.svg" style="height: 40px; width: 40px; padding:10px">
         </button>
-        <button>
-          <img src="/static/images/x.svg" style="height: 40px; width: 40px; padding:10px">
-        </button>
+        <a href="https://elastic-march-a0d.notion.site/gonghak98-8b1448883b524b7aa4af14f19f60e162" target="_blank">
+          <button>
+            <img src="/static/images/x.svg" style="height: 40px; width: 40px; padding:10px">
+          </button>
+        </a>
       </div>
     </div>
     <div class="window-body">
@@ -28,7 +30,7 @@
           </div>
           <div class="col-7">
             <p style="font-size: 40px">
-              Sejong Auth에 로그인하려면 암호를 입력하십시오.
+              gonghak98에 로그인하려면 암호를 입력하십시오.
             </p>
           </div>
           <div class="col-2"

diff --git a/src/main/resources/templates/user/signup.html b/src/main/resources/templates/user/signup.html
@@ -7,9 +7,12 @@
         <button style="margin-right: 20px">
           <img src="/static/images/questionmark.svg" style="height: 40px; width: 40px; padding:10px">
         </button>
-        <button>
-          <img src="/static/images/x.svg" style="height: 40px; width: 40px; padding:10px">
-        </button>
+        <a href="https://elastic-march-a0d.notion.site/gonghak98-8b1448883b524b7aa4af14f19f60e162" target="_blank">
+          <button>
+            <img src="/static/images/x.svg" style="height: 40px; width: 40px; padding:10px">
+          </button>
+        </a>
+
       </div>
     </div>
     <div class="window-body row">

diff --git a/src/main/resources/templates/user/withdrawal.html b/src/main/resources/templates/user/withdrawal.html
@@ -9,9 +9,11 @@
         <button style="margin-right: 20px">
           <img src="/static/images/questionmark.svg" style="height: 40px; width: 40px; padding:10px">
         </button>
-        <button>
-          <img src="/static/images/x.svg" style="height: 40px; width: 40px; padding:10px">
-        </button>
+        <a href="https://elastic-march-a0d.notion.site/gonghak98-8b1448883b524b7aa4af14f19f60e162" target="_blank">
+          <button>
+            <img src="/static/images/x.svg" style="height: 40px; width: 40px; padding:10px">
+          </button>
+        </a>
       </div>
     </div>
     <div class="window-body" style="text-align: center">