Spaces:

MGZON
/

server

Running

App Files Files Community

ibrahimlasfar commited on Apr 3

Commit

b6d6be5

1 Parent(s): 55bfca2

Add privacy policy and terms of service pages for Google OAuth verification

Browse files

Files changed (1) hide show

views/index.ejs +123 -22

views/index.ejs CHANGED Viewed

@@ -3,7 +3,8 @@
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Ibrahim Al-Asfar Portfolio API - Full-stack web developer portfolio backend API">
     <meta name="keywords" content="portfolio, API, Node.js, Express, MongoDB, developer, OAuth, JWT">
     <meta name="author" content="Ibrahim Al-Asfar">
@@ -550,6 +551,85 @@
         .toast.info {
             border-left: 4px solid #3b82f6;
         }
     </style>
     <!-- Structured Data / Schema.org -->
@@ -652,27 +732,21 @@
     <!-- Navigation -->
     <nav class="bg-white/90 backdrop-blur-md shadow-lg sticky top-0 z-50">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between items-center h-16">
                 <div class="flex items-center space-x-3">
-                    <!-- Logo Image -->
-                    <img src="/images/logo.png" alt="Logo" class="logo-img"
-                        onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'gradient-bg rounded-lg p-2\'><i class=\'fas fa-code text-white text-xl\'></i></div>'">
-                    <h1 class="text-xl font-bold gradient-text">
-                        Ibrahim Al-Asfar Portfolio
-                    </h1>
                 </div>
-                <div class="flex items-center space-x-4">
-                    <a href="/api-docs" target="_blank" class="text-gray-600 hover:text-purple-600 transition"
-                        title="API Documentation">
-                        <i class="fas fa-book text-lg"></i>
                     </a>
-                    <a href="https://github.com/Mark-Lasfar" target="_blank"
-                        class="text-gray-600 hover:text-purple-600 transition" title="GitHub">
-                        <i class="fab fa-github text-lg"></i>
                     </a>
-                    <a href="https://linkedin.com/in/ibrahim-elasfar" target="_blank"
-                        class="text-gray-600 hover:text-purple-600 transition" title="LinkedIn">
-                        <i class="fab fa-linkedin text-lg"></i>
                     </a>
                 </div>
             </div>
@@ -955,13 +1029,40 @@
     </div>
     <!-- Footer -->
-    <footer class="bg-gray-800 text-white py-8">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <p class="text-gray-400">&copy; 2026 Ibrahim Al-Asfar. All rights reserved.</p>
-            <p class="text-gray-500 text-sm mt-2">Built with ❤️ using Node.js, Express, MongoDB & TailwindCSS</p>
-            <p class="text-gray-600 text-xs mt-4">
                 <i class="fas fa-code mr-1"></i> API Version 1.0.0
             </p>
         </div>
     </footer>

 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
     <meta name="description" content="Ibrahim Al-Asfar Portfolio API - Full-stack web developer portfolio backend API">
     <meta name="keywords" content="portfolio, API, Node.js, Express, MongoDB, developer, OAuth, JWT">
     <meta name="author" content="Ibrahim Al-Asfar">
         .toast.info {
             border-left: 4px solid #3b82f6;
         }
