feat(app): add initial Berlayar Sinema event landing page
This commit introduces the complete initial version of the "Berlayar Sinema" event landing page application. It includes the core HTML structure, CSS for styling, and JavaScript for interactivity. Key features implemented: - Responsive layout with Hero, Sponsors, and Film Screening sections. - A registration form that submits data to a backend webhook. - An interactive chat assistant powered by a separate webhook. - Modals for successful registration and a promotional flyer popup. - All necessary static assets, including images, logos, and posters.
This commit is contained in:
Emmanuel Rizky
282
berlayar-sinema-app/style.css
Normal file
282
berlayar-sinema-app/style.css
Normal file
@@ -0,0 +1,282 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
|
||||
url('assets/hero-cover.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
|
||||
}
|
||||
|
||||
.film-card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.film-card .p-6 {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.film-card .p-6 .flex-wrap {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.film-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.sponsor-logo {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.7;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.sponsor-logo:hover {
|
||||
filter: grayscale(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: #6b46c1;
|
||||
box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.2);
|
||||
}
|
||||
|
||||
.title-font {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Form styling */
|
||||
#registration-form {
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#registration-form input,
|
||||
#registration-form textarea,
|
||||
#registration-form select {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#registration-form input:focus,
|
||||
#registration-form textarea:focus,
|
||||
#registration-form select:focus {
|
||||
box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.5);
|
||||
}
|
||||
|
||||
|
||||
#registration-form input::placeholder,
|
||||
#registration-form textarea::placeholder {
|
||||
color: #A9A9A9; /* Solid light gray */
|
||||
}
|
||||
|
||||
#registration-form input:not(:placeholder-shown),
|
||||
#registration-form textarea:not(:placeholder-shown),
|
||||
#registration-form select:not([value=""]) {
|
||||
color: #4B0082; /* Solid dark purple for active input */
|
||||
}
|
||||
|
||||
@keyframes scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
.animate-scroll {
|
||||
display: inline-block;
|
||||
animation: scroll 20s linear infinite;
|
||||
}
|
||||
|
||||
.sponsor-carousel:hover .animate-scroll {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.sponsor-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.sponsor-container::before, .sponsor-container::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100px;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.sponsor-container::before, .sponsor-container::after {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.sponsor-container::before {
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
|
||||
.sponsor-container::after {
|
||||
right: 0;
|
||||
background: linear-gradient(270deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.sponsor-container::before {
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
.sponsor-container::after {
|
||||
background: linear-gradient(270deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.sponsor-track {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
animation: scroll 20s linear infinite;
|
||||
}
|
||||
|
||||
.sponsor-track:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.sponsor-slide {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
/* Improved dropdown styles */
|
||||
#registration-form select {
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
#registration-form select option {
|
||||
background-color: #ffffff;
|
||||
color: #6b46c1;
|
||||
}
|
||||
|
||||
/* Chat window styles */
|
||||
#chatWindow {
|
||||
background: rgba(255, 255, 255, 0.15); /* Slightly more opaque than glass-card for better readability */
|
||||
backdrop-filter: blur(15px); /* Stronger blur for frosted effect */
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3); /* Slightly more visible border */
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); /* Stronger shadow */
|
||||
transition: all 0.3s ease;
|
||||
transform-origin: bottom right;
|
||||
}
|
||||
|
||||
#chatWindow:not(.hidden) {
|
||||
animation: chatFadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes chatFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8) translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
/* Chat bubble styles */
|
||||
.chat-message-received {
|
||||
background-color: #e9d5ff; /* Purple pastel for received messages */
|
||||
color: #4b0082; /* Dark purple text */
|
||||
border-radius: 1.25rem; /* Rounded corners */
|
||||
padding: 0.75rem 1rem;
|
||||
display: inline-block;
|
||||
max-width: 75%; /* Limit width */
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.chat-message-sent {
|
||||
background-color: #6b46c1; /* Purple for sent messages */
|
||||
color: #ffffff; /* White text */
|
||||
border-radius: 1.25rem;
|
||||
padding: 0.75rem 1rem;
|
||||
display: inline-block;
|
||||
max-width: 75%;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Typing indicator styles */
|
||||
.typing-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.typing-indicator span {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
background-color: #4b0082;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
animation: bounce 1.4s infinite both;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(1) {
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.typing-indicator span:nth-child(2) {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.film-carousel-btn-hidden {
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for film carousel */
|
||||
#film-carousel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#film-carousel {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
Reference in New Issue
Block a user