Claude/improve codebase dy tg x

README.md

@@ -1,5 +1,54 @@
-# Google Pay Scratch Card Demo
+# Scratch & Win - Famous People Edition
 
-### A simple scratch card similar to google pay reward cards
+An interactive scratch card game featuring famous historical figures. Inspired by Google Pay reward cards, this modernized version includes random celebrity reveals, responsive design, and enhanced accessibility.
 
-[View it live](https://grohit.com/scratchcard/)
+## Features
+
+- **Random Celebrity Selection**: Each scratch reveals a different famous person from history
+- **8 Historical Figures**: Albert Einstein, Marie Curie, Nelson Mandela, Leonardo da Vinci, Frida Kahlo, Mahatma Gandhi, Rosa Parks, and Stephen Hawking
+- **Fully Responsive**: Works seamlessly on desktop, tablet, and mobile devices
+- **Accessible**: ARIA labels, keyboard navigation, and screen reader support
+- **Modern Design**: Gradient backgrounds, smooth animations, and polished UI
+- **Error Handling**: Graceful fallbacks for image loading failures
+- **Touch Optimized**: Perfect touch interactions for mobile devices
+
+## Technologies Used
+
+- HTML5
+- CSS3 (Flexbox, Grid, Modern Properties)
+- JavaScript (ES6+)
+- jQuery
+- wScratchPad Plugin
+
+## How to Use
+
+1. Open `index.html` in a web browser
+2. Use your mouse or finger to scratch the card surface
+3. Reveal which famous person you've "won"
+4. Click "Reset & Try Again" to get a new random celebrity
+
+## Improvements Over Original
+
+- Removed inline JavaScript (better code organization)
+- Added multiple random celebrity images instead of static image
+- Improved CSS with modern responsive design
+- Enhanced accessibility (ARIA labels, semantic HTML)
+- Added error handling and image preloading
+- Removed duplicate files and broken links
+- Added modern meta tags for SEO and social sharing
+- Improved mobile responsiveness with better breakpoints
+- Added smooth animations and transitions
+
+## Browser Support
+
+Works on all modern browsers:
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+- Mobile browsers (iOS Safari, Chrome Mobile)
+
+## Credits
+
+Original concept: [G Rohit](https://grohit.com/)
+
+Enhanced and modernized by TRB

css/style.css

@@ -1,112 +1,249 @@
+/* CSS Reset & Base Styles */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
 html {
     position: relative;
     min-height: 100%;
+    scroll-behavior: smooth;
 }
 
 body {
     font-family: 'Open Sans', sans-serif;
-    padding: 0;
-    margin: 0;
-    background: #eaeaea;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background-attachment: fixed;
+    color: #333;
+    line-height: 1.6;
+    padding-bottom: 120px;
 }
 
-.container{
- display: block;
- margin: 0 auto;
-    height: 100%;
+/* Header Styles */
+header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
 }
 
-
-#scratchCard {
-    width: 500px;
-    height: 500px;
-
-    display: block;
-    margin: 0 auto;
-
-}
 .title {
     font-family: 'IBM Plex Sans', sans-serif;
     text-transform: uppercase;
     text-align: center;
-    padding: 50px;
+    padding: 30px 20px;
     background-color: #121212;
     color: #ffffff;
-    margin-top: 0;
+    margin: 0;
+    font-size: clamp(1.5rem, 5vw, 2.5rem);
+    letter-spacing: 2px;
+    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Main Container */
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 40px 20px;
+    min-height: calc(100vh - 220px);
+}
+
+/* Scratch Card Styles */
+#scratchCard {
+    width: min(500px, 90vw);
+    height: min(500px, 90vw);
+    display: block;
+    margin: 0 auto 30px;
+    border-radius: 20px;
+    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    touch-action: none;
 }
-.btn  {
+
+#scratchCard:hover {
+    transform: scale(1.02);
+    box-shadow: 0 15px 60px rgba(0, 0, 0, 0.4);
+}
+
+#scratchCard canvas {
+    border-radius: 20px;
+}
+
+/* Button Styles */
+.btn {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    width: 250px;
-    height: 50px;
-    border: none;
-    border-radius: 5px;
-    background: #5900ff;
+    width: min(250px, 90vw);
+    padding: 15px 30px;
+    border: 2px solid transparent;
+    border-radius: 50px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: #ffffff;
     cursor: pointer;
-    transition: 0.2s all ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     font-size: 1rem;
-display: block;
-margin: 50px auto;
-text-align: center;
+    font-weight: 600;
+    font-family: 'IBM Plex Sans', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    display: block;
+    margin: 20px auto;
+    text-align: center;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
 }
-
 
 .btn:hover {
-    border: 1px solid #5900ff;
-    background: #4400c4;
-    color: #ffffff;
-    box-shadow: 2px 2px 10px 0px #5900ff1f;
-    transition: 0.2s all ease;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
+    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
 }
 
-.btn:focus  {
-    outline: none;
+.btn:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.4);
 }
 
-.pageContentWrapper{
-    margin-bottom:100px;
-  } 
+.btn:focus {
+    outline: 3px solid rgba(102, 126, 234, 0.5);
+    outline-offset: 2px;
+}
 
+/* No JavaScript Message */
+.no-js-message {
+    background: #fff3cd;
+    border: 2px solid #ffc107;
+    border-radius: 10px;
+    padding: 20px;
+    margin: 20px;
+    text-align: center;
+    font-weight: 600;
+    color: #856404;
+}
+
+/* Page Content Wrapper */
+.pageContentWrapper {
+    margin-bottom: 120px;
+}
 
-  a {
+/* Link Styles */
+a {
     text-decoration: none;
     color: inherit;
+    transition: all 0.2s ease;
 }
 
-a:hover{
+a:hover {
     text-decoration: underline;
+    opacity: 0.8;
+}
+
+a:focus {
+    outline: 2px solid rgba(255, 255, 255, 0.5);
+    outline-offset: 2px;
 }
 
+/* Footer Styles */
 footer {
     text-align: center;
-   line-height: 100px;
-  background-color: #121212;
-  color: #ffffff;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  height: 100px;
-  width: 100%;
-  overflow: hidden;
-}
-
-.goBack p{
-    margin: 30px;
-    text-align: center;
-    font-size: 20px;
+    padding: 30px 20px;
+    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+    color: #ffffff;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
+}
+
+footer p {
+    margin: 0;
+    font-size: 0.95rem;
+}
+
+footer a {
+    color: #667eea;
+    font-weight: 600;
+}
+
+footer a:hover {
+    color: #764ba2;
+}
+
+/* Loading Animation */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
 }
 
-
-@media all and (max-width:786px){
+.loading {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Responsive Design */
+@media all and (max-width: 786px) {
+    .title {
+        padding: 20px 15px;
+        font-size: 1.5rem;
+        letter-spacing: 1px;
+    }
+
+    #scratchCard {
+        width: min(350px, 90vw);
+        height: min(350px, 90vw);
+        margin-bottom: 20px;
+    }
+
+    .container {
+        padding: 20px 15px;
+        min-height: calc(100vh - 180px);
+    }
+
+    .btn {
+        width: min(200px, 85vw);
+        padding: 12px 25px;
+        font-size: 0.9rem;
+    }
+
+    footer {
+        padding: 20px 15px;
+        font-size: 0.85rem;
+    }
+}
 
+@media all and (max-width: 480px) {
     #scratchCard {
-        width: 300px;
-        height: 300px;
-
-        display: block;
-        margin: 0 auto;
-
+        width: min(300px, 88vw);
+        height: min(300px, 88vw);
+        border-radius: 15px;
+    }
+
+    .title {
+        font-size: 1.2rem;
+    }
+
+    body {
+        padding-bottom: 100px;
+    }
+}
+
+/* Print Styles */
+@media print {
+    header, footer, .btn {
+        display: none;
+    }
+
+    body {
+        background: white;
     }
 }