index.html

---
layout: default
title: Main
---

<style>
/* From Uiverse.io by kennyotsu */ 
.bannerbg {
  width: 100%;
  height: 100%;
  /* Add your background pattern here */
  background-color: #313131;
  background-image: radial-gradient(rgba(255, 255, 255, 0.171) 2px, transparent 0);
  background-size: 30px 30px;
  background-position: -5px -5px
}
  
.btn {
  background-color: #34C759; /* White-ish background */
  color: #f7f7f7; /* Green text color */
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block; /* Make the button a block element */
  margin: 0 auto; /* Center the button */
  max-width: 200px; /* Add a max width to ensure centering works */
  transition-duration: 0.4s;
}

.btn:hover {
  background-color: #ffffff; /* Green background on hover */
  color: #34C759; /* White text on hover */
}

/* Responsive design */
@media (min-width: 768px) {
  .btn {
    padding: 10px 20px;
    font-size: 14px;
  }

  .wordCarousel div li {
    font-size: 4vw;
  }
}

@media (max-width: 480px) {
  .btn {
    padding: 8px 16px;
    font-size: 12px;
  }

  .wordCarousel div li {
    font-size: 8vw;
  }
}
  
.bgsecondary1 {
  padding: 8px;
  background-color: #34C759;
  color: #ffffff !important;
  display: block;
  margin: 0 auto;
  border-radius: 15px;
  width: 95%
}

.bgsecondary2 {
  padding: 8px;
  background-color: #1e421d;
  color: #34C759 !important;
  display: block;
  margin: 0 auto;
  border-radius: 15px;
  width: 85%
}

.bgsecondary3 {
  background-color: #1e421d;
  color: #34C759 !important;
  display: block;
  width: 100%
}

.bgsecondary1 h3 {
  color: #ffffff !important;
  padding: 5px;
  margin-left: 5%;
}

.whiteinner {
  background-color: #ffffff;
  width: 70%;
  display: block;
  margin: 0 auto;
  padding: 8px;
  border-radius: 12px;
}
  
.wordCarousel {
  font-size: 40px;
  font-weight: 100;
  color: #32a851;
}
.wordCarousel div {
  overflow: hidden;
  position: relative;
  padding-left: 0px;
  height: 65px;
  padding-top: 10px;
  margin-top: -10px;
}
.wordCarousel div li {
  font-family: Serif;
  color: #24d132;
  font-weight: 700;
  padding: 0 10px;
  height: 45px;
  width: auto;
  margin-bottom: 45px;
  display: block;
}

.flip2 {
  -webkit-animation: flip2 6s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
          animation: flip2 6s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
}

.flip3 {
  -webkit-animation: flip3 8s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
          animation: flip3 8s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
}

.flip4 {
  -webkit-animation: flip4 10s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
          animation: flip4 10s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
}

.flip5 {
  -webkit-animation: flip5 12s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
          animation: flip5 12s cubic-bezier(0.23, 1, 0.32, 1.2) infinite;
}

@-webkit-keyframes flip2 {
  0% {
    margin-top: -180px;
  }
  5% {
    margin-top: -90px;
  }
  50% {
    margin-top: -90px;
  }
  55% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -180px;
  }
}

@keyframes flip2 {
  0% {
    margin-top: -180px;
  }
  5% {
    margin-top: -90px;
  }
  50% {
    margin-top: -90px;
  }
  55% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -180px;
  }
}
@-webkit-keyframes flip3 {
  0% {
    margin-top: -270px;
  }
  5% {
    margin-top: -180px;
  }
  33% {
    margin-top: -180px;
  }
  38% {
    margin-top: -90px;
  }
  66% {
    margin-top: -90px;
  }
  71% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -270px;
  }
}
@keyframes flip3 {
  0% {
    margin-top: -270px;
  }
  5% {
    margin-top: -180px;
  }
  33% {
    margin-top: -180px;
  }
  38% {
    margin-top: -90px;
  }
  66% {
    margin-top: -90px;
  }
  71% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -270px;
  }
}
@-webkit-keyframes flip4 {
  0% {
    margin-top: -360px;
  }
  5% {
    margin-top: -270px;
  }
  25% {
    margin-top: -270px;
  }
  30% {
    margin-top: -180px;
  }
  50% {
    margin-top: -180px;
  }
  55% {
    margin-top: -90px;
  }
  75% {
    margin-top: -90px;
  }
  80% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -360px;
  }
}
@keyframes flip4 {
  0% {
    margin-top: -360px;
  }
  5% {
    margin-top: -270px;
  }
  25% {
    margin-top: -270px;
  }
  30% {
    margin-top: -180px;
  }
  50% {
    margin-top: -180px;
  }
  55% {
    margin-top: -90px;
  }
  75% {
    margin-top: -90px;
  }
  80% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -360px;
  }
}
@-webkit-keyframes flip5 {
  0% {
    margin-top: -450px;
  }
  5% {
    margin-top: -360px;
  }
  20% {
    margin-top: -360px;
  }
  25% {
    margin-top: -270px;
  }
  40% {
    margin-top: -270px;
  }
  45% {
    margin-top: -180px;
  }
  60% {
    margin-top: -180px;
  }
  65% {
    margin-top: -90px;
  }
  80% {
    margin-top: -90px;
  }
  85% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -450px;
  }
}
@keyframes flip5 {
  0% {
    margin-top: -450px;
  }
  5% {
    margin-top: -360px;
  }
  20% {
    margin-top: -360px;
  }
  25% {
    margin-top: -270px;
  }
  40% {
    margin-top: -270px;
  }
  45% {
    margin-top: -180px;
  }
  60% {
    margin-top: -180px;
  }
  65% {
    margin-top: -90px;
  }
  80% {
    margin-top: -90px;
  }
  85% {
    margin-top: 0px;
  }
  99.99% {
    margin-top: 0px;
  }
  100% {
    margin-top: -450px;
  }
}


