.

Author: gunjan-ghangare

Campus Shelf.css

@@ -877,12 +877,17 @@ main {
 
 /* Animation support */
 [data-animate] {
+    opacity: 1;
+    transform: none;
+}
+
+html.animations-ready [data-animate] {
     opacity: 0;
     transform: translateY(25px);
     transition: opacity 0.6s ease, transform 0.6s ease;
 }
 
-[data-animate].animated {
+html.animations-ready [data-animate].animated {
     opacity: 1;
     transform: translateY(0);
 }

README.md

@@ -23,6 +23,20 @@ Campus Shelf is a fully animated campus library experience that blends a modern
 4. Use the search bar, category chips, and navigation links to explore the animated sections.
 5. Unlock the admin dashboard with the admin password above. The default admin account (`admin@campus-shelf.com`) is provisioned automatically.
 
+## Usage Guide
+- **Registration & verification:** Submit the register form, copy the displayed 6-digit code, and confirm it inside the verification modal to activate your account.
+- **Social sign-in:** Click any provider button to spawn a fully verified demo profile—perfect for quick previews.
+- **Password management:** Use the forgot password flow to request a reset token, then set a new password in the follow-up modal.
+- **Session handling:** Successful sign-in stores a session in `sessionStorage`; logging out clears it and redirects back to the login portal.
+- **Admin unlock:** Open the admin access modal from the dashboard, enter `CampusShelf@Admin2025`, and the guard view swaps to the metrics/table console.
+- **Content exploration:** Search trims the featured grid in real time, while category chips filter by genre with smooth card animations.
+- **Engagement widgets:** The contact form thanks the sender inline and the newsletter button provides instant feedback without page reloads.
+
+## Animations & UX Highlights
+- Elements with `[data-animate]` fade and rise into view via an IntersectionObserver-powered reveal system.
+- Cards, buttons, and navigation affordances use subtle transforms and shadow transitions to communicate state changes.
+- Mobile navigation collapses into a toggle-driven drawer that inherits the same animated styling for consistency.
+
 ## Project Structure
 - `index.html` / `style.css` — authentication portal and modal flows
 - `Campus Shelf.html` / `Campus Shelf.css` — library experience, animations, and admin console

auth.js

@@ -1,6 +1,8 @@
 (() => {
     'use strict';
 
+    document.documentElement.classList.add('animations-ready');
+
     const STORAGE_KEY = 'campusShelfUsers';
     const SESSION_KEY = 'campusShelfSession';
     const PENDING_KEY = 'campusShelfPendingVerification';

script.js

@@ -11,6 +11,8 @@
         return;
     }
 
+    document.documentElement.classList.add('animations-ready');
+
     const bookCards = Array.from(document.querySelectorAll('.book-card'));
     const filterChips = Array.from(document.querySelectorAll('.chip'));
     const searchInput = document.getElementById('searchInput');
@@ -449,6 +451,11 @@
         if (!animatedNodes.length) {
             return;
         }
+        if (typeof IntersectionObserver === 'undefined') {
+            animatedNodes.forEach(node => node.classList.add('animated'));
+            return;
+        }
+
         const observer = new IntersectionObserver(entries => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {

style.css

@@ -607,13 +607,18 @@ footer {
 }
 
 /* Micro animations */
-[data-animate="rise"] {
+[data-animate] {
+    opacity: 1;
+    transform: none;
+}
+
+html.animations-ready [data-animate="rise"] {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.6s ease, transform 0.6s ease;
 }
 
-[data-animate="rise"].animated {
+html.animations-ready [data-animate="rise"].animated {
     opacity: 1;
     transform: translateY(0);
 }