Neon calendar
This commit is contained in:
Flatlogic Bot
parent
d8875292fa
commit
83525c1423
@ -181,21 +181,183 @@ section h2 {
|
||||
text-shadow: 0 0 5px #FFFFFF, 0 0 10px #00BFFF;
|
||||
}
|
||||
|
||||
.ticket-form-container .form-control,
|
||||
.ticket-form-container .form-select {
|
||||
background-color: #000010;
|
||||
color: #FFFFFF;
|
||||
border: 1px solid #00BFFF;
|
||||
/* Date Picker */
|
||||
.ticket-form-container .form-control[type="date"] {
|
||||
color-scheme: dark;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ticket-form-container .form-control:focus,
|
||||
.ticket-form-container .form-select:focus {
|
||||
background-color: #000010;
|
||||
color: #FFFFFF;
|
||||
border-color: #FF00FF;
|
||||
box-shadow: 0 0 10px #FF00FF;
|
||||
/* Calendar Icon Styling */
|
||||
.ticket-form-container .form-control[type="date"]::-webkit-calendar-picker-indicator {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
filter: invert(80%) sepia(100%) saturate(300%) hue-rotate(280deg) drop-shadow(0 0 6px #ff00ff); /* Glowing pink icon */
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
|
||||
.ticket-form-container .form-control::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1);
|
||||
.ticket-form-container .form-control[type="date"]::-webkit-calendar-picker-indicator:hover {
|
||||
filter: invert(90%) sepia(100%) saturate(500%) hue-rotate(180deg) drop-shadow(0 0 10px #00BFFF); /* Glowing cyan on hover */
|
||||
}
|
||||
|
||||
/* --- Flatpickr Neon Theme --- */
|
||||
|
||||
.flatpickr-calendar {
|
||||
background: #0a001f;
|
||||
border: 1px solid #ff00ff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 15px #ff00ff;
|
||||
width: 300px;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-month {
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
text-shadow: 0 0 5px #ff00ff;
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-prev-month,
|
||||
.flatpickr-months .flatpickr-next-month {
|
||||
color: #ff00ff;
|
||||
fill: #ff00ff;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-prev-month:hover,
|
||||
.flatpickr-months .flatpickr-next-month:hover {
|
||||
color: #00BFFF;
|
||||
fill: #00BFFF;
|
||||
}
|
||||
|
||||
.flatpickr-current-month .flatpickr-monthDropdown-months {
|
||||
background: #0a001f;
|
||||
border: 1px solid #ff00ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.flatpickr-current-month .numInput {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: none;
|
||||
text-shadow: 0 0 5px #ff00ff;
|
||||
}
|
||||
|
||||
.flatpickr-weekdays {
|
||||
background: #101020;
|
||||
}
|
||||
|
||||
span.flatpickr-weekday {
|
||||
color: #ff00ff;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 3px #ff00ff;
|
||||
}
|
||||
|
||||
.flatpickr-day {
|
||||
color: #ccc;
|
||||
border: 1px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.flatpickr-day:hover {
|
||||
background: #101020;
|
||||
border-color: #00BFFF;
|
||||
color: #00BFFF;
|
||||
}
|
||||
|
||||
.flatpickr-day.today {
|
||||
border-color: #ff00ff;
|
||||
color: #ff00ff;
|
||||
text-shadow: 0 0 5px #ff00ff;
|
||||
}
|
||||
|
||||
.flatpickr-day.selected,
|
||||
.flatpickr-day.startRange,
|
||||
.flatpickr-day.endRange {
|
||||
background: #ff00ff;
|
||||
border-color: #ff00ff;
|
||||
color: #000;
|
||||
box-shadow: 0 0 10px #ff00ff;
|
||||
}
|
||||
|
||||
.flatpickr-day.disabled,
|
||||
.flatpickr-day.prevMonthDay,
|
||||
.flatpickr-day.nextMonthDay {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.holo-relics-img {
|
||||
object-position: top;
|
||||
}
|
||||
|
||||
/* --- Choices.js Neon Theme --- */
|
||||
|
||||
.choices {
|
||||
margin-bottom: 1rem;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
.choices__inner {
|
||||
background-color: #0a001f;
|
||||
color: #BC13FE; /* MODIFIED: Neon Purple */
|
||||
border: 1px solid #ff00ff;
|
||||
box-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff,
|
||||
inset 0 0 5px rgba(255, 0, 255, 0.5);
|
||||
border-radius: 8px;
|
||||
padding: .375rem .75rem;
|
||||
transition: all 0.3s ease;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.choices.is-open .choices__inner {
|
||||
border-color: #00BFFF;
|
||||
box-shadow: 0 0 10px #00BFFF, 0 0 20px #00BFFF, 0 0 40px #00BFFF,
|
||||
inset 0 0 10px rgba(0, 191, 255, 0.6);
|
||||
}
|
||||
|
||||
.choices__list--dropdown {
|
||||
background-color: #0a001f;
|
||||
border: 1px solid #00BFFF;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 15px #00BFFF;
|
||||
margin-top: 5px;
|
||||
color: #39FF14; /* MODIFIED: Neon Green */
|
||||
}
|
||||
|
||||
.choices__item {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.choices__item--selectable.is-highlighted {
|
||||
background-color: #BC13FE; /* MODIFIED: Neon Purple */
|
||||
color: #000; /* MODIFIED: Black */
|
||||
}
|
||||
|
||||
.choices__list [role=option] {
|
||||
color: #39FF14; /* MODIFIED: Neon Green */
|
||||
}
|
||||
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted {
|
||||
background-color: #BC13FE; /* MODIFIED: Neon Purple */
|
||||
color: #000; /* MODIFIED: Black */
|
||||
}
|
||||
|
||||
.choices__pointer {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff00ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 16px 12px;
|
||||
height: 100%;
|
||||
width: 20px;
|
||||
margin-top: 0;
|
||||
border: none;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.choices.is-open .choices__pointer {
|
||||
transform: rotate(-180deg);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2300BFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.choices__item--choice {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
@ -16,4 +16,18 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const hiddenElements = document.querySelectorAll('.hidden-left, .hidden-right, .hidden-bottom');
|
||||
hiddenElements.forEach(el => observer.observe(el));
|
||||
|
||||
flatpickr("#visit-date", {
|
||||
dateFormat: "Y-m-d",
|
||||
});
|
||||
|
||||
const ticketType = new Choices('#ticket-type', {
|
||||
searchEnabled: false,
|
||||
itemSelectText: ''
|
||||
});
|
||||
|
||||
const ticketQuantity = new Choices('#ticket-quantity', {
|
||||
searchEnabled: false,
|
||||
itemSelectText: ''
|
||||
});
|
||||
});
|
||||
|
||||
12
index.php
12
index.php
@ -6,6 +6,8 @@
|
||||
<title>Digital Museum</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -39,7 +41,7 @@
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="exhibit-card hidden-left">
|
||||
<img src="https://picsum.photos/seed/exhibit1/800/600" alt="Abstract digital sculpture with flowing lights.">
|
||||
<img src="https://media.istockphoto.com/id/1367089822/vector/blue-glowing-swirl-light-effect-magic-abstract-frame-power-energy-of-circular-element.jpg?s=612x612&w=0&k=20&c=d5kDHchWlUENE1MtqJiiUmCt7SNEYQGlU6y0JvpKAP0=" alt="Abstract digital sculpture with flowing lights.">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Luminous Forms</h5>
|
||||
<p class="card-text">A dance of light and shadow, sculpted in the digital realm.</p>
|
||||
@ -48,16 +50,16 @@
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="exhibit-card hidden-bottom">
|
||||
<img src="https://picsum.photos/seed/exhibit2/800/600" alt="Interactive holographic display of ancient artifacts.">
|
||||
<img src="https://fydn.imgix.net/m/x1000/1f3fcb96-543b-4e38-929d-ad1e13a46c61.jpg?q=75&auto=format,compress&w=480&dpr=1" alt="Interactive holographic display of ancient artifacts." class="holo-relics-img">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Holo-Relics</h5>
|
||||
<h5 class="card-title">Holo relics</h5>
|
||||
<p class="card-text">Ancient history brought to life through interactive holography.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="exhibit-card hidden-right">
|
||||
<img src="https://picsum.photos/seed/exhibit3/800/600" alt="A virtual reality experience of a surreal landscape.">
|
||||
<img src="https://media.licdn.com/dms/image/v2/D4E12AQHegyw27WmVOA/article-cover_image-shrink_720_1280/article-cover_image-shrink_720_1280/0/1669022700627?e=2147483647&v=beta&t=sCWZCe6juhtnPhHwKvSshY07hUoloLMaSj_I6XxoeqE" alt="A virtual reality experience of a surreal landscape.">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">VR Dreams</h5>
|
||||
<p class="card-text">Step into another reality and explore breathtaking virtual worlds.</p>
|
||||
@ -141,6 +143,8 @@
|
||||
</footer>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
|
||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user