<!DOCTYPE html>
<html>
  <head>
    <title>YouTube bot comments remover</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/css/bootstrap-grid.min.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="/css/bootstrap-reboot.min.css"
    />
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
    <link
      rel="stylesheet"
      href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"
    />
  </head>
  <body id="home">
    <!-- Navbar section -->
    <nav class="navbar-light site-header-small sticky-top py-1 bg-light">
      <div
        class="container d-flex flex-column flex-md-row justify-content-between"
      >
        <a class="navbar-brand">
          <img
            src="/images/logo.png"
            width="auto"
            height="30"
            class="d-inline-block align-top"
            alt="Website logo"
          />
          YouTube bot comments remover
        </a>
        <a class="py-2 d-none d-md-inline-block" href="#why"
          >Why using this web app?</a
        >
      </div>
    </nav>

    <!-- First section -->
    <div
      class="position-relative overflow-hidden p-3 p-md-5 m-md-1 text-center bg-light"
    >
      <div class="col-md-7 p-lg-5 mx-auto my-5">
        <h1 class="display-4 font-weight-normal">
          YouTube bot comments remover
        </h1>
        <p class="col-md-6 mx-auto lead font-weight-normal">
          A Node.js application for the webbrowser that let's you remove
          unwanted comments on your own latest YouTube video. Click the button
          below to start the process.
        </p>
        <a href="<%=url%>" class="btn btn-danger">YouTube login</a>
      </div>
      <div class="product-device shadow-sm d-none d-md-block"></div>
      <div
        class="product-device product-device-2 shadow-sm d-none d-md-block"
      ></div>
    </div>

    <!-- Feature section -->
    <div class="bg-light py-5 service-1">
      <div class="container">
        <!-- Row  -->
        <div class="row">
          <!-- Column -->
          <div class="col-md-4 wrap-service1-box">
            <div class="card border-0 card-shadow mb-4">
              <div class="card-body text-center">
                <div class="my-3">
                  <img src="/images/step1.png" alt="Step 1: Login image" />
                </div>
                <h6 class="font-weight-medium">Step 1: Login</h6>
                <p class="mt-3">
                  Login to your Google / YouTube acount. Choose the Youtube
                  acount direct if possible.
                </p>
              </div>
            </div>
          </div>
          <!-- Column -->
          <div class="col-md-4 wrap-service1-box">
            <div class="card border-0 card-shadow mb-4">
              <div class="card-body text-center">
                <div class="my-3">
                  <img
                    src="/images/step2.png"
                    alt="Step 2: Permissions from google"
                  />
                </div>
                <h6 class="font-weight-medium">
                  Step 2: Give one time permission
                </h6>
                <p class="mt-3">
                  The app will ask one time for permissions, after that nothing
                  will be saved to a database and the token will be lost
                  forever.
                </p>
              </div>
            </div>
          </div>
          <!-- Column -->
          <div class="col-md-4 wrap-service1-box">
            <div class="card border-0 card-shadow mb-4">
              <div class="card-body text-center">
                <div class="my-3">
                  <img src="/images/step3.png" alt="wrapkit" />
                </div>
                <h6 class="font-weight-medium">
                  Step 3: Auto removes unwanted comments
                </h6>
                <p class="mt-3">
                  The bot will recieve all comments on the last uploaded video.
                  The bot will detect comments that are dublicate, and remove
                  them automatically.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-12 mt-3 text-center">
            <a
              class="btn btn-success-gradiant text-white btn-md border-0"
              href="#f1"
              ><span>View Details</span></a
            >
          </div>
        </div>
      </div>
    </div>

    <!-- Cards section -->
    <div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
      <div
        class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden w-50"
      >
        <div class="my-3 py-3">
          <h2 class="display-5">Self host application</h2>
          <p class="lead">This program can be hosted on your local computer.</p>
        </div>
        <div
          class="bg-light shadow-sm mx-auto"
          style="width: 80%; height: 300px; border-radius: 21px 21px 0 0"
        >
          <img
            style="border-radius: 21px 21px 0 0; display: block"
            src="/images/server.jpg"
          />
        </div>
      </div>
      <div
        class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden w-50"
      >
        <div class="my-3 p-3">
          <h2 class="display-5">Create your own Google credentials.json</h2>
          <p class="lead">
            Click
            <a href="https://support.google.com/cloud/answer/6158849?hl=en"
              >here
            </a>
            to follow a tutorial to get the credentials.json file.
          </p>
        </div>
        <div
          class="bg-dark shadow-sm mx-auto"
          style="width: 80%; height: 300px; border-radius: 21px 21px 0 0"
        >
          <img style="border-radius: 21px 21px 0 0" src="/images/google.jpg" />
        </div>
      </div>
    </div>

    <!-- Why section -->
    <div
      id="why"
      class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light"
    >
      <div class="col-md-7 p-lg-5 mx-auto my-5">
        <h1 class="display-4 font-weight-normal">
          Why using YouTube bot comments remover?
        </h1>
        <p class="col-md-9 mx-auto lead font-weight-normal">
          This project is 100% open source! The sourcode can be found
          <a
            href="https://github.com/nietjoost/Node.js-YouTube-bot-comments-remover"
            >here</a
          >. After logging in the process will start automatically. Click the
          button below to start the process.
        </p>
        <a href="<%=url%>" class="btn btn-danger">YouTube login</a>
      </div>
      <div class="product-device shadow-sm d-none d-md-block"></div>
      <div
        class="product-device product-device-2 shadow-sm d-none d-md-block"
      ></div>
    </div>

    <!-- Footer section -->
    <footer class="container py-5">
      <div class="row">
        <div class="col-12 col-md">
          <small class="d-block mb-3 text-muted">Joost de Niet Â© 2022</small>
        </div>
        <div class="col-6 col-md">
          <h5>Features</h5>
          <ul class="list-unstyled text-small">
            <li>100% open source!</li>
            <li>Automatic channel detection!</li>
            <li>Automatic latest video detection!</li>
            <li>Detects dublicate comments</li>
          </ul>
        </div>
        <div class="col-6 col-md">
          <h5>About</h5>
          <ul class="list-unstyled text-small">
            <li>
              <a
                class="text-muted"
                href="https://github.com/nietjoost/Node.js-YouTube-bot-comments-remover"
                >Source code</a
              >
            </li>
            <li>
              <a class="text-muted" href="https://github.com/nietjoost/"
                >GitHub</a
              >
            </li>
          </ul>
        </div>
      </div>
    </footer>
  </body>
</html>
