This commit is contained in:
louiscklaw
2025-01-31 19:15:17 +08:00
parent 09adae8c8e
commit 6c60a73f30
1546 changed files with 286918 additions and 0 deletions

View File

@@ -0,0 +1,427 @@
body {
position: relative;
margin-left: 2px;
margin-right: 20px;
font-family: 'Kalam';
font-size: 16px;
}
.modal-body {
height: fit-content;
}
.input-group {
display: flex;
justify-content: center;
}
.input-panel {
margin: 0px;
}
.item-list-box {
min-height: 150px;
min-width: 100px;
}
#item-form-text {
text-align: center;
}
header {
display: flex;
justify-content: center;
}
#item-form-header {
text-align: center;
}
.item-list-box {
border-radius: 10px;
background-color: #e8e892;
height: 100%;
padding-top: 10px;
padding-bottom: 10px;
overflow: auto;
}
.modal-content {
align-items: center;
width: fit-content;
}
#date-selector-container {
display: flex;
justify-content: right;
padding-bottom: 10px;
padding-right: 10px;
}
textarea {
border-radius: 5px;
background: none;
border-color: #3f3f3f;
max-height: 100%;
overflow: auto;
}
header {
text-align: center;
}
#time-block-memo-container {
position: relative;
max-height: 100%;
}
#close-memo {
position: absolute;
top: 0px;
font-size: 10px;
right: 10px;
}
#time-block-page-container {
max-height: 800px;
height: 550px;
padding-top: 0px;
padding-bottom: 30px;
}
#event-time-container {
text-align: center;
}
.event-schedule {
background-color: #efefd0 !important;
}
.event-schedule:hover {
background-color: #e8e892 !important;
}
@media (max-width: 1000px) {
#line {
display: none;
}
}
@media (max-width: 576px) {
#line {
display: none;
}
#memo {
font-size: large;
max-height: 100%;
max-width: 100%;
overflow: auto;
}
#time-block-memo-container {
max-height: 300px;
height: 300px;
overflow: auto;
}
#rundown-container {
max-height: 300px;
}
}
#memo {
background-color: #efefd0;
height: 90%;
border-radius: 10px;
overflow: auto;
}
#page {
display: flex;
justify-content: center;
height: 90%;
width: 100%;
}
/* #line {
position: absolute;
} */
textarea {
width: 100%;
}
.create-button {
position: fixed;
left: 30px;
bottom: 30px;
}
#rundown {
max-height: 80%;
max-width: 100%;
}
#rundown-container {
max-height: 100%;
position: relative;
}
.time-stamp-container {
background-color: none;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.individual-time-block {
height: 100%;
padding: 2px;
max-width: 100%;
overflow: visible;
}
.time-block {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: rgba(181, 180, 180, 0.625);
padding: 10px;
border-radius: 5px;
padding: 1px;
font-size: 1.5vw;
text-align: center;
transition: background-color 50ms ease-out 50ms;
}
.save-time-block {
height: 100%;
color: white;
opacity: 0.7;
padding: 10px;
border-radius: 5px;
text-align: center;
transition: background-color 50ms ease-out 50ms;
}
.save-time-block:hover {
opacity: 0.8;
transform: scale(1.01);
}
.time-stamp {
position: absolute;
top: -5px;
right: 10px;
font-size: 10px;
}
.last-time-stamp {
position: absolute;
bottom: -5px;
right: 10px;
font-size: 10px;
}
.memo-item-container {
position: relative;
background-color: rgba(255, 255, 255, 0.522);
border-radius: 10px;
width: 100%;
height: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 15px;
}
#memo-item-cluster {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 10px;
}
.memo-item-label {
font-weight: 800;
font-size: 15px;
padding: 5px;
}
/* Scroll bar */
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 5px;
height: 200px;
}
::-webkit-scrollbar-thumb {
background: #efefd0;
border-radius: 5px;
min-height: 250px;
}
::-webkit-scrollbar-thumb:hover {
background: white;
}
#memo,
#memo-tag {
animation-duration: 0.5s;
animation-name: animate-fade;
animation-delay: 0.1s;
animation-fill-mode: backwards;
}
@keyframes animate-fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#edit-activities {
border-radius: 100px;
background-color: #f2965985;
color: white;
text-align: center;
min-width: 22px !important;
min-height: 22px !important;
padding: 3px;
font-size: 10px;
}
#edit-remarks {
border-radius: 100px;
background-color: #f2965985;
color: white;
text-align: center;
min-width: 22px !important;
min-height: 22px !important;
padding: 3px;
font-size: 10px;
}
#edit-show-item {
border-radius: 100px;
background-color: #f2965985;
color: white;
text-align: center;
min-width: 22px !important;
min-height: 22px !important;
padding: 3px;
font-size: 10px;
}
.edit-button {
position: absolute;
top: 5px;
right: 5px;
}
.modal-dialog {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
#event-name {
font-size: 2vw;
padding-top: 10px;
}
.fa-trash {
z-index: 1000;
right: 20px;
top: 20px;
}
.creator-function {
z-index: 1000;
}
.modal-body {
align-items: center;
text-align: center;
}
/* CSS */
.button-53 {
background-color: #f29659;
border: 0 solid #e5e7eb;
box-sizing: border-box;
color: #000000;
display: flex;
font-family: ui-sans-serif, system-ui, -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-size: 1rem;
font-weight: 700;
justify-content: center;
line-height: 1.75rem;
padding: 0.75rem 1.65rem;
position: relative;
text-align: center;
text-decoration: none #000000 solid;
text-decoration-thickness: auto;
width: 100%;
max-width: 460px;
position: relative;
cursor: pointer;
transform: rotate(-2deg);
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-53:focus {
outline: 0;
}
.button-53:after {
content: '';
position: absolute;
border: 1px solid #000000;
bottom: 4px;
left: 4px;
width: calc(100% - 1px);
height: calc(100% - 1px);
}
.button-53:hover:after {
bottom: 2px;
left: 2px;
}
@media (min-width: 768px) {
.button-53 {
padding: 0.75rem 3rem;
font-size: 1.25rem;
}
}
#back-page {
position: absolute;
left: 50px;
top: 110px;
text-decoration: none;
}
.bi-chevron-left {
font-size: 30px;
top: 90px;
left: 40px;
color: #444a58;
cursor: pointer;
}

