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.

Sign up for GitHub

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

Jump to bottom

프론트 수정 #1

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

프론트 수정 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4e130f8
프론트 수정
eunjingjing Jul 22, 2024
565e5e3
메인 화면 아이콘 추가
eunjingjing Jul 23, 2024
dea73dd
슬라이더,검색창 수정
eunjingjing Jul 25, 2024
0785d36
대형폐기물/요일별분리수거 템플릿 생성
eunjingjing Aug 4, 2024
72da89c
모바일 화면 수정중
eunjingjing Aug 6, 2024
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
409 changes: 393 additions & 16 deletions backend/sql_app/static/css/style.css
View file
Open in desktop

Large diffs are not rendered by default.

38 changes: 38 additions & 0 deletions backend/sql_app/static/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
});
});
});
25 changes: 21 additions & 4 deletions backend/sql_app/static/navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,31 @@
<div class="navBar">
<div class="nav_contents">
<a href="/"> 2팀프젝 </a>
<a href="../template/main.html"> 2팀프젝 </a>
<div class="search-container">
<input type="text" id="search" placeholder="이건 어떻게 버리지?" />
<span class="material-symbols-outlined"> search </span>
<span
id="searchBtn"
class="material-symbols-outlined"
onclick="location.href='../template/search.html'"
>
search
</span>
<!-- 엔터키 검색 기능 -->
<script>
var input = document.getElementById("search");

input.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("searchBtn").click();
}
});
</script>
</div>
<nav class="nav_link">
<ul class="sign_log">
<li><a href="/sign_up">회원가입</a></li>
<li><a href="/sign_in">로그인</a></li>
<li><a href="../template/sign_up.html">회원가입</a></li>
<li><a href="../template/sign_in.html">로그인</a></li>
</ul>
</nav>
</div>
Expand Down
15 changes: 6 additions & 9 deletions backend/sql_app/template/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>

</head>
<body>

</body>
</html>
</head>
<body></body>
</html>
127 changes: 107 additions & 20 deletions backend/sql_app/template/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>부산분리배출</title>
<link rel="stylesheet" href="/static/css/style.css" />
<link rel="stylesheet" href="../static/css/style.css" />
<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
Expand Down Expand Up @@ -32,35 +32,101 @@
<!-- navbar -->
<div id="nav-placeholder">
<script>
$.get("/static/navigation.html", function (data) {
$.get("../static/navigation.html", function (data) {
$("#nav-placeholder").replaceWith(data);
});
</script>
</div>
</div>
<main>
<div class="contents">
<div class="region">
<select id="gugun" name="gugun">
<option value="">-구/군 선택-</option>
<option value="gangseo">강서구</option>
<option value="geumjeong">금정구</option>
<option value="nam">남구</option>
<option value="dong">동구</option>
<option value="dongnae">동래구</option>
<option value="busanjin">부산진구</option>
<option value="buk">북구</option>
<option value="sasang">사상구</option>
<option value="saha">사하구</option>
<option value="seo">서구</option>
<option value="suyeong">수영구</option>
<option value="yeonje">연제구</option>
<option value="yeongdo">영도구</option>
<option value="jung">중구</option>
<option value="haeundae">해운대구</option>
<option value="gijang">기장군</option>
</select>
</div>
<div class="firstRow">
<div id="daily" class="daily">
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div id="swiper-slide" class="swiper-slide">일요일</div>
<div id="swiper-slide" class="swiper-slide">월요일</div>
<div id="swiper-slide" class="swiper-slide">화요일</div>
<div id="swiper-slide" class="swiper-slide">수요일</div>
<div id="swiper-slide" class="swiper-slide">목요일</div>
<div id="swiper-slide" class="swiper-slide">금요일</div>
<div id="swiper-slide" class="swiper-slide">토요일</div>
<div id="swiper-slide" class="swiper-slide">일요일</div>
<div id="swiper-slide" class="swiper-slide">월요일</div>
<div id="swiper-slide" class="swiper-slide">화요일</div>
<div id="swiper-slide" class="swiper-slide">수요일</div>
<div id="swiper-slide" class="swiper-slide">목요일</div>
<div id="swiper-slide" class="swiper-slide">금요일</div>
<div id="swiper-slide" class="swiper-slide">토요일</div>
<div id="swiper-slide" class="swiper-slide">
<div class="day">일요일</div>
<div class="daily_contents" class="sun"></div>
</div>
<div id="swiper-slide" class="swiper-slide">
<div class="day">월요일</div>
<div class="daily_contents" class="mon"></div>
</div>
<div id="swiper-slide" class="swiper-slide">
<div class="day">화요일</div>
<div class="daily_contents" class="tue"></div>
</div>
<div id="swiper-slide" class="swiper-slide">
<div class="day">수요일</div>
<div class="daily_contents" class="wed"></div>
</div>
<div id="swiper-slide" class="swiper-slide">
<div class="day">목요일</div>
<div class="daily_contents" class="thu"></div>
</div>
<div id="swiper-slide" class="swiper-slide">
<div class="day">금요일</div>
<div class="daily_contents" class="fri"></div>
</div>
<div id="swiper-slide" class="swiper-slide">
<div class="day">토요일</div>
<div class="daily_contents" class="sat"></div>
</div>
<div id="swiper-slide" class="swiper-slide">
<div class="day">일요일</div>
<div class="daily_contents" class="sun"></div>
</div>
<div id="swiper-slide" class="swiper-slide">
<div class="day">월요일</div>
<div class="daily_contents" class="mon"></div>
</div>
<div id="swiper-slide" class="swiper-slide">
<div class="day">화요일</div>
<div class="daily_contents" class="tue"></div>
</div>
<div id="swiper-slide" class="swiper-slide">
<div class="day">수요일</div>
<div class="daily_contents" class="wed"></div>
</div>
<div id="swiper-slide" class="swiper-slide">
<div class="day">목요일</div>
<div class="daily_contents" class="thu"></div>
</div>
<div id="swiper-slide" class="swiper-slide">
<div class="day">금요일</div>
<div class="daily_contents" class="fri"></div>
</div>
<div id="swiper-slide" class="swiper-slide">
<div class="day">토요일</div>
<div class="daily_contents" class="sat"></div>
</div>
</div>
<div class="swiper-pagination"></div>
<!-- 네비게이션 버튼 -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

<!-- Swiper JS -->
Expand Down Expand Up @@ -93,6 +159,10 @@
spaceBetween: 10,
speed: 1000,
initialSlide: getInitialSlide(),
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
1000: {
slidesPerView: 4,
Expand All @@ -109,11 +179,28 @@
</div>
</div>
<div class="secondRow">
<div class="oversizedWaste" onclick="location.href='/oversize_waste'">
대형폐기물<br />처리방침
<div
class="oversizedWaste"
onclick="location.href='oversize_waste.html'"
>
<div class="overText">대형폐기물<br />처리방침</div>
<img
class="oversizeImg"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvfg1mwXX7EDIi1uc8l1Qcb6u2e8sVpFzSuTX-78sgi9IWdkJWKhXsyLdUSR6h3cCCT8G72fhAErVIezbGLuVKJgZ5n8plsIllzSCnqcObgPlNkT1oulVgqP1ZWqdaFyLH2lQGBH4XjK8/s800/sodai_gomi.png"
/>
</div>
<div class="near" onclick="location.href='/near'">
근처 수거함<br />위치
<div class="near" onclick="location.href='near.html'">
<div class="nearText">근처 수거함<br />위치</div>
<div class="imgWrapper">
<img
class="battery2"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh80HLM1R_zgX3BRk0ICBuvGrVP_C_Yuf8l2TFqVVmRxTioAlHy8FvcFRMqx4Z1PIuKucFcGiFhcwv9MfaIOIw5q9wCsAVAyYeN59o_J_FsTXH_ZnjBg_5WxC6676J9aCgZ03DfOKz_2K6g/s300/battery_tan1.png"
/>
<img
class="battery1"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0jdFgDMT1UNb4NLFZxPmM8TFbPnpMixuU8DgCwR-PJmawxrUsemRbFD8XBxrw1Qf9LyCEcI2KfSO6mu9XVXNbGyNWGREHJqhlMtbKZk5E9mKywB0dMZER1jE_qAqLw7Dwi6TIUnyQlDzw/s300/battery_tan4.png"
/>
</div>
</div>
</div>
</div>
Expand Down
104 changes: 87 additions & 17 deletions backend/sql_app/template/near.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>
<title>부산분리배출</title>
<link rel="stylesheet" href="/static/css/style.css" />
<link rel="stylesheet" href="../static/css/style.css" />
<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
Expand All @@ -21,30 +24,97 @@
<!-- Reuse navBar -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 네이버맵 인증키부분 -->
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=NAVER_API"></script>
</head>
<script
type="text/javascript"
src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=nqswh19jjg"
></script>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>
<!-- 지도위치 조절해서 사이트 꾸미기 -->
<script>
// getCurrentPosition()사용해서 받은 위치를 중심으로 좌표나오게 설정
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
};

var map = new naver.maps.Map('map', mapOptions);
</script>
<div id="gnb_root">
<!-- navbar -->
<div id="nav-placeholder">
<script>
$.get("navigation.html", function (data) {
$.get("../static/navigation.html", function (data) {
$("#nav-placeholder").replaceWith(data);
});
</script>
</div>
</div>
<main class="nearMain">
<div id="map" style="width: 100%; height: 100%"></div>
<!-- 지도위치 조절해서 사이트 꾸미기 -->
<script>
// getCurrentPosition()사용해서 받은 위치를 중심으로 좌표나오게 설정
// var mapOptions = {
// center: new naver.maps.LatLng(37.3595704, 127.105399),
// zoom: 10
// };

// var map = new naver.maps.Map('map', mapOptions);

var map = new naver.maps.Map("map", {
center: new naver.maps.LatLng(37.5666805, 126.9784147),
zoom: 10,
mapTypeId: naver.maps.MapTypeId.NORMAL,
});

var infowindow = new naver.maps.InfoWindow();

function onSuccessGeolocation(position) {
var location = new naver.maps.LatLng(
position.coords.latitude,
position.coords.longitude
);

map.setCenter(location); // 얻은 좌표를 지도의 중심으로 설정합니다.
map.setZoom(10); // 지도의 줌 레벨을 변경합니다.

infowindow.setContent(
'<div style="padding:20px;">' +
"geolocation.getCurrentPosition() 위치" +
"</div>"
);

infowindow.open(map, location);
console.log("Coordinates: " + location.toString());
}

function onErrorGeolocation() {
var center = map.getCenter();

infowindow.setContent(
'<div style="padding:20px;">' +
'<h5 style="margin-bottom:5px;color:#f00;">Geolocation failed!</h5>' +
"latitude: " +
center.lat() +
"<br />longitude: " +
center.lng() +
"</div>"
);

infowindow.open(map, center);
}

$(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(
'<div style="padding:20px;"><h5 style="margin-bottom:5px;color:#f00;">Geolocation not supported</h5></div>'
);
infowindow.open(map, center);
}
});
</script>
</main>
</body>
</html>
Loading