<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sage Cafe Image Converter</title>
 <link rel="stylesheet" href="/src/css/main3.css">
</head>
<body>

<!------ header section------->
<header>

<!-- Preloader -->
<div class="preloader" id="preloader">
    <div class="spinner"></div>
  </div>
  

   
    <nav class="navbar">
      <div class="logo">Sage<span>Cafe</span> </div>
      <ul class="nav-links">
          <li>  <a href="/src/home.html" >Back</a></li>
          </ul>
      <div class="toggle-container">
        <label class="toggle">
          <input type="checkbox" id="theme-toggle">
          <div class="slider"></div>
        </label>
      </div>
      
  
      <div class="burger">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
      </div>
  </nav>
  
  </header>
  <!------ header section end------->
  
<main id="main_cont" >

      <div class="header_line">
    <h1 class="scroll" >Sage Cafe <span>Image Converter</span></h1>
</div>
    <form id="imageForm">

<div class="form_content">

    <div class="form_cont1">
        <label>Select image: </label> <br><br>
        <input type="file" id="imageInput" accept="image/*" required><br><br>
    </div>

        <div class="form_cont2"></div>
        <label>Convert to:</label><br><br>
        <select id="format">
            <option value="jpeg">JPEG</option>
            <option value="png">PNG</option>
            <option value="gif">GIF</option>
            <option value="ico">Icon (.ico)</option>
            <option value="pdf">PDF</option>
        </select><br><br>
    </div>
    </div>

        <button class="scroll"  type="submit" id="submit"> <img src="/assets/images/exchange.png" alt="convert"> Convert</button>
    </form>


    <h2 class="scroll" >Converted <span>Image:</span></h2>
    <div class="download_link">
    <a id="downloadLink" style="display: none;"> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg></a>
</div>
</main>


        <!-- chat bot -->
        <section id="chat_bt">
            <div id="chatbot-container">
              <div id="chatbot-header">
                <span>Sage Cafe Bot</span>
                <button id="close-chatbot">&times;</button>
              </div>
              <div id="chatbot-messages"></div>
              <div id="chatbot-input">
                <input type="text" id="user-input" placeholder="Type your message...">
                <button id="send-button">Send</button>
              </div>
            </div>
          
            <!-- Toggle Button -->
            <button id="toggle-chatbot"><svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e8eaed"><path d="M160-360q-50 0-85-35t-35-85q0-50 35-85t85-35v-80q0-33 23.5-56.5T240-760h120q0-50 35-85t85-35q50 0 85 35t35 85h120q33 0 56.5 23.5T800-680v80q50 0 85 35t35 85q0 50-35 85t-85 35v160q0 33-23.5 56.5T720-120H240q-33 0-56.5-23.5T160-200v-160Zm200-80q25 0 42.5-17.5T420-500q0-25-17.5-42.5T360-560q-25 0-42.5 17.5T300-500q0 25 17.5 42.5T360-440Zm240 0q25 0 42.5-17.5T660-500q0-25-17.5-42.5T600-560q-25 0-42.5 17.5T540-500q0 25 17.5 42.5T600-440ZM320-280h320v-80H320v80Zm-80 80h480v-480H240v480Zm240-240Z"/></svg></button>
          </section>
          <!-- chat bot end-->
          



<!---Footer =====================-->

    <footer class="footer">
        <div class="social-icons">
            <a href="https://www.facebook.com/profile.php?id=61572023600924&mibextid=ZbWKwL">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#1877F2" width="48px" height="48px">
                  <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 5.22 3.993 9.507 9.09 9.95v-7.03H8.567V12H11.09V9.797c0-2.496 1.493-3.89 3.775-3.89 1.093 0 2.235.196 2.235.196v2.463H15.93c-1.43 0-1.87.888-1.87 1.797V12h3.18l-.508 2.92H14.06v7.03C19.157 21.507 22 17.22 22 12z"/>
              </svg>
              </a>
            <a href="https://whatsapp.com/channel/0029VawRoerKmCPSqindAt3u">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#25D366" width="48px" height="48px">
                  <path d="M20.52 3.48A11.81 11.81 0 0012 0a11.8 11.8 0 00-9.45 19.07l-1.17 4.27 4.37-1.13A11.8 11.8 0 0012 24a11.81 11.81 0 008.52-20.52zM12 21.15a9.73 9.73 0 01-5.13-1.48l-.36-.22-2.58.66.69-2.53-.23-.35A9.73 9.73 0 1112 21.15zm4.29-7.25c-.26-.13-1.55-.77-1.79-.86s-.41-.13-.58.13-.67.86-.82 1c-.15.13-.29.15-.54.05s-1.05-.38-2-1.21c-.74-.66-1.23-1.47-1.37-1.72s-.02-.38.1-.51c.1-.1.26-.29.38-.43a1.74 1.74 0 00.25-.43.48.48 0 000-.46c-.06-.13-.58-1.41-.8-1.94s-.43-.45-.58-.46h-.49c-.13 0-.34.05-.52.26s-.68.67-.68 1.64.7 1.91.8 2.04.93 1.43 2.26 2.12 1.35.72 1.59.8.36.06.5-.06c.15-.1.62-.74.79-.99.18-.26.36-.22.62-.13.26.1 1.63.77 1.9.91.26.13.43.2.62.2s.36-.05.49-.26c.13-.25.64-.93.64-1.81 0-.89-.56-1.32-.76-1.45z"/>
              </svg>
              </a>
        </div>
        <div class="links">
            <a href="/src/home.html">About</a>
            <a href="/src/home.html">Contact</a>
            <a href="/src/home.html">Service</a>
            <a href="/src/home.html">blog</a>
            
        </div>
        <div class="copyright">
            <p>Copyright © 2025<a href=""> 360kminds.</a> All rights reserved.&nbsp;&nbsp;&nbsp; Design:<a href="https://templatemo.com" rel="nofollow" target="_blank">Philip Willson</a></p>
       
        </div>
      </footer>
      



</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script  defer src="/src/javascript/image_converter.js"></script>
<script defer src="/src/javascript/chatbot.js"></script>
</html>
