- remove font-awesome inclusion in favor of inline-SVGs

TobiasMue91 · TobiasMue91 · commit ea55ed0304a5 · 2025-03-07T13:02:01.000+01:00
diff --git a/index.html b/index.html
@@ -10,7 +10,6 @@
     <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
     <link rel="manifest" href="manifest.json">
     <link rel="canonical" href="https://www.gptgames.dev"/>
     <title>GPTGames: Collection of AI-Generated HTML Games and Utilities</title>
@@ -30,7 +29,7 @@
         .search-bar {position:relative; width:300px;}
         .search-bar input {width:100%; padding:0.5rem 2.5rem 0.5rem 1rem; border-radius:var(--radius); border:1px solid var(--border); outline:none; transition:var(--transition);}
         .search-bar input:focus {border-color:var(--primary); box-shadow:0 0 0 3px rgba(60,99,130,0.1);}
-        .search-bar i {position:absolute; right:0.75rem; top:50%; transform:translateY(-50%); color:var(--primary); pointer-events:none;}
+        .search-bar svg {position:absolute; right:0.75rem; top:50%; transform:translateY(-50%); color:var(--primary); pointer-events:none;}
         .view-controls {display:flex; align-items:center; gap:0.5rem;}
         .view-btn {background:none; border:none; font-size:1.2rem; color:var(--primary); cursor:pointer; padding:0.25rem; transition:var(--transition);}
         .view-btn:hover, .view-btn.active {color:var(--secondary);}
