From 969810ee49092903c33b2fdac5d9bef6e84d2ae0 Mon Sep 17 00:00:00 2001
From: Subham1 <sahusubham1975@gmail.com>
Date: Fri, 25 Oct 2024 19:28:41 +0530
Subject: [PATCH 1/2] conditon

---
 index.html      |   2 +-
 terms&cond.html | 546 ++++++++++++++++++++----------------------------
 2 files changed, 231 insertions(+), 317 deletions(-)
diff --git a/index.html b/index.html
index ae179196..c28a481f 100644
--- a/index.html
+++ b/index.html
@@ -5913,7 +5913,7 @@ <h2 style="margin-left: 0rem; margin-top: 0rem;">Quick Links</h2>
           <div>
           <ul>
             <li class="foot-quick"><a href="/sitemap.html" onclick="lenis.scrollTo('#contact')"><i class="fa-solid fa-sitemap"></i> <h4 class="flinks">Site Map</h4></a></li>
-            <li class="foot-quick"><a href="/terms&cond.html"> <i class="fas fa-file-alt"></i><h4 class="flinks">Terms and<br>Conditions</h4></a></li>
+            <li class="foot-quick"><a href="./terms&cond.html"> <i class="fas fa-file-alt"></i><h4 class="flinks">Terms and<br>Conditions</h4></a></li>
           </ul>
           </div>
         </div>
diff --git a/terms&cond.html b/terms&cond.html
index 0b9451d2..6bab12bd 100644
--- a/terms&cond.html
+++ b/terms&cond.html
@@ -3,7 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Book Swap Terms and Conditions</title>
+    <title>Terms of Services - BuddyTrail</title>
+    <link rel="stylesheet" href="terms.css" />
+    <link
+      rel="icon"
+      href="https://img.icons8.com/?size=100&id=11808&format=png&color=000000"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
     <style>
       body {
         user-select: none;
@@ -16,348 +25,253 @@
         color: #333;
         scroll-behavior: smooth;
       }
-
-      /* Style the main container */
-      .book-swap-container {
-        max-width: 900px;
-        margin: 50px auto;
-        background-color: rgba(255, 240, 240, 0.7); /* More transparency */
-        padding: 30px;
-        border-radius: 10px;
-        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
-        text-align: center; /* Center align text */
+      /* Resetting margin and padding */
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
       }
 
