index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Unveiling Next-Generation AI Solutions: Streamlit-Integrated AI Bot and Multifunctional WhatsApp Integration
   along with  Waste Management DIY Recommender</title>
  <link rel="icon" href="images/favicon.jpeg">
  <link rel="stylesheet" href="css/style.css" />
  <link rel="manifest" href="manifest.json">
  <link rel="apple-touch-icon" href="images/favicon.jpeg" />
  <meta name="theme-color" content="#000000" />
  <link rel="stylesheet" text="text/CSS"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <link rel="stylesheet" text="text/CSS"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <style>
  .chat-bot {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 350px;
    height: 430px;
    display: none; /* initially hide the chat bot */
    z-index: 1000; /* adjust the z-index based on your needs */
  }

  .chat-bot.active {
    display: block; /* show the chat bot when it has the "active" class */
  }
</style>

</head>
<style>
  html {
    scroll-behavior: smooth;

  }

  .hidden {
    visibility: hidden;
  }

  .back-top-wrap {
    position: fixed;
    bottom: 5rem;
    right: 1rem;
    background-color: #80F7D1;
    padding: 1rem 1.2rem;
    border-radius: 50%;
    cursor: pointer;
    transition: .3s ease-in-out;
    z-index: 100;
  }

  .back-top-wrap:hover {
    background-color: #00a2ff;
    color: #80F7D1;
  }

  .back-top-wrap:hover .fas.fa-arrow-up {
    color: white;
  }

  .fas.fa-arrow-up {
    color: #00488F;
    transition: 0.3s ease-in-out;
  }
</style>

