Spaces:

triflix
/

NotePad

Sleeping

App Files Files Community

triflix commited on Apr 4, 2025

Commit

b464313

verified ·

1 Parent(s): b1957ae

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +61 -29

templates/index.html CHANGED Viewed

@@ -6,9 +6,20 @@
   <title>Notepad App | Developed by Aditya Devarshi</title>
   <!-- SEO Meta Tags -->
-  <meta name="description" content="Notepad App by Aditya Devarshi. Create notes with text, emojis, and image URLs. Check out Aditya's portfolio and social links.">
-  <meta name="keywords" content="Notepad, FastAPI, Tailwind, Aditya Devarshi, Portfolio, Developer, Python, SQLAlchemy">
   <meta name="author" content="Aditya Devarshi">
   <!-- Font Awesome for Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-pap6k1gE+T1/2y5P5/9e6e+fDqBpcFjeDFMEBWfMJrP+y6O78x4AbMFTaQ3WkZs9F6h4vY+PC2ZChT1fIN7S3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -22,27 +33,44 @@
           spacing: {
             '18': '4.5rem',
           },
         }
       }
     }
   </script>
   <style>
-    /* Popup modal styling */
     .modal {
-      transition: opacity 0.25s ease;
     }
     .modal-active {
-      overflow-x: hidden;
-      overflow-y: visible !important;
     }
   </style>
 </head>
 <body class="bg-white min-h-screen">
   <!-- Popup Modal for Developer Info -->
-  <div id="devModal" class="modal fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 pointer-events-none">
     <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 relative">
-      <button onclick="toggleModal()" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
         <i class="fas fa-times"></i>
       </button>
       <h2 class="text-2xl font-bold text-center mb-4">About Aditya Devarshi</h2>
@@ -71,11 +99,6 @@
     </div>
   </div>
-  <!-- Button to Open Developer Popup -->
-  <button onclick="toggleModal()" class="fixed bottom-5 right-5 bg-black text-white p-3 rounded-full shadow-lg hover:bg-gray-800 focus:outline-none">
-    <i class="fas fa-info"></i>
-  </button>
   <!-- Main Container -->
   <div class="container mx-auto px-4 py-8 sm:py-12">
     <div class="max-w-xl mx-auto bg-white rounded-lg shadow-sm border border-gray-200 p-5 sm:p-8">
@@ -146,25 +169,34 @@
       }
     }
-    // Modal toggle functionality
-    function toggleModal() {
       const modal = document.getElementById('devModal');
-      if (modal.classList.contains('opacity-0')) {
-        modal.classList.remove('opacity-0', 'pointer-events-none');
-        document.body.classList.add('modal-active');
-      } else {
-        modal.classList.add('opacity-0', 'pointer-events-none');
-        document.body.classList.remove('modal-active');
-      }
     }
-    // Log developer info in the console
-    console.log("About Aditya Devarshi");
-    console.log("Personal Website: https://www.adityadevarshi.online");
-    console.log("Portfolio: https://github.com/devarshiadi/");
-    console.log("LinkedIn: https://www.linkedin.com/in/aditya-devarshi/");
-    console.log("Instagram: https://www.instagram.com/curseofwitcher/");
-    console.log("Medium: https://medium.com/@devarshia5");
   </script>
 </body>
 </html>

   <title>Notepad App | Developed by Aditya Devarshi</title>
   <!-- SEO Meta Tags -->
+  <meta name="description" content="Notepad App by Aditya Devarshi. Create notes with text, emojis, and image URLs. Explore Aditya's portfolio and social profiles.">
+  <meta name="keywords" content="Notepad, FastAPI, Tailwind, Aditya Devarshi, Portfolio, Developer, Python, SQLAlchemy, Minimalist, Monochrome">
   <meta name="author" content="Aditya Devarshi">
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="Notepad App | Developed by Aditya Devarshi">
+  <meta property="og:description" content="Create notes with text, emojis, and image URLs. Check out Aditya Devarshi's portfolio and social profiles.">
+  <meta property="og:url" content="https://triflix-notepad.hf.space">
+  <meta property="og:image" content="https://triflix-notepad.hf.space/static/og-image.jpg">
+  <!-- Twitter -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Notepad App | Developed by Aditya Devarshi">
+  <meta name="twitter:description" content="Create notes with text, emojis, and image URLs. Explore Aditya Devarshi's work.">
+  <meta name="twitter:image" content="https://triflix-notepad.hf.space/static/og-image.jpg">
   <!-- Font Awesome for Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-pap6k1gE+T1/2y5P5/9e6e+fDqBpcFjeDFMEBWfMJrP+y6O78x4AbMFTaQ3WkZs9F6h4vY+PC2ZChT1fIN7S3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
           spacing: {
             '18': '4.5rem',
           },
+          transitionDuration: {
+            '400': '400ms'
+          }
         }
       }
     }
   </script>
   <style>
+    /* Popup modal styling with animation */
     .modal {
+      transition: opacity 0.4s ease, transform 0.4s ease;
+      transform: translateY(-20px);
     }
     .modal-active {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .modal-hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+    /* Monochrome error effect */
+    .error-effect {
+      animation: shake 0.5s;
+    }
+    @keyframes shake {
+      0%, 100% { transform: translateX(0); }
+      20%, 60% { transform: translateX(-10px); }
+      40%, 80% { transform: translateX(10px); }
     }
   </style>
 </head>
 <body class="bg-white min-h-screen">
   <!-- Popup Modal for Developer Info -->
+  <div id="devModal" class="modal fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 modal-hidden">
     <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 relative">
+      <button onclick="closeModal()" class="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
         <i class="fas fa-times"></i>
       </button>
       <h2 class="text-2xl font-bold text-center mb-4">About Aditya Devarshi</h2>
     </div>
   </div>
   <!-- Main Container -->
   <div class="container mx-auto px-4 py-8 sm:py-12">
     <div class="max-w-xl mx-auto bg-white rounded-lg shadow-sm border border-gray-200 p-5 sm:p-8">
       }
     }
+    // Modal functions
+    function showModal() {
       const modal = document.getElementById('devModal');
+      modal.classList.remove('modal-hidden');
+      modal.classList.add('modal-active');
     }
+    function closeModal() {
+      const modal = document.getElementById('devModal');
+      modal.classList.remove('modal-active');
+      modal.classList.add('modal-hidden');
+    }
+    // Auto-show modal once per user using localStorage
+    window.addEventListener('load', function() {
+      if (!localStorage.getItem('modalShown')) {
+        showModal();
+        localStorage.setItem('modalShown', 'true');
+      }
+    });
+    // Attractive console logs with styling
+    console.log("%cAbout Aditya Devarshi", "color: white; background-color: black; font-size: 20px; padding: 4px 8px;");
+    console.log("%cPersonal Website: %chttps://www.adityadevarshi.online", "color: black; font-weight: bold;", "color: blue;");
+    console.log("%cPortfolio: %chttps://github.com/devarshiadi/", "color: black; font-weight: bold;", "color: blue;");
+    console.log("%cLinkedIn: %chttps://www.linkedin.com/in/aditya-devarshi/", "color: black; font-weight: bold;", "color: blue;");
+    console.log("%cInstagram: %chttps://www.instagram.com/curseofwitcher/", "color: black; font-weight: bold;", "color: blue;");
+    console.log("%cMedium: %chttps://medium.com/@devarshia5", "color: black; font-weight: bold;", "color: blue;");
   </script>
 </body>
 </html>