From 7d6f680a9a6384b81c922e4611652b6172d43d07 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 8 Feb 2026 20:35:00 +0000
Subject: [PATCH 1/2] Initial plan
From 212a39bb184102284153e0dce067cf800fe6ade4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 8 Feb 2026 20:42:17 +0000
Subject: [PATCH 2/2] feat: Enhance SlotScan AI with modern professional UI/UX
design
Co-authored-by: dev-nayanray <123110672+dev-nayanray@users.noreply.github.com>
---
ai.html | 372 +++++++++++++++++++++++++++++++++++++++++---------------
1 file changed, 272 insertions(+), 100 deletions(-)
diff --git a/ai.html b/ai.html
index e03c914..d03d0ed 100644
--- a/ai.html
+++ b/ai.html
@@ -117,32 +117,38 @@
/* --- 3. Layout & Containers --- */
.app-container {
- max-width: 600px;
+ max-width: 680px;
margin: 0 auto;
- padding: 20px;
+ padding: 24px;
position: relative;
z-index: 1;
}
+
+ @media (max-width: 768px) {
+ .app-container {
+ padding: 16px;
+ }
+ }
/* Glassmorphism Card Style */
.glass-panel {
- background: linear-gradient(135deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.2));
- backdrop-filter: blur(16px);
- -webkit-backdrop-filter: blur(16px);
+ background: linear-gradient(135deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.3));
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
- padding: 28px;
- margin-bottom: 24px;
- box-shadow: var(--shadow-lg);
+ padding: 32px;
+ margin-bottom: 28px;
+ box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.03);
position: relative;
overflow: hidden;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-panel:hover {
- transform: translateY(-5px);
- box-shadow: var(--shadow-lg), var(--shadow-glow);
- border-color: rgba(255, 255, 255, 0.15);
+ transform: translateY(-4px);
+ box-shadow: var(--shadow-lg), var(--shadow-glow), 0 0 0 1px rgba(255, 255, 255, 0.08);
+ border-color: rgba(255, 255, 255, 0.18);
}
.glass-panel::before {
@@ -151,8 +157,15 @@
top: 0;
left: 0;
right: 0;
- height: 1px;
- background: linear-gradient(90deg, transparent, var(--primary), transparent);
+ height: 2px;
+ background: linear-gradient(90deg, transparent, var(--primary-light), var(--accent-gold), transparent);
+ opacity: 0.6;
+ }
+
+ @media (max-width: 768px) {
+ .glass-panel {
+ padding: 24px 20px;
+ }
}
/* --- 4. Typography --- */
@@ -318,15 +331,16 @@
}
.slot-card {
- background: linear-gradient(145deg, rgba(20, 25, 45, 0.7), rgba(15, 20, 40, 0.9));
- border: 1px solid var(--glass-border);
+ background: linear-gradient(145deg, rgba(30, 35, 55, 0.8), rgba(15, 20, 40, 0.95));
+ border: 1.5px solid var(--glass-border);
border-radius: var(--radius-md);
- padding: 20px 16px;
+ padding: 22px 18px;
text-align: center;
cursor: pointer;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
+ backdrop-filter: blur(10px);
}
.slot-card::before {
@@ -336,21 +350,44 @@
left: 0;
right: 0;
height: 3px;
- background: linear-gradient(90deg, var(--primary), var(--accent-gold));
+ background: linear-gradient(90deg, var(--primary), var(--accent-gold), var(--accent-green));
transform: scaleX(0);
transform-origin: left;
- transition: transform 0.4s ease;
+ transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+ }
+
+ .slot-card::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 0;
+ height: 0;
+ border-radius: 50%;
+ background: radial-gradient(circle, rgba(123, 97, 255, 0.15) 0%, transparent 70%);
+ transform: translate(-50%, -50%);
+ transition: width 0.5s ease, height 0.5s ease;
}
.slot-card:hover {
- transform: translateY(-6px);
- border-color: rgba(123, 97, 255, 0.3);
- box-shadow: var(--shadow-md), 0 10px 30px rgba(123, 97, 255, 0.15);
+ transform: translateY(-8px) scale(1.02);
+ border-color: rgba(123, 97, 255, 0.5);
+ box-shadow: var(--shadow-md), 0 15px 40px rgba(123, 97, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+ background: linear-gradient(145deg, rgba(35, 40, 65, 0.95), rgba(20, 25, 50, 1));
}
.slot-card:hover::before {
transform: scaleX(1);
}
+
+ .slot-card:hover::after {
+ width: 200%;
+ height: 200%;
+ }
+
+ .slot-card:active {
+ transform: translateY(-6px) scale(1);
+ }
.slot-provider {
font-size: 11px;
@@ -410,29 +447,40 @@
}
.scan-circle {
- width: 100px;
- height: 100px;
+ width: 120px;
+ height: 120px;
border-radius: 50%;
- border: 4px solid rgba(139, 92, 246, 0.1);
+ border: 5px solid rgba(139, 92, 246, 0.15);
border-top-color: var(--primary);
border-right-color: var(--accent-green);
border-bottom-color: var(--accent-gold);
margin: 0 auto 30px;
- animation: spin 1.2s linear infinite;
+ animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
position: relative;
- box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
+ box-shadow: 0 0 40px rgba(139, 92, 246, 0.3), inset 0 0 20px rgba(139, 92, 246, 0.1);
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
+ }
+
+ .scan-circle::before {
+ content: '🔍';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: 40px;
+ animation: glow 2s ease-in-out infinite;
}
.scan-circle::after {
content: '';
position: absolute;
- top: -8px;
- left: -8px;
- right: -8px;
- bottom: -8px;
+ top: -10px;
+ left: -10px;
+ right: -10px;
+ bottom: -10px;
border-radius: 50%;
- border: 2px solid rgba(139, 92, 246, 0.05);
- animation: spin 2s linear infinite reverse;
+ border: 2px dashed rgba(139, 92, 246, 0.2);
+ animation: spin 3s linear infinite reverse;
}
.progress-container {
@@ -529,37 +577,52 @@
}
.stat-box {
- background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(30, 41, 59, 0.3));
+ background: linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.4));
border-radius: var(--radius-md);
- padding: 24px 16px;
+ padding: 28px 18px;
text-align: center;
- border: 1px solid var(--glass-border);
+ border: 1.5px solid var(--glass-border);
position: relative;
overflow: hidden;
- transition: all 0.3s ease;
+ transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+ }
+
+ .stat-box::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: linear-gradient(90deg, transparent, currentColor, transparent);
+ opacity: 0.5;
}
.stat-box:hover {
- transform: translateY(-5px);
- border-color: rgba(255, 255, 255, 0.2);
+ transform: translateY(-6px) scale(1.02);
+ border-color: rgba(255, 255, 255, 0.25);
+ box-shadow: var(--shadow-md);
}
.stat-val {
- font-size: 36px;
- font-weight: 800;
+ font-size: 40px;
+ font-weight: 900;
display: block;
- margin-top: 8px;
+ margin-top: 10px;
line-height: 1;
+ text-shadow: 0 2px 15px currentColor;
}
.stat-box.good {
- border-color: rgba(16, 185, 129, 0.3);
- background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(16, 185, 129, 0.02));
+ border-color: rgba(16, 185, 129, 0.4);
+ background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03));
+ color: var(--accent-green);
}
.stat-box.bad {
- border-color: rgba(239, 68, 68, 0.3);
- background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(239, 68, 68, 0.02));
+ border-color: rgba(239, 68, 68, 0.4);
+ background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
+ color: var(--accent-red);
}
.casino-list {
@@ -569,21 +632,46 @@
}
.casino-item {
- background: linear-gradient(to right, rgba(20, 25, 45, 0.6), rgba(15, 20, 40, 0.8));
- border: 1px solid var(--glass-border);
+ background: linear-gradient(135deg, rgba(30, 35, 55, 0.7), rgba(15, 20, 40, 0.9));
+ border: 1.5px solid var(--glass-border);
border-radius: var(--radius-md);
- padding: 20px;
+ padding: 24px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
- transition: all 0.3s ease;
+ transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+ overflow: hidden;
+ }
+
+ .casino-item::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(135deg, rgba(123, 97, 255, 0.05) 0%, transparent 50%);
+ opacity: 0;
+ transition: opacity 0.3s ease;
}
.casino-item:hover {
- transform: translateY(-3px);
- border-color: rgba(123, 97, 255, 0.3);
- box-shadow: var(--shadow-sm);
+ transform: translateY(-5px);
+ border-color: rgba(123, 97, 255, 0.5);
+ box-shadow: var(--shadow-md), 0 10px 30px rgba(123, 97, 255, 0.2);
+ }
+
+ .casino-item:hover::before {
+ opacity: 1;
+ }
+
+ @media (max-width: 640px) {
+ .casino-item {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 16px;
+ }
}
.casino-info h4 {
@@ -601,44 +689,38 @@
.tag-best {
position: absolute;
- top: -10px;
+ top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--accent-gold), #f59e0b);
color: #000;
- font-size: 10px;
- font-weight: 800;
- padding: 5px 16px;
+ font-size: 11px;
+ font-weight: 900;
+ padding: 6px 20px;
border-radius: var(--radius-full);
text-transform: uppercase;
- box-shadow: 0 6px 15px rgba(251, 191, 36, 0.3);
+ letter-spacing: 0.5px;
+ box-shadow: 0 8px 20px rgba(251, 191, 36, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
z-index: 2;
+ animation: pulse 2s ease-in-out infinite;
}
.tag-best::after {
- content: '';
+ content: '⭐';
position: absolute;
+ left: -16px;
top: 50%;
- left: -6px;
- width: 12px;
- height: 12px;
- background: var(--accent-gold);
- transform: translateY(-50%) rotate(45deg);
- border-radius: 2px;
- z-index: 1;
+ transform: translateY(-50%);
+ font-size: 14px;
}
.tag-best::before {
- content: '';
+ content: '⭐';
position: absolute;
+ right: -16px;
top: 50%;
- right: -6px;
- width: 12px;
- height: 12px;
- background: var(--accent-gold);
- transform: translateY(-50%) rotate(45deg);
- border-radius: 2px;
- z-index: 1;
+ transform: translateY(-50%);
+ font-size: 14px;
}
/* --- 9. Header & Navigation --- */
@@ -657,16 +739,35 @@
}
.logo-icon {
- width: 44px;
- height: 44px;
+ width: 50px;
+ height: 50px;
border-radius: var(--radius-md);
- background: linear-gradient(135deg, var(--primary), var(--accent-green));
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
display: flex;
align-items: center;
justify-content: center;
- font-size: 20px;
+ font-size: 24px;
color: white;
- box-shadow: 0 6px 20px rgba(123, 97, 255, 0.4);
+ box-shadow: 0 8px 25px rgba(123, 97, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+ position: relative;
+ overflow: hidden;
+ }
+
+ .logo-icon::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+ transform: rotate(45deg);
+ animation: shimmer 3s infinite;
+ }
+
+ .logo-icon i {
+ position: relative;
+ z-index: 1;
}
.logo-text {
@@ -675,11 +776,14 @@
}
.logo-title {
- font-size: 20px;
- font-weight: 800;
- background: linear-gradient(to right, #fff, var(--text-secondary));
+ font-size: 22px;
+ font-weight: 900;
+ background: linear-gradient(135deg, #ffffff, var(--accent-gold), var(--primary-light));
+ background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
+ animation: shimmer 4s infinite linear;
+ letter-spacing: -0.5px;
}
.logo-subtitle {
@@ -698,33 +802,73 @@
margin: 24px 0;
}
+ @media (max-width: 540px) {
+ .stats-grid {
+ grid-template-columns: 1fr;
+ gap: 12px;
+ }
+ }
+
.stat-card {
- background: linear-gradient(135deg, rgba(20, 25, 45, 0.6), rgba(15, 20, 40, 0.8));
+ background: linear-gradient(135deg, rgba(30, 35, 55, 0.7), rgba(15, 20, 40, 0.9));
border-radius: var(--radius-md);
- padding: 20px;
+ padding: 24px 18px;
text-align: center;
- border: 1px solid var(--glass-border);
+ border: 1.5px solid var(--glass-border);
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+ overflow: hidden;
+ }
+
+ .stat-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: radial-gradient(circle at top, rgba(123, 97, 255, 0.1) 0%, transparent 70%);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ }
+
+ .stat-card:hover {
+ transform: translateY(-5px);
+ border-color: rgba(123, 97, 255, 0.4);
+ box-shadow: var(--shadow-sm), 0 10px 25px rgba(123, 97, 255, 0.2);
+ }
+
+ .stat-card:hover::before {
+ opacity: 1;
}
.stat-card-icon {
- width: 48px;
- height: 48px;
+ width: 52px;
+ height: 52px;
border-radius: 50%;
- background: rgba(123, 97, 255, 0.1);
+ background: linear-gradient(135deg, rgba(123, 97, 255, 0.15), rgba(16, 185, 129, 0.1));
display: flex;
align-items: center;
justify-content: center;
- margin: 0 auto 12px;
- font-size: 20px;
+ margin: 0 auto 14px;
+ font-size: 22px;
color: var(--primary-light);
- border: 1px solid rgba(123, 97, 255, 0.2);
+ border: 2px solid rgba(123, 97, 255, 0.25);
+ box-shadow: 0 4px 15px rgba(123, 97, 255, 0.2);
+ transition: all 0.3s ease;
+ }
+
+ .stat-card:hover .stat-card-icon {
+ transform: scale(1.1) rotate(5deg);
+ box-shadow: 0 6px 20px rgba(123, 97, 255, 0.4);
}
.stat-card-value {
- font-size: 24px;
- font-weight: 800;
- margin-bottom: 4px;
+ font-size: 26px;
+ font-weight: 900;
+ margin-bottom: 6px;
color: white;
+ text-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
}
.stat-card-label {
@@ -769,11 +913,32 @@
/* --- 12. Footer --- */
.app-footer {
text-align: center;
- padding: 30px 0 10px;
+ padding: 40px 0 20px;
color: var(--text-muted);
font-size: 13px;
- border-top: 1px solid rgba(255, 255, 255, 0.05);
- margin-top: 30px;
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
+ margin-top: 40px;
+ line-height: 1.8;
+ }
+
+ .app-footer p {
+ margin-bottom: 12px;
+ }
+
+ .app-footer .disclaimer {
+ max-width: 500px;
+ margin: 0 auto 16px;
+ padding: 16px;
+ background: rgba(251, 191, 36, 0.05);
+ border: 1px solid rgba(251, 191, 36, 0.2);
+ border-radius: var(--radius-md);
+ color: var(--accent-gold);
+ font-size: 12px;
+ }
+
+ .app-footer .disclaimer i {
+ color: var(--accent-gold);
+ margin-right: 6px;
}
/* --- 13. Utility Classes --- */
@@ -1093,8 +1258,15 @@ Why RTP Matters
`;