<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-1RGH7P4VE1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
  
    gtag('config', 'G-1RGH7P4VE1');
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Contact the AcadTools.Online team for support, feedback, bug reports, or feature requests. We&#039;re here to help you master your academic journey.">
  <title>Contact Us | AcadTools.Online</title>
  <link rel="canonical" href="https://acadtools.online/contact">
    <link rel="preload" as="style" href="/css/fonts.css" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/css/fonts.css"></noscript>
  <link rel="icon" href="/assets/logo.png" type="image/png">
  <link rel="preload" as="style" href="/css/main.css?v=202" onload="this.onload=null;this.rel='stylesheet'">
  <link rel="preload" as="style" href="/css/devkit-bg.css" onload="this.onload=null;this.rel='stylesheet'">
  <link rel="preload" as="style" href="/css/components.css?v=202" onload="this.onload=null;this.rel='stylesheet'">
  <link rel="preload" as="style" href="/css/sidebar.css" onload="this.onload=null;this.rel='stylesheet'">
  <link rel="preload" as="style" href="/css/tools.css?v=202" onload="this.onload=null;this.rel='stylesheet'">
  <link rel="preload" as="style" href="/css/mobile.css?v=202" onload="this.onload=null;this.rel='stylesheet'">
  <noscript>
    <link rel="stylesheet" href="/css/main.css?v=202">
    <link rel="stylesheet" href="/css/devkit-bg.css">
    <link rel="stylesheet" href="/css/components.css?v=202">
    <link rel="stylesheet" href="/css/sidebar.css">
    <link rel="stylesheet" href="/css/tools.css?v=202">
    <link rel="stylesheet" href="/css/mobile.css?v=202">
  </noscript>
  
  
  
  
  
  <style>
    /* ── Contact Page Layout ── */
    .contact-hero {
      padding: var(--sp16) 0 var(--sp10);
      position: relative;
      z-index: 1;
    }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: var(--sp10);
      align-items: start;
      position: relative;
      z-index: 1;
      padding-bottom: var(--sp20);
    }

    /* ── Article ── */
    .contact-article h2 {
      font-size: clamp(20px, 3vw, 26px);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--bright);
      margin-top: var(--sp10);
      margin-bottom: var(--sp4);
    }
    .contact-article h2:first-of-type { margin-top: 0; }
    .contact-article p {
      font-size: 15px;
      color: var(--text);
      line-height: 1.75;
      margin-bottom: var(--sp5);
    }
    .contact-article ul {
      list-style: none;
      padding: 0;
      margin: 0 0 var(--sp6);
      display: flex;
      flex-direction: column;
      gap: var(--sp3);
    }
    .contact-article ul li {
      display: flex;
      gap: var(--sp3);
      align-items: flex-start;
      font-size: 14px;
      color: var(--text);
      line-height: 1.6;
    }
    .contact-article ul li::before {
      content: '→';
      color: var(--acid);
      font-family: var(--font-mono);
      font-size: 13px;
      margin-top: 2px;
      flex-shrink: 0;
    }

    /* Info Cards */
    .info-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp4);
      margin: var(--sp8) 0;
    }
    .info-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--r3);
      padding: var(--sp5);
      transition: border-color var(--t-mid);
    }
    .info-card:hover { border-color: var(--border-glow); }
    .info-card-icon { font-size: 22px; margin-bottom: var(--sp3); }
    .info-card-label {
      font-family: var(--font-mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--acid);
      margin-bottom: var(--sp2);
    }
    .info-card-value {
      font-size: 14px;
      color: var(--bright);
      font-weight: 500;
    }
    .info-card-sub {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px;
    }

    /* Response Time Band */
    .response-band {
      background: rgba(0,255,178,0.06);
      border: 1px solid rgba(0,255,178,0.18);
      border-radius: var(--r3);
      padding: var(--sp4) var(--sp5);
      display: flex;
      align-items: center;
      gap: var(--sp4);
      margin: var(--sp8) 0;
    }
    .response-band .dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--acid);
      box-shadow: 0 0 8px var(--acid);
      flex-shrink: 0;
      animation: pulseDot 2s ease-in-out infinite;
    }
    @keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } }
    .response-band-text { font-size: 13px; color: var(--text); }
    .response-band-text strong { color: var(--acid); }

    /* Inline Tip */
    .article-tip {
      background: var(--panel);
      border-left: 2px solid var(--plasma);
      padding: var(--sp4) var(--sp5);
      border-radius: 0 var(--r2) var(--r2) 0;
      margin: var(--sp5) 0;
    }
    .article-tip-label {
      font-family: var(--font-mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--plasma);
      margin-bottom: var(--sp2);
    }
    .article-tip p { font-size: 13px; color: var(--text); margin: 0; line-height: 1.6; }

    /* ── Contact Form Panel ── */
    .form-panel {
      background: var(--panel);
      border: 1px solid var(--border-glow);
      border-radius: var(--r4);
      overflow: hidden;
      position: sticky;
      top: 80px;
      box-shadow: var(--shadow-lg);
    }
    .form-panel-header {
      background: var(--raised);
      border-bottom: 1px solid var(--border);
      padding: var(--sp5) var(--sp6);
      display: flex;
      align-items: center;
      gap: var(--sp4);
    }
    .form-panel-dots { display: flex; gap: 6px; }
    .form-panel-dot { width: 10px; height: 10px; border-radius: 50%; }
    .form-panel-title {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--muted);
      margin-left: auto;
      margin-right: auto;
    }
    .form-panel-body { padding: var(--sp6); }

    /* Form Topic Tags */
    .topic-tabs {
      display: flex;
      gap: var(--sp2);
      flex-wrap: wrap;
      margin-bottom: var(--sp5);
    }
    .topic-tab {
      padding: 5px 12px;
      border-radius: 100px;
      border: 1px solid var(--border);
      background: var(--raised);
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--muted);
      cursor: pointer;
      transition: all var(--t-mid) var(--t-ease);
    }
    .topic-tab:hover { border-color: var(--border-glow); color: var(--text); }
    .topic-tab.active {
      background: var(--acid-halo);
      border-color: var(--acid);
      color: var(--acid);
    }

    /* Success State */
    .form-success {
      display: none;
      text-align: center;
      padding: var(--sp8) var(--sp6);
    }
    .form-success-icon { font-size: 48px; margin-bottom: var(--sp4); }
    .form-success h3 {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      color: var(--acid);
      margin-bottom: var(--sp3);
    }
    .form-success p { color: var(--muted); font-size: 13px; }

    /* Char counter */
    .char-counter {
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--muted);
      text-align: right;
      margin-top: 4px;
    }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      .contact-grid { grid-template-columns: 1fr; }
      .form-panel { position: static; }
      .info-cards { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 520px) {
      .info-cards { grid-template-columns: 1fr; }
    }
  </style>
    <meta name="google-adsense-account" content="ca-pub-8141738229570330">
