From 4e130f862f1cf697aac4a5816994e2db1f68dd45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=9D=80=EC=A7=84?= <149948792+eunjingjing@users.noreply.github.com> Date: Mon, 22 Jul 2024 17:31:37 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=ED=94=84=EB=A1=A0=ED=8A=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 지도 크기 화면 비율에 맞춰 수정 - 화면 이동 시 파일 경로 설정 --- backend/sql_app/static/css/style.css | 8 +++++- backend/sql_app/static/navigation.html | 13 ++++++--- backend/sql_app/template/index.html | 15 ++++------ backend/sql_app/template/main.html | 11 ++++--- backend/sql_app/template/near.html | 30 +++++++++++--------- backend/sql_app/template/oversize_waste.html | 25 ++++++---------- backend/sql_app/template/search.html | 4 +-- backend/sql_app/template/sign_in.html | 8 ++++-- backend/sql_app/template/sign_up.html | 8 ++++-- frontend/.vscode/settings.json | 0 10 files changed, 65 insertions(+), 57 deletions(-) create mode 100644 frontend/.vscode/settings.json diff --git a/backend/sql_app/static/css/style.css b/backend/sql_app/static/css/style.css index 54f1519..d440fb0 100644 --- a/backend/sql_app/static/css/style.css +++ b/backend/sql_app/static/css/style.css @@ -96,6 +96,7 @@ body { .material-symbols-outlined { color: white; + cursor: pointer; } main { @@ -103,6 +104,7 @@ main { display: flex; gap: 2em; padding-top: 8rem; + height: auto; } /* sign in/out main */ @@ -284,7 +286,7 @@ footer a { /* select box 디자인 */ #gugun { - width: 30%; + width: fit-content; height: 30px; padding: 0 10px; box-sizing: border-box; @@ -300,3 +302,7 @@ footer a { option { height: 25px; } + +.nearMain { + height: 75vh; +} diff --git a/backend/sql_app/static/navigation.html b/backend/sql_app/static/navigation.html index 8039cd5..45afac0 100644 --- a/backend/sql_app/static/navigation.html +++ b/backend/sql_app/static/navigation.html @@ -1,14 +1,19 @@
- 2팀프젝 + 2팀프젝
- search + + search +
diff --git a/backend/sql_app/template/index.html b/backend/sql_app/template/index.html index 17837e8..24ad574 100644 --- a/backend/sql_app/template/index.html +++ b/backend/sql_app/template/index.html @@ -1,12 +1,9 @@ - - - + + + Document - - - - - - \ No newline at end of file + + + diff --git a/backend/sql_app/template/main.html b/backend/sql_app/template/main.html index 1e2348d..8c94167 100644 --- a/backend/sql_app/template/main.html +++ b/backend/sql_app/template/main.html @@ -4,7 +4,7 @@ 부산분리배출 - + @@ -32,7 +32,7 @@
-
+
대형폐기물
처리방침
-
+
근처 수거함
위치
diff --git a/backend/sql_app/template/near.html b/backend/sql_app/template/near.html index 9205c25..e5dd740 100644 --- a/backend/sql_app/template/near.html +++ b/backend/sql_app/template/near.html @@ -5,7 +5,7 @@ 부산분리배출 - + @@ -21,30 +21,32 @@ - + -
- -
+
+
+ + +
diff --git a/backend/sql_app/template/oversize_waste.html b/backend/sql_app/template/oversize_waste.html index 4588131..0548c07 100644 --- a/backend/sql_app/template/oversize_waste.html +++ b/backend/sql_app/template/oversize_waste.html @@ -2,10 +2,13 @@ - - + + 부산분리배출 - + @@ -20,26 +23,14 @@ /> - - + -
- -
diff --git a/backend/sql_app/template/near.html b/backend/sql_app/template/near.html index e5dd740..7ce8063 100644 --- a/backend/sql_app/template/near.html +++ b/backend/sql_app/template/near.html @@ -2,8 +2,11 @@ - - + + 부산분리배출 @@ -21,8 +24,10 @@ - - +
@@ -37,16 +42,79 @@
-
+
diff --git a/backend/sql_app/template/sign_up.html b/backend/sql_app/template/sign_up.html index b1c7363..676fd00 100644 --- a/backend/sql_app/template/sign_up.html +++ b/backend/sql_app/template/sign_up.html @@ -20,6 +20,7 @@
+ Date: Thu, 25 Jul 2024 23:22:02 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=8D=94,?= =?UTF-8?q?=EA=B2=80=EC=83=89=EC=B0=BD=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 슬라이더 좌우 화살표 추가 검색화면 생성 (예시) --- backend/sql_app/static/css/style.css | 64 ++++++++++++++++++-------- backend/sql_app/static/navigation.html | 12 +++++ backend/sql_app/template/search.html | 33 +++++++++++++ 3 files changed, 91 insertions(+), 18 deletions(-) diff --git a/backend/sql_app/static/css/style.css b/backend/sql_app/static/css/style.css index d1aa982..d0bf5ff 100644 --- a/backend/sql_app/static/css/style.css +++ b/backend/sql_app/static/css/style.css @@ -136,24 +136,6 @@ main { .swiper-button-prev { color: #fff !important; } -/* -.swiper-button-next::after, -.swiper-button-prev::after { - content: ""; - width: 0; - height: 0; - border-style: solid; -} - -.swiper-button-next::after { - border-width: 8px 0 8px 12px; - border-color: transparent transparent transparent green; -} - -.swiper-button-prev::after { - border-width: 8px 12px 8px 0; - border-color: transparent green transparent transparent; -} */ /* 대형폐기물, 근처 수거함 */ .contents .secondRow { @@ -359,3 +341,49 @@ option { .nearMain { height: 75vh; } + +/* 검색화면 css */ +.left { + width: 40vw; +} + +.left > img { + width: 40vw; +} + +.right { + font-family: "Nanum Gothic", sans-serif; + font-weight: 800; + font-size: 1.8vw; + + color: #4a4a4a; +} + +.right > .recycleAble { + display: flex; + flex-direction: row; +} + +.right > .recycleHow { + display: flex; + flex-direction: row; +} + +.warning > ul { + padding-inline-start: 1.5em; + line-height: 1.2; +} + +.warning > ul > li { + margin-bottom: 0.6em; +} + +.deco { + width: fit-content; + border-bottom: 3px dotted #578507; + padding-bottom: 2px; +} + +.S_main { + gap: 4em; +} diff --git a/backend/sql_app/static/navigation.html b/backend/sql_app/static/navigation.html index 45afac0..39f6c0b 100644 --- a/backend/sql_app/static/navigation.html +++ b/backend/sql_app/static/navigation.html @@ -4,11 +4,23 @@
search + +
+
+ +
+ +
+
+

우산

+
+

재활용 여부

+

 : 

+

불가능

+
+
+

분리수거

+

 : 

+

일반

+
+
+

주의 사항

+
    +
  • + 분리 가능하다면 뼈대는 고철로, 손잡이가 플라스틱이면 플라스틱으로, + 나머지 천과 비닐은 일반 종량제 봉투에 넣어 배출 +
    • +
  • + 분리가 불가능한 자동우산은 펴지지 않게 묶어서 일반 쓰레기로 배출 +
    • +
+
+
+
From 0785d36f13c6f861f145d940974649b15e05cc2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=9D=80=EC=A7=84?= <149948792+eunjingjing@users.noreply.github.com> Date: Sun, 4 Aug 2024 23:41:22 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=EB=8C=80=ED=98=95=ED=8F=90=EA=B8=B0?= =?UTF-8?q?=EB=AC=BC/=EC=9A=94=EC=9D=BC=EB=B3=84=EB=B6=84=EB=A6=AC?= =?UTF-8?q?=EC=88=98=EA=B1=B0=20=ED=85=9C=ED=94=8C=EB=A6=BF=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/sql_app/static/css/style.css | 65 +++++++++- backend/sql_app/static/js/main.js | 38 ++++++ backend/sql_app/template/main.html | 72 ++++++++--- backend/sql_app/template/near.html | 128 +++++++++---------- backend/sql_app/template/oversize_pay.html | 55 ++++++++ backend/sql_app/template/oversize_waste.html | 17 ++- 6 files changed, 290 insertions(+), 85 deletions(-) create mode 100644 backend/sql_app/template/oversize_pay.html diff --git a/backend/sql_app/static/css/style.css b/backend/sql_app/static/css/style.css index d0bf5ff..3ffe252 100644 --- a/backend/sql_app/static/css/style.css +++ b/backend/sql_app/static/css/style.css @@ -231,6 +231,7 @@ footer a { display: flex; justify-content: center; align-items: center; + flex-direction: column; } .swiper-slide { @@ -241,11 +242,13 @@ footer a { color: white; } -.swiper-slide img { - display: block; - width: 100%; - height: 100%; - object-fit: cover; +.swiper-slide > .daily_contents { + display: flex; + height: 70%; + align-items: center; + + font-size: 30px; + font-weight: bold; } .swiper-slide-next { @@ -387,3 +390,55 @@ option { .S_main { gap: 4em; } + +/* 대형폐기물 텝메뉴 */ +.tab_menu { + overflow: hidden; + padding: 1px; + display: flex; + width: 40%; +} +.tab_menu > ul { + display: flex; + padding: 0; + margin: 0; + list-style: none; + flex-grow: 1; +} +.tab_menu > ul > li { + flex-grow: 1; +} +.tab_menu ul li a { + display: block; + border: #d0d0d0 solid 1px; + background-color: #f4f4f4; + line-height: 22px; + padding: 16px 0; + text-align: center; + color: #333333; + font-weight: 600; + text-decoration: none; +} + +.tab_menu ul li.on a, +.tab_menu ul li a:hover { + background-color: #578507; + color: #fff; +} + +.ovMain { + display: flex; + flex-direction: column; +} + +.tab_menu > ul > .active > a { + display: block; + border: #d0d0d0 solid 1px; + background-color: #578507; + color: #fff; + line-height: 22px; + padding: 16px 0; + text-align: center; + font-weight: 600; + text-decoration: none; +} diff --git a/backend/sql_app/static/js/main.js b/backend/sql_app/static/js/main.js index 56da6c6..88fedeb 100644 --- a/backend/sql_app/static/js/main.js +++ b/backend/sql_app/static/js/main.js @@ -13,3 +13,41 @@ function swiperInitialize() { https: $.get("navigation.html", function (data) { $("#nav-placeholder").replaceWith(data); }); + +// 요일별 분리수거 업데이트 -- API 생성 후 다시 확인!!! +async function updateSchedule() { + const region = document.getElementById("gugun").value; + if (!region) return; + + try { + const schedule = await fetchSchedule(region); + populateSwiper(schedule); + } catch (error) { + console.error("Error fetching schedule:", error); + } +} + +document.getElementById("gugun").addEventListener("change", updateSchedule); + +//대형 폐기물 탭메뉴 선택 JS +document.addEventListener("DOMContentLoaded", function () { + const tabs = document.querySelectorAll(".tab-item"); + const tabPanes = document.querySelectorAll(".tab-pane"); + + tabs.forEach((tab) => { + tab.addEventListener("click", function (e) { + e.preventDefault(); + const target = tab.getAttribute("data-tab"); + + // Remove active class from all tabs + tabs.forEach((t) => t.classList.remove("active")); + // Remove active class from all tab panes + tabPanes.forEach((pane) => pane.classList.remove("active")); + + // Add active class to clicked tab + tab.classList.add("active"); + // Add active class to corresponding tab pane + document.getElementById(target).classList.add("active"); + }); + }); +}); diff --git a/backend/sql_app/template/main.html b/backend/sql_app/template/main.html index fe02bd9..1e78301 100644 --- a/backend/sql_app/template/main.html +++ b/backend/sql_app/template/main.html @@ -66,23 +66,65 @@
-
일요일
-
월요일
-
화요일
-
수요일
-
목요일
-
금요일
-
토요일
-
일요일
-
월요일
-
화요일
-
수요일
-
목요일
-
금요일
-
토요일
+
+
일요일
+
+
+
+
월요일
+
+
+
+
화요일
+
+
+
+
수요일
+
+
+
+
목요일
+
+
+
+
금요일
+
+
+
+
토요일
+
+
+
+
일요일
+
+
+
+
월요일
+
+
+
+
화요일
+
+
+
+
수요일
+
+
+
+
목요일
+
+
+
+
금요일
+
+
+
+
토요일
+
+
- +
diff --git a/backend/sql_app/template/near.html b/backend/sql_app/template/near.html index 7ce8063..cbf819e 100644 --- a/backend/sql_app/template/near.html +++ b/backend/sql_app/template/near.html @@ -40,81 +40,81 @@ - -
-
- - -
+ + $(window).on("load", function () { + if (navigator.geolocation) { + /** + * navigator.geolocation 은 Chrome 50 버젼 이후로 HTTP 환경에서 사용이 Deprecate 되어 HTTPS 환경에서만 사용 가능 합니다. + * http://localhost 에서는 사용이 가능하며, 테스트 목적으로, Chrome 의 바로가기를 만들어서 아래와 같이 설정하면 접속은 가능합니다. + * chrome.exe --unsafely-treat-insecure-origin-as-secure="http://example.com" + */ + navigator.geolocation.getCurrentPosition( + onSuccessGeolocation, + onErrorGeolocation + ); + } else { + var center = map.getCenter(); + infowindow.setContent( + '
Geolocation not supported
' + ); + infowindow.open(map, center); + } + }); + + + diff --git a/backend/sql_app/template/oversize_pay.html b/backend/sql_app/template/oversize_pay.html new file mode 100644 index 0000000..7d7e06c --- /dev/null +++ b/backend/sql_app/template/oversize_pay.html @@ -0,0 +1,55 @@ + + + + + + + 부산분리배출 + + + + + + + + + + + +
+ + +
+
+
+ +
+
+ +

대형폐기물 요금 안내

+
+
+ + diff --git a/backend/sql_app/template/oversize_waste.html b/backend/sql_app/template/oversize_waste.html index 0548c07..f32b78b 100644 --- a/backend/sql_app/template/oversize_waste.html +++ b/backend/sql_app/template/oversize_waste.html @@ -23,7 +23,6 @@ /> -
@@ -36,5 +35,21 @@
+
+
+ +
+
+ +

대형폐기물이란?

+
+
From 72da89c34240a0bac3d2e066b2a61ddfb6dab796 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=9D=80=EC=A7=84?= <149948792+eunjingjing@users.noreply.github.com> Date: Tue, 6 Aug 2024 21:58:03 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EC=88=98=EC=A0=95=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- backend/sql_app/static/css/style.css | 247 ++++++++++++++++++++++++++- 1 file changed, 241 insertions(+), 6 deletions(-) diff --git a/backend/sql_app/static/css/style.css b/backend/sql_app/static/css/style.css index 3ffe252..a1cc5b2 100644 --- a/backend/sql_app/static/css/style.css +++ b/backend/sql_app/static/css/style.css @@ -28,12 +28,6 @@ body { font-weight: 400; } -@media screen and (min-width: 768px) { - .nav_contents { - max-width: 120rem; - } -} - .nav_contents { padding: 1.2rem 2rem; height: 5.6rem; @@ -99,6 +93,86 @@ body { cursor: pointer; } +@media screen and (min-width: 768px) { + .navBar { + background-color: white; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + border-bottom: 10px double #85c124; + z-index: 999; + + font-family: "Do Hyeon", sans-serif; + font-weight: 400; + } + + .nav_contents { + padding: 1.2rem 2rem; + height: 5.6rem; + box-sizing: border-box; + justify-content: space-between; + display: flex; + align-items: center; + width: 100%; + margin: 0 auto; + position: relative; + } + + /* 홈화면 이동 */ + .nav_contents a { + font-size: 1.5em; + text-decoration: none; + color: #85c124; + } + + /* 회원가입, 로그인 버튼 */ + .nav_contents ul { + list-style: none; + display: flex; + gap: 1em; + } + + .nav_contents ul li { + display: inline-block; + list-style: none; + } + + /* 검색창 */ + .nav_contents .search-container { + /*width: max-content;*/ + width: 40%; + justify-content: space-between; + display: flex; + align-items: center; + padding: 14px; + background: #85c124; + border-radius: 28px; + } + + .nav_contents .search-container input { + width: 90%; + display: block; + font-size: 1.4em; + outline: none; + border: none; + background: transparent; + color: white; + + font-family: "Nanum Gothic", sans-serif; + font-weight: 400; + } + + .nav_contents .search-container input::placeholder { + color: white; + } + + .material-symbols-outlined { + color: white; + cursor: pointer; + } +} + main { padding: 2em; display: flex; @@ -442,3 +516,164 @@ option { font-weight: 600; text-decoration: none; } + +/* 반응형 웹 디자인을 위한 미디어 쿼리 추가 */ +@media screen and (max-width: 1200px) { + .nav_contents { + padding: 1rem; + } + + .nav_contents a { + font-size: 1.4em; + } + + .nav_contents .search-container { + width: 50%; + padding: 12px; + } + + .nav_contents .search-container input { + font-size: 1.2em; + } + + .contents .secondRow .oversizedWaste, + .contents .secondRow .near { + font-size: 4.5vw; + } + + .left, + .left > img { + width: 50vw; + } + + .right { + font-size: 2vw; + } +} + +@media screen and (max-width: 1000px) { + .nav_contents { + padding: 0.8rem; + } + + .nav_contents a { + font-size: 1.3em; + } + + .nav_contents .search-container { + width: 60%; + padding: 10px; + } + + .nav_contents .search-container input { + font-size: 1.1em; + } + + .contents .secondRow .oversizedWaste, + .contents .secondRow .near { + font-size: 4.8vw; + } + + .left, + .left > img { + width: 60vw; + } + + .right { + font-size: 2.2vw; + } + + .tab_menu { + width: 60%; + } +} + +@media screen and (max-width: 768px) { + .nav_contents { + flex-direction: column; + align-items: flex-start; + padding: 0.5rem; + } + + .nav_contents a { + font-size: 1.2em; + } + + .nav_contents ul { + gap: 0.5em; + } + + .nav_contents .search-container { + width: 80%; + padding: 8px; + } + + .nav_contents .search-container input { + font-size: 1em; + } + + main { + flex-direction: column; + padding-top: 6rem; + } + + .contents .secondRow { + flex-direction: column; + height: auto; + } + + .contents .secondRow .oversizedWaste, + .contents .secondRow .near { + font-size: 5vw; + } + + .left, + .left > img { + width: 80vw; + } + + .right { + font-size: 2.4vw; + } + + .tab_menu { + width: 80%; + } +} + +@media screen and (max-width: 500px) { + .nav_contents { + padding: 0.3rem; + } + + .nav_contents a { + font-size: 1.1em; + } + + .nav_contents .search-container { + width: 100%; + padding: 6px; + } + + .nav_contents .search-container input { + font-size: 0.9em; + } + + .contents .secondRow .oversizedWaste, + .contents .secondRow .near { + font-size: 5.5vw; + } + + .left, + .left > img { + width: 100vw; + } + + .right { + font-size: 2.6vw; + } + + .tab_menu { + width: 100%; + } +}