| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"> |
| <title>Terms of Service - Portfolio API</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
| <link rel="icon" type="image/png" href="/images/logo.png"> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| @keyframes float { |
| |
| 0%, |
| 100% { |
| transform: translateY(0px); |
| } |
| |
| 50% { |
| transform: translateY(-10px); |
| } |
| } |
| |
| .animate-fadeInUp { |
| animation: fadeInUp 0.6s ease-out; |
| } |
| |
| .animate-float { |
| animation: float 3s ease-in-out infinite; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| |
| .gradient-text { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .card-hover { |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .logo-img { |
| width: 40px; |
| height: 40px; |
| object-fit: contain; |
| border-radius: 10px; |
| } |
| |
| @media (max-width: 640px) { |
| .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; |
| } |
| |
| .h-16 { |
| height: auto; |
| padding: 0.5rem 0; |
| } |
| } |
| </style> |
| </head> |
|
|
| <body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen"> |
|
|
| |
| <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="/" class="text-gray-600 hover:text-purple-600 transition px-2 py-1">Home</a> |
| <a href="/api-docs" class="text-gray-600 hover:text-purple-600 transition px-2 py-1">API Docs</a> |
| <a href="/privacy" class="text-gray-600 hover:text-purple-600 transition px-2 py-1">Privacy</a> |
| <a href="/terms" class="text-purple-600 font-medium px-2 py-1">Terms</a> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="relative overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-10"></div> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
| <div class="text-center animate-fadeInUp"> |
| <div class="inline-flex items-center justify-center p-2 bg-blue-100 rounded-full mb-4"> |
| <i class="fas fa-gavel text-blue-600 mr-2"></i> |
| <span class="text-blue-600 text-sm font-medium">Legal Agreement</span> |
| </div> |
| <h1 class="text-4xl md:text-5xl font-bold gradient-text mb-4">Terms of Service</h1> |
| <p class="text-gray-600 max-w-2xl mx-auto">Last updated: April 2, 2026</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-4xl mx-auto px-4 py-8"> |
| <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 card-hover animate-fadeInUp"> |
| <div class="prose prose-purple max-w-none"> |
| <div class="space-y-8"> |
| |
| <div class="border-b border-gray-100 pb-6"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-check-circle text-white text-sm"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800">1. Acceptance of Terms</h2> |
| </div> |
| <p class="text-gray-600 leading-relaxed">By accessing or using the Portfolio API, you agree to |
| be bound by these Terms of Service. If you disagree with any part of the terms, you may not |
| access the service.</p> |
| </div> |
|
|
| |
| <div class="border-b border-gray-100 pb-6"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-code text-white text-sm"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800">2. API Usage</h2> |
| </div> |
| <p class="text-gray-600 leading-relaxed">You agree to use the API only for lawful purposes and |
| in accordance with these terms. You are responsible for:</p> |
| <ul class="mt-3 space-y-2"> |
| <li class="flex items-center gap-2 text-gray-600"><i |
| class="fas fa-check-circle text-green-500 text-sm"></i> Maintaining the security of |
| your account credentials</li> |
| <li class="flex items-center gap-2 text-gray-600"><i |
| class="fas fa-check-circle text-green-500 text-sm"></i> All activities that occur |
| under your account</li> |
| <li class="flex items-center gap-2 text-gray-600"><i |
| class="fas fa-check-circle text-green-500 text-sm"></i> Complying with all |
| applicable laws and regulations</li> |
| </ul> |
| </div> |
|
|
| |
| <div class="border-b border-gray-100 pb-6"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-tachometer-alt text-white text-sm"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800">3. Rate Limits</h2> |
| </div> |
| <p class="text-gray-600 leading-relaxed">The API is subject to rate limits to ensure fair usage. |
| Excessive usage may result in temporary suspension of access. We reserve the right to modify |
| rate limits at any time.</p> |
| </div> |
|
|
| |
| <div class="border-b border-gray-100 pb-6"> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-sync-alt text-white text-sm"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800">4. Changes to Terms</h2> |
| </div> |
| <p class="text-gray-600 leading-relaxed">We reserve the right to modify these terms at any time. |
| We will notify users of any material changes via email or through the API documentation. |
| Your continued use of the service constitutes acceptance of the modified terms.</p> |
| </div> |
|
|
| |
| <div> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center"> |
| <i class="fas fa-envelope text-white text-sm"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800">5. Contact</h2> |
| </div> |
| <p class="text-gray-600 leading-relaxed">Questions about the Terms of Service should be sent to: |
| </p> |
| <div class="mt-4 p-4 bg-gray-50 rounded-xl"> |
| <a href="mailto:marklasfar@gmail.com" |
| class="text-purple-600 hover:text-purple-700 font-medium flex items-center gap-2"> |
| <i class="fas fa-envelope"></i> |
| marklasfar@gmail.com |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="bg-gray-800 text-white py-8 mt-8"> |
| <div class="max-w-7xl mx-auto px-4 text-center"> |
| <p class="text-gray-400 text-sm">© 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> |
| <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> |
| </div> |
| </footer> |
| </body> |
|
|
| </html> |
