docs/index.html

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

<head>
   <link rel="icon" href="favicon.ico">
   <title>handwritten.js</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, height=device-height">
   <meta name="description" content="handwritten.js - Convert typed text to realistic handwriting!">
   <meta name="keywords"
      content="handwritten, handwriting, text, converter, handwriter, emnist-dataset, daniel-font, pen, pencil, extended-mnist">
   <meta name="author" content="Rahil Kabani - rahil.kabani.4@gmail.com">

   <!-- Having the app launch in full-screen "app mode" using Chrome for Android’s "Add to homescreen" menu item. -->
   <meta name="mobile-web-app-capable" content="yes" />

    

   <meta name="application-name" content="handwritten.js">
   <link type="text/css" rel="stylesheet" href="reset.css" />
   <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&family=Sansita+Swashed:wght@300&family=Source+Code+Pro&display=swap"
      rel="stylesheet">
   <link type="text/css" rel="stylesheet" href="style.css" />
   <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
</head>

<body>

   
   <div class="body-wrapper">
      <div class="text-center">
         <img src="favicon.ico" style="width:10%;height: auto; padding-top: 1%; margin: 0px;">
      </div>
      <h1 class="title text-center">
         HANDWRITTEN.<span style="color:#8C50FF;">js</span>
      </h1>
      <div style="height: 2vw;"></div>
      <h2 class="title-sub text-center" style="color: rgb(58, 58, 58);">
         Convert typed text to realistic handwriting
      </h2>
      <div style="height: 3vh;"></div>
      <div class="split-container demo-section">
         <textarea onfocus="clearContents(this);" id="text" class="input-field text-center" placeholder="Type in your text here........"
            style="resize: vertical; overflow: auto;">Type in your text here....</textarea>
      </div>
      <div style="height: 5rem;"></div>
      <div class="ruled-field text-center">
         <label for="ruled" style="font-weight: 800; color: rgb(65, 105, 236); font-size: 1rem;">Add Ruled
            Lines?</label>
         <input type="checkbox" id="ruled" />
      </div>
      <div class="ruled-field text-center">
         <label for="ruled" style="font-weight: 800; color: rgb(65, 105, 236); font-size: 1rem;">Select Ink
            Color</label>
         <select name="" id="inkColor">
            <option value="black" selected>black</option>
            <option value="red">red</option>
            <option value="blue">blue</option>
         </select>
      </div>
      <div style="height: 1rem;"></div>
      <div
         style="  display: flex;
            width: 50%;
            margin-left: auto;
            margin-right: auto; box-shadow: 4px 9px 35px rgba(89, 89, 89, 0.69);
            border-radius: 31px;--demo-height : 28vh;
            height: var(--demo-height);
            border: solid 0.5rem  #595959;background-color: transparent;padding: 0%;border-radius: 31px;margin: auto; resize: vertical; overflow: auto;"
         class="split-container">
         <iframe style="width: 100%; height: 100%;padding: 0%;" id="pdf" class="preview-window"></iframe>
      </div>
      <div style="height: 1vw;"></div>
      <div class="split-container">
         <div style="padding-top:2rem;" class="download-field text-center">
            <a id="download">
               <img src="download.png" style="padding-bottom:2%;max-width: 4vw;" />
               <br>
               <span style="font-size: 2vh;;font-weight: 800; color: #8C50FF;">Download this as a PDF
               </span>
            </a>
         </div>
      </div>
      <div style="height: 4rem;"></div>
      <p class="text-center" style="color: rgb(43, 43, 43);">
         -------------------------------------------------------------------------------------------------------------------
      </p>
      <div class="text-center">
         <a href="https://github.com/alias-rahil/handwritten.js" target="_blank" rel="noopener noreferrer">
            <img src="github-2.png" class="gh-logo" />
            <br>
            <span style="font-size: 1.5vh;font-weight: 600; color: #8C50FF;">Check out the GitHub Repo here</span>
         </a>
      </div>
      <div style="height: 8vh;"></div>
   </div>

   <!-- Dark mode on-off toggle -->
   <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
   <script>
      const options = {
            bottom: '64px', // default: '32px'
            right: 'unset', // default: '32px'
            left: '32px', // default: 'unset'
            time: '0.5s', // default: '0.3s'
            mixColor: '#fff', // default: '#fff'
            backgroundColor: '#fff',  // default: '#fff'
            buttonColorDark: '#100f2c',  // default: '#100f2c'
            buttonColorLight: '#fff', // default: '#fff'
            saveInCookies: false, // default: true,
            label: '🌓', // default: ''
            autoMatchOsTheme: true // default: true
      }

      const darkmode = new Darkmode(options);
      darkmode.showWidget();
   </script>

</body>
<script src="main.js"></script>

</html>