@@ -81,7 +80,7 @@
         .list-card .card-title {-webkit-line-clamp:1;}
         .list-card .card-desc {display:block; -webkit-line-clamp:3; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; margin-bottom:auto;}
         .empty-state {text-align:center; padding:3rem 1rem; color:#6c757d;}
-        .empty-state i {font-size:3rem; margin-bottom:1rem; color:var(--gray);}
+        .empty-state svg {font-size:3rem; margin-bottom:1rem; color:var(--gray);}
         .loading {text-align:center; padding:2rem 1rem; display:none;}
         .spinner {display:inline-block; width:40px; height:40px; border:3px solid rgba(60,99,130,0.2); border-radius:50%; border-top-color:var(--primary); animation:spin 1s linear infinite; margin-bottom:1rem;}
         @keyframes spin {to {transform:rotate(360deg);}}
@@ -94,7 +93,7 @@
         .footer-links {display:flex; gap:1.5rem;}
         .footer-link {color:#495057; text-decoration:none; transition:var(--transition); display:flex; align-items:center;}
         .footer-link:hover {color:var(--primary);}
-        .footer-link i {margin-right:0.5rem;}
+        .footer-link svg {margin-right:0.5rem;}
         .back-to-top {position:fixed; bottom:2rem; right:2rem; width:45px; height:45px; background:var(--primary); color:white; border-radius:50%; display:flex; justify-content:center; align-items:center; text-decoration:none; box-shadow:var(--shadow); opacity:0; visibility:hidden; transition:var(--transition); border:none; cursor:pointer;}
         .back-to-top.visible {opacity:1; visibility:visible;}
         .back-to-top:hover {background:var(--primary-hover); transform:translateY(-5px);}
@@ -143,11 +142,17 @@
             .footer-link { color: #b0b3b8; }
             .footer-link:hover { color: var(--primary); }
             .empty-state { color: #b0b3b8; }
-            .empty-state i { color: var(--border); }
+            .empty-state svg { color: var(--border); }
             .back-to-top { background-color: var(--primary); color: white; }
             .pill.game { background: rgba(77, 132, 163, 0.3); color: var(--primary); }
             .pill.tool { background: rgba(245, 168, 73, 0.3); color: var(--secondary); }
         }
+
+        .svg-inline--fa {
+            display: inline-block;
+            vertical-align: -0.125em;
+            overflow: visible;
+        }
     </style>
 </head>
 <body>
@@ -157,11 +162,21 @@
         <div class="search-bar">
             <input type="search" id="searchInput" placeholder="Search games & tools" aria-label="Search">
             <span class="clear-search" id="clearSearch" title="Clear search">✕</span>
-            <i class="fas fa-search"></i>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
+                <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
+            </svg>
         </div>
         <div class="view-controls">
-            <button class="view-btn active tooltip" id="gridViewBtn" data-tooltip="Grid View"><i class="fas fa-th"></i></button>
-            <button class="view-btn tooltip" id="listViewBtn" data-tooltip="List View"><i class="fas fa-list"></i></button>
+            <button class="view-btn active tooltip" id="gridViewBtn" data-tooltip="Grid View">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
+                    <path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm88 64l0 64-88 0 0-64 88 0zm56 0l88 0 0 64-88 0 0-64zm240 0l0 64-88 0 0-64 88 0zM64 224l88 0 0 64-88 0 0-64zm232 0l0 64-88 0 0-64 88 0zm64 0l88 0 0 64-88 0 0-64zM152 352l0 64-88 0 0-64 88 0zm56 0l88 0 0 64-88 0 0-64zm240 0l0 64-88 0 0-64 88 0z"/>
+                </svg>
+            </button>
+            <button class="view-btn tooltip" id="listViewBtn" data-tooltip="List View">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
+                    <path d="M40 48C26.7 48 16 58.7 16 72l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24L40 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM16 232l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0z"/>
+                </svg>
+            </button>
         </div>
     </div>
 </header>
@@ -196,7 +211,10 @@
                 <option value="za">Z-A</option>
             </select>
 
-            <button class="filter-btn random-btn" id="randomBtn"><i class="fas fa-dice"></i> I'm Feeling Lucky</button>
+            <button class="filter-btn random-btn" id="randomBtn">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
+                    <path d="M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>
+                </svg> I'm Feeling Lucky</button>
         </div>
     </div>
 </div>
@@ -214,7 +232,9 @@ <h2 class="section-title" id="mainTitle">Featured Games & Tools</h2>
             <p>Loading more items...</p>
         </div>
         <div class="empty-state" id="emptyState" style="display:none">
-            <i class="fas fa-search"></i>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
+                <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
+            </svg>
             <h3>No results found</h3>
             <p>Try adjusting your search or filters</p>
         </div>
@@ -226,16 +246,24 @@ <h3>No results found</h3>
         <div>&copy; <span id="currentYear"></span> GPTGames</div>
         <div class="footer-links">
             <a href="https://github.com/TobiasMue91/tobiasmue91.github.io" target="_blank" rel="noopener noreferrer" class="footer-link">
-                <i class="fab fa-github"></i>GitHub
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
+                    <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
+                </svg>GitHub
             </a>
             <a href="https://www.reddit.com/user/tobias_mueller" target="_blank" rel="noopener noreferrer" class="footer-link">
-                <i class="fab fa-reddit"></i>Reddit
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
+                    <path d="M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256L37.1 512c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zM349.6 153.6c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34c-34.5 3.7-61.4 33-61.4 68.4l0 .2c-37.5 1.6-71.8 12.3-99 29.1c-10.1-7.8-22.8-12.5-36.5-12.5c-33 0-59.8 26.8-59.8 59.8c0 24 14.1 44.6 34.4 54.1c2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54c0-33-26.8-59.8-59.8-59.8c-13.7 0-26.3 4.6-36.4 12.4c-27.4-17-62.1-27.7-100-29.1l0-.2c0-25.4 18.9-46.5 43.4-49.9l0 0c4.4 18.8 21.3 32.8 41.5 32.8zM177.1 246.9c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6s-31.4-8.8-30.4-30.5s15.4-38.3 32.1-38.3zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9 .8-6.2 3.9-6.5c18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1 .3 5.1 3.6 3.9 6.5z"/>
+                </svg>Reddit
             </a>
         </div>
     </div>
 </footer>
 
-<button class="back-to-top" id="backToTop" aria-label="Back to top"><i class="fas fa-arrow-up"></i></button>
+<button class="back-to-top" id="backToTop" aria-label="Back to top">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa">
+        <path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/>
+    </svg>
+</button>
 
 <script>
     document.getElementById('currentYear').textContent = new Date().getFullYear();
@@ -494,7 +522,7 @@ <h3 class="card-title" title="${item.title}">${item.title}</h3>
             isInitialLoad = false;
         } catch (error) {
             console.error('Error fetching data:', error);
-            mainGrid.innerHTML = `<div class="empty-state"><i class="fas fa-exclamation-circle"></i><h3>Error loading data</h3><p>Please try again later</p></div>`;
+            mainGrid.innerHTML = `<div class="empty-state"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="svg-inline--fa"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg><h3>Error loading data</h3><p>Please try again later</p></div>`;
         }
     }
 