View File

@@ -0,0 +1,353 @@
<!DOCTYPE html>
<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" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link href="https://fonts.googleapis.com/css?family=Kalam" rel="stylesheet" />
<link rel="stylesheet" href="./eventSchedule.css" />
<title>Event Schedule</title>
</head>
<body>
<div class="navbar-container container">
<!-- NAVBAR: to be loaded with js -->
</div>
<header id="event-name"></header>
<div id="event-time-container">
<!-- time and date input here -->
</div>
<div class="container container-fluid" id="page">
<div id="time-block-page-container" class="container row">
<div id="date-selector-container" class="col-12">
<!-- time selector here -->
</div>
<div id="time-block-memo-container" class="col-sm-5 overflow-auto"></div>
<div id="rundown-container" class="col-sm-7 overflow-auto">
<div id="rundown" class="rundown" data-current="0">
<!-- Add Time Block and Time-stamp on window load -->
</div>
</div>
</div>
<!-- Back Button -->
<a id="back-page">
<i class="bi bi-chevron-left"></i>
</a>
</div>
<!-- create time block modal -->
<div
class="modal fade"
id="create-time-block-modal"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div></div>
<h5 class="modal-title">CREATE ACTIVITY</h5>
<div class="exit-modal">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
<div class="modal-body">
<div class="input-group">
<form id="activity-form" class="register-form">
<div class="input-panel mb-3">
<div class="form-header">Activity Name *</div>
<input
type="text"
class="form-control"
name="activity-name"
aria-label="first-name"
aria-describedby="basic-addon1"
/>
</div>
<div class="input-panel mb-3">
<div class="form-header">Description</div>
<textarea
id="description"
class="form-control"
name="description"
rows="5"
cols="50"
></textarea>
</div>
<div id="time-container">
<div class="input-panel mb-3">
<div class="form-header">Start Time *</div>
<input
type="time"
name="start"
class="form-control"
id="start-time"
name="start-time"
min="00:00"
max="24:00"
step="900"
required
/>
</div>
<div class="input-panel mb-3">
<div class="form-header">End Time *</div>
<input
type="time"
name="end"
class="form-control"
id="end-time"
name="end-time"
min="00:00"
max="24:00"
step="900"
required
/>
</div>
</div>
<div class="input-panel mb-3">
<div class="form-header">Remarks</div>
<textarea
id="remark"
class="form-control"
name="remark"
rows="5"
cols="50"
></textarea>
</div>
<div class="input-panel mb-3">
<div class="form-header">Display Color</div>
<input value="#f29659" id="color" class="form-control" name="color" type="color" />
</div>
<div class="modal-footer">
<button id="submit-new-activity" type="submit" class="btn btn-primary button-53">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- edit Time block modal (name and time only) -->
<div
class="modal fade"
id="edit-time-name-modal"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div></div>
<h5 class="modal-title">EDIT NAME AND TIME</h5>
<div class="exit-modal">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
<div class="modal-body">
<div class="input-group">
<form id="edit-time-name-form" class="register-form">
<div class="input-panel mb-3">
<div class="form-header">Activity Name *</div>
<input
type="text"
class="form-control"
name="edit-activity-name"
id="edit-activity-name"
aria-describedby="basic-addon1"
/>
</div>
<div id="time-container">
<div class="input-panel mb-3">
<div class="form-header">Start Time *</div>
<input
type="time"
name="start"
class="form-control"
id="edit-start-time"
name="edit-start-time"
min="00:00"
max="24:00"
step="900"
required
/>
</div>
<div class="input-panel mb-3">
<div class="form-header">End Time *</div>
<input
type="time"
name="end"
class="form-control"
id="edit-end-time"
name="edit-end-time"
min="00:00"
max="24:00"
step="900"
required
/>
</div>
</div>
<div class="input-panel mb-3">
<div class="form-header">Display Color</div>
<input
value="#f29659"
id="edit-color"
class="form-control"
name="color"
type="color"
/>
</div>
<div class="modal-footer">
<button id="submit-edit-time-name" type="submit" class="btn btn-primary button-53">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Edit Item Modal -->
<div
class="modal fade"
id="edit-item-modal"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div></div>
<h5 class="modal-title">ITEM LIST</h5>
<div class="exit-modal">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
</div>
<div class="modal-body">
<div id="item-form-text" class="form-text">
Select items you wish to add to this activity. Blanketed indicates total quantity of each
items assigned to the event.
</div>
<div class="input-group">
<form id="edit-item-form" class="edit-item-form row">
<div class="input-panel mb-3 col-6">
<div class="form-header" id="item-form-header">Food</div>
<div class="list-items-container">
<ul
id="food-list"
class="item-list-box"
role="listbox"
tabindex="0"
aria-label="emails list"
>
<!-- to be added by JS -->
</ul>
</div>
</div>
<div class="input-panel mb-3 col-6">
<div class="form-header" id="item-form-header">Drinks</div>
<div class="list-items-container">
<ul
id="drink-list"
class="item-list-box"
role="listbox"
tabindex="0"
aria-label="emails list"
>
<!-- to be added by JS -->
</ul>
</div>
</div>
<div class="input-panel mb-3 col-6">
<div class="form-header" id="item-form-header">Decoration</div>
<div class="list-items-container">
<ul
id="decoration-list"
class="item-list-box"
role="listbox"
tabindex="0"
aria-label="emails list"
>
<!-- to be added by JS -->
</ul>
</div>
</div>
<div class="input-panel mb-3 col-6">
<div class="form-header" id="item-form-header">Others</div>
<div class="list-items-container">
<ul
id="other-list"
class="item-list-box"
role="listbox"
tabindex="0"
aria-label="emails list"
>
<!-- to be added by JS -->
</ul>
</div>
</div>
<div class="modal-footer">
<button id="submit-edit-item" type="submit" class="btn btn-primary button-53">
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://thibaultjanbeyer.github.io/DragSelect/ds.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"
></script>
<script type="module" src="./eventSchedule.js"></script>
</body>
</html>

File diff suppressed because it is too large Load Diff