add scroll notification and make it so passcode works even if wrong passcode

Author: IAmMyGuy21th

src/pages/LinksGrid.css

@@ -199,6 +199,46 @@
     height: 100%;
 }
 
+.scroll-notification {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #5865f2;
+    color: white;
+    padding: 12px 24px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+    animation: slideUp 0.3s ease-out, fadeOut 0.3s ease-out 2.7s;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 1rem;
+}
+
+@keyframes slideUp {
+    from {
+        transform: translate(-50%, 100%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translate(-50%, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
 .links-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

src/pages/LinksGrid.js

@@ -13,6 +13,7 @@ function LinksGrid() {
     const [linkToDelete, setLinkToDelete] = useState(null);
     const [selectedUrl, setSelectedUrl] = useState(null);
     const [isFullscreen, setIsFullscreen] = useState(false);
+    const [showScrollNotification, setShowScrollNotification] = useState(false);
 
     const correctPasscode = 'reactjsforthewin';
 
@@ -138,6 +139,14 @@ function LinksGrid() {
 
     const handleLinkClick = (url) => {
         setSelectedUrl(url);
+        setShowScrollNotification(true);
+        setTimeout(() => {
+            const embedWrapper = document.querySelector('.embed-wrapper');
+            if (embedWrapper) {
+                embedWrapper.scrollIntoView({ behavior: 'smooth' });
+                setTimeout(() => setShowScrollNotification(false), 3000);
+            }
+        }, 100);
     };
 
     const handleFullscreen = () => {
@@ -258,7 +267,7 @@ function LinksGrid() {
                     <div
                         key={index}
                         className="link-card"
-                        onClick={isAuthenticated ? () => handleLinkClick(link.url) : () => setShowError(true)}
+                        onClick={() => handleLinkClick(link.url)}
                     >
                         <h3 className="link-name">{link.name}</h3>
                         <p className="link-description">{link.description}</p>
@@ -284,6 +293,11 @@ function LinksGrid() {
                     </div>
                 ))}
             </div>
+            {showScrollNotification && (
+                <div className="scroll-notification">
+                    📥 Scroll down to view the embedded content
+                </div>
+            )}
             {selectedUrl && (
                 <div className="embed-wrapper">
                     <div id="embed-container" className="embed-container">