Skip to content

Commit

Permalink
PUSH
Browse files Browse the repository at this point in the history
  • Loading branch information
@pakelcomedy
pakelcomedy committed Dec 12, 2024
1 parent 682e615 commit 6649e90
Show file tree
Hide file tree
Showing 9,161 changed files with 974,568 additions and 5 deletions.
The diff you're trying to view is too large. We only load the first 3000 changed files.
5 changes: 0 additions & 5 deletions .gitignore
View file

This file was deleted.

3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"livePreview.defaultPreviewPath": "/index.html"
}
267 changes: 267 additions & 0 deletions assets/css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,267 @@
/* Global Styling */
body {
background-image: radial-gradient(circle, #1c1c1c, #121212, #000000);
font-family: 'Poppins', sans-serif;
color: #e0e0e0;
margin: 0;
padding: 0;
overflow-x: hidden;
}

/* Slot Machine Wrapper */
.slot-wrapper {
max-width: 1100px;
margin: 100px auto;
padding: 50px;
background: linear-gradient(145deg, #2a2a2a, #3b3b3b);
border-radius: 25px;
box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.05);
text-align: center;
position: relative;
z-index: 1;
overflow: hidden;
transition: transform 0.4s ease;
}

.slot-wrapper:hover {
transform: scale(1.05);
}

/* Slot Container */
.slot-container {
display: flex;
justify-content: space-between;
gap: 30px;
margin-bottom: 40px;
width: 100%;
flex-wrap: nowrap;
}

/* Slot Column */
.slot-column {
width: 120px;
height: 450px; /* Ensure enough height for 5 items */
overflow: hidden;
border: 3px solid #444;
border-radius: 20px;
background: linear-gradient(180deg, #2e2e2e, #1a1a1a);
position: relative;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3);
transition: all 0.4s ease;
}

.slot-column:hover {
transform: translateY(-10px);
box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.1), 0 15px 30px rgba(0, 0, 0, 0.5);
}

/* Slot Item */
.slot-item {
width: 100%;
height: 90px; /* Ensure consistent height */
font-size: 2.5rem;
font-weight: bold;
color: #f4d03f;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #555;
background: linear-gradient(145deg, #3a3a3a, #1f1f1f);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
transition: transform 0.4s ease-out, box-shadow 0.3s ease;
}

.slot-item:hover {
transform: scale(1.15);
box-shadow: 0 10px 20px rgba(244, 208, 63, 0.7);
background: linear-gradient(145deg, #ffeaa7, #f4d03f);
color: #000;
}

/* Controls */
.slot-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
background: linear-gradient(145deg, #444, #222);
padding: 25px 35px;
border-radius: 20px;
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.05);
transition: transform 0.3s ease;
gap: 25px;
}

.slot-controls:hover {
transform: translateY(-10px);
box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.4);
}

/* Info Styling */
.slot-controls .info {
font-size: 1.8rem;
color: #f4d03f;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.slot-controls .info span {
display: inline-block;
margin: 0 25px;
}

.slot-controls .info span strong {
color: #e74c3c;
}

/* Start Button */
.btn-danger {
font-size: 1.6rem;
padding: 15px 40px;
background: linear-gradient(145deg, #e74c3c, #c0392b);
color: white;
border: none;
border-radius: 50px;
transition: all 0.3s ease;
box-shadow: 0px 10px 25px rgba(231, 76, 60, 0.5);
}

.btn-danger:hover {
background: linear-gradient(145deg, #ff6f61, #ff4c4c);
transform: scale(1.1);
box-shadow: 0px 15px 30px rgba(231, 76, 60, 0.7);
}

.btn-danger:focus {
outline: none;
box-shadow: 0px 5px 20px rgba(231, 76, 60, 0.8);
}

/* Spotlight Effect for Winning Items */
.spotlight {
animation: spotlight-animation 1.2s ease-in-out forwards;
border: 3px solid #FFD700;
box-shadow: 0 0 20px 10px rgba(255, 215, 0, 0.8);
}

@keyframes spotlight-animation {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}

/* Responsive Design */
@media (max-width: 1024px) {
.slot-wrapper {
padding: 25px;
max-width: 90%;
}

.slot-container {
flex-wrap: nowrap;
gap: 0; /* Remove gaps */
}

.slot-column {
width: 100px;
height: 450px; /* Maintain height for 5 rows */
}

.slot-controls {
flex-direction: column;
align-items: center;
text-align: center;
}

.btn-danger {
font-size: 1.4rem;
padding: 12px 30px;
}
}

@media (max-width: 768px) {
.slot-wrapper {
padding: 15px;
}

.slot-container {
flex-wrap: nowrap; /* Ensure horizontal layout on smaller screens */
gap: 0; /* Ensure columns are tightly packed */
}

.slot-column {
width: calc(100% / 6); /* Dynamically adjust width for 6 columns */
height: 450px; /* Maintain height for 5 rows */
border-radius: 15px; /* Adjust border-radius for smaller screens */
}

.slot-item {
font-size: 2rem;
height: 90px; /* Ensure consistent height */
}

.slot-controls {
padding: 20px 30px;
flex-direction: column;
align-items: center;
}

.btn-danger {
font-size: 1.2rem;
padding: 10px 25px;
}
}

@media (max-width: 480px) {
.slot-wrapper {
padding: 10px;
max-width: 95%;
}

.slot-column {
width: calc(100% / 6); /* Maintain 6 columns */
height: 450px; /* Maintain height for 5 rows */
border-radius: 10px; /* Adjust border-radius for even smaller screens */
}

.slot-item {
font-size: 1.8rem;
height: 90px; /* Ensure consistent height */
}

.slot-controls {
padding: 15px 20px;
gap: 20px;
}

.btn-danger {
font-size: 1.1rem;
padding: 8px 20px;
}
}

@keyframes slotSpin {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-400px);
}
100% {
transform: translateY(0);
}
}

.slot-items {
animation: slotSpin 2s ease-out infinite;
transition: transform 2s ease-out;
}
Loading

0 comments on commit 6649e90

Please sign in to comment.