Merge pull request #21 from aswanthabam/dev

Added Footer and Terms and Conditions Page
aswanthabam · Jul 20, 2024 · bfe1fcc · bfe1fcc
2 parents 6943337 + bf70caf
commit bfe1fcc
Show file tree

Hide file tree

Showing 10 changed files with 338 additions and 6 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -104,8 +104,29 @@ body {
   scroll-behavior: smooth;
 }
 
-/* @media (prefers-color-scheme: dark) { */
-/* html {
-    color-scheme: dark;
+@keyframes rainbow-animation {
+  0% {
+    background-position: 0% 0%;
   }
-} */
+  100% {
+    background-position: 100% 0%;
+  }
+}
+
+.rainbow-text {
+  background: linear-gradient(
+    90deg,
+    #c62828,
+    #e64a19,
+    #fbc02d,
+    #388e3c,
+    #1976d2,
+    #8e24aa,
+    #d32f2f
+  );
+  background-size: 300% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: rainbow-animation 8s linear infinite alternate;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,6 +3,8 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { Topbar } from "@/components/Topbar";
 import MainContainer from "./main";
+import TermsPopup from "@/components/TermsPopup";
+import Footer from "@/components/Footer";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -54,7 +56,10 @@ export default function RootLayout({
       </head>
       <body className={inter.className}>
         <Topbar />
-        <MainContainer>{children}</MainContainer>
+        <MainContainer>
+          {children}
+          <Footer />
+        </MainContainer>
       </body>
     </html>
   );

diff --git a/app/main.module.css b/app/main.module.css
@@ -86,7 +86,6 @@
     backdrop-filter: blur(1px) saturate(200%);
     -webkit-backdrop-filter: blur(16px) saturate(200%);
     background-color: rgba(255, 255, 255, 0.41);
-    border: 1px solid rgba(255, 255, 255, 0.125);
     .titleSection {
       width: 100%;
       display: flex;

diff --git a/app/main.tsx b/app/main.tsx
@@ -12,6 +12,8 @@ import {
   PopupProvider,
   showPopup,
 } from "@/context/PopupContext";
+import TermsPopup from "@/components/TermsPopup";
+import Footer from "@/components/Footer";
 
 export default function MainContainer({
   children,
@@ -82,6 +84,10 @@ export default function MainContainer({
       )`
     );
     if (!statusLoaded) {
+      if (window.location.pathname.includes("/terms-and-conditions")) {
+        setLoader({ text: "", visible: false });
+        return;
+      }
       setLoader!({ text: "Awaking Server", visible: true });
       fetch(`${process.env.NEXT_PUBLIC_API_URL}/server/status`)
         .then(async (res) => {
@@ -176,6 +182,7 @@ export default function MainContainer({
     <LoaderProvider loader={loader} setLoader={setLoader}>
       <FileProvider file={file} setFile={setFile}>
         <PopupProvider popup={popup} setPopup={setPopup}>
+          <TermsPopup />
           <main
             id="main"
             onDragOver={mainDragOver}

diff --git a/app/terms-and-conditions/page.module.css b/app/terms-and-conditions/page.module.css
@@ -0,0 +1,27 @@
+.terms {
+  background: #ffffff;
+  width: calc(100% - 200px);
+  height: 100%;
+  min-height: 100vh;
+  padding: 40px;
+  display: flex;
+  justify-content: start;
+  align-items: start;
+  flex-direction: column;
+  gap: 30px;
+  margin: 100px;
+
+  .list {
+    margin-left: 20px;
+  }
+}
+
+@media only screen and (max-width: 728px) {
+  .terms {
+    padding: 20px;
+    margin: 0;
+    padding-bottom: 100px;
+    width: 100%;
+    padding-top: 100px;
+  }
+}
diff --git a/app/terms-and-conditions/page.tsx b/app/terms-and-conditions/page.tsx
@@ -0,0 +1,146 @@
+import styles from "./page.module.css";
+
+export default function Terms() {
+  return (
+    <div className={styles.terms}>
+      <h1 id="dropit-terms-and-conditions" className={styles.heading}>
+        DropIT Terms and Conditions
+      </h1>
+      <p className={styles.paragraph}>
+        <strong>Last Updated:</strong> 2024 July 20, Saturday
+      </p>
+      <p className={styles.paragraph}>
+        <h3>1. Acceptance of Terms</h3>
+      </p>
+      <p className={styles.paragraph}>
+        By accessing or using DropIT (the &quot;Service&quot;), you agree to be
+        bound by these Terms and Conditions (the &quot;Terms&quot;). If you do
+        not agree to these Terms, you may not use the Service.
+      </p>
+      <p className={styles.paragraph}>
+        <h3>2. Description of Service</h3>
+      </p>
+      <p className={styles.paragraph}>
+        DropIT is a file-sharing platform that allows users to share files using
+        a memorable code without the need for an account. The Service includes
+        the following features:
+      </p>
+      <ul className={styles.list}>
+        <li className={styles.listItem}>Simple and Fast File Sharing</li>
+        <li className={styles.listItem}>No Login Required</li>
+        <li className={styles.listItem}>Memorable Sharing Codes</li>
+        <li className={styles.listItem}>Security and Privacy</li>
+        <li className={styles.listItem}>User-Friendly Interface</li>
+      </ul>
+      <p className={styles.paragraph}>
+        <h3>3. User Responsibilities</h3>
+      </p>
+      <ul className={styles.list}>
+        <li className={styles.listItem}>
+          <strong>You are solely responsible</strong> for the files you upload,
+          share, and download using the Service.
+        </li>
+        <li className={styles.listItem}>
+          You agree to use the Service only for lawful purposes and in
+          compliance with all applicable laws and regulations.
+        </li>
+        <li className={styles.listItem}>
+          You are responsible for maintaining the confidentiality of the sharing
+          codes you generate.
+        </li>
+        <li className={styles.listItem}>
+          You agree not to use the Service to upload, post, or transmit any
+          content that is unlawful, harmful, threatening, abusive, harassing,
+          defamatory, vulgar, obscene, or otherwise objectionable.
+        </li>
+      </ul>
+      <p className={styles.paragraph}>
+        <h3>4. Disclaimer of Warranties</h3>
+      </p>
+      <ul className={styles.list}>
+        <li className={styles.listItem}>
+          DropIT is provided &quot;<strong>as is</strong>&quot; and &quot;
+          <strong>as available</strong>&quot; without any warranties of any
+          kind, either express or implied.
+        </li>
+        <li className={styles.listItem}>
+          <strong>We do not guarantee</strong> that the Service will be
+          available at all times or without interruption.
+        </li>
+        <li className={styles.listItem}>
+          <strong>We do not guarantee the security</strong> of the files shared
+          through the Service and are not responsible for any unauthorized
+          access, use, or disclosure of files.
+        </li>
+      </ul>
+      <p className={styles.paragraph}>
+        <h3>5. Limitation of Liability</h3>
+      </p>
+      <ul className={styles.list}>
+        <li className={styles.listItem}>
+          DropIT shall not be liable for any direct, indirect, incidental,
+          special, consequential, or exemplary damages, including but not
+          limited to damages for loss of profits, goodwill, use, data, or other
+          intangible losses resulting from the use or the inability to use the
+          Service.
+        </li>
+        <li className={styles.listItem}>
+          We are <strong>not responsible for any legal issues</strong> arising
+          from the content of the files uploaded, shared, or downloaded using
+          the Service. All responsibility lies with the user.
+        </li>
+      </ul>
+      <p className={styles.paragraph}>
+        <h3>6. Indemnification</h3>
+      </p>
+      <p className={styles.paragraph}>
+        You agree to indemnify and hold harmless DropIT, its affiliates, and
+        their respective officers, directors, employees, and agents from and
+        against any and all claims, damages, obligations, losses, liabilities,
+        costs, or debt, and expenses (including but not limited to
+        attorney&#39;s fees) arising from:
+      </p>
+      <ul className={styles.list}>
+        <li className={styles.listItem}>
+          <strong>Your use of and access to the Service.</strong>
+        </li>
+        <li className={styles.listItem}>
+          <strong>Your violation of any term</strong> of these Terms.
+        </li>
+        <li className={styles.listItem}>
+          Your violation of any third-party right, including without limitation
+          any copyright, property, or privacy right.
+        </li>
+        <li className={styles.listItem}>
+          Any claim that your use of the Service caused damage to a third party.
+        </li>
+      </ul>
+      <p className={styles.paragraph}>
+        <h3>7. Modification of Terms</h3>
+      </p>
+      <p className={styles.paragraph}>
+        We reserve the right to <strong>modify these Terms at any time</strong>.
+        Any changes will be effective immediately upon posting the revised Terms
+        on the DropIT website. Your continued use of the Service after the
+        posting of the revised Terms constitutes your acceptance of the changes.
+      </p>
+      <p className={styles.paragraph}>
+        <h3>8. Termination</h3>
+      </p>
+      <p className={styles.paragraph}>
+        We reserve the right to{" "}
+        <strong>terminate or suspend your access to the Service </strong>
+        at any time, without prior notice or liability, for any reason
+        whatsoever, including but not limited to a breach of these Terms.
+      </p>
+      <p className={styles.paragraph}>
+        <h3>9. Governing Law</h3>
+      </p>
+      <p className={styles.paragraph}>
+        These Terms shall be governed and construed in accordance with the laws
+        of <strong>India</strong>, without regard to its conflict of law
+        provisions.
+      </p>
+    </div>
+  );
+}
diff --git a/components/Footer.module.css b/components/Footer.module.css
@@ -0,0 +1,31 @@
+.footer {
+  width: 100%;
+  background: #ffffff90;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: #fff;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 10px;
+  .text {
+    padding: 10px;
+    text-align: center;
+    .link {
+      text-decoration: underline;
+      font-weight: bold;
+      color: inherit;
+    }
+  }
+  .links {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    .link {
+      font-size: 12px;
+      text-decoration: underline;
+      color: #00000090;
+    }
+  }
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -0,0 +1,24 @@
+import styles from "./Footer.module.css";
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <p className={`${styles.text} rainbow-text`}>
+        Made with ♡ by{" "}
+        <a
+          className={styles.link}
+          href="https://aswanthvc.me/?ref=dropit"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Aswanth V C
+        </a>
+      </p>
+      <div className={styles.links}>
+        <a href="/terms-and-conditions" className={styles.link}>
+          Terms and Conditions
+        </a>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/TermsPopup.module.css b/components/TermsPopup.module.css
@@ -0,0 +1,43 @@
+.popup {
+  width: 100%;
+  height: auto;
+  padding: 10px 100px;
+  background: #ffffffa0;
+  z-index: 100;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0px 0px 10px 0px #1d6f4ca0;
+  &.hidden {
+    display: none;
+  }
+  .content {
+    font-size: 14px;
+    .link {
+      text-decoration: underline;
+    }
+  }
+
+  .closeButton {
+    background: #9dffea;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    font-size: 12px;
+    cursor: pointer;
+    color: #000;
+    font-weight: bold;
+  }
+}
+
+@media only screen and (max-width: 728px) {
+  .popup {
+    padding: 10px 20px;
+    .content {
+      font-size: 12px;
+    }
+  }
+}
diff --git a/components/TermsPopup.tsx b/components/TermsPopup.tsx
@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import styles from "./TermsPopup.module.css";
+
+export default function TermsPopup() {
+  useEffect(() => {
+    if (localStorage.getItem("termsAccepted") == "1") {
+      setAccepted(true);
+    }
+  }, []);
+  const [accepted, setAccepted] = useState(false);
+  const acceptTerms = () => {
+    localStorage.setItem("termsAccepted", "1");
+    setAccepted(true);
+  };
+  return (
+    <div className={styles.popup + " " + (accepted ? styles.hidden : "")}>
+      <p className={styles.content}>
+        Welcome to DropIT! By continuing to use our service, you agree to our{" "}
+        <a className={styles.link} href="/terms-and-conditions" target="_blank">
+          Terms and Conditions
+        </a>
+        .
+      </p>
+      <button onClick={acceptTerms} className={styles.closeButton}>
+        Understood
+      </button>
+    </div>
+  );
+}