</head>

<body>

<!-- Background -->
<div class="bg-layer bg-grid"></div>
<div class="bg-layer">
  <div class="bg-orb1"></div>
  <div class="bg-orb2"></div>
  <div class="bg-orb3"></div>
</div>
<div class="bg-layer bg-scan"></div>
<div class="bg-layer bg-noise"></div>

<!-- Navbar -->
<header class="navbar">
    <div class="nav-container">
      <a href="/" class="nav-logo">
        <img src="/assets/logo.png" alt="AcadTools" style="width:30px;height:30px;border-radius:6px;object-fit:cover;">
        <span class="nav-logo-text">Acad<span>Tools</span></span>
      </a>

      <nav class="nav-cats" id="navCats">
        <!-- GPA Tools -->
        <div class="nav-cat-wrap">
          <a class="nav-cat" href="#">
            <span class="nav-cat-dot" style="background:#00FFB2;"></span>
            GPA Tools ▾
            <span class="nav-cat-underline" style="background:#00FFB2;box-shadow:0 0 6px #00FFB2;"></span>
          </a>
          <div class="nav-mega-dropdown">
            <a class="dd-item" href="/tools/gpa-calculator">
              <div class="dd-icon" style="background:rgba(0,255,178,0.08);">🎓</div>
              <div>
                <div class="dd-name">GPA Calculator</div>
                <div class="dd-desc">Semester GPA from courses &amp; grades</div>
              </div>
            </a>
            <a class="dd-item" href="/tools/cgpa-calculator">
              <div class="dd-icon" style="background:rgba(0,255,178,0.08);">📊</div>
              <div>
                <div class="dd-name">CGPA Calculator</div>
                <div class="dd-desc">Cumulative GPA across semesters</div>
              </div>
            </a>
            <a class="dd-item" href="/tools/semester-gpa-calculator">
              <div class="dd-icon" style="background:rgba(0,255,178,0.08);">📅</div>
              <div>
                <div class="dd-name">Semester GPA</div>
                <div class="dd-desc">Quick single semester calculator</div>
              </div>
            </a>
            <a class="dd-item" href="/tools/weighted-gpa-calculator">
              <div class="dd-icon" style="background:rgba(0,255,178,0.08);">⚖️</div>
              <div>
                <div class="dd-name">Weighted GPA</div>
                <div class="dd-desc">AP / Honors / IB course weights</div>
              </div>
            </a>
          </div>
        </div>

        <!-- Planning -->
        <div class="nav-cat-wrap">
          <a class="nav-cat" href="#">
            <span class="nav-cat-dot" style="background:#38BDF8;"></span>
            Planning ▾
            <span class="nav-cat-underline" style="background:#38BDF8;box-shadow:0 0 6px #38BDF8;"></span>
          </a>
          <div class="nav-mega-dropdown">
            <a class="dd-item" href="/tools/required-gpa-calculator">
              <div class="dd-icon" style="background:rgba(56,189,248,0.08);">🎯</div>
              <div>
                <div class="dd-name">Required GPA</div>
                <div class="dd-desc">GPA needed to hit your target</div>
              </div>
            </a>
            <a class="dd-item" href="/tools/final-grade-calculator">
              <div class="dd-icon" style="background:rgba(56,189,248,0.08);">📝</div>
              <div>
                <div class="dd-name">Final Grade Calc</div>
                <div class="dd-desc">Minimum final exam score needed</div>
              </div>
            </a>
            <a class="dd-item" href="/tools/cumulative-gpa-predictor">
              <div class="dd-icon" style="background:rgba(56,189,248,0.08);">🔮</div>
              <div>
                <div class="dd-name">CGPA Predictor</div>
                <div class="dd-desc">Project your future GPA trajectory</div>
              </div>
            </a>
            <a class="dd-item" href="/tools/gpa-improvement-planner">
              <div class="dd-icon" style="background:rgba(56,189,248,0.08);">📈</div>
              <div>
                <div class="dd-name">GPA Improvement</div>
                <div class="dd-desc">Semester-by-semester plan to improve</div>
              </div>
            </a>
          </div>
        </div>

        <!-- Converters -->
        <div class="nav-cat-wrap">
          <a class="nav-cat" href="/tools/gpa-to-percentage-converter">
            <span class="nav-cat-dot" style="background:#F5A623;"></span>
            Converters
            <span class="nav-cat-underline" style="background:#F5A623;box-shadow:0 0 6px #F5A623;"></span>
          </a>
        </div>

        <!-- Special Tools -->
        <div class="nav-cat-wrap">
          <a class="nav-cat" href="#">
            <span class="nav-cat-dot" style="background:#A78BFA;"></span>
            Special Tools ▾
            <span class="nav-cat-underline" style="background:#A78BFA;box-shadow:0 0 6px #A78BFA;"></span>
          </a>
          <div class="nav-mega-dropdown">
            <a class="dd-item" href="/tools/scholarship-gpa-checker">
              <div class="dd-icon" style="background:rgba(167,139,250,0.08);">🏆</div>
              <div>
                <div class="dd-name">Scholarship Checker</div>
                <div class="dd-desc">Check GPA for scholarships</div>
              </div>
            </a>
            <a class="dd-item" href="/tools/honors-gpa-calculator">
              <div class="dd-icon" style="background:rgba(167,139,250,0.08);">🎖️</div>
              <div>
                <div class="dd-name">Honors GPA Calc</div>
                <div class="dd-desc">Cum Laude / Magna / Summa</div>
              </div>
            </a>
            <a class="dd-item" href="/tools/pass-fail-gpa-calculator">
              <div class="dd-icon" style="background:rgba(167,139,250,0.08);">✓✗</div>
              <div>
                <div class="dd-name">Pass/Fail Impact</div>
                <div class="dd-desc">GPA impact of pass/fail courses</div>
              </div>
            </a>
          </div>
        </div>

      </nav>

      <div class="nav-auth-btns">
        <!-- Guest Links -->
        <a href="/login" class="btn btn-primary btn-sm auth-guest"
          style="background:var(--plasma);border-color:var(--plasma);">Log In</a>
        <a href="/register" class="btn btn-secondary btn-sm auth-guest">Sign Up</a>
        <!-- User Links -->
        <span class="auth-user header-username"
          style="display:none; font-size:12px; color:var(--muted); font-family:var(--font-mono); margin-right:8px;">User</span>
        <a href="/settings" class="btn btn-ghost btn-sm auth-user" style="display:none; padding:4px 8px;"
          title="Settings">⚙️</a>
        <a href="/profile" class="btn btn-secondary btn-sm auth-user"
          style="display:none; border-color:var(--plasma); color:var(--plasma);">Profile</a>
        <button onclick="logoutUser()" class="btn btn-ghost btn-sm auth-user"
          style="display:none; color:#FF5F57; border-color:#FF5F5733;">Log Out</button>
      </div>
      <div class="hamburger" id="hamburger"><span class="bar"></span><span class="bar"></span><span class="bar"></span>
      </div>
    </div>
  </header>
<!-- Hero -->
<div class="contact-hero">
  <div class="container">
    <div class="section-label reveal">Support</div>
    <h1 style="font-size: clamp(40px, 6vw, 72px); font-weight: 800; letter-spacing: -0.04em; color: var(--white); margin-bottom: var(--sp4); line-height: 1;" class="reveal">
      Get in <span style="background: linear-gradient(135deg, var(--acid), var(--plasma)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Touch</span>
    </h1>
    <p style="color: var(--muted); font-size: 17px; max-width: 520px; line-height: 1.7;" class="reveal">
      Have a question, spotted a bug, or want to suggest a new feature?
      We'd love to hear from you — our team reads every message.
    </p>
  </div>
</div>

<!-- Main Content Grid -->
<div class="container">
  <div class="contact-grid">

    <!-- ░░ Left: Article ░░ -->
    <article class="contact-article">

      <h2 class="reveal">Welcome to Our Support Channel</h2>
      <p class="reveal">
        At <strong style="color: var(--bright);">AcadTools.Online</strong>, we believe the best tools are shaped by the people who use them.
        Whether you are a high school student calculating your GPA for the first time, or a university
        student planning your path to a 4.0, your feedback directly influences how we grow and improve
        our platform.
      </p>
      <p class="reveal">
        Our team is a small, passionate group dedicated to building the most accurate and student-friendly
        academic calculators on the web. Every single message we receive is read carefully, and we
        genuinely appreciate you taking the time to reach out.
      </p>

      <!-- Response Time -->
      <div class="response-band reveal">
        <span class="dot"></span>
        <span class="response-band-text">
          Our average response time is <strong>within 24 hours</strong> on business days.
          Urgent bugs are usually fixed within <strong>a few hours</strong>.
        </span>
      </div>

      <h2 class="reveal">What You Can Reach Out For</h2>
      <p class="reveal">
        We welcome all kinds of messages. Here are the most common reasons students and educators
        contact us:
      </p>
      <ul class="reveal">
        <li><strong style="color: var(--bright);">Bug Reports —</strong> If a calculator gave you an unexpected result, or a page isn't loading correctly, let us know immediately. Include your device, browser, and the steps to reproduce the issue.</li>
        <li><strong style="color: var(--bright);">Feature Requests —</strong> Missing a specific grading system, a new calculator type, or an export option? We actively prioritise requests that come from our users.</li>
        <li><strong style="color: var(--bright);">Educational Queries —</strong> Not sure how to interpret your GPA output? Our support team can walk you through what your numbers mean and how to use our tools most effectively.</li>
        <li><strong style="color: var(--bright);">Partnership & Collaboration —</strong> Are you an educational institution, teacher, or blogger who would like to partner with us? We are open to collaboration proposals.</li>
        <li><strong style="color: var(--bright);">General Feedback —</strong> Loved the platform? Or found something you didn't like? Either way, we want to know.</li>
      </ul>

      <div class="article-tip reveal">
        <div class="article-tip-label">📌 Pro Tip</div>
        <p>
          When reporting a bug, please include your <strong style="color: var(--bright);">browser name + version</strong>,
          the <strong style="color: var(--bright);">calculator you were using</strong>, and the
          <strong style="color: var(--bright);">input values</strong> that produced the wrong result.
          This helps us fix issues in hours instead of days.
        </p>
      </div>

      <h2 class="reveal">How We Handle Your Information</h2>
      <p class="reveal">
        Your privacy matters to us. When you fill out the contact form, we collect only your name,
        email address, and the content of your message. This information is used solely to respond
        to your inquiry and is never shared with third parties or used for marketing without your
        explicit consent. For full details, please read our
        <a href="/privacy-policy">Privacy Policy</a>.
      </p>

      <!-- Contact Info Cards -->
      <h2 class="reveal">Other Ways to Reach Us</h2>
      <p class="reveal">
        Besides the contact form, you can reach the team through the following channels:
      </p>
      <div class="info-cards reveal-stagger">
        <div class="info-card">
          <div class="info-card-icon">📧</div>
          <div class="info-card-label">Email</div>
          <div class="info-card-value">support@acadtools.online</div>
          <div class="info-card-sub">For all general inquiries</div>
        </div>
        <div class="info-card">
          <div class="info-card-icon">🐞</div>
          <div class="info-card-label">Bug Reports</div>
          <div class="info-card-value">bugs@acadtools.online</div>
          <div class="info-card-sub">Dedicated bug tracking</div>
        </div>
        <div class="info-card">
          <div class="info-card-icon">🤝</div>
          <div class="info-card-label">Partnerships</div>
          <div class="info-card-value">collab@acadtools.online</div>
          <div class="info-card-sub">Institutions & educators</div>
        </div>
        <div class="info-card">
          <div class="info-card-icon">🕐</div>
          <div class="info-card-label">Office Hours</div>
          <div class="info-card-value">Mon – Fri, 9am – 6pm</div>
          <div class="info-card-sub">Pakistan Standard Time (PKT)</div>
        </div>
      </div>

      <h2 class="reveal">Our Commitment to You</h2>
      <p class="reveal">
        AcadTools.Online was built for students, by someone who has been in your shoes. We understand
        the stress of exams, the pressure of maintaining a scholarship GPA, and the confusion of
        different grading systems across universities. Our commitment is simple:
      </p>
      <ul class="reveal">
        <li>We will always offer our core calculators for <strong style="color: var(--bright);">free</strong>, with no hidden fees.</li>
        <li>We will respond to every message with care and respect.</li>
        <li>We will never bombard you with unsolicited emails.</li>
        <li>We will continuously improve based on your real-world feedback.</li>
      </ul>
      <p class="reveal" style="margin-top: var(--sp5);">
        Thank you for being part of the AcadTools community. You are the reason we build.
      </p>

    </article>

    <!-- ░░ Right: Contact Form ░░ -->
    <aside>
      <div class="form-panel reveal">
        <!-- Window Bar -->
        <div class="form-panel-header">
          <div class="form-panel-dots">
            <div class="form-panel-dot" style="background:#FF5F57;"></div>
            <div class="form-panel-dot" style="background:#FFBD2E;"></div>
            <div class="form-panel-dot" style="background:#28CA41;"></div>
          </div>
          <span class="form-panel-title">contact — new message</span>
        </div>

        <!-- Form Body -->
        <div class="form-panel-body">

          <!-- Topic Quick-Select -->
          <div class="form-group">
            <label class="form-label">Topic</label>
            <div class="topic-tabs" id="topicTabs">
              <span class="topic-tab active" data-value="General Inquiry">General</span>
              <span class="topic-tab" data-value="Bug Report">Bug Report</span>
              <span class="topic-tab" data-value="Feature Request">Feature</span>
              <span class="topic-tab" data-value="Partnership">Partnership</span>
              <span class="topic-tab" data-value="Educational Query">Study Help</span>
            </div>
          </div>

          <div id="formSuccess" class="form-success">
            <div class="form-success-icon">✅</div>
            <h3>Message Sent!</h3>
            <p>Thanks for reaching out. We'll get back to you within 24 hours.</p>
            <button class="btn btn-ghost btn-sm" style="margin-top: var(--sp5);" onclick="resetContactForm()">Send Another</button>
          </div>

          <form id="contactForm" name="contact" method="POST" action="#">

            <!-- Hidden subject field synced with topic tabs -->
            <input type="hidden" name="subject" id="subjectHidden" value="General Inquiry">

            <div class="two-col" style="gap: var(--sp4);">
              <div class="form-group">
                <label class="form-label" for="c-name">Full Name</label>
                <input type="text" id="c-name" name="name" class="form-input" placeholder="Your name" required>
              </div>
              <div class="form-group">
                <label class="form-label" for="c-email">Email</label>
                <input type="email" id="c-email" name="email" class="form-input" placeholder="you@email.com" required>
              </div>
            </div>

            <div class="form-group">
              <label class="form-label" for="c-institution">Institution / School <span style="color:var(--muted); font-size:10px;">(optional)</span></label>
              <input type="text" id="c-institution" name="institution" class="form-input" placeholder="E.g. University of Lahore">
            </div>

            <div class="form-group">
              <label class="form-label" for="c-message">Your Message</label>
              <textarea id="c-message" name="message" class="form-input" rows="6" placeholder="Describe your query in as much detail as possible..." maxlength="1000" required></textarea>
              <div class="char-counter"><span id="charCount">0</span> / 1000</div>
            </div>

            <div class="form-group">
              <label class="custom-checkbox-wrapper">
                <input type="checkbox" id="c-privacy" required>
                <div class="checkbox-box"></div>
                <span style="font-size: 12px; color: var(--muted);">
                  I agree to the <a href="/privacy-policy">Privacy Policy</a> and consent to being contacted regarding my query.
                </span>
              </label>
            </div>

            <button type="submit" class="btn btn-primary btn-full" id="sendBtn" style="margin-top: var(--sp3);">
              Send Message &nbsp;→
            </button>

          </form>

          <!-- Bottom note -->
          <p style="font-size: 11px; color: var(--muted); text-align: center; margin-top: var(--sp4); font-family: var(--font-mono);">
            🔒  Your data is never shared with third parties.
          </p>
        </div>
      </div>
    </aside>

  </div>
</div>

<!-- Footer --><footer class="site-footer">
    <div class="footer-grid">
      <!-- Brand -->
      <div class="footer-brand">
        <a href="/" class="footer-logo">
          <div class="footer-logo-mark">A</div>
          <span class="footer-logo-text">Acad<span>Tools</span></span>
        </a>
        <p class="footer-desc">Free academic GPA tools for students worldwide. Calculate, plan, and improve your grades.
        </p>
        <div class="footer-social">
          <a href="#" class="footer-social-btn">𝕏</a>
          <a href="#" class="footer-social-btn">in</a>
          <a href="#" class="footer-social-btn">▶</a>
          <a href="#" class="footer-social-btn">f</a>
        </div>
        <div class="footer-newsletter">
          <div class="footer-nl-title">📬 Get Study Tips</div>
          <div class="footer-nl-sub">Weekly GPA improvement strategies</div>
          <div class="footer-nl-row">
            <input class="footer-nl-input" placeholder="your@email.com" type="email">
            <button class="btn btn-primary btn-sm">Subscribe</button>
          </div>
        </div>
      </div>

      <!-- GPA Tools -->
      <div class="footer-col">
        <div class="footer-col-title"><span class="footer-col-dot" style="background:#00FFB2;"></span>GPA Tools</div>
        <a class="footer-link" href="/tools/gpa-calculator"><span class="footer-link-dot"
            style="background:#00FFB2;"></span>GPA Calculator</a>
        <a class="footer-link" href="/tools/cgpa-calculator"><span class="footer-link-dot"
            style="background:#00FFB2;"></span>CGPA Calculator</a>
        <a class="footer-link" href="/tools/semester-gpa-calculator"><span class="footer-link-dot"
            style="background:#00FFB2;"></span>Semester GPA</a>
        <a class="footer-link" href="/tools/weighted-gpa-calculator"><span class="footer-link-dot"
            style="background:#00FFB2;"></span>Weighted GPA</a>
        <a class="footer-link" href="/tools/gpa-to-percentage-converter"><span class="footer-link-dot"
            style="background:#00FFB2;"></span>GPA to Percentage</a>
      </div>

      <!-- Planning -->
      <div class="footer-col">
        <div class="footer-col-title"><span class="footer-col-dot" style="background:#38BDF8;"></span>Planning</div>
        <a class="footer-link" href="/tools/required-gpa-calculator"><span class="footer-link-dot"
            style="background:#38BDF8;"></span>Required GPA</a>
        <a class="footer-link" href="/tools/final-grade-calculator"><span class="footer-link-dot"
            style="background:#38BDF8;"></span>Final Grade Calc</a>
        <a class="footer-link" href="/tools/cumulative-gpa-predictor"><span class="footer-link-dot"
            style="background:#38BDF8;"></span>CGPA Predictor</a>
        <a class="footer-link" href="/tools/gpa-improvement-planner"><span class="footer-link-dot"
            style="background:#38BDF8;"></span>GPA Improvement</a>
      </div>

      <!-- Special Tools -->
      <div class="footer-col">
        <div class="footer-col-title"><span class="footer-col-dot" style="background:#A78BFA;"></span>Special Tools
        </div>
        <a class="footer-link" href="/tools/scholarship-gpa-checker"><span class="footer-link-dot"
            style="background:#A78BFA;"></span>Scholarship Checker</a>
        <a class="footer-link" href="/tools/honors-gpa-calculator"><span class="footer-link-dot"
            style="background:#A78BFA;"></span>Honors GPA Calc</a>
        <a class="footer-link" href="/tools/pass-fail-gpa-calculator"><span class="footer-link-dot"
            style="background:#A78BFA;"></span>Pass/Fail Impact</a>
      </div>

      <!-- Company -->
      <div class="footer-col">
        <div class="footer-col-title">Company</div>
        <a class="footer-link" href="/blog"><span class="footer-link-dot"
            style="background:rgba(255,255,255,0.3);"></span>Blog</a><a class="footer-link" href="/about"><span
            class="footer-link-dot" style="background:rgba(255,255,255,0.3);"></span>About Us</a>
        <a class="footer-link" href="/contact"><span class="footer-link-dot"
            style="background:rgba(255,255,255,0.3);"></span>Contact Us</a>
        <a class="footer-link" href="/privacy-policy"><span class="footer-link-dot"
            style="background:rgba(255,255,255,0.3);"></span>Privacy Policy</a>
        <a class="footer-link" href="/terms"><span class="footer-link-dot"
            style="background:rgba(255,255,255,0.3);"></span>Terms of Service</a>
        <a class="footer-link" href="/disclaimer"><span class="footer-link-dot"
            style="background:rgba(255,255,255,0.3);"></span>Disclaimer</a>
      </div>
    </div>
    <div class="footer-bottom">
      <div class="footer-bottom-left">© 2026 <span>AcadTools</span>.Online — All rights reserved. Made with ♥ for
        students.</div>
      <div class="footer-bottom-right">
        <a href="/privacy-policy" class="footer-bottom-link">Privacy</a>
        <a href="/terms" class="footer-bottom-link">Terms</a>
        <a href="/disclaimer" class="footer-bottom-link">Disclaimer</a>
      </div>
    </div>
  </footer>

