Skip to content

Instantly share code, notes, and snippets.

@jshmllr

jshmllr/index.html

Last active September 20, 2024 13:47
Show Gist options
  • Save jshmllr/c42f41b70a913c301ba2a621ee44983d to your computer and use it in GitHub Desktop.
Save jshmllr/c42f41b70a913c301ba2a621ee44983d to your computer and use it in GitHub Desktop.
Download ZIP
Prism Calendar View Settings - 1
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar View Settings</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Calendar View Settings</h1>
<form id="calendar-view-settings">
<div class="form-group">
<label for="weeks-start">Weeks Start On</label>
<select id="weeks-start">
<option>Sunday</option>
<option>Monday</option>
</select>
</div>
<div class="form-group">
<label for="theme">Theme</label>
<select id="theme">
<option>Prism Classic</option>
<option>Dark Mode</option>
<option>Light Mode</option>
</select>
</div>
<div class="form-group">
<label for="coloring">Coloring</label>
<select id="coloring">
<option>Stages</option>
<option>Artists</option>
<option>Genres</option>
</select>
</div>
<h2>Event Display Settings</h2>
<div class="form-group">
<label for="primary-text">Primary Text</label>
<select id="primary-text">
<option>Event Name</option>
<option>Artist Name</option>
<option>Venue Name</option>
</select>
</div>
<div class="form-group">
<label for="secondary-text">Secondary Text</label>
<select id="secondary-text">
<option>None</option>
<option>Time</option>
<option>Date</option>
</select>
</div>
<div class="form-group-flex">
<label for="headliner-badges">Include Headliner Badges</label>
<input type="checkbox" id="headliner-badges">
</div>
<h2>Holiday Subscriptions</h2>
<button type="button" id="add-holiday-btn">Add Holiday Subscription</button>
<ul id="holiday-list">
<li>Holidays in United States</li>
<!-- Additional subscribed holiday calendars will appear here -->
</ul>
</form>
</div>
<!-- Modal -->
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2>Add Holiday Subscription</h2>
<div class="form-group">
<label for="holiday-calendar">Select a holiday calendar to subscribe to:</label>
<select id="holiday-calendar">
<option>Holidays in United States</option>
<option>Holidays in Canada</option>
<option>Custom</option>
</select>
</div>
<div class="form-group custom-url">
<label for="custom-holiday-url">Custom (enter Google Calendar URL)</label>
<input type="text" id="custom-holiday-url" placeholder="Enter URL">
</div>
<button id="subscribe-btn">Subscribe</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('modal');
const btn = document.getElementById('add-holiday-btn');
const span = document.getElementsByClassName('close')[0];
const holidayCalendar = document.getElementById('holiday-calendar');
const customUrl = document.querySelector('.custom-url');
btn.onclick = function() {
modal.style.display = 'block';
}
span.onclick = function() {
modal.style.display = 'none';
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}
holidayCalendar.onchange = function() {
if (holidayCalendar.value === 'Custom') {
customUrl.style.display = 'block';
} else {
customUrl.style.display = 'none';
}
}
});
Raw
style.css
/* Styles for the container and form */
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f7f7f7;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1, h2 {
text-align: center;
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
label {
margin-bottom: 5px;
}
input[type="text"], select, input[type="checkbox"] {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#holiday-list {
list-style-type: none;
padding: 0;
}
#holiday-list li {
background-color: #e9e9e9;
padding: 10px;
margin-bottom: 5px;
border-radius: 4px;
}
/* New class for flex row layout */
.form-group-flex {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.form-group-flex label {
margin-bottom: 0; /* Remove bottom margin for label to align correctly */
}
.form-group-flex input[type="checkbox"] {
margin-left: 10px; /* Optional: Add left margin to the checkbox for separation */
}
/* Modal styles */
.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);
padding-top: 60px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
border-radius: 8px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.custom-url {
display: none;
}
.modal button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.modal button:hover {
background-color: #45a049;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment