Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: css 수정 #74

Merged
merged 3 commits into from
Sep 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/main/resources/templates/gonghak/statusForm.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
36 changes: 33 additions & 3 deletions src/main/resources/templates/layout/footer.html
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 0 additions & 3 deletions src/main/resources/templates/layout/navbar.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
52 changes: 42 additions & 10 deletions src/main/resources/templates/main.html
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 5 additions & 3 deletions src/main/resources/templates/user/changePassword.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
8 changes: 5 additions & 3 deletions src/main/resources/templates/user/information.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
12 changes: 7 additions & 5 deletions src/main/resources/templates/user/login.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -28,7 +30,7 @@
</div>
<div class="col-7">
<p style="font-size: 40px">
Sejong Auth에 로그인하려면 암호를 입력하십시오.
gonghak98에 로그인하려면 암호를 입력하십시오.
</p>
</div>
<div class="col-2"
Expand Down
9 changes: 6 additions & 3 deletions src/main/resources/templates/user/signup.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
8 changes: 5 additions & 3 deletions src/main/resources/templates/user/withdrawal.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down