</style>

<br>
<!--<div style="background-image: url('https://botanybase.github.io/assets/img/MainBG.png'); background-size: cover; background-position: center; height: 100vh;">-->
<div class="bannerbg">
<hr>
<h1 style="text-align: center; padding: 30px; font-size: 50px; font-family: 'Montserrat'; color: #1ad92d;" class="xyz-in" xyz="fade up big delay-2">BotanyBase</h1>
<p style="text-align: center;">A Plant Classification Guide</p>
<small><p style="text-align: center;" class="xyz-in" xyz="duration-20 ease-in-out-back flip-up-100% iterate-infinite">By <a href="https://1d10t1c-stud10s.github.io">1D10T1C STUD10S</a></small>
<h2 style="text-align: center;">Using the simplest interface, to help you appreciate nature.</h2>
<br>
<a class="nb-button green" href="/identify">Start Now</a>
<br>
</div>
<hr>
<br>
<div class="bg">
  <h2 style="font-weight: 200; font-size: 24px; text-aligm: center; padding: 10px;">Try our new AI ChatBot!</h2>
  <a class="nb-button green" href="/chat">Try Here!</a>
  <div style="height: 12px;"></div>
</div>
<br>
<h3 style="padding-left: 12px; text-align: left !important; font-size: 28px !important; color: #ffffff !important;">BotanyBase is:</h3>
<div class="marquee">
  <div class="marquee-content">
    <span>Open Source</span>
    <span>Completely Free</span>
    <span>Easy to Use</span>
  </div>
</div>
<br>
<div class="bg">
<!--<div class="bgsecondary1">-->
  <p style="/*text-align: center;*/ text-decoration: bold; padding-left: 20px; font-size: 20px !important; ">We have
    multiple ways to help you find out what you're looking at, from leaf types to
    climate regions. Get started now! No signing up required too :) (It's really easy
    too, steps below)</p>
<!--</div>-->
<br>
<h4 style="padding-left: 12px; text-align: left !important; font-size: 28px !important; color: #ffffff !important;">Done in 4 steps:</h4>
<h4 class="wordCarousel">
  <div class="whiteinner"> <!-- Use classes 2,3, or 4 to match the number of words --> 
    <ul class="flip4"> 
      <li>4. You got it!</li>
      <li>3. Find the plant.</li> 
      <li>2. Search our DB.</li>
      <li>1. Find the climate.</li>
    </ul>
  </div>
</h4>
<!--<h1 style="text-align: center;">How it Works:</h1>
<img src="https://botanybase.github.io/assets/img/explain.jpg" style="display: block; margin: 0 auto; border-radius: 8px; width: auto; max-width: 80vw; max-height: 60vh;">
<h3 style="text-align: center;">Pro Tip: Click on the Plant Image to zoom in!</h3>-->
</div>
<br>
<hr>
<br>
<div class="bannerbg">
<h3 style="text-align: center;">Our Database isn't the most extensive!</h3>
<p style="text-align: center;">Help us <a href="/contribute">contribute</a> now!</p>
<p style="text-align: center;"><a href="https://botanybase.github.io/contribute/add">Automated Contribution</a></p>
</div>
<br>
<hr>
<br>
<!--<div class="bgsecondary1">-->
  <p style="/*text-align: center;*/ text-decoration: bold; padding-left: 20px; font-size: 20px !important;">Extensive documentation for developers who like Botany! Built for everyone to use and will remain free to use.</p>
<!--</div>-->
<br>
<div class="lightbg">
<h4><a class="nb-button green" style="display:block; margin: 0 auto; width: 65% !important;" href="#dev" rel="modal:open">To the Technical Zone</a></h4>
</div>
<br>

<!-- Modal HTML embedded directly into document -->
<div id="dev" class="modal">
  <p>You are proceeding to the Technical Zone (Docs)! Continue?</p>
  <a href="/Docs">Let's Go!</a><br>
  <a href="#" rel="modal:close">Back</a>
</div>

<script>
if (authStatus == 1) {
  new AWN().info('Welcome back!');
};
</script>