<body onload="myFunction()">
  <div class="loading-wrapper">
    <img src="images/favicon.jpeg" id="loading" />
  </div>

  <!-- Back to top button -->
  <div id="back-top-div" class="back-top-wrap">
    <i class="fas fa-arrow-up"></i>
  </div>
  <header>
        <nav class="nav" id="nav">
      <button class="login-button"><a href="https://playful-tulumba-830915.netlify.app/">Firebase Signup/Login</a></button>
      <button class="login-button"><a href="https://tanishqravula-aiservices-allione-bhs5zgca2kbfucynnu7gwc.streamlit.app/">Integrated AI Bot</a></button>
      <button class="login-button"><a href="https://tanishqravulawastemanagementrecommedersystemt-iahkg75ags8rayhmu.streamlit.app/">DIY Recommender</a></button>
      <button class="login-button"><a href="https://enchanting-stardust-7291f4.netlify.app/">Request access for whatsappbot</a></button>
     <button class="login-button"><a href="https://tanishqravulagptimagegenerator-k9rq8fv7v4jth24ry2dlvx.streamlit.app/">AI Image Generator</a></button>
      <button class="login-button"><a href="https://tanishqravulagptvideogenerator-kvyvroscdttp3wlqfc4wvq.streamlit.app/">AI Video Generator</a></button>
     <button class="login-button"><a href="https://funny-torrone-bd8eb7.netlify.app/">Send email for any queries</a></button>
       <button class="login-button"><a href="https://tanishqravulabestdashboards-tau7q9kr4p6jtdxhzbkgbb.streamlit.app/">Dashboard Generator</a></button>
     <!-- <button class="login-button"><a href="https://ubiquitous-bunny-a18df8.netlify.app/">Explore Nearby Facilities</a></button> -->
          
     
      <div class="hamburger" id="ham">
        <i class="cancel fa-solid fa-xmark"></i>

        <svg class="burger" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z">
          </path>
        </svg>
      </div>
    </nav>
    <div class="menu" id="menu">
    </div>
    <div class="content">
      <h1>Next-Gen AI: Integrated Bot, WhatsApp, Waste DIY Recommender</h1>
      <div class="container">
        <h3><span class="auto-type" style="font-size: 40px;font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;"></a></span></h3>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
      <script>
        var typed = new Typed(".auto-type", {
          strings: ["Our aim is to provide innovative AI solutions that redefine user interaction and promote sustainability. Through the Streamlit-Integrated AI Bot and Multifunctional WhatsApp Integration, we strive to empower individuals with cutting-edge technology while fostering environmental stewardship. By synergizing advanced AI capabilities with intuitive interfaces, we aim to set new standards for efficiency, versatility, and accessibility. Our commitment to innovation extends beyond technological advancements; it encompasses a broader vision of creating a positive impact on society and the environment. Through collaborative efforts and user-centric design, we seek to inspire individuals to embrace sustainable practices and make a meaningful contribution to a better world. Together, let us embark on a journey of discovery and transformation, where innovation meets sustainability to shape a brighter future for generations to come along with best DIY ideas for reusing,reducing and recycling the 12 classes of waste management! "],
          typeSpeed: 50,
          backspeed: 50,
          loop: true
        })
      </script>
      <a href="#services" class="rainbow-button" alt="Explore"></a>
    </div>

  </header>

  <!-- About Section -->
  <section id="about" class="about">
    <h1 data-aos="flip-right">About Us</h1>
    <div class="max-width">
      <div data-aos="zoom-in" class="photo"><img src="images/about.jpeg" alt="" height="300px" width="330px"></div>
      <div class="about-content">
        <p data-aos="fade-left" class="text-1">We created innovative AI solutions that redefine user interaction and promote sustainability. Through the Streamlit-Integrated AI Bot and Multifunctional WhatsApp Integration, we strive to empower individuals with cutting-edge technology while fostering environmental stewardship. By synergizing advanced AI capabilities with intuitive interfaces, we aim to set new standards for efficiency, versatility, and accessibility and  <span>DIY Ideas</span> to get relief from searching for ideas hours long </p>
        <p data-aos="fade-left" class="text-3">We hope that everyone experience the best <span>possible interface </span>with the
          help of Integrated AI Bot and Multifunctional WhatsApp Integration<span> and A DIY  Recommender Sytem.</span></p>
      </div>
    </div>
    

    </div>
  </section>

 
  <footer>
    <div class="footer-container">
      <!--logo and info column-->
      <div class="col">
        <!--logo insert-->
        <img src="images/logo.png" alt="logo" class="footlogo" />
        <div class="footercontent">
          <p class="footerpara">By Tanishq Ravula </p>
          <br>
          <p class="footerpara">Mobile:+91 7702337176 </p>
        </div>
      </div>

      <!--ADDRESS COLUMN-->

      <div class="footer-side-col">
        <div class="col">
          <h3>
            ADDRESS
            <div class="underline"><span></span></div>
          </h3>
          <p>Telangana,India</p>
          <p class="email-id"><a href="mailto:tanishqravula@gmail.com">tanishqravula@gmail.com</a></p>
        </div>
        <!--HOME COLUMN-->
       
        <!--CONTACTS COLUMN-->
        <div class="col">
          <h3>
            CONTACTS
            <div class="underline"><span></span></div>
          </h3>
          <div class="social-menu">
            <ul>
              <a href="https://twitter.com/TanishqRavula" target="_blank">
                <li id="social-twitter"><i class="fab fa-2x fa-twitter"></i></li>
              </a>
              <a href="https://github.com/tanishqravula" target="_blank">
                <li id="social-github"><i class="fab fa-2x fa-github"></i></li>
              </a>
              <a href="https://www.linkedin.com/in/tanishq-tanishq-892917241/" target="_blank">
                <li id="social-linkedin"><i class="fab fa-2x fa-linkedin-in"></i></li>
              </a>
            </ul>
          </div>
        </div>
      </div>
    </div>
    </div>
  </footer>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>

    let preloader = document.querySelector(".loading-wrapper");
    function myFunction() {
      preloader.style.display = 'none';
      document.body.style.overflow = 'auto';
    }
    let navbar = document.querySelector("#nav");
    let navmenu = document.querySelector("#navmenu");

    window.onscroll = function () {
      if (window.pageYOffset >= navmenu.offsetTop) {
        navbar.classList.add("sticky");
      } else {
        navbar.classList.remove("sticky");
      }
    };

    window.onscroll = () => {
      if (window.scrollY > 100) {
        navbar.classList.add('nav-active');
      } else {
        navbar.classList.remove('nav-active');
      }
    };
  </script>
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('./serviceworker.js')
          .then((reg) => console.log('Success', reg.scope))
          .catch((err) => console.log('Error', err))
      })
    }
  </script>
  <script src="js/index.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
  <script src="js/script.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
  <script>
  document.addEventListener("DOMContentLoaded", function () {
    // Get the chat bot iframe element
    const chatBot = document.querySelector(".chat-bot");

    // Function to toggle the visibility of the chat bot
    function toggleChatBot() {
      chatBot.classList.toggle("active");
    }

    // Set a timeout to show the chat bot after a delay (adjust the delay as needed)
    setTimeout(() => {
      toggleChatBot();
    }, 1000); // Show the chat bot after 5 seconds (5000 milliseconds)

    // Add an event listener to the chat bot icon/button to toggle its visibility
    chatBot.addEventListener("click", toggleChatBot);
  });
</script>

</body>

</html>