updates

cvalfano · Nov 14, 2024 · 2b71378 · 2b71378
1 parent 036ef06
commit 2b71378
Show file tree

Hide file tree

Showing 15 changed files with 650 additions and 243 deletions.
diff --git a/dist/assets/index-BecBjlKL.js b/dist/assets/index-BecBjlKL.js
diff --git a/dist/assets/index-D90fl90f.css b/dist/assets/index-D90fl90f.css
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XJS05C49BL"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-XJS05C49BL');
+    </script>
+    <title>Toon Rescue - Complete SOS Toontown Card Collection</title>
+    <meta name="description" content="Find and filter all SOS Toons in Toontown Rewritten. Comprehensive guide with detailed information about healing, luring, trapping, and other SOS card abilities." />
+    <meta name="keywords" content="Toontown Rewritten, SOS Cards, SOS Toons, TTR, Flippy, Toon-Up, Trap, Lure, Sound, Drop, Restock, Accuracy, Toon Rescue, Toontown Guide" />
+    <!-- Open Graph / Social Media -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Toon Rescue - Complete SOS Toontown Card Collection" />
+    <meta property="og:description" content="Find and filter all SOS Toons in Toontown Rewritten. Comprehensive guide with detailed information about healing, luring, trapping, and other SOS card abilities." />
+    <meta property="og:url" content="https://toonrescue.com" />
+    <script type="module" crossorigin src="/assets/index-BecBjlKL.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-D90fl90f.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -1,13 +1,28 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="en-GB">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>ToonRescue - Complete SOS Toon Card Collection</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XJS05C49BL"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-XJS05C49BL');
+    </script>
+    <title>Toon Rescue - Complete SOS Toontown Card Collection</title>
+    <meta name="description" content="Find and filter all SOS Toons in Toontown Rewritten. Comprehensive guide with detailed information about healing, luring, trapping, and other SOS card abilities." />
+    <meta name="keywords" content="Toontown Rewritten, SOS Cards, SOS Toons, TTR, Flippy, Toon-Up, Trap, Lure, Sound, Drop, Restock, Accuracy, Toon Rescue, Toontown Guide" />
+    <!-- Open Graph / Social Media -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Toon Rescue - Complete SOS Toontown Card Collection" />
+    <meta property="og:description" content="Find and filter all SOS Toons in Toontown Rewritten. Comprehensive guide with detailed information about healing, luring, trapping, and other SOS card abilities." />
+    <meta property="og:url" content="https://toonrescue.com" />
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,17 +1,23 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { SearchBar } from './components/SearchBar';
 import { FilterBar } from './components/FilterBar';
-import { SOSCard as SOSCardComponent } from './components/SOSCard';
+import { SOSCard } from './components/SOSCard';
 import { AccessibilityToggles } from './components/AccessibilityToggles';
 import { sosCards, SOSType } from './data/sosCards';
+import { Navigation } from './components/Navigation';
 import { useTheme } from './context/ThemeContext';
 import { useFont } from './context/FontContext';
+import { useState } from 'react';
+import { Changelog } from './components/Changelog';
+import { PrivacyPolicy } from './components/PrivacyPolicy';
 
-function App() {
-  const { isDarkMode } = useTheme();
-  const { isDyslexicFont } = useFont();
+export default function App() {
   const [selectedType, setSelectedType] = useState<SOSType | 'all'>('all');
   const [searchTerm, setSearchTerm] = useState('');
+  const [showChangelog, setShowChangelog] = useState(false);
+  const [showPrivacyPolicy, setShowPrivacyPolicy] = useState(false);
+  const { isDarkMode } = useTheme();
+  const { isDyslexicFont } = useFont();
 
   const filteredCards = sosCards.filter(card => {
     const matchesType = selectedType === 'all' ? true : card.type === selectedType;
@@ -28,7 +34,9 @@ function App() {
     <div className={`min-h-screen flex flex-col relative w-full overflow-x-hidden ${
       isDarkMode ? 'bg-gray-900' : 'bg-gray-50'
     } ${isDyslexicFont ? 'font-dyslexic' : ''}`}>
-      <header className="bg-[#2E1A87] text-white py-4 sm:py-6 px-3 sm:px-4 sticky top-0 z-10 shadow-lg w-full">
+      <Navigation />
+
+      <header className="bg-[#4526CE] text-white py-4 sm:py-6 px-3 sm:px-4 shadow-lg w-full">
         <div className="max-w-5xl mx-auto relative">
           <div className="flex items-center justify-center mb-3 sm:mb-4">
             <h1 className="text-xl sm:text-3xl md:text-4xl font-bold text-center">
@@ -44,49 +52,80 @@ function App() {
         </div>
       </header>
 
-      <main className="flex-grow max-w-5xl mx-auto px-3 sm:px-4 py-4 sm:py-6 w-full">
+      <main className={`flex-grow max-w-5xl mx-auto px-3 sm:px-4 py-4 sm:py-6 w-full ${
+        isDarkMode ? 'text-white' : 'text-gray-900'
+      }`}>
         <FilterBar 
           selectedType={selectedType}
           onTypeChange={setSelectedType}
         />
 
         <div className="grid gap-2 sm:gap-4 mb-6">
           {sortedCards.map(card => (
-            <SOSCardComponent key={card.id} card={card} />
+            <SOSCard key={card.id} card={card} />
           ))}
         </div>
 
         {sortedCards.length === 0 && (
           <div className="text-center py-8 sm:py-12">
-            <p className={isDarkMode ? 'text-gray-200' : 'text-gray-900'}>
+            <p>
               No SOS cards found matching your criteria.
             </p>
             <button 
               onClick={() => {
                 setSelectedType('all');
                 setSearchTerm('');
               }}
-              className="mt-3 sm:mt-4 text-[#2E1A87] hover:text-[#1E1166] font-medium"
+              className="mt-3 sm:mt-4 text-[#4526CE] hover:text-[#3419A7] font-medium"
             >
               Clear filters
             </button>
           </div>
         )}
       </main>
 
-      <footer className="bg-gray-900 text-gray-100 py-4 sm:py-6 px-3 sm:px-4 mt-auto w-full">
-        <div className="max-w-5xl mx-auto text-center">
-          <div className="flex justify-center mb-4">
+      <footer className="bg-[#4526CE] text-white py-6 w-full mt-auto">
+        <div className="max-w-5xl mx-auto px-3 sm:px-4 text-center space-y-4">
+          <div className="flex justify-center">
             <AccessibilityToggles />
           </div>
-          <div className="text-xs sm:text-sm mt-1 sm:mt-2 text-gray-200">
-            <p>© {new Date().getFullYear()} ToonRescue. All rights reserved.</p>
-            <p>Fan-made tool - Not affiliated with Toontown Rewritten</p>
+
+          <p className="text-xs sm:text-sm">
+            Not affiliated with Toontown Rewritten, ToonHQ or Disney
+          </p>
+
+          <div className="text-xs sm:text-sm">
+            <a 
+              href="mailto:feedback@toonrescue.com"
+              className="text-white hover:text-blue-200 transition-colors underline"
+              aria-label="Send feedback email"
+            >
+              Give Feedback
+            </a>
+            <span className="mx-2">•</span>
+            <button
+              onClick={() => setShowChangelog(true)}
+              className="text-white hover:text-blue-200 transition-colors underline"
+            >
+              Changelog
+            </button>
+            <span className="mx-2">•</span>
+            <button
+              onClick={() => setShowPrivacyPolicy(true)}
+              className="text-white hover:text-blue-200 transition-colors underline"
+            >
+              Privacy Policy
+            </button>
           </div>
+
+          <p className="text-xs sm:text-sm">
+            © {new Date().getFullYear()} ToonRescue. All rights reserved.
+          </p>
         </div>
       </footer>
+
+      <Changelog isOpen={showChangelog} onClose={() => setShowChangelog(false)} />
+      <PrivacyPolicy isOpen={showPrivacyPolicy} onClose={() => setShowPrivacyPolicy(false)} />
     </div>
   );
-}
-
-export default App;
+}
diff --git a/src/components/Changelog.tsx b/src/components/Changelog.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { X } from 'lucide-react';
+import { useTheme } from '../context/ThemeContext';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function Changelog({ isOpen, onClose }: Props) {
+  const { isDarkMode } = useTheme();
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
+      <div className={`relative w-full max-w-2xl rounded-lg shadow-lg ${
+        isDarkMode ? 'bg-gray-800' : 'bg-white'
+      } p-6 max-h-[90vh] overflow-y-auto`}>
+        <button
+          onClick={onClose}
+          className="absolute right-4 top-4 p-1 rounded-full hover:bg-gray-200/20 transition-colours"
+          aria-label="Close changelog"
+        >
+          <X className={`w-5 h-5 ${isDarkMode ? 'text-white' : 'text-gray-600'}`} />
+        </button>
+
+        <h2 className={`text-2xl font-bold mb-6 ${isDarkMode ? 'text-white' : 'text-gray-900'}`}>
+          Changelog
+        </h2>
+
+        <div className={`space-y-6 ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
+          <div>
+            <h3 className={`text-lg font-semibold mb-2 ${isDarkMode ? 'text-white' : 'text-gray-900'}`}>
+              Version 1.0.0 - Initial Release
+            </h3>
+            <div className="space-y-4">
+              <div>
+                <h4 className={`font-medium mb-2 ${isDarkMode ? 'text-gray-200' : 'text-gray-800'}`}>
+                  Key Features:
+                </h4>
+                <ul className="list-disc list-inside space-y-2 ml-2">
+                  <li>
+                    <span className="font-medium">Dark/Light Mode:</span> Automatically adjusts between light and dark themes based on user IP, with an 8pm-8am dark mode setting.
+                  </li>
+                  <li>
+                    <span className="font-medium">Dyslexic-Friendly Font:</span> Toggle option for enhanced accessibility, ensuring better readability for users with dyslexia.
+                  </li>
+                  <li>
+                    <span className="font-medium">AI-Built:</span> Fully constructed and optimised by AI, offering a streamlined and responsive experience.
+                  </li>
+                  <li>
+                    <span className="font-medium">Categories for Quick Filtering:</span> Easily browse through SOS cards by specific categories, helping users find the exact SOS Toon they need with minimal effort.
+                  </li>
+                  <li>
+                    <span className="font-medium">Search for Quick Filtering:</span> Efficient search function allowing users to locate specific SOS Toons instantly.
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ImageWithFallback.tsx b/src/components/ImageWithFallback.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { ImageOff } from 'lucide-react';
+
+interface Props {
+  src: string;
+  alt: string;
+  className?: string;
+}
+
+export function ImageWithFallback({ src, alt, className = '' }: Props) {
+  const [error, setError] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  if (error) {
+    return (
+      <div className={`flex items-center justify-center bg-gray-100/10 rounded ${className}`}>
+        <ImageOff className="w-6 h-6 text-gray-400/50" />
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={`${className} ${isLoading ? 'animate-pulse bg-gray-200/10' : ''}`}
+      onError={() => setError(true)}
+      onLoad={() => setIsLoading(false)}
+      loading="lazy"
+    />
+  );
+}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { ImageWithFallback } from './ImageWithFallback';
+
+export function Navigation() {
+  return (
+    <nav className="w-full py-4 px-3 sm:px-4 bg-[#4526CE] shadow-md sticky top-0 z-50">
+      <div className="max-w-5xl mx-auto flex justify-center items-center">
+        <ImageWithFallback
+          src="https://raw.githubusercontent.com/cvalfano/toonrescue/main/images/logo.png"
+          alt="Toon Rescue"
+          className="h-12 sm:h-14"
+        />
+      </div>
+    </nav>
+  );
+}