+        /* تحسينات للموبايل */
+        @media (max-width: 640px) {
+            /* تقليل padding في الأقسام */
+            .py-20 {
+                padding-top: 3rem;
+                padding-bottom: 3rem;
+            }
+            .py-16 {
+                padding-top: 2rem;
+                padding-bottom: 2rem;
+            }
+            /* جعل النص أصغر */
+            .text-5xl {
+                font-size: 2rem;
+            }
+            .text-3xl {
+                font-size: 1.5rem;
+            }
+            .text-xl {
+                font-size: 1rem;
+            }
+            /* تحسين الشبكة */
+            .grid {
+                gap: 1rem;
+            }
+            /* تحسين البطاقات */
+            .card-hover {
+                margin-bottom: 0.5rem;
+            }
+            /* تحسين الهيدر */
+            .h-16 {
+                height: auto;
+                padding: 0.5rem 0;
+            }
+            .flex {
+                flex-wrap: wrap;
+            }
+            /* جعل الأزرار full width */
+            .btn-hover,
+            .gradient-bg {
+                width: 100%;
+                text-align: center;
+                justify-content: center;
+            }
+            /* تحسين OAuth buttons */
+            .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        @media (max-width: 480px) {
+            /* للشاشات الصغيرة جداً */
+            .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4 {
+                grid-template-columns: 1fr;
+            }
+            .flex.flex-wrap.justify-center.gap-8 {
+                gap: 1rem;
+            }
+            .logo-img {
+                width: 30px;
+                height: 30px;
+            }
+        }
     </style>
     <!-- Structured Data / Schema.org -->
     <!-- Navigation -->
     <nav class="bg-white/90 backdrop-blur-md shadow-lg sticky top-0 z-50">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex flex-wrap justify-between items-center py-2 md:py-0 md:h-16">
                 <div class="flex items-center space-x-3">
+                    <img src="/images/logo.png" alt="Logo" class="logo-img">
+                    <h1 class="text-lg md:text-xl font-bold gradient-text">Portfolio API</h1>
                 </div>
+                <div class="flex items-center space-x-3 mt-2 md:mt-0">
+                    <a href="/api-docs" class="text-gray-600 hover:text-purple-600 transition p-2">
+                        <i class="fas fa-book text-base md:text-lg"></i>
                     </a>
+                    <a href="https://github.com/Mark-Lasfar" class="text-gray-600 hover:text-purple-600 transition p-2">
+                        <i class="fab fa-github text-base md:text-lg"></i>
                     </a>
+                    <a href="https://linkedin.com/in/ibrahim-elasfar"
+                        class="text-gray-600 hover:text-purple-600 transition p-2">
+                        <i class="fab fa-linkedin text-base md:text-lg"></i>
                     </a>
                 </div>
             </div>
     </div>
     <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-8 mt-8">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <p class="text-gray-400 text-sm">&copy; 2026 Ibrahim Al-Asfar. All rights reserved.</p>
+            <p class="text-gray-500 text-xs mt-2">Built with ❤️ using Node.js, Express, MongoDB & TailwindCSS</p>
+            <p class="text-gray-600 text-xs mt-3">
                 <i class="fas fa-code mr-1"></i> API Version 1.0.0
             </p>
+            <!-- ✅ روابط قانونية -->
+            <div class="flex flex-wrap justify-center gap-3 mt-4">
+                <a href="/privacy" class="text-gray-500 hover:text-purple-400 text-xs transition">Privacy Policy</a>
+                <span class="text-gray-600 text-xs">•</span>
+                <a href="/terms" class="text-gray-500 hover:text-purple-400 text-xs transition">Terms of Service</a>
+                <span class="text-gray-600 text-xs">•</span>
+                <a href="/sitemap.xml" class="text-gray-500 hover:text-purple-400 text-xs transition">Sitemap</a>
+                <span class="text-gray-600 text-xs">•</span>
+                <a href="/api-docs" class="text-gray-500 hover:text-purple-400 text-xs transition">API Docs</a>
+            </div>
+            <!-- ✅ روابط Social Media -->
+            <div class="flex justify-center gap-4 mt-4">
+                <a href="https://github.com/Mark-Lasfar" target="_blank"
+                    class="text-gray-500 hover:text-white transition">
+                    <i class="fab fa-github text-lg"></i>
+                </a>
+                <a href="https://linkedin.com/in/ibrahim-elasfar" target="_blank"
+                    class="text-gray-500 hover:text-white transition">
+                    <i class="fab fa-linkedin text-lg"></i>
+                </a>
+                <a href="https://twitter.com/MarkLasfar" target="_blank"
+                    class="text-gray-500 hover:text-white transition">
+                    <i class="fab fa-twitter text-lg"></i>
+                </a>
+            </div>
         </div>
     </footer>