-      /* Headings styling */
-      .book-swap-container h1 {
-        font-size: 36px;
-        color: #ff5c5c;
-        margin-bottom: 20px;
-        text-align: center;
+      /* Body styling */
+      body {
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+        margin: 0;
+        padding: 0;
+        color: #333;
+        line-height: 1.6;
       }
 
-      .book-swap-container h2 {
-        font-size: 22px;
-        color: #ff4a4a;
-        margin-bottom: 10px;
-        text-align: center;
+      /* Full-width container for page */
+
+      /* Table of contents styling */
+      .toc {
+        flex-basis: 25%;
+        background-color: #e9ecef;
+        padding: 20px;
+        border-radius: 8px;
+        margin-right: 20px;
+        height: fit-content;
+        position: sticky;
+        top: 80px;
       }
 
-      /* Paragraph styling */
-      .book-swap-container p {
-        font-size: 18px;
-        line-height: 1.8;
-        margin-bottom: 20px;
-        color: #5a5a5a;
+      .toc h2 {
+        font-size: 1.5rem;
+        color: #131313;
       }
 
-      /* Styling the unordered lists */
-      .book-swap-container ul {
-        font-size: 17px;
-        line-height: 1.8;
-        color: #4a4a4a;
-        list-style: none; /* Remove default bullet points */
-        padding-left: 20px; /* Indentation */
+      .toc ul {
+        list-style: none;
+        padding: 0;
       }
 
-      /* Styling list items with custom bullets */
-      .book-swap-container ul li {
+      .toc ul li {
         margin-bottom: 10px;
-        padding-left: 20px;
-        position: relative;
-        font-size: 17px; /* Font size for the list text */
-        font-weight: 500; /* Slightly bolder font */
-        color: #444; /* Darker text color */
-        line-height: 1.6; /* Better line spacing */
-        transition: color 0.2s ease-in-out;
       }
 
-      .book-swap-container ul li:before {
-        content: "\2022"; /* Bullet point */
-        color: #ff5c5c;
+      .toc ul li a {
+        text-decoration: none;
+        color: #eb4228;
         font-weight: bold;
-        font-size: 1.2em;
       }
 
-      /* Hover effect for headings */
-      .book-swap-container h1:hover,
-      .book-swap-container h2:hover {
-        transform: scale(1.05);
-        transition: transform 0.2s ease-in-out;
+      .toc ul li a:hover {
+        text-decoration: underline;
       }
 
-      /* Button-like effect for each section */
-      .book-swap-container h2 {
-        background-color: rgba(255, 153, 153, 0.2);
-        padding: 10px;
-        border-radius: 5px;
-      }
+      /* Main content styling */
 
-      .book-swap-container ul li:hover {
-        color: #ff4a4a; /* Change text color on hover */
-      }
-      /* Paragraph styling */
-      .book-swap-container p {
-        font-size: 17px; /* Font size for paragraph text */
-        font-weight: 500; /* Slightly bolder text */
-        color: #444; /* Darker text color */
-        line-height: 1.7; /* More space between lines */
-        margin-bottom: 20px; /* Space below each paragraph */
-        transition: color 0.2s ease-in-out;
+      h1,
+      h2 {
+        color: #f84f35;
       }
 
-      /* Hover effect for paragraph */
-      .book-swap-container p:hover {
-        color: #ff4a4a; /* Change text color on hover */
-      }
-    </style>
-    <style>
-      /* Circle styles */
-      .circle {
-        height: 24px;
-        width: 24px;
-        border-radius: 50%;
-        background-color: black;
-        position: fixed;
-        top: 0;
-        left: 0;
-        pointer-events: none;
-        z-index: 99999999;
-        transition: transform 0.1s ease-out;
+      h1 {
+        font-size: 2.2rem;
+        text-align: center;
+        margin-bottom: 30px;
+        border-bottom: 2px solid #004085;
+        padding-bottom: 10px;
       }
-    </style>
-    <style>
-      .book-swap-container {
-    max-width: 800px;
-    margin: auto;
-    padding: 20px;
-    background: #f9f9f9;
-    border-radius: 10px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-    font-family: 'Arial', sans-serif;
-    color: #333;
-}
-.book-swap-container:hover {
-    background: #f9f9f9; /* Slightly darker background */
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
-    transform: translateY(-5px);
-}
-
-h1 {
-    color: #2c3e50;
-    font-size: 2.5em;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-h2 {
-    color: #34495e;
-    font-size: 1.8em;
-    margin-top: 20px;
-    border-bottom: 2px solid #bdc3c7;
-    padding-bottom: 5px;
-}
-
-p {
-    line-height: 1.6;
-    margin: 10px 0;
-}
-
-ul {
-    list-style-type: disc;
-    padding-left: 20px;
-    margin: 10px 0;
-}
-
-ul li {
-    margin: 5px 0;
-    padding-left: 10px;
-    position: relative;
-}
-
-ul li::marker {
-    color: #3498db; /* Change bullet color */
-}
-
-ul li::before {
-    content: "📚"; /* Example icon for a book */
-    position: absolute;
-    left: 0;
-    font-size: 1.2em; /* Adjust icon size */
-}
-
-.button {
-    display: block;
-    margin: 20px auto;
-    padding: 10px 20px;
-    background-color: #2980b9;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 1em;
-    text-align: center;
-    transition: background-color 0.3s;
-}
-
-.button:hover {
-    background-color: #3498db;
-}
-
-    </style>
-  </head>
-  <body id="terms&cond">
-    <!-- Circles -->
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="circle"></div>
-    <div class="book-swap-container">
-      <h1>Book Swap Terms and Conditions</h1>
-
-      <h2>1. Introduction</h2>
-      <p>
-        Welcome to our book swap community! By participating in book swaps on
-        our platform, you agree to the following terms and conditions.
-      </p>
-
-      <h2>2. Book Swapping Process</h2>
-      <ul>
-        <li>  Users can list books they want to swap.</li>
-        <li>  Other users can express interest in swapping those books.</li>
-        <li>  Once both parties agree, they arrange the swap.</li>
-      </ul>
 
-      <h2>3. Borrowing Period</h2>
-      <p>
-        Borrowers can keep the swapped book for a specified period (e.g., 2
-        weeks). Extensions may be allowed if both parties agree.
-      </p>
-
-      <h2>4. Late Returns</h2>
-      <p>
-        If a borrower doesn't return the book on time, the following actions may
-        be taken:
-      </p>
-      <ul>
-        <li>  First Reminder: A friendly reminder via email or notification.</li>
-        <li>  Second Reminder: A stronger reminder with a potential warning.</li>
-        <li>  Third Reminder: Suspension of book swap privileges.</li>
-        <li>  Further Actions: Legal steps or penalties (if necessary).</li>
-      </ul>
-
-      <h2>5. Book Condition</h2>
-      <p>
-        Borrowers must return books in the same condition they received them.
-        Minor wear and tear are acceptable, but significant damage may result in
-        penalties.
-      </p>
-
-      <h2>6. Privacy and Data</h2>
-      <p>
-        We respect your privacy. Read our privacy policy for details on data
-        handling.
-      </p>
-
-      <h2>7. Disputes</h2>
-      <p>
-        In case of disputes, we encourage open communication between users. If
-        unresolved, contact our support team for assistance.
-      </p>
-
-      <h2>8. Changes to Terms</h2>
-      <p>We may update these terms. Check back for any changes.</p>
-    </div>
-
-
-    
-    <script>
-      // Coordinates for the cursor
-      const coords = { x: 0, y: 0 };
-      const circles = document.querySelectorAll(".circle");
-
-      // Colors for the circles
-      const colors = [
-        "#ffb56b",
-        "#fdaf69",
-        "#f89d63",
-        "#f59761",
-        "#ef865e",
-        "#ec805d",
-        "#e36e5c",
-        "#df685c",
-        "#d5585c",
-        "#d1525c",
-        "#c5415d",
-        "#c03b5d",
-        "#b22c5e",
-        "#ac265e",
-        "#9c155f",
-        "#950f5f",
-        "#830060",
-        "#7c0060",
-        "#680060",
-        "#60005f",
-        "#48005f",
-        "#3d005e",
-      ];
-
-      // Assign colors and initial position to each circle
-      circles.forEach(function (circle, index) {
-        circle.x = 0;
-        circle.y = 0;
-        circle.style.backgroundColor = colors[index % colors.length];
-      });
-
-      // Update the coordinates when the mouse moves
-      window.addEventListener("mousemove", function (e) {
-        coords.x = e.clientX;
-        coords.y = e.clientY;
-      });
-
-      // Animation function to move the circles
-      function animateCircles() {
-        let x = coords.x;
-        let y = coords.y;
+      h2 {
+        font-size: 1.8rem;
+        margin-top: 40px;
+        margin-bottom: 20px;
+        border-bottom: 1px solid #ddd;
+        padding-bottom: 10px;
+      }
 
-        circles.forEach(function (circle, index) {
-          // Update the position and scale of each circle
-          circle.style.left = x - 12 + "px";
-          circle.style.top = y - 12 + "px";
-          circle.style.scale = (circles.length - index) / circles.length;
+      p {
+        font-size: 1rem;
+        color: #555;
+        margin-bottom: 20px;
+      }
 
-          circle.x = x;
-          circle.y = y;
+      ul {
+        margin-left: 20px;
+        padding-left: 20px;
+        list-style: disc;
+      }
 
-          // Get the next circle in the sequence
-          const nextCircle = circles[index + 1] || circles[0];
-          x += (nextCircle.x - x) * 0.3;
-          y += (nextCircle.y - y) * 0.3;
-        });
+      li {
+        margin-bottom: 10px;
+        color: #555;
+      }
 
-        // Repeat the animation
-        requestAnimationFrame(animateCircles);
+      /* Button styling for links */
+      a {
+        color: #007bff;
+        text-decoration: none;
       }
 
-      // Start the animation
-      animateCircles();
-    </script>
-  </body>
-</html>
+      a:hover {
+        text-decoration: underline;
+      }
 
+      /* Smooth scrolling for anchor links */
+      html {
+        scroll-behavior: smooth;
+      }
+      .container {
+        display: flex;
+        width: 100%;
+        margin: 20px auto;
+        padding: 20px;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        background-attachment: fixed;
+        background-size: cover;
+        border-radius: 8px;
+      }
+      /* Responsive adjustments */
+      @keyframes slideUp {
+        0% {
+          opacity: 0;
+          transform: translateY(50px);
+        }
+        100% {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      
+      /* Apply to h2 and ul in .main-content */
+      .main-content h2, .main-content ul,.main-content p {
+        opacity: 0; /* Start hidden */
+        animation: slideUp 0.6s ease-out forwards; /* Forward keeps it visible after animation */
+        transition: opacity 0.6s ease-out;
+      }
+      @keyframes slideInFromLeft {
+        0% {
+          opacity: 0;
+          transform: translateX(-30px); /* Start 30px to the left */
+        }
+        100% {
+          opacity: 1;
+          transform: translateX(0); /* End in the center */
+        }
+      }
+      
+      .main-content .h1{
+        opacity: 0; /* Start hidden */
+  animation: slideInFromLeft 0.6s ease-out forwards;
+  transition: opacity 0.6s ease-out;
+      }
+      
+      @media (max-width: 768px) {
+        .container {
+          flex-direction: column;
+        }
+
+        .toc {
+          margin-bottom: 20px;
+          margin-right: 0;
+          width: 100%;
+        }
+
+        .main-content {
+          width: 100%;
+        }
+
+        h1 {
+          font-size: 1.8rem;
+        }
+
+        h2 {
+          font-size: 1.4rem;
+        }
+
+        p {
+          font-size: 0.95rem;
+        }
+      }
+    </style>
+    <body>
+      <div class="container">
+        <!-- Table of contents on the left side -->
+        <div class="toc">
+          <h2>Table of Contents</h2>
+          <ul>
+            <li><a href="#section1">1. Introduction</a></li>
+            <li><a href="#section2">2. Book Swapping Process</a></li>
+            <li><a href="#section3">3. Borrowing Period</a></li>
+            <li><a href="#section4">4. Late Returns</a></li>
+            <li><a href="#section5">5. Book Condition</a></li>
+            <li><a href="#section6">6. Privacy and Data</a></li>
+            <li><a href="#section7">7. Disputes</a></li>
+            <li><a href="#section8">8. Changes to Terms</a></li>
+          </ul>
+        </div>
+      
+        <!-- Main content on the right side -->
+        <div class="main-content">
+          <h1>Book Swap Terms and Conditions</h1>
+      
+          <h2 id="section1">1. Introduction</h2>
+          <p>
+            Welcome to our book swap community! By participating in book swaps on our platform, you agree to the following terms and conditions.
+          </p>
+      
+          <h2 id="section2">2. Book Swapping Process</h2>
+          <ul>
+            <li>Users can list books they want to swap.</li>
+            <li>Other users can express interest in swapping those books.</li>
+            <li>Once both parties agree, they arrange the swap.</li>
+          </ul>
+      
+          <h2 id="section3">3. Borrowing Period</h2>
+          <p>
+            Borrowers can keep the swapped book for a specified period (e.g., 2 weeks). Extensions may be allowed if both parties agree.
+          </p>
+      
+          <h2 id="section4">4. Late Returns</h2>
+          <p>If a borrower doesn't return the book on time, the following actions may be taken:</p>
+          <ul>
+            <li>First Reminder: A friendly reminder via email or notification.</li>
+            <li>Second Reminder: A stronger reminder with a potential warning.</li>
+            <li>Third Reminder: Suspension of book swap privileges.</li>
+            <li>Further Actions: Legal steps or penalties (if necessary).</li>
+          </ul>
+      
+          <h2 id="section5">5. Book Condition</h2>
+          <p>Borrowers must return books in the same condition they received them. Minor wear and tear are acceptable, but significant damage may result in penalties.</p>
+      
+          <h2 id="section6">6. Privacy and Data</h2>
+          <p>We respect your privacy. Read our privacy policy for details on data handling.</p>
+      
+          <h2 id="section7">7. Disputes</h2>
+          <p>
+            In case of disputes, we encourage open communication between users. If unresolved, contact our support team for assistance.
+          </p>
+      
+          <h2 id="section8">8. Changes to Terms</h2>
+          <p>We may update these terms. Check back for any changes.</p>
+        </div>
+      </div>
+      
+     
+      
+    </body>
+    </html>
\ No newline at end of file

From 9a83ad2cb96a91a896902905dd9e4f003840c05d Mon Sep 17 00:00:00 2001
From: Subham1 <sahusubham1975@gmail.com>
Date: Fri, 25 Oct 2024 22:26:43 +0530
Subject: [PATCH 2/2] responsive added

---
 terms&cond.html | 77 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 76 insertions(+), 1 deletion(-)

diff --git a/terms&cond.html b/terms&cond.html
index 6bab12bd..7f6d543d 100644
--- a/terms&cond.html
+++ b/terms&cond.html
@@ -14,6 +14,7 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
     />
     <style>
+      
       body {
         user-select: none;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
@@ -207,6 +208,67 @@
           font-size: 0.95rem;
         }
       }
+      
+    </style>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+  
+      /* Flex container for TOC and main content */
+      .container {
+        display: flex;
+        flex-direction: row;
+        gap: 20px;
+        width: 100%; /* Full width of the container */
+        padding: 20px; /* Add padding around container */
+      }
+  
+      /* Table of contents styling */
+      .toc {
+        background-color: #f8f8f8;
+        padding: 15px;
+        border-radius: 8px;
+      }
+  
+      /* Main content styling */
+      .main-content {
+        background-color: #ffffff;
+        padding: 15px;
+        border-radius: 8px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      }
+  
+      /* Adjust layout based on screen width */
+      @media screen and (max-width: 768px) {
+        /* Stack contents vertically on small screens */
+        .container {
+          flex-direction: column;
+        }
+        .toc {
+          width: 100%; /* Full width for better readability */
+          margin-bottom: 20px; /* Add space between TOC and main content */
+          position: relative; /* Avoid overlapping */
+          top: auto; /* Disable sticky positioning */
+        }
+        .main-content {
+          width: 100%; /* Full width */
+        }
+      }
+  
+      @media screen and (min-width: 769px) {
+        .toc {
+          flex-basis: 25%;
+          position: sticky;
+          top: 80px; /* Keeps it in view as the user scrolls */
+        }
+        .main-content {
+          flex-grow: 1; /* Expands to fill available space */
+        }
+      }
+      
     </style>
     <body>
       <div class="container">
@@ -270,7 +332,20 @@ <h2 id="section8">8. Changes to Terms</h2>
           <p>We may update these terms. Check back for any changes.</p>
         </div>
       </div>
-      
+      <script>
+        const toggleButton = document.getElementById('toggle-button');
+        const tableOfContents = document.getElementById('table-of-contents');
+
+        toggleButton.addEventListener('click', () => {
+            if (tableOfContents.style.display === 'none' || tableOfContents.style.display === '') {
+                tableOfContents.style.display = 'block'; // Show the table of contents
+                toggleButton.textContent = 'Hide Table of Contents'; // Update button text
+            } else {
+                tableOfContents.style.display = 'none'; // Hide the table of contents
+                toggleButton.textContent = 'Show Table of Contents'; // Update button text
+            }
+        });
+    </script>
      
       
     </body>
