class 2-5
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 305 B |
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Class 2-5</title>
|
||||
|
||||
<script src="public/script.js"></script>
|
||||
<link rel="stylesheet" href="public/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
<h1>Class 2-5</h1>
|
||||
<ul>
|
||||
<li><a href="https://classtwofive.notion.site/">Study</a></li>
|
||||
<li><a href="#">Portfolio</a></li>
|
||||
<li><a href="#">Info</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<div class="box" id="calendar">
|
||||
<!-- <h2 class="title">Calendar</h2> -->
|
||||
<iframe
|
||||
id="calendar_iframe"
|
||||
src="https://calendar.google.com/calendar/embed?height=600&wkst=1&ctz=Asia%2FSeoul&showPrint=0&showTitle=0&showTz=0&src=OGVjZWRkYjQ2NTM1NWE1NWEyMDdhZjgwNDM5MzhiMTQ1MWYwY2ViZmM0ODU4ZDAxMTA2NmFlMGRiZjFkZTUwZUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=NzI5ZjViZWE5YmE4M2ZmOWI4MmRkNzk3ZjE1MDg5YTA1MWZlODUwYTRkYTY2ZmNjMzkzNjgzNWU4OWUzZGU4OUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=YWI3ZjBlYWE4NmYwZDE5MWE3Y2RhYWIzMTcxMmQzZGMxN2Y4OGY1YzdhMmU1ZGY3NGVhNjFjNWIwMzNlZmJlN0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=a28uc291dGhfa29yZWEjaG9saWRheUBncm91cC52LmNhbGVuZGFyLmdvb2dsZS5jb20&color=%23A79B8E&color=%23E4C441&color=%23D50000&color=%234285F4"
|
||||
></iframe>
|
||||
</div>
|
||||
<nav id="side">
|
||||
<div class="box" id="task">
|
||||
<h2 class="title">Task List</h2>
|
||||
<task-list></task-list>
|
||||
<span
|
||||
id="add_task"
|
||||
onclick="document.body.appendChild(document.createElement('create-task'))"
|
||||
>+</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="box" id="info">
|
||||
<!-- <h2 class="title">급식</h2> -->
|
||||
<meal-list></meal-list>
|
||||
</div>
|
||||
</nav>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,433 @@
|
||||
class meal_list extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
const now = new Date();
|
||||
const hours = now.getHours();
|
||||
|
||||
this.date = new Date("2025-03-10")
|
||||
.toISOString()
|
||||
.slice(0, 10)
|
||||
.replace(/-/g, "");
|
||||
|
||||
switch (true) {
|
||||
case hours < 8:
|
||||
this.selectedType = 1;
|
||||
break;
|
||||
case hours < 14:
|
||||
this.selectedType = 2;
|
||||
break;
|
||||
default:
|
||||
this.selectedType = 3;
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
async get_meal(date, type) {
|
||||
try {
|
||||
let response = await fetch(`/api/meal?date=${date}&type=${type}`);
|
||||
|
||||
if (!response.ok) throw new Error("Failed to fetch meal data");
|
||||
|
||||
let data = await response.json();
|
||||
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error("❌ API Error:", error);
|
||||
return ["식단 정보를 불러올 수 없습니다."];
|
||||
}
|
||||
}
|
||||
|
||||
async render() {
|
||||
const header = document.createElement("header");
|
||||
|
||||
const select = document.createElement("select");
|
||||
const types = ["아침", "점심", "저녁"];
|
||||
types.forEach((type, index) => {
|
||||
const option = document.createElement("option");
|
||||
option.textContent = types[index];
|
||||
option.value = index + 1;
|
||||
if (index + 1 === this.selectedType) option.selected = true;
|
||||
select.appendChild(option);
|
||||
});
|
||||
select.addEventListener("change", async () => {
|
||||
this.selectedType = Number(select.value);
|
||||
await this.render();
|
||||
});
|
||||
|
||||
const res = await this.get_meal(this.date, this.selectedType);
|
||||
|
||||
const ul = document.createElement("ul");
|
||||
res.meal_list.forEach((meal) => {
|
||||
const li = document.createElement("li");
|
||||
li.textContent = meal;
|
||||
ul.appendChild(li);
|
||||
});
|
||||
|
||||
const kcal = document.createElement("p");
|
||||
kcal.textContent = res.kcal;
|
||||
|
||||
header.appendChild(select);
|
||||
header.appendChild(kcal);
|
||||
|
||||
this.innerHTML = "";
|
||||
this.append(header);
|
||||
this.appendChild(ul);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("meal-list", meal_list);
|
||||
|
||||
class task_list extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
async render() {
|
||||
const ul = document.createElement("ul");
|
||||
|
||||
let data = await fetch("/api/tasklist");
|
||||
data = await data.json();
|
||||
|
||||
for (let i of data) {
|
||||
const date = new Date(i.end.date);
|
||||
date.setDate(date.getDate() - 1);
|
||||
|
||||
const li = document.createElement("li");
|
||||
|
||||
const name = document.createElement("h2");
|
||||
name.textContent = i.summary;
|
||||
|
||||
const box = document.createElement("div");
|
||||
const cal = document.createElement("img");
|
||||
cal.src = "/public/images/calendar.png";
|
||||
const deadline = document.createElement("p");
|
||||
deadline.textContent = date.toISOString().slice(0, 10);
|
||||
|
||||
box.append(cal, deadline);
|
||||
|
||||
li.append(name, box);
|
||||
|
||||
li.addEventListener("click", () => {
|
||||
const modal = document.createElement("task-edit");
|
||||
modal.setAttribute("event_id", i.id);
|
||||
document.body.appendChild(modal);
|
||||
});
|
||||
|
||||
ul.appendChild(li);
|
||||
}
|
||||
this.innerHTML = "";
|
||||
this.appendChild(ul);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("task-list", task_list);
|
||||
|
||||
class edit_task extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
async getData() {
|
||||
const response = await fetch(
|
||||
`/api/gettask?event_id=${this.getAttribute("event_id")}`
|
||||
);
|
||||
|
||||
let data = response.json();
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
async render() {
|
||||
this.className = "task_modal";
|
||||
|
||||
const data = await this.getData();
|
||||
|
||||
// 📌 닫기 버튼
|
||||
const closeBtn = document.createElement("span");
|
||||
closeBtn.classList.add("close");
|
||||
closeBtn.innerHTML = "✖";
|
||||
closeBtn.addEventListener("click", () => this.remove());
|
||||
|
||||
// 📌 제목
|
||||
const title = document.createElement("div");
|
||||
title.classList.add("title");
|
||||
title.textContent = "Edit Task";
|
||||
|
||||
// 📌 Name 입력란
|
||||
const nameGroup = this.createInputGroup(
|
||||
"Name",
|
||||
"text",
|
||||
"name",
|
||||
data.summary
|
||||
);
|
||||
|
||||
// 📌 Date 입력란 (시작~종료)
|
||||
const dateGroup = document.createElement("div");
|
||||
dateGroup.classList.add("input-group");
|
||||
const dateLabel = document.createElement("label");
|
||||
dateLabel.textContent = "Date";
|
||||
const dateContainer = document.createElement("div");
|
||||
dateContainer.classList.add("date-group");
|
||||
const startDate = this.createInput(
|
||||
"date",
|
||||
"start-date",
|
||||
data.start.date
|
||||
);
|
||||
const tilde = document.createElement("span");
|
||||
tilde.textContent = "~";
|
||||
const endDate = this.createInput("date", "end-date", data.end.date);
|
||||
dateContainer.append(startDate, tilde, endDate);
|
||||
dateGroup.append(dateLabel, dateContainer);
|
||||
|
||||
// 📌 Description 입력란
|
||||
const descGroup = this.createInputGroup(
|
||||
"Desc",
|
||||
"textarea",
|
||||
"desc",
|
||||
data.description
|
||||
);
|
||||
|
||||
// 📌 버튼 컨테이너
|
||||
const buttonContainer = document.createElement("div");
|
||||
buttonContainer.classList.add("buttons");
|
||||
|
||||
const cancelBtn = document.createElement("button");
|
||||
cancelBtn.classList.add("cancel");
|
||||
cancelBtn.textContent = "Cancel";
|
||||
cancelBtn.addEventListener("click", () => this.remove());
|
||||
|
||||
const saveBtn = document.createElement("button");
|
||||
saveBtn.classList.add("save");
|
||||
saveBtn.textContent = "Save";
|
||||
saveBtn.addEventListener("click", async () => await this.saveTask());
|
||||
|
||||
buttonContainer.append(cancelBtn, saveBtn);
|
||||
|
||||
this.innerHTML = "";
|
||||
this.append(
|
||||
closeBtn,
|
||||
title,
|
||||
nameGroup,
|
||||
dateGroup,
|
||||
descGroup,
|
||||
buttonContainer
|
||||
);
|
||||
}
|
||||
|
||||
createInputGroup(labelText, inputType, id, default_value) {
|
||||
const group = document.createElement("div");
|
||||
group.classList.add("input-group");
|
||||
|
||||
const label = document.createElement("label");
|
||||
label.textContent = labelText;
|
||||
|
||||
let input;
|
||||
if (inputType === "textarea") {
|
||||
input = document.createElement("textarea");
|
||||
input.rows = "4";
|
||||
} else {
|
||||
input = document.createElement("input");
|
||||
input.type = inputType;
|
||||
}
|
||||
input.value = default_value;
|
||||
input.placeholder = default_value;
|
||||
input.id = id;
|
||||
|
||||
group.append(label, input);
|
||||
return group;
|
||||
}
|
||||
|
||||
createInput(type, id, default_value) {
|
||||
const input = document.createElement("input");
|
||||
input.type = type;
|
||||
input.id = id;
|
||||
input.value = default_value;
|
||||
input.placeholder = default_value;
|
||||
return input;
|
||||
}
|
||||
|
||||
async saveTask() {
|
||||
const name = document.getElementById("name").value;
|
||||
const startDate = document.getElementById("start-date").value;
|
||||
const endDate = document.getElementById("end-date").value;
|
||||
const desc = document.getElementById("desc").value;
|
||||
|
||||
let response = await fetch("/api/edittask", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
event_id: this.getAttribute("event_id"),
|
||||
data: {
|
||||
end: { date: endDate },
|
||||
start: { date: startDate },
|
||||
summary: name,
|
||||
description: desc,
|
||||
},
|
||||
}),
|
||||
});
|
||||
response = await response.json();
|
||||
console.log(response);
|
||||
|
||||
const taskListComponent = document.querySelector("task-list");
|
||||
if (taskListComponent) {
|
||||
taskListComponent.render();
|
||||
}
|
||||
|
||||
const targetIframe = document.getElementById("calendar_iframe");
|
||||
if (targetIframe) {
|
||||
targetIframe.src = targetIframe.src; // ✅ iframe 새로고침
|
||||
}
|
||||
|
||||
this.remove();
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("task-edit", edit_task);
|
||||
|
||||
class create_task extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
}
|
||||
|
||||
async render() {
|
||||
this.className = "task_modal";
|
||||
|
||||
// 📌 닫기 버튼
|
||||
const closeBtn = document.createElement("span");
|
||||
closeBtn.classList.add("close");
|
||||
closeBtn.innerHTML = "✖";
|
||||
closeBtn.addEventListener("click", () => this.remove());
|
||||
|
||||
// 📌 제목
|
||||
const title = document.createElement("div");
|
||||
title.classList.add("title");
|
||||
title.textContent = "Create Task";
|
||||
|
||||
// 📌 Name 입력란
|
||||
const nameGroup = this.createInputGroup("Name", "text", "name");
|
||||
|
||||
// 📌 Date 입력란 (시작~종료)
|
||||
const dateGroup = document.createElement("div");
|
||||
dateGroup.classList.add("input-group");
|
||||
const dateLabel = document.createElement("label");
|
||||
dateLabel.textContent = "Date";
|
||||
const dateContainer = document.createElement("div");
|
||||
dateContainer.classList.add("date-group");
|
||||
const startDate = this.createInput("date", "start-date");
|
||||
const tilde = document.createElement("span");
|
||||
tilde.textContent = "~";
|
||||
const endDate = this.createInput("date", "end-date");
|
||||
dateContainer.append(startDate, tilde, endDate);
|
||||
dateGroup.append(dateLabel, dateContainer);
|
||||
|
||||
// 📌 Description 입력란
|
||||
const descGroup = this.createInputGroup("Desc", "textarea", "desc");
|
||||
|
||||
// 📌 버튼 컨테이너
|
||||
const buttonContainer = document.createElement("div");
|
||||
buttonContainer.classList.add("buttons");
|
||||
|
||||
const cancelBtn = document.createElement("button");
|
||||
cancelBtn.classList.add("cancel");
|
||||
cancelBtn.textContent = "Cancel";
|
||||
cancelBtn.addEventListener("click", () => this.remove());
|
||||
|
||||
const saveBtn = document.createElement("button");
|
||||
saveBtn.classList.add("save");
|
||||
saveBtn.textContent = "Save";
|
||||
saveBtn.addEventListener("click", async () => await this.saveTask());
|
||||
|
||||
buttonContainer.append(cancelBtn, saveBtn);
|
||||
|
||||
this.innerHTML = "";
|
||||
this.append(
|
||||
closeBtn,
|
||||
title,
|
||||
nameGroup,
|
||||
dateGroup,
|
||||
descGroup,
|
||||
buttonContainer
|
||||
);
|
||||
}
|
||||
|
||||
createInputGroup(labelText, inputType, id) {
|
||||
const group = document.createElement("div");
|
||||
group.classList.add("input-group");
|
||||
|
||||
const label = document.createElement("label");
|
||||
label.textContent = labelText;
|
||||
|
||||
let input;
|
||||
if (inputType === "textarea") {
|
||||
input = document.createElement("textarea");
|
||||
input.rows = "4";
|
||||
} else {
|
||||
input = document.createElement("input");
|
||||
input.type = inputType;
|
||||
}
|
||||
input.id = id;
|
||||
|
||||
group.append(label, input);
|
||||
return group;
|
||||
}
|
||||
|
||||
createInput(type, id) {
|
||||
const input = document.createElement("input");
|
||||
input.type = type;
|
||||
input.id = id;
|
||||
return input;
|
||||
}
|
||||
|
||||
async saveTask() {
|
||||
const name = document.getElementById("name").value;
|
||||
const startDate = document.getElementById("start-date").value;
|
||||
const endDate = document.getElementById("end-date").value;
|
||||
const desc = document.getElementById("desc").value;
|
||||
|
||||
let response = await fetch("/api/createtask", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
event_id: this.getAttribute("event_id"),
|
||||
data: {
|
||||
end: { date: endDate },
|
||||
start: { date: startDate },
|
||||
summary: name,
|
||||
description: desc,
|
||||
},
|
||||
}),
|
||||
});
|
||||
response = await response.json();
|
||||
console.log(response);
|
||||
|
||||
const taskListComponent = document.querySelector("task-list");
|
||||
if (taskListComponent) {
|
||||
taskListComponent.render();
|
||||
}
|
||||
|
||||
const targetIframe = document.getElementById("calendar_iframe");
|
||||
if (targetIframe) {
|
||||
targetIframe.src = targetIframe.src; // ✅ iframe 새로고침
|
||||
}
|
||||
|
||||
this.remove();
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("create-task", create_task);
|
||||
@@ -0,0 +1,304 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
font-family: "Fira Code", serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
background-color: rgb(246, 242, 237);
|
||||
}
|
||||
|
||||
.box {
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid black;
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#header {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 1px white;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
#header h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
#header ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
#header ul li {
|
||||
display: inline-block;
|
||||
padding: 0 2rem;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
#header ul li a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px - 10px);
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
#side {
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
#task {
|
||||
width: 100%;
|
||||
height: calc(100% - 515px - 25px);
|
||||
background-color: white;
|
||||
border: none;
|
||||
box-shadow: 0 5px 10px #d4d4d4;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#task task-list {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#task task-list ul {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
#task task-list ul li {
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #b4b4b4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#task task-list ul li:hover {
|
||||
border: 2px solid black;
|
||||
}
|
||||
#task task-list ul li h2 {
|
||||
font-size: 18px;
|
||||
font-size: 700;
|
||||
}
|
||||
#task task-list ul li div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
#task task-list ul li div img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
#task task-list ul li div p {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #fbb40e;
|
||||
}
|
||||
#task #add_task {
|
||||
cursor: pointer;
|
||||
font-size: 25px;
|
||||
padding-right: 10px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
#info {
|
||||
width: 100%;
|
||||
height: 515px;
|
||||
background-color: white;
|
||||
border: none;
|
||||
box-shadow: 0 5px 10px #d4d4d4;
|
||||
padding: 10px;
|
||||
}
|
||||
#info meal-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: none;
|
||||
}
|
||||
#info meal-list header {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
#info meal-list header select {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 4px 4px;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#info meal-list header select:hover {
|
||||
box-shadow: 0 0 0 1px black;
|
||||
}
|
||||
#info meal-list ul {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
#info meal-list ul::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
#info meal-list ul li {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #b4b4b4;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
border: 2px solid orange;
|
||||
width: calc(100% - 400px - 25px);
|
||||
height: 100%;
|
||||
}
|
||||
#calendar iframe {
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.task_modal {
|
||||
width: 400px;
|
||||
height: auto;
|
||||
border: 2px solid black;
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.task_modal label {
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.task_modal input,
|
||||
.task_modal textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid black;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.task_modal textarea {
|
||||
height: 100px;
|
||||
resize: none;
|
||||
}
|
||||
.task_modal .date-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.task_modal .buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
.task_modal button {
|
||||
padding: 8px 12px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.task_modal .cancel {
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
.task_modal .save {
|
||||
background: #d1d1d1;
|
||||
border: none;
|
||||
}
|
||||
.task_modal .close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
#main {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
#side {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
#task {
|
||||
height: auto;
|
||||
}
|
||||
#info {
|
||||
height: auto;
|
||||
}
|
||||
#calendar {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAQ;AAQR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EAEA;EACA;EACA,KAnBW;EAqBX;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EAOA;EACA;EAEA;EAEA;EACA;EAEA;EACA;;;AAGJ;EACI;EACA,QA/CY;EAgDZ;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;;AAMhB;EACI;EACA;EAEA,SAxFW;EA0FX;EACA;EAEA,KA5FS;;;AA+Fb;EACI,OA/FQ;EAgGR;EAEA;EACA;EAEA,KAtGS;;;AAyGb;EACI;EACA;EAEA;EACA;EACA;EAEA,SAlHW;EAoHX;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EAEA;EACA;EACA;EACA,KAjIG;;AAmIH;EACI;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA,cA7ID;EA+IC;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAOpB;EACI;EACA;EAEA;EAEA;EACA;;;AAIR;EACI;EACA,QAzLU;EA2LV;EACA;EACA;EAEA,SAlMW;;AAoMX;EACI;EACA;EAEA;EACA;EACA,KA1MO;EA4MP;;AAEA;EACI;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EACA;;AAEA;EACI;;AAKZ;EACI;EAEA;EACA;EACA;EACA,KA3OG;EA6OH;EACA;EAEA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,cA/PD;EAiQC;;;AAMhB;EACI;EAEA;EACA;;AAEA;EACI;EACA;EACA;EACA;;;AAIR;EACI;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA,SAlSW;EAoSX;EACA;EACA,KAtSW;;AAwSX;EACI;EACA;EACA;;AAGJ;AAAA;EAEI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;IACI;;EAGJ;IACI;IACA;;EAGJ;IACI;IACA;;EAEJ;IACI;;EAEJ;IACI;;EAGJ;IACI;IACA;IACA","file":"style.css"}
|
||||
@@ -0,0 +1,383 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
|
||||
|
||||
$small_margin: 10px;
|
||||
$big_margin: 25px;
|
||||
$nav_width: 400px;
|
||||
$info_height: calc(60px * 7 + $small_margin * 7 + $big_margin);
|
||||
$header_height: 60px;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
font-family: "Fira Code", serif;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $small_margin;
|
||||
|
||||
background-color: rgb(246, 242, 237);
|
||||
}
|
||||
|
||||
.box {
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 30px;
|
||||
// background-color: white;
|
||||
|
||||
// position: absolute;
|
||||
// top: -2px;
|
||||
// left: 15px;
|
||||
|
||||
width: 100%;
|
||||
border-bottom: 2px solid black;
|
||||
|
||||
margin-bottom: 10px;
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#header {
|
||||
width: 100%;
|
||||
height: $header_height;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 1px white;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 0 2rem;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 100%;
|
||||
height: calc(100% - $header_height - $small_margin);
|
||||
|
||||
padding: $small_margin;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
gap: $big_margin;
|
||||
}
|
||||
|
||||
#side {
|
||||
width: $nav_width;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: $big_margin;
|
||||
}
|
||||
|
||||
#task {
|
||||
width: 100%;
|
||||
height: calc(100% - $info_height - $big_margin);
|
||||
|
||||
background-color: white;
|
||||
border: none;
|
||||
box-shadow: 0 5px 10px #d4d4d4;
|
||||
|
||||
padding: $small_margin;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
task-list {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $small_margin;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #b4b4b4;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding-left: $small_margin;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-size: 700;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #fbb40e;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#add_task {
|
||||
cursor: pointer;
|
||||
font-size: 25px;
|
||||
|
||||
padding-right: 10px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
#info {
|
||||
width: 100%;
|
||||
height: $info_height;
|
||||
|
||||
background-color: white;
|
||||
border: none;
|
||||
box-shadow: 0 5px 10px #d4d4d4;
|
||||
|
||||
padding: $small_margin;
|
||||
|
||||
meal-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $small_margin;
|
||||
|
||||
overflow-y: none;
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
select {
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 4px 4px;
|
||||
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $small_margin;
|
||||
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
cursor: ns-resize;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #b4b4b4;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: $small_margin;
|
||||
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#calendar {
|
||||
border: 2px solid orange;
|
||||
|
||||
width: calc(100% - $nav_width - $big_margin);
|
||||
height: 100%;
|
||||
|
||||
iframe {
|
||||
border-radius: 8px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.task_modal {
|
||||
width: 400px;
|
||||
height: auto;
|
||||
|
||||
border: 2px solid black;
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
padding: $small_margin;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $small_margin;
|
||||
|
||||
label {
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid black;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 100px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.date-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 12px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.save {
|
||||
background: #d1d1d1;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#side {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
#task {
|
||||
height: auto;
|
||||
}
|
||||
#info {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user