<div class="toast-container" id="toastContainer"></div>

<script src="/js/devkit.js?v=201"></script>
<script src="/js/utils.js"></script>
<script>
  /* ── Topic Tab Logic ── */
  let csrfToken = '';
  fetch('/api/csrf_token.php').then(r=>r.json()).then(d=>{ if(d.status==='success') csrfToken = d.csrf_token; });

  const tabs = document.querySelectorAll('.topic-tab');
  const subjectHidden = document.getElementById('subjectHidden');
  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      tabs.forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
      subjectHidden.value = tab.dataset.value;
    });
  });

  /* ── Character Counter ── */
  const msgArea = document.getElementById('c-message');
  const charCount = document.getElementById('charCount');
  msgArea?.addEventListener('input', () => {
    const len = msgArea.value.length;
    charCount.textContent = len;
    charCount.style.color = len > 900 ? '#FF4757' : len > 700 ? 'var(--gold)' : 'var(--muted)';
  });

  /* ── Form Submission ── */
  const form = document.getElementById('contactForm');
  const sendBtn = document.getElementById('sendBtn');

  form?.addEventListener('submit', async function (e) {
    e.preventDefault();

    // Basic validation
    const name = document.getElementById('c-name').value.trim();
    const email = document.getElementById('c-email').value.trim();
    const msg = document.getElementById('c-message').value.trim();
    const institution = document.getElementById('c-institution').value.trim();
    const privacy = document.getElementById('c-privacy').checked;

    if (!name || !email || !msg || !privacy) {
      window.DevKit.toast('Please fill in all required fields.', 'error');
      return;
    }

    sendBtn.classList.add('loading');
    sendBtn.disabled = true;

    try {
      const response = await fetch('/api/contact.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, email, subject: subjectHidden.value, institution, message: msg, csrf_token: csrfToken })
      });
      const data = await response.json();
      if (data.status === 'success') {
          form.style.display = 'none';
          document.getElementById('formSuccess').style.display = 'block';
          window.DevKit.toast('Message sent successfully!', 'success', 4000);
      } else {
          window.DevKit.toast(data.message || 'Failed to send message', 'error');
      }
    } catch (err) {
        window.DevKit.toast('Network error. Please try again.', 'error');
    } finally {
      sendBtn.classList.remove('loading');
      sendBtn.disabled = false;
    }
  });

  /* ── Reset Form ── */
  function resetContactForm() {
    form.reset();
    form.style.display = 'block';
    document.getElementById('formSuccess').style.display = 'none';
    charCount.textContent = '0';
    tabs.forEach((t, i) => t.classList.toggle('active', i === 0));
    subjectHidden.value = 'General Inquiry';
  }
</script>

</body>
</html>


<!-- Served from static file cache (2026-07-09 09:47:47) -->