Skip to content
Snippets Groups Projects
Commit c5212435 authored by Michiel van Boven's avatar Michiel van Boven :calendar:
Browse files

Merge branch 'push4' into 'main' 

Push4

See merge request !2
parents 66aedeba fa8f03f7
No related branches found
No related tags found
1 merge request!2Push4
Hide whitespace changes
Inline Side-by-side
public/demo/.gitkeep 0 → 100644
+ 0
− 0
View file @ c5212435
public/demo/index.html 0 → 100644
+ 66
− 0
View file @ c5212435
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plan2Go Calandar</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a0d8d27dcc.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="container">
<nav>
<img src="../calenderlanding/images/plan2gologoblack.png" class="logo">
</nav>
<div id="header">
<div id="monthDisplay"></div>
<div>
<button id="backButton">Back</button>
<button id="nextButton">Next</button>
</div>
<div id="setting">
<i class="fa-solid fa-gear"></i>
</div>
</div>
<div id="weekdays">
<div>Sunday</div>
<div>Monday</div>
<div>Tuesday</div>
<div>Wednesday</div>
<div>Thursday</div>
<div>Friday</div>
<div>Saturday</div>
</div>
<div id="calendar"></div>
</div>
<div id="newEventModal">
<h2>New Event</h2>
<input id="eventTitleInput" placeholder="Event Title" />
<button id="saveButton">Save</button>
<button id="cancelButton">Cancel</button>
</div>
<div id="deleteEventModal">
<h2>Event</h2>
<p id="eventText"></p>
<button id="deleteButton">Delete</button>
<button id="closeButton">Close</button>
</div>
<div id="modalBackDrop"></div>
<script src="./script.js"></script>
</body>
</html>
\ No newline at end of file
public/demo/style.css 0 → 100644
+ 151
− 0
View file @ c5212435
html{
scroll-behavior: smooth;
}
body {
display: flex;
margin-top: 50px;
justify-content: center;
background-color: #FFFCFF;
}
button {
width: 75px;
cursor: pointer;
box-shadow: 0px 0px 2px gray;
border: none;
outline: none;
padding: 5px;
border-radius: 5px;
color: white;
}
#header {
padding: 10px;
color: #d36c6c;
font-size: 26px;
font-family: sans-serif;
display: flex;
justify-content: space-between;
}
.logo{
width: 200px;
align-content: left;
}
nav i{
text-decoration: none;
font-size: 30px;
margin-right: 15px;
color: #000;
display: inline-block;
height: 500%;
}
.copyright{
width: 100%;
text-align: center;
padding: 25px 0;
background: #262626;
font-weight: 300;
margin-top: 20px;
}
.copyright i{
color: #ff004f;
}
#header button {
background-color:#92a1d1;
}
#container {
width: 770px;
}
#weekdays {
width: 100%;
display: flex;
color: #247BA0;
}
#weekdays div {
width: 100px;
padding: 10px;
}
#calendar {
width: 100%;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.day {
width: 100px;
padding: 10px;
height: 100px;
cursor: pointer;
box-sizing: border-box;
background-color: white;
margin: 5px;
box-shadow: 0px 0px 3px #CBD4C2;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.day:hover {
background-color: #e8eafa;
}
.day + #currentDay {
background-color:#e8f4fa;
}
.event {
font-size: 10px;
padding: 3px;
background-color: #58bae4;
color: white;
border-radius: 5px;
max-height: 55px;
overflow: hidden;
}
.padding {
cursor: default !important;
background-color: #FFFCFF !important;
box-shadow: none !important;
}
#newEventModal, #deleteEventModal {
display: none;
z-index: 20;
padding: 25px;
background-color: #e8f4fa;
box-shadow: 0px 0px 3px black;
border-radius: 5px;
width: 350px;
top: 100px;
left: calc(50% - 175px);
position: absolute;
font-family: sans-serif;
}
#eventTitleInput {
padding: 10px;
width: 100%;
box-sizing: border-box;
margin-bottom: 25px;
border-radius: 3px;
outline: none;
border: none;
box-shadow: 0px 0px 3px gray;
}
#eventTitleInput.error {
border: 2px solid red;
}
#cancelButton, #deleteButton {
background-color: #d36c6c;
}
#saveButton, #closeButton {
background-color: #92a1d1;
}
#eventText {
font-size: 14px;
}
#modalBackDrop {
display: none;
top: 0px;
left: 0px;
z-index: 10;
width: 100vw;
height: 100vh;
position: absolute;
background-color: rgba(0,0,0,0.8);
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment