diff --git a/Miracle30/static/css/main.css b/Miracle30/static/css/main.css index bce2a72..df64ae1 100644 --- a/Miracle30/static/css/main.css +++ b/Miracle30/static/css/main.css @@ -1,20 +1,58 @@ -.goal_boxes { +/* tab */ +.tab_container { display: flex; - justify-content: center; } -.goal_box { - border: 1px solid; - text-align: center; - width: 15%; - font-size: 1.2rem; - padding: var(--padding-large) 0; - margin: 0 12px; +.tab_item { + cursor: pointer; } -.goal_day { - font-size: 2.5rem; - font-weight: 800; +.tab_item:hover { + background-color: var(--main-orange-color); + transition: background-color 0.4s ease-in-out; +} + +.tab_item:hover .tab_item_title { + color: #fff; + transition: color 0.4s ease-in-out; +} + +.tab_item.active { + border-bottom: 2px solid var(--main-orange-color); +} + +.tab_item.active .tab_item_title { + color: var(--main-orange-color); +} + +.tab_item.active:hover { + background-color: var(--main-orange-color); + transition: background-color 0.4s ease-in-out; +} + +.tab_item.active:hover .tab_item_title { + color: #fff; + transition: color 0.4s ease-in-out; +} + +.tab_item_title { + display: inline-block; + color: #999; + font-weight: 700; + text-decoration: none; + margin: 15px; +} + +.content-container { + padding: 10px; +} + +.content-container__content { + display: none; +} + +.content-container__content.target { + display: block; } /* btns */ @@ -27,6 +65,7 @@ margin: var(--padding-micro); } +/* tab1----------- */ /* star board */ .level1 { background-color: white; @@ -47,3 +86,58 @@ .level5 { background-color: rgb(253, 204, 0); } + +/* modal btn */ +.btn4 { + color: var(--black-color); + border: none; + text-decoration: none; + padding: var(--padding-small); + text-align: center; + font-weight: 800; + cursor: pointer; + background: none; +} + +.btn4:hover { + color: var(--point-green-color); +} + +/* modal */ +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); +} + +.modal-container { + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + border-radius: 10px; + width: 30%; + height: 30%; +} + +/* The Close Button */ +.close { + color: var(--grey-dark-color); + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} diff --git a/Miracle30/static/css/mypage.css b/Miracle30/static/css/mypage.css index 3ba6fc5..78e4307 100644 --- a/Miracle30/static/css/mypage.css +++ b/Miracle30/static/css/mypage.css @@ -1,3 +1,4 @@ +/* tab */ .my_tab { display: flex; } diff --git a/Miracle30/static/css/navbar.css b/Miracle30/static/css/navbar.css index 894bd20..81d7450 100644 --- a/Miracle30/static/css/navbar.css +++ b/Miracle30/static/css/navbar.css @@ -9,7 +9,7 @@ ul { padding-left: 0; } -li { +.nav_category li { padding-top: var(--padding-small); } @@ -63,23 +63,23 @@ li { } /* 카테고리 추가 */ -.nav_plus { +/* .nav_plus { padding-bottom: var(--padding-medium); -} +} */ -.nav_plus .nav_toggleBtn { +/* .nav_plus .nav_toggleBtn { width: 100%; text-align: center; font-size: 30px; -} +} */ -.nav_plusList { +/* .nav_plusList { display: none; } .nav_plusList.clicked { display: block; -} +} */ .nav_bar { display: none; diff --git a/Miracle30/static/css/show_certify.css b/Miracle30/static/css/show_certify.css new file mode 100644 index 0000000..123c62b --- /dev/null +++ b/Miracle30/static/css/show_certify.css @@ -0,0 +1,23 @@ +.certify_container { + width: 40%; +} +.certify_list { + list-style: none; + margin: 0px; + padding: 0px; +} + +.certify_list li { + margin-bottom: 10px; + background: #f9f9ff; + display: block; + line-height: 40px; + padding: 0px 18px; + font-size: 14px; + font-family: "Roboto", sans-serif; + color: #777777; +} + +span { + float: right; +} diff --git a/Miracle30/static/js/group_main.js b/Miracle30/static/js/group_main.js index 26d63ba..368ed76 100644 --- a/Miracle30/static/js/group_main.js +++ b/Miracle30/static/js/group_main.js @@ -1,10 +1,34 @@ -const btn = document.querySelectorAll(".btn"), -pTag = document.getElementsByTagName('p'), -modal = document.querySelector('.modal-body'); - -btn.forEach((elem, index) => { - elem.addEventListener("click", (e) => { - var data = pTag[index + 1].textContent; - modal.textContent = data; - }); +// modal 창 띄우기 +const modal = document.getElementById("myModal"), + modalBtn = document.querySelectorAll(".btn"), // 버튼 누르면 모달버튼 뜸 + closeBtn = document.querySelector(".close"); + +// modalBtn.onclick = function () { +// modal.style.display = "block"; +// }; + +closeBtn.onclick = function () { + modal.style.display = "none"; +}; + +window.onclick = function (event) { + if (event.target == modal) { + modal.style.display = "none"; + } +}; + +// 데이터 넣기 +// const btn = document.querySelectorAll(".btn"), +const pTag = document.getElementsByTagName("p"), + modalBody = document.querySelector(".modal-body"); + +modalBtn.forEach((elem, index) => { + elem.addEventListener("click", (e) => { + console.log(elem, index); + modal.style.display = "block"; + let data = pTag[index].textContent; + data = data.replace(/'/gi, ""); + data = data.substr(1, data.length - 2); + modalBody.textContent = data; + }); }); diff --git a/Miracle30/static/js/main.js b/Miracle30/static/js/main.js new file mode 100644 index 0000000..6b7550b --- /dev/null +++ b/Miracle30/static/js/main.js @@ -0,0 +1,19 @@ +const tabItem = document.querySelectorAll(".tab_item"); +const tabContent = document.querySelectorAll(".content-container__content"); + +tabItem.forEach((item) => { + item.addEventListener("click", tabHandler); +}); + +function tabHandler(item) { + const tabTarget = item.currentTarget; + const target = tabTarget.dataset.tab; + tabItem.forEach((title) => { + title.classList.remove("active"); + }); + tabContent.forEach((target) => { + target.classList.remove("target"); + }); + document.querySelector("#" + target).classList.add("target"); + tabTarget.classList.add("active"); +} diff --git a/Miracle30/static/js/mypage.js b/Miracle30/static/js/mypage.js index 9db96aa..d6732be 100644 --- a/Miracle30/static/js/mypage.js +++ b/Miracle30/static/js/mypage.js @@ -16,21 +16,3 @@ infoBtn.addEventListener("click", () => { goal.style.display = "none"; info.style.display = "block"; }); - -// function goalClick() { -// // my_goalBtn class -> clicked 추가 -// // my_info class -> clicked 삭제 -// goal.classList.toggle("clicked"); -// info.classList.toggle("clicked"); -// goal.style.display = "block"; -// info.style.display = "none"; -// } - -// function infoClick() { -// // my_goalBtn class -> clicked 삭제 -// // my_info class -> clicked 추가 -// goal.classList.toggle("clicked"); -// info.classList.toggle("clicked"); -// goal.style.display = "none"; -// info.style.display = "block"; -// } diff --git a/groups/templates/groups/main.html b/groups/templates/groups/main.html index b95855c..47857e6 100644 --- a/groups/templates/groups/main.html +++ b/groups/templates/groups/main.html @@ -3,80 +3,192 @@ {% load index %} {% block content %} - - - - - + +
-
+

{{ goal.name }}

하루 {{ goal.goal_page }}페이지 독서하기

참여인원: {{ member_count }}

-
- - - - - {% for i in "x"|rjust:"10" %} - - {% endfor %} - - - - {% for i in "x"|rjust:"10" %} - - - {% endfor %} - - - - {% for i in "x"|rjust:"10" %} - - -
- - -
{{ name|index_1:forloop.counter0 }}
+ + +
+
+
+ + + + + {% for i in "x"|rjust:"10" %} + + {% endfor %} + + + + {% for i in "x"|rjust:"10" %} + + + {% endfor %} + + + + {% for i in "x"|rjust:"10" %} + - {% endfor %} - - - - {% for i in "x"|rjust:"10" %} - - - {% endfor %} - - - - {% for i in "x"|rjust:"10" %} - + {% endfor %} + + + + {% for i in "x"|rjust:"10" %} + + + {% endfor %} + + + + {% for i in "x"|rjust:"10" %} + - {% endfor %} - - - - {% for i in "x"|rjust:"10" %} - - + + {% endfor %} + + + + {% for i in "x"|rjust:"10" %} + + + {% endfor %} + + +
- +
{{ name|index_1:forloop.counter0 }}
+ + -
{{ name|index_2:forloop.counter0 }}
+
{{ name|index_2:forloop.counter0 }}
- -
{{ name|index_3:forloop.counter0 }}
{{ name|index_3:forloop.counter0 }}
+
+
+ +
+
+ 시작
{{ start_days }}
일째 +
+
+ 연속
{{ continuity_days }}
일째 +
+
+ 성공
{{ success_days }}
일째 +
+
+
+ + + + + {% for i in "x"|rjust:"10" %} + + {% endfor %} + + + + {% for i in "x"|rjust:"10" %} + {% if achievements|index_1:forloop.counter0 == True %} + + {% elif achievements|index_1:forloop.counter0 == False %} + + {% else %} + + {% endif %} + {% endfor %} + + + + {% for i in "x"|rjust:"10" %} + + {% endfor %} + + + + {% for i in "x"|rjust:"10" %} + {% if achievements|index_2:forloop.counter0 == True %} + + {% elif achievements|index_2:forloop.counter0 == False %} + + {% else %} + + {% endif %} + {% endfor %} + + + + {% for i in "x"|rjust:"10" %} + + {% endfor %} + + + + {% for i in "x"|rjust:"10" %} + {% if achievements|index_3:forloop.counter0 == True %} + + {% elif achievements|index_3:forloop.counter0 == False %} + + {% else %} + + {% endif %} + {% endfor %} + + +
{{ dates|index_1:forloop.counter0|date:'m/d' }}
OX
{{ dates|index_2:forloop.counter0|date:'m/d' }}
OX
{{ dates|index_3:forloop.counter0|date:'m/d' }}
OX
+
+
+
+
    + {% for certify in certifies %} +
  • 아이디{{ certify.user }}
    • +
  • 아이디{{ certify.created }}
    • + {% if goal.certify_method == 'image' %} + {% if certify.image %} + image + {% endif %} + {% elif goal.certify_method == 'text' %} +
  • 아이디{{ certify.text }}
    • + {% else %} +
  • 아이디{{ certify.value }}
    • + {% endif %} {% endfor %} -
+ + +
+

여기

+
+
@@ -85,24 +197,21 @@

참여인원: {{ member_count }}

인증 열람
- -