index.html

<!doctype html>

<html data-theme="classic" lang="en">

<head>
    <link rel="shortcut icon" href="favicon.png" />

    <!-- Required meta tags -->
    <meta charset="utf-8">

    <title>EzGitDoc</title>
    <meta name="description" content="EzGitDoc is an open source tool that improves documentation experience(especially on GitHub). It allows to create custom scheme without touching markdown and modify data as desired on EzGitDoc or later(within generated code) replacing basic values. UI is minimalistic so you don't need to waste time to learn it. Write less click more, give your hands break. Check it out.">
    <meta name="author" content="Pawel Idzikowski, trolit">
    <meta name="keywords" content="Git documentation, README, EzGitDoc, template, doc generator, codegen, doc maker, GitHub, EzGitDoc, gitdoc, md code generator, JavaScript, HTML, CSS, editor, online editor, ezdoc, readme-generator">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/styles.css">

    <!-- Font Awesome Animation -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.min.css">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

    <!-- Themes-->
    <link rel="stylesheet/less" type="text/css" href="less/theme-classic.less">
    <link rel="stylesheet/less" type="text/css" href="less/theme-light-doc.less">
    <link rel="stylesheet/less" type="text/css" href="less/theme-calm.less">
    <link rel="stylesheet/less" type="text/css" href="less/theme-dark-doc.less">
    <link rel="stylesheet/less" type="text/css" href="less/theme-raw-dark.less">

    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css2?family=Sen&display=swap" rel="stylesheet">
  
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom Scrollbar CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.css" rel="stylesheet">

    <!-- Bootstrap colorpicker -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.2.0/css/bootstrap-colorpicker.min.css" rel="stylesheet">

    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.13.0/css/mdb.min.css" rel="stylesheet">

    <title>ezGitDoc</title>
  </head>

<body>

<!-- 
********************************************
Preloader
********************************************
-->
<div class="se-pre-con" style="width: 100%; font-family: 'Josefin Sans';">
  <div class="logo-preloader-body" style="margin: 5% auto 0 auto;">
    <i class="fab fa-earlybirds fa-10x" style="color: #55606E;"></i>
    <p style="font-size: 40px; color: #55606E; margin: 0; padding: 37px 0 10px 0; line-height: 0;">EzGitDoc</p>
  </div>
  <img style="display: block; margin: 4% auto 0 auto; width: 100px" src="images/loader.svg"/>
  <br/>
  <br/>
  <p class="text-center faa-horizontal animated " style="font-size: 20px; color: white;">Loading</p>
</div>

<!-- 
********************************************
Sidebar
********************************************
-->
<div class="page-wrapper chiller-theme toggled">
  <a id="show-sidebar" class="btn btn-sm btn-dark" style="z-index: 500;">
    <i class="fas fa-bars fa-2x text-center" style="margin-top: 30%;"></i>
  </a>
  <nav id="sidebar" class="sidebar-wrapper">
    <div class="sidebar-content">
      <a href="https://github.com/trolit/EzGitDoc" target="_blank"><span class="iconify github-icon faa-tada animated-hover" data-icon="codicon:github" data-inline="false"></span></a>
      <a data-toggle="modal" data-target="#themesModal"><span class="iconify theme-icon faa-tada animated-hover" data-icon="line-md:paint-drop-half-twotone" data-inline="false" data-inline="false"></span></a>
      <div class="text-center">
        <span id="themeBadge" class="badge badge-light">classic</span>
        <span class="badge badge-light">1.7.6</span>
      </div>
      <div class="sidebar-header" style="margin-left: 2%;">
        <div class="logo-body" style="font-family: 'Josefin Sans'; ">
          <i class="fab fa-earlybirds fa-5x faa-tada animated-hover logo-icon"></i>
          <p class="logo-title">EzGitDoc</p>
        </div>
      </div>
      <div class="text-center">
        <button id="resetButton" type="button" class="btn btn-sm btn-danger"  data-toggle="modal" data-target="#resetConfirmationModal" disabled>Reset</button>
        <a href="https://os-expected.github.io/EzGitDoc-documentation/" class="btn btn-sm btn-purple" target="_blank">Docs</a>
      </div>
      <!-- sidebar-header  -->
      <div class="sidebar-menu">
        <ul>
          <li class="header-menu">
            <span>Elements</span>
          </li>
          <li data-toggle="modal" data-target="#codeModal">
            <a>
              <i class="fas fa-code"></i>
              <span>Code</span>
              <span class="badge badge-pill badge-light hintKey">Alt + Q</span>
            </a>
          </li> 
          <li data-toggle="modal" data-target="#headerModal">
            <a>
              <i class="fas fa-heading"></i>
              <span>Header</span>
              <span class="badge badge-pill badge-light hintKey">Alt + W</span>
            </a>
          </li> 
          <li data-toggle="modal" data-target="#imageModal">
            <a>
              <i class="far fa-image"></i>
              <span>Image</span>
              <span class="badge badge-pill badge-light hintKey">Alt + E</span>
            </a>
          </li> 
          <li data-toggle="modal" data-target="#linkModal">
            <a>
              <i class="fas fa-link"></i>
              <span>Link</span>
              <span class="badge badge-pill badge-light hintKey">Alt + R</span>
            </a>
          </li> 
          <li data-toggle="modal" data-target="#listModal">
            <a>
              <i class="fas fa-bars"></i>
              <span>List</span>
              <span class="badge badge-pill badge-light hintKey">Alt + A</span>
            </a>
          </li> 
          <li data-toggle="modal" data-target="#arrayModal">
            <a>
              <i class="fas fa-table"></i>
              <span>Table</span>
              <span class="badge badge-pill badge-light hintKey">Alt + S</span>
            </a>
          </li> 
          <li data-toggle="modal" data-target="#textModal">
            <a>
              <i class="far fa-sticky-note"></i>
              <span>Text</span>
              <span class="badge badge-pill badge-light hintKey">Alt + D</span>
            </a>
          </li> 
          <li data-toggle="modal" data-target="#badgeModal">
            <a>
              <i class="fas fa-tag"></i>
              <span>Badge</span>
              <span class="badge badge-pill badge-light hintKey">Alt + F</span>
            </a>
          </li>
          <li data-toggle="modal" data-target="#detailsModal">
            <a>
              <i class="fas fa-expand-arrows-alt"></i>
              <span>Details</span>
              <span class="badge badge-pill badge-light hintKey">Alt + Z</span>
            </a>
          </li>
          <li class="header-menu">
            <span>Extra</span>
          </li>
          <li data-toggle="modal" data-target="#quickBuilderModal">
            <a>
              <i class="fas fa-terminal"></i>
              <span>Quickbuilder<small>(v1.0)</small></span>
              <!-- <span class="badge-sonar"></span> -->
            </a>
          </li>
          <li style="margin-top: 25px; float: right;">
          </li>  
        </ul>
      </div>
      <!-- sidebar-menu  -->
    </div>
    <!-- sidebar-content  -->
    <div class="sidebar-footer" style="color: #818896;">
      <a id="close-sidebar" data-tooltip="tooltip" data-placement="top" title="Full page preview">
        <i class="far fa-eye"></i>
      </a>
      <a href="#top" data-tooltip="tooltip" data-placement="top" title="Scroll to the top">
        <i class="fas fa-angle-double-up"></i>
      </a>
      <a href="#bottom" data-tooltip="tooltip" data-placement="top" title="Scroll to the bottom">
        <i class="fas fa-angle-double-down"></i>
        <!-- <span class="badge badge-pill badge-success notification">7</span> -->
      </a>
      <a data-toggle="modal" data-tooltip="tooltip" data-placement="top" title="References" data-target="#referencesModal" onclick="generateReferences()">
        <i class="fas fa-exchange-alt"></i>
      </a>
      <a data-toggle="modal" data-tooltip="tooltip" data-placement="top" title="Additional settings" data-target="#settingsModal">
        <i class="fas fa-cog"></i>
      </a>
    </div>
  </nav>
  
  <!-- sidebar-wrapper  -->
  <main class="page-content">
    <div class="container-fluid">
      
      <div>
        <div id="top"></div>

        <!-- Working space Area -->
        <div id="workingSpace" style="margin: 3% 15% 4% 15%; padding: 0.5% 0;border: 3px solid white;">

          <div id="startNote" class="row" style="color: white; font-size: 25px; margin: 20% auto 20% auto; text-align: center;font-family: Calibri, Arial;">
              <div class="col-5 faa-parent animated-hover">
                <i class="fas fa-angle-double-left fa-4x faa-horizontal"></i><br/><br/>
                <span class="badge badge-light badge-extra-styling">Create element</span>
              </div>
              <div class="col-2" style="font-size: 135%;">
                <br/>
                <br/>
                <span class="badge badge-light badge-extra-styling">OR</span>
              </div>
              <div class="col-5 faa-parent animated-hover">
                <i class="fas fa-cogs fa-4x faa-vertical "></i><br/><br/>
                <span class="badge badge-light badge-extra-styling">Review documentation</span>
              </div>
          </div>
        </div>

        <div id="bottom"></div>
      </div>

      <!-- Code Generation Button -->
      <div class="row">
        <div class="col-12">
          <button type="button" id="codeGenButton" class="btn btn-elegant btn-lg" style="visibility: hidden; padding-top: 20px; font-size: 12px;" onclick="generateCode()"><i class="fas fa-lg fa-dragon"></i> <br/> Generate Code</button>
        </div>
      </div>

      <!-- Footer -->
      <footer class="page-footer font-small stylish-color pt-4">
        <div class="container-fluid text-center text-md-left">
          <div class="row">
            <div class="col-md-4 mb-md-0 mb-3">
              <h5 class="text-uppercase font-weight-bold"><i class="fas fa-code"></i> Definition</h5>
              <p class="text-justify">In short, it's quick and easy tool, allowing to setup and generate interesting templates of *.md files that are mostly used for repositories documentation. One of it's crucial advantages is that it focuses more on clicking than writing. Plan your doc, fill in data and get code!</p>
            </div>
            <hr class="clearfix w-100 d-md-none pb-3">
            <div class="col-md-4 mt-md-0 mt-3">
              <h5 class="text-uppercase font-weight-bold"><i class="fab fa-buffer"></i> Get Started</h5>
              <p class="text-justify">If you are not familiar with EzGitDoc, you can start by simply trying each element that can be created or take a look at <i class="fas fa-angle-double-right"></i> <a href="https://os-expected.github.io/EzGitDoc-documentation/docs/quick-start" target="_blank"><span class="badge badge-light">Quick Start</span></a> for very fast briefing, and optionally, visit also <a href="https://os-expected.github.io/EzGitDoc-documentation/docs/examples" target="_blank"><span class="badge badge-light">Examples</span></a> section for short capabilities demonstration.</p>
            </div>
            <hr class="clearfix w-100 d-md-none pb-3">
            <div class="col-md-4 mb-md-0 mb-3">
              <h5 class="text-uppercase font-weight-bold"><i class="fas fa-desktop"></i> Contribution & Contact</h5>
              <p class="text-justify">Want to take part in making EzGitDoc more powerful and advanced for the community? Feel free to contact via <a href="#" class="badge badge-light footer-badge"  data-toggle="modal" data-target="#contactModal">this form <i class="fas fa-comment-alt"></i></a> or Discord. List of options that you can work on can be found <a href="https://os-expected.github.io/EzGitDoc-documentation/dev/contribution" target="_blank"><span class="badge badge-light">here</span></a>. You are welcome!
              </p>
            </div>
          </div>
        </div>
      </footer>
      <!-- Footer -->
    </div>
  </main>
  <!-- page-content -->
</div>

<!-- 
********************************************
BS Toast
********************************************
-->
<div aria-live="polite" aria-atomic="true">
    <div id="myToast" data-autohide="false" class="toast" style="z-index: 10000; position: fixed; top: 0; left: 0;">
        <div class="toast-header">
        <i class="fab fa-earlybirds fa-2x"></i>
        <strong class="mr-auto"> &nbsp; EzGitDoc &nbsp; &nbsp; &nbsp;</strong>
        <small id="toastTime"></small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" onclick="resetLastInterval()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div id="toastBody" class="toast-body">
        Did you miss to fill in header text?
        </div>
    </div>
</div>

<!-- 
********************************************
MODALS
********************************************
-->

<!-- Themes Modal -->
<div class="modal fade" id="themesModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-sm modal-notify modal-success" role="document">
    <!--Content-->
    <div class="modal-content text-center">
      <!--Header-->
      <div class="modal-header d-flex justify-content-center">
        <p class="heading">Themes</p>
      </div>

      <!--Body-->
      <div class="modal-body">
        <div class="row justify-content-center">
          <div class="theme-box theme-classic" onclick="setTheme('classic')" data-tooltip="tooltip" data-placement="top" title="Classic"></div>
          <div class="theme-box theme-light-doc" onclick="setTheme('light-doc')" data-tooltip="tooltip" data-placement="top" title="Light Doc"></div>
          <div class="theme-box theme-calm" onclick="setTheme('calm')" data-tooltip="tooltip" data-placement="top" title="Calm"></div>
          <div class="theme-box theme-dark-doc" onclick="setTheme('dark-doc')" data-tooltip="tooltip" data-placement="top" title="Dark Doc"></div>
          <div class="theme-box theme-raw-dark" onclick="setTheme('raw-dark')" data-tooltip="tooltip" data-placement="top" title="Raw Dark"></div>
        </div>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>

<!-- References Modal -->
<div class="modal fade" id="referencesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-notify" role="document">
    <!--Content-->
    <div class="modal-content modal-custom-content references-modal-styles">
      <!--Header-->
      <div class="modal-header references-header">
        <p class="heading lead">References</p>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" class="white-text">&times;</span>
        </button>
      </div>

      <!--Body-->
      <div class="modal-body text-white">
        <div class="text-center">
          <i class="fab fa-buromobelexperte fa-4x mb-3 animated rotateIn"></i>
          <div id="referencesModalContent">

          </div>
          <small class="hide" id="referencesModalPinTip" style="font-size: 60%;">Use pin icon to quickly change element's position</small>
        </div>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>

<!-- Settings Modal -->
<div class="modal fade right" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" data-backdrop="true">
<div class="modal-dialog modal-full-height modal-right modal-notify modal-primary" role="document">
  <!--Content-->
  <div class="modal-content modal-custom-content">
    <!--Header-->
    <div class="modal-header modal-custom-header settings-header">
      <p class="heading">Settings
      </p>

      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true" class="white-text">&times;</span>
      </button>
    </div>

    <!--Body-->
    <div class="modal-body">
      <div class="row">
        <div class="col-12">
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="autoMod_switch" onclick="updateSetting('autoModals')">
            <label class="custom-control-label" for="autoMod_switch" style="width: 100%;">Automated modals: <span id="autoMod_switch_label" class="badge badge-pill badge-success" style="float: right;">enabled</span></label>
            <small class="form-text text-muted">Decide whether modals should be closed automatically on successful object render(enabled) or not(disabled).</small>
          </div>

          <br/>

          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="autoDisappear_switch" onclick="updateSetting('autoDisappear')">
            <label class="custom-control-label" for="autoDisappear_switch" style="width: 100%;">Autohide notifications: <span id="autoDisappear_switch_label" class="badge badge-pill badge-danger" style="float: right;">disabled</span></label>
            <small class="form-text text-muted">If enabled, error messages will be shown for limited time of 7 seconds. When disabled, notifications need to be closed manually.</small>
          </div>

          <br/>

          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="hintKeys_switch" onclick="updateSetting('hintKeys')">
            <label class="custom-control-label" for="hintKeys_switch" style="width: 100%;">Hint keys: <span id="hintKeys_switch_label" class="badge badge-pill badge-danger" style="float: right;">disabled</span></label>
            <small class="form-text text-muted">Enable this option to see shortkeys hints for each element from the sidebar elements section.</small>
          </div>

          <br/>

          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="nonSpacedElements_switch" onclick="updateSetting('nonSpacedElements')">
            <label class="custom-control-label" for="nonSpacedElements_switch" style="width: 100%;">Nonspaced elements: <span id="nonSpacedElements_switch_label" class="badge badge-pill badge-danger" style="float: right;">disabled</span></label>
            <small class="form-text text-muted">Enable this setting to remove spaces between elements in EzGitDoc. Disable it to retrieve bottom margins back.</small>
          </div>

          <br/>

          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="deleteConfirmation_switch" onclick="updateSetting('deleteConfirmation')">
            <label class="custom-control-label" for="deleteConfirmation_switch" style="width: 100%;">Delete confirmation: <span id="deleteConfirmation_switch_label" class="badge badge-pill badge-danger" style="float: right;">disabled</span></label>
            <small class="form-text text-muted">Enable this option to require confirmation before deleting single element in EzGitDoc. If disabled, single elements are deleted without confirmation.</small>
          </div>

          <br/>

          <div class="btn-toolbar mb-4" role="toolbar" aria-label="Toolbar with button groups">
            <div>
              <small>EzGitDoc Single Element Font Size </small> <br/>
              <small id="activeFontSizeIndicator">Active: 60%</small>
            </div>
            <div class="btn-group mr-2" role="group" aria-label="First group">
              <button type="button" class="btn blue lighten-2" onclick="setSingleElementFontSize('60')">60%</button>
              <button type="button" class="btn light-blue lighten-2" onclick="setSingleElementFontSize('80')">80%</button>
              <button type="button" class="btn cyan lighten-2" onclick="setSingleElementFontSize('100')">100%</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--Footer-->
    <div class="modal-footer flex-center">
      <a type="button" class="btn btn-mdb-color" data-dismiss="modal">Close</a>
    </div>
  </div>
  <!--/.Content-->
</div>
</div>

<!-- Are you sure Modal [Remove all elements] -->
<div class="modal fade" id="resetConfirmationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
    <!--Content-->
    <div class="modal-content text-center">
      <!--Header-->
      <div class="modal-header d-flex justify-content-center">
        <p class="heading">Are you sure?</p>
      </div>

      <!--Body-->
      <div class="modal-body">
        <i class="fas fa-times fa-4x animated rotateIn"></i>
      </div>

      <!--Footer-->
      <div class="modal-footer flex-center">
        <a onclick="removeAllElements()" data-dismiss="modal" class="btn btn-outline-danger">Yes</a>
        <a type="button" class="btn btn-danger waves-effect" data-dismiss="modal">No</a>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>

<!-- Are you sure Modal [Remove single] -->
<div class="modal fade" id="removeElementConfirmationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
    <!--Content-->
    <div class="modal-content text-center">
      <!--Header-->
      <div class="modal-header d-flex justify-content-center">
        <p class="heading">Are you sure?</p>
      </div>

      <!--Body-->
      <div class="modal-body">
        <i class="fas fa-times fa-4x animated rotateIn"></i>
      </div>

      <!--Footer-->
      <div class="modal-footer flex-center">
        <a id="singleRemoveAnchor" data-dismiss="modal" class="btn  btn-outline-danger">Yes</a>
        <a type="button" class="btn btn-danger waves-effect" data-dismiss="modal">No</a>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>

<!-- Change Element Position Modal -->
<div class="modal fade" id="changeElementPositionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-sm modal-notify modal-primary" role="document">
    <!--Content-->
    <div class="modal-content text-center">
      <!--Header-->
      <div class="modal-header d-flex justify-content-center modal-custom-header">
        <p class="heading"><span class="iconify fa-2x" data-icon="vaadin:absolute-position" data-inline="false"></span></p>
      </div>
      <!--Body-->
      <div class="modal-body modal-custom-content">
        <small id="changeElementPositionModalText">Set new position for element [1, 26]</small>
        <input class="form-control" id="changeElementPositionModalInput" value="1" maxlength="5" autocomplete="off">
      </div>
      <!--Footer-->
      <div class="modal-footer flex-center">
        <a class="btn btn-elegant" onclick="placeElementInTheNewPosition()">Set</a>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>

<!-- Code Modal -->
<div class="modal fade right" id="codeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-full-height modal-right" role="document">
  <div class="modal-content modal-custom-content">
    <div class="modal-header modal-custom-header">
      <p class="heading lead m-0">Code
      </p>

      <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-body">
      <form>
        <div class="form-group">
          <label for="codeLanguage">Language <small class="optional-text">(optional)</small></label>
          <input class="form-control" id="codeLanguage" placeholder="e.g. javascript" maxlength="15" autocomplete="off">
        </div>

        <div class="container">
          <div class="form-group">
            <label for="codeArea">Code <small class="text-muted">(required)</small></label>
            <textarea class="form-control dark-textarea" rows="7" id="codeArea" autocomplete="off"></textarea>
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer justify-content-center">
      <div class="row">
        <div class="col text-left ml-1 mr-1 mt-2">
          Did you know?
          <hr class="m-0"/>
          <ul class="list-unstyled mt-3">
            <li><small class="form-text text-muted"><i class="fas fa-highlighter"></i> Use <kbd style="background-color: grey; padding: 6px;">TAB</kbd> key to make indentation in Code.</small> </li>
            <li><small class="form-text text-muted"><i class="fas fa-highlighter"></i> Textareas in EzGitDoc are resizable.</small></li>
            <li><small class="form-text text-muted"><i class="fas fa-highlighter"></i> GitHub supported languages can be found <a href="https://github.com/github/linguist/blob/master/lib/linguist/languages.yml" target="_blank">here</a>.</small></li>
          </ul>
        </div>
      </div>
      <div class="col text-left ml-0">
        <button onclick="createCode()" type="button" class="btn btn-elegant">Create</button>
      </div>
      <div class="col text-right mr-0">
        <button type="button" class="btn btn-unique" onclick="clearModal('#codeModal')">Reset</button>
      </div>
    </div>
  </div>
</div>
</div>

<!-- Code Update Modal -->
<div class="modal fade right" id="codeUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-side modal-top-right" role="document">
  <div class="modal-content modal-custom-content">
    <div class="modal-header modal-custom-header">
      <p class="heading lead m-0">Code Update
      </p>

      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-body">
      <form>
        <div class="form-group">
          <label for="codeLanguage_update">Language</label>
          <input class="form-control" id="codeLanguage_update" placeholder="e.g. javascript" maxlength="15" autocomplete="off">
        </div>

        <div class="container">
          <div class="form-group">
            <label for="codeArea_update">Code</label>
            <textarea class="form-control" rows="5" id="codeArea_update" autocomplete="off"></textarea>
          </div>
        </div>
      </form>
    </div>
    <div class="modal-footer justify-content-center">
      <button onclick="updateCode()" type="button" class="btn btn-mdb-color">Update</button>
    </div>
  </div>
</div>
</div>

<!-- Header Modal -->
<div class="modal fade right" id="headerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-full-height modal-right" role="document">
    <div class="modal-content modal-custom-content">
      <div class="modal-header modal-custom-header">
        <p class="heading lead m-0">Header
        </p>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="headerName">Text <small class="text-muted">(required)</small></label>
            <input class="form-control" id="headerName" placeholder="Text" autocomplete="off">
          </div>
        
          <ul class="list-group" style="cursor: pointer;" onselectstart="return false" ondragstart="return false">
            <label>Style <small class="optional-text">(optional, default = h2)</small></label>
            <li class="list-group-item" value="5" onclick="setElementAsActive(this)"><div class="row"><div class="col">h1</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/header_1.png" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
            <li class="list-group-item" value="6" onclick="setElementAsActive(this)"><div class="row"><div class="col">h2</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/header_2.png" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
            <li class="list-group-item" value="7" onclick="setElementAsActive(this)"><div class="row"><div class="col">h3</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/header_3.png" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
            <li class="list-group-item" value="8" onclick="setElementAsActive(this)"><div class="row"><div class="col">h4</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/header_4.png" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
            <li class="list-group-item" value="9" onclick="setElementAsActive(this)"><div class="row"><div class="col">h5</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/header_5.png" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
            <li class="list-group-item" value="10" onclick="setElementAsActive(this)"><div class="row"><div class="col">h6</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/header_6.png" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
          </ul> 
        </form>
      </div>

      <div class="modal-footer">
        <div class="col text-left ml-0">
          <button onclick="createHeader()" type="button" class="btn btn-elegant">Create</button>
        </div>
        <div class="col text-right mr-0">
          <button type="button" class="btn btn-unique" onclick="clearModal('#headerModal')">Reset</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Header Update Modal -->
<div class="modal fade right" id="headerUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-side modal-top-right" role="document">
    <div class="modal-content modal-custom-content">
      <div class="modal-header modal-custom-header">
        <p class="heading lead m-0">Header Update
        </p>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="headerName_update">Text</label>
            <input class="form-control" id="headerName_update" placeholder="Text" autocomplete="off">
          </div>
        
          <ul class="list-group" style="cursor: pointer;" onselectstart="return false" ondragstart="return false">
            <label>Style</label>
            <li class="list-group-item headerStyle_update" value="10" onclick="setElementAsActive(this)"><div class="row"><div class="col">h1</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/header_1.png" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
            <li class="list-group-item headerStyle_update" value="11" onclick="setElementAsActive(this)"><div class="row"><div class="col">h2</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/header_2.png" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
            <li class="list-group-item headerStyle_update" value="12" onclick="setElementAsActive(this)"><div class="row"><div class="col">h3</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/header_3.png" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
            <li class="list-group-item headerStyle_update" value="13" onclick="setElementAsActive(this)"><div class="row"><div class="col">h4</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/header_4.png" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
            <li class="list-group-item headerStyle_update" value="14" onclick="setElementAsActive(this)"><div class="row"><div class="col">h5</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/header_5.png" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
            <li class="list-group-item headerStyle_update" value="15" onclick="setElementAsActive(this)"><div class="row"><div class="col">h6</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/header_6.png" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
          </ul> 
        </form>
      </div>

      <div class="modal-footer justify-content-center">
        <button onclick="updateHeader()" type="button" class="btn btn-mdb-color">Update</button>
      </div>
    </div>
  </div>
</div>

<!-- Image Modal -->
<div class="modal fade right" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-full-height modal-right" role="document">
  <div class="modal-content modal-custom-content">
    <div class="modal-header modal-custom-header">
      <p class="heading lead m-0">Image
      </p>

      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-body">
      <form>
        <div class="form-group">
          <label for="altImageText">Alternate text <small class="text-muted">(required)</small></label>
          <input class="form-control" id="altImageText" placeholder="Image shows.." autocomplete="off">
        </div>
        
        <div class="form-group">
            <label for="imageURL">URL <small class="text-muted">(required)</small></label>
            <input class="form-control" id="imageURL" value="blank" autocomplete="off">
            <small class="form-text text-muted">If you don't have URL yet, leave blank.</small>
        </div>

        <div class="form-group">
            <label class="my-1 mr-2" for="imagePositionList">Alignment <small class="optional-text">(optional, default = center)</small></label>
            <select class="custom-select my-1 mr-sm-2" id="imagePositionList" autocomplete="off">
            <option value="0" selected>Choose...</option>
            <option value="1">Left aligned</option>
            <option value="2">Center aligned</option>
            <option value="3">Right aligned</option>
            </select>
        </div>

        <div class="container">
            <div class="form-group" id="scalingOptions">
                <div class="row justify-content-md-center">

                    <div class="col-md-12 text-center">
                        <label class="my-1 mr-2">Size</label>
                    </div>

                    <div class="col-md-6">
                        <label class="text-center col-md-12" for="xAxisProperty">X axis (width)</label>
                        <input class="form-control col-md-auto text-center" id="xAxisProperty" placeholder="0" autocomplete="off">
                    </div>
                    
                    <div class="col-md-6">
                        <label class="text-center col-md-12" for="yAxisProperty">Y axis (height)</label>
                        <input class="form-control col-md-auto text-center" id="yAxisProperty" placeholder="0" autocomplete="off">
                    </div>
                </div>
            </div>
        </div>
      </form>     

        <div class="row">
          <div class="col text-left">
            <ul class="list-unstyled ml-3">
                <li><small class="form-text text-muted"><i class="fas fa-highlighter"></i> At least one axis needs to be set.<br/>(it's value must be higher than 0)</small></li>
            </ul>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <div class="col text-left ml-0">
          <button onclick="createImage()" type="button" class="btn btn-elegant">Create</button>
        </div>
        <div class="col text-right mr-0">
          <button type="button" class="btn btn-unique" onclick="clearModal('#imageModal')">Reset</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Image Update Modal -->
<div class="modal fade right" id="imageUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-side modal-top-right" role="document">
  <div class="modal-content modal-custom-content">
    <div class="modal-header modal-custom-header">
      <p class="heading lead m-0">Image Update
      </p>

      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-body">
      <form>
        <div class="form-group">
          <label for="altImageText_update">Alternate text</label>
          <input class="form-control" id="altImageText_update" placeholder="Image shows.." autocomplete="off">
        </div>
        
        <div class="form-group">
            <label for="imageURL_update">URL</label>
            <input class="form-control" id="imageURL_update" value="blank" autocomplete="off">
          </div>

        <div class="form-group">
            <label class="my-1 mr-2" for="imagePositionList_update">Alignment</label>
            <select class="custom-select my-1 mr-sm-2" id="imagePositionList_update" autocomplete="off">
            <option value="0" selected>Choose...</option>
            <option value="1">Left aligned</option>
            <option value="2">Center aligned</option>
            <option value="3">Right aligned</option>
            </select>
        </div>

        <div class="container">
            <div class="form-group" id="scalingOptions">
                <div class="row justify-content-md-center">

                    <div class="col-md-12 text-center">
                        <label class="my-1 mr-2">Size</label>
                    </div>

                    <div class="col-md-6">
                        <label class="text-center col-md-12" for="xAxisProperty_update">X axis (width)</label>
                        <input class="form-control col-md-auto text-center" id="xAxisProperty_update" placeholder="0" autocomplete="off">
                    </div>
                    
                    <div class="col-md-6">
                        <label class="text-center col-md-12" for="yAxisProperty_update">Y axis (height)</label>
                        <input class="form-control col-md-auto text-center" id="yAxisProperty_update" placeholder="0" autocomplete="off">
                    </div>
                </div>
            </div>
        </div>
      </form>     
      </div>

      <div class="modal-footer justify-content-center">
        <button onclick="updateImage()" type="button" class="btn btn-mdb-color">Update</button>
      </div>
    </div>
  </div>
</div>

<!-- Link Modal -->
<div class="modal fade right" id="linkModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-full-height modal-right" role="document">
  <div class="modal-content modal-custom-content">
    <div class="modal-header modal-custom-header">
      <p class="heading lead m-0">Link
      </p>

      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-body">
      <form>
        <div class="form-group">
          <label for="hrefName">Text <small class="text-muted">(required)</small></label>
          <input class="form-control" id="hrefName" placeholder="Text" autocomplete="off">
        </div>

        <div class="form-group">
          <label for="hrefAddress">Href <small class="text-muted">(required)</small></label>
          <input class="form-control" id="hrefAddress" placeholder="e.g. https://mylink.com" autocomplete="off">
        </div>
      </form>
    </div>

    <div class="modal-footer">
      <div class="row">
        <div class="col text-left ml-2 mr-2 mt-2">
          Did you know?
          <hr class="m-0"/>
          <ul class="list-unstyled mt-3">
            <li><small class="form-text text-muted"><i class="fas fa-highlighter"></i> If you want to create more than one link, you can use link list or linked kbd table. You can also make link in text element using anchor tag(a).</small> </li>
          </ul>
        </div>
      </div>
      <div class="col text-left ml-0">
        <button onclick="createLink()" type="button" class="btn btn-elegant">Create</button>
      </div>
      <div class="col text-right mr-0">
        <button type="button" class="btn btn-unique" onclick="clearModal('#linkModal')">Reset</button>
      </div>
    </div>
  </div>
</div>
</div>

<!-- Link Update Modal -->
<div class="modal fade right" id="linkUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-side modal-top-right" role="document">
  <div class="modal-content modal-custom-content">
    <div class="modal-header modal-custom-header">
      <p class="heading lead m-0">Link Update
      </p>

      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-body">
      <form>
        <div class="form-group">
          <label for="hrefName_update">Text</label>
          <input class="form-control" id="hrefName_update" placeholder="Text" autocomplete="off">
        </div>

        <div class="form-group">
          <label for="hrefAddress_update">Href</label>
          <input class="form-control" id="hrefAddress_update" placeholder="e.g. https://mylink.com" autocomplete="off">
        </div>
      </form>
    </div>

    <div class="modal-footer justify-content-center">
      <button onclick="updateLink()" type="button" class="btn btn-mdb-color">Update</button>
    </div>
  </div>
</div>
</div>

<!-- List Modal -->
<div class="modal fade right" id="listModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-full-height modal-right" role="document">
    <div class="modal-content modal-custom-content">
      <div class="modal-header modal-custom-header">
        <p class="heading lead m-0">List
        </p>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <form>
            <div class="form-group">
              <label for="listSize">Size <small class="text-muted">(required)</small></label>
              <input class="form-control" id="listSize" placeholder="0" autocomplete="off">
            </div>

            <div class="form-group">
              <ul class="list-group" style="cursor: pointer;" onselectstart="return false" ondragstart="return false">
                <label>Type <small class="text-muted">(required)</small></label>
                <li class="list-group-item" value="0" onclick="setElementAsActive(this, 'toggle_list_iconField')"><div class="row"><div class="col">iconic</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/list_iconic.PNG" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
                <li class="list-group-item" value="1" onclick="setElementAsActive(this)"><div class="row"><div class="col">normal</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/list_normal.PNG" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
                <li class="list-group-item" value="2" onclick="setElementAsActive(this)"><div class="row"><div class="col">link</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/list_link.PNG" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
              </ul> 
              <small class="form-text text-muted text-center">Hover over magnifier icon to see the example.</small>
              <small class="form-text text-muted text-center">Click on the desired type to confirm choice.</small>
            </div>

            <div id="iconDiv" class="form-group">
              <label for="iconName">Got icon? Type name here</label>
              <input class="form-control" id="iconName" placeholder="e.g. smiley" autocomplete="off">
              <small class="form-text text-muted text-left">For the list of icons supported by GitHub, refer <a href="https://gist.github.com/rxaviers/7360908" target="_blank">here</a>.</small>
            </div>
        </form>
      </div>
      <div class="modal-footer justify-content-center">
        <div class="row">
          <div class="col text-left ml-2 mr-2 mt-2">
            Did you know?
            <hr class="m-0"/>
            <ul class="list-unstyled mt-3">
              <li><small class="form-text text-muted"><i class="fas fa-highlighter"></i> If you won't specify icon for iconic list, EzGitDoc will put unique Id that can be easily changed later.</small> </li>
              <li><small class="form-text text-muted"><i class="fas fa-highlighter"></i> You can extend lists and text tables during update process.</small> </li>
            </ul>
          </div>
        </div>
        <div class="col text-left ml-0">
          <button onclick="createList()" type="button" class="btn btn-elegant">Create</button>
        </div>
        <div class="col text-right mr-0">
          <button type="button" class="btn btn-unique" onclick="clearModal('#listModal')">Reset</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- List Update Modal -->
<div class="modal fade" id="listUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content modal-custom-content">
      <div class="modal-header modal-custom-header">
        <p class="heading lead m-0">List Update
        </p>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="list_update_dynamic_fields">Data</label>
            <div id="list_update_dynamic_fields">

            </div>
          </div>
      </form>
      <div class="text-center">
        <button type="button" class="btn btn-default btn-sm btn-brown" onclick='insertNewListElement()'>New item</button>
      </div>
      </div>
      <div class="modal-footer justify-content-center">
        <button onclick="updateList()" type="button" class="btn btn-mdb-color">Update</button>
      </div>
    </div>
  </div>
</div>

<!-- Table Modal -->
<div class="modal fade right" id="arrayModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-full-height modal-right" role="document">
  <div class="modal-content modal-custom-content">
    <div class="modal-header modal-custom-header">
      <p class="heading lead m-0">Table
      </p>

      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-body">
      <form>
        <div class="container">
            <div class="form-group" id="scalingOptions">
                <div class="row justify-content-md-center">

                    <div class="col-md-12 text-center">
                        <label class="my-1 mr-2">Dimensions <small class="text-muted">(required)</small></label>
                    </div>

                    <div class="col-md-6">
                        <label class="text-center col-md-12" for="arrRowsAmount">Rows</label>
                        <input class="form-control col-md-auto text-center" id="arrRowsAmount" placeholder="0" autocomplete="off">
                    </div>
                    
                    <div class="col-md-6">
                        <label class="text-center col-md-12" for="arrColsAmount">Columns</label>
                        <input class="form-control col-md-auto text-center" id="arrColsAmount" placeholder="0" autocomplete="off">
                    </div>
                </div>
                
                <br/>

                <ul class="list-group" style="cursor: pointer;" onselectstart="return false" ondragstart="return false">
                  <label>Type <small class="text-muted">(required)</small></label>
                  <li class="list-group-item" value="3" onclick="setElementAsActive(this)"><div class="row"><div class="col">text</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/table_text.PNG" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
                  <li class="list-group-item" value="4" onclick="setElementAsActive(this)"><div class="row"><div class="col">image</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/table_image.PNG" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
                  <li class="list-group-item" value="23" onclick="setElementAsActive(this)"><div class="row"><div class="col">kbd image</div> <div class="col text-right"><span class="badge badge-light" data-toggle="popover-hover" data-img="images/hover/table_kbdimage.png" style="vertical-align: top;"><i class="fas fa-search text-right"></i></span></div></div></li>
                  <li class="list-group-item" value="24" onclick="setElementAsActive(this)">linked kbd image</li>
                </ul> 
                <small class="form-text text-muted text-center">Hover over magnifier icon to see the example.</small>
                <small class="form-text text-muted text-center">Click on the type to make choice.</small>
            </div>
        </div>
      </form> 
    </div>
    
    <div class="modal-footer">
      <div class="col text-left ml-0">
        <button onclick="createTable()" type="button" class="btn btn-elegant">Create</button>
      </div>
      <div class="col text-right mr-0">
        <button type="button" class="btn btn-unique" onclick="clearModal('#arrayModal')">Reset</button>
      </div>
    </div>
  </div>
</div>
</div>

<!-- Text Table Update Modal -->
<div class="modal fade" id="textTableUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content modal-custom-content">
      <div class="modal-header modal-custom-header">
        <p class="heading lead m-0">Table Update
        </p>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="container" style="overflow: auto; max-height: 500px;">
            <div class="form-group">
              <label for="array_update_dynamic_fields">Data</label>
              <div id="array_update_dynamic_fields">
              </div>
            </div>
          </div>
        </form> 
        <div class="text-center">
          <button type="button" class="btn btn-default btn-sm btn-brown" onclick='insertNewRowIntoTableById("array_update_dynamic_fields")'>Add row</button>
        </div>
      </div>
      <div class="modal-footer justify-content-center">
        <button onclick="updateTable()" type="button" class="btn btn-mdb-color">Update</button>
      </div>
    </div>
  </div>
</div>

<!-- Table Universal Update Modal -->
<div class="modal fade" id="tableUniUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-side modal-top-right"" role="document">
    <div class="modal-content modal-custom-content">
      <div class="modal-header modal-custom-header">
        <p class="heading lead m-0">Table Update
        </p>
        
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="container" style="overflow: auto; max-height: 500px;">
            <div class="form-group">
              <div class="row justify-content-md-center">
                <div class="col-md-12 text-center">
                    <label class="my-1 mr-2">New images dimensions <small class="text-muted">(required)</small></label>
                </div>
                <div class="col-md-6">
                    <label class="text-center col-md-12" for="arrRowsAmount">Width</label>
                    <input class="form-control col-md-auto text-center" id="uniTabWidth" placeholder="0" autocomplete="off">
                </div>        
                <div class="col-md-6">
                    <label class="text-center col-md-12" for="arrColsAmount">Height</label>
                    <input class="form-control col-md-auto text-center" id="uniTabHeight" placeholder="0" autocomplete="off">
                </div>
            </div>
            </div>
          </div>
        </form> 
      </div>
      <div class="modal-footer justify-content-center">
        <button onclick="updateNonTextTable()" type="button" class="btn btn-mdb-color">Update</button>
      </div>
    </div>
  </div>
</div>

<!-- Text Modal -->
<div class="modal fade right" id="textModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-full-height modal-right" role="document">
  <div class="modal-content modal-custom-content">
    <div class="modal-header modal-custom-header">
      <p class="heading lead m-0">Text
      </p>
      
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-body">
      <form>
        <div class="container">
          <div class="form-group">
            <label for="commentArea">Text <small class="optional-text">(optional)</small></label>
            <textarea class="form-control" rows="5" id="commentArea" autocomplete="off"></textarea>
          </div>

          <div class="form-check">
            <label class="form-check-label">
              <input type="checkbox" class="form-check-input" value="" id="commentJustify">text justification
            </label>
          </div>
          
        </div>
      </form>

    </div>
    <div class="modal-footer justify-content-center">
      <div class="row">
        <div class="col text-left ml-2 mr-2 mt-2">
          Did you know?
          <hr class="m-0"/>
          <ul class="list-unstyled mt-3">
            <li><small class="form-text text-muted"><i class="fas fa-highlighter"></i> Leave text field empty if you want to use lorem ipsum template.</small> </li>
            <li><small class="form-text text-muted"><i class="fas fa-highlighter"></i> You can use HTML markup in the text area like: <br/> &lt;a href="address"&gt; text &lt;/a&gt; &nbsp; (to create link) <br/> &lt;strong&gt; text &lt;/strong&gt; &nbsp; (to bold text) <br/> &lt;em&gt; text &lt;/em&gt; &nbsp; (to emphasis text) <br/> &lt;del&gt; text &lt;/del&gt; &nbsp; (to strike text) <br/> etc. </small> </li>
          </ul>
        </div>
      </div>
      <div class="col text-left ml-0">
        <button onclick="createText()" type="button" class="btn btn-elegant">Create</button>
      </div>
      <div class="col text-right mr-0">
        <button type="button" class="btn btn-unique" onclick="clearModal('#textModal')">Reset</button>
      </div>
    </div>
  </div>
</div>
</div>

<!-- Text Update Modal -->
<div class="modal fade right" id="textUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-side modal-top-right" role="document">
  <div class="modal-content modal-custom-content">
    <div class="modal-header modal-custom-header">
      <p class="heading lead m-0">Text Update
      </p>

      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-body">
      <form>
        <div class="container">
          <div class="form-group">
            <label for="commentArea_update">Text:</label>
            <textarea class="form-control" rows="5" id="commentArea_update" autocomplete="off"></textarea>
          </div>

          <div class="form-check">
            <label class="form-check-label">
              <input type="checkbox" class="form-check-input" value="" id="commentJustify_update">text justification
            </label>
          </div>
          
        </div>
      </form>
    </div>
    <div class="modal-footer justify-content-center">
      <button onclick="updateText()" type="button" class="btn btn-mdb-color">Update</button>
    </div>
  </div>
</div>
</div>

<!-- Badge Modal -->
<div class="modal fade right" id="badgeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-full-height modal-right" role="document">
    <div class="modal-content modal-custom-content">
      <div class="modal-header modal-custom-header">
        <p class="heading lead m-0">Badge
        </p>
        
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="b_label">Label <small class="text-muted">(required, max 25 characters)</small></label>
            <input class="form-control" id="b_label" maxlength="25" autocomplete="off">
          </div>

          <div class="form-group">
            <label for="b_message">Message <small class="text-muted">(required, max 25 characters)</small></label>
            <input class="form-control" id="b_message" maxlength="25" autocomplete="off">
          </div>

          <div class="form-group">
            <label for="b_color">Color <small class="text-muted">(required)</small></label>
            <input class="form-control" id="b_color" autocomplete="off" value="#2B95E2">
          </div>

          <div class="form-group">
            <label for="b_style">Style <small class="optional-text">(optional)</small></label>
            <select id="b_style" class="browser-default custom-select" autocomplete="off">
              <option value="default" selected>Flat(default)</option>
              <option value="plastic">Plastic</option>
              <option value="flat-square">Flat-square</option>
              <option value="for-the-badge">For-the-badge</option>
              <option value="social">Social</option>
            </select>
          </div>

          <div class="form-group">
            <div class="row">
              <div class="col-12">
                <button onclick="badgePreview()" type="button" data-toggle="popover-click" class="btn btn-blue-grey" style="width: 100%; padding: auto 0 auto 0; margin: 0;">Preview</button>
              </div>
            </div>
            <div class="row">
              <div class="col-12 justify-content-center d-flex">
                <img id="loader_img" src="images/img_loader.svg" height="60"/>
                <img id="badge_preview_img" style="padding-top: 10px;"/>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer justify-content-center">
        <div class="row">
          <div class="col text-left">
            Did you know?
            <hr class="m-0"/>
            <ul class="list-unstyled mt-3">
              <li><small class="form-text text-muted"><i class="fas fa-highlighter"></i> Visit <a href="https://shields.io/" target="_blank">Shields.io</a> page to get predefined badges or to create more advanced one.</small> </li>
            </ul>
          </div>
        </div>
        <div class="col text-left ml-0">
          <button onclick="createBadge()" type="button" class="btn btn-elegant">Create</button>
        </div>
        <div class="col text-right mr-0">
          <button type="button" class="btn btn-unique" onclick="clearModal('#badgeModal', 'withImage')">Reset</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Badge Update Modal -->
<div class="modal fade right" id="badgeUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-side modal-top-right" role="document">
    <div class="modal-content modal-custom-content">
      <div class="modal-header modal-custom-header">
        <p class="heading lead m-0">Badge Update
        </p>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="b_label_update">Label <small class="text-muted">(required, max 25 characters)</small></label>
            <input class="form-control" id="b_label_update" maxlength="25" autocomplete="off">
          </div>

          <div class="form-group">
            <label for="b_message_update">Message <small class="text-muted">(required, max 25 characters)</small></label>
            <input class="form-control" id="b_message_update" maxlength="25" autocomplete="off">
          </div>

          <div class="form-group">
            <label for="b_color_update">Color <small class="text-muted">(required)</small></label>
            <input class="form-control" id="b_color_update" autocomplete="off" value="#2B95E2">
          </div>

          <div class="form-group">
            <label for="b_style_update">Style <small class="optional-text">(optional)</small></label>
            <select id="b_style_update" class="browser-default custom-select" autocomplete="off">
              <option value="default" selected>Flat(default)</option>
              <option value="plastic">Plastic</option>
              <option value="flat-square">Flat-square</option>
              <option value="for-the-badge">For-the-badge</option>
              <option value="social">Social</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer justify-content-center">
        <button onclick="updateBadge()" type="button" class="btn btn-mdb-color">Update</button>
      </div>
    </div>
  </div>
</div>

<!-- Details Modal -->
<div class="modal fade right" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-full-height modal-right" role="document">
    <div class="modal-content modal-custom-content">
      <div class="modal-header modal-custom-header">
        <p class="heading lead m-0">Details
        </p>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="details_summary">Summary <small class="text-muted">(required, max 60 characters)</small></label>
            <input class="form-control" id="details_summary" maxlength="60" autocomplete="off">
          </div>

          <div class="container">
            <div class="form-group">
              <label for="details_body">Body <small class="text-muted">(required)</small></label>
              <textarea class="form-control" rows="10" id="details_body" autocomplete="off"></textarea>
            </div>
          </div>
        </form>

      </div>
      <div class="modal-footer justify-content-center">
        <div class="row">
          <div class="col text-left">
            Did you know?
            <hr class="m-0"/>
            <ul class="list-unstyled mt-3">
              <li><small class="form-text text-muted"><i class="fas fa-highlighter"></i> HTML markup is allowed in <strong>Body</strong> and <strong>Summary</strong>.</small> </li>
            </ul>
          </div>
        </div>
        <div class="col text-left ml-0">
          <button onclick="createDetails()" type="button" class="btn btn-elegant">Create</button>
        </div>
        <div class="col text-right mr-0">
          <button type="button" class="btn btn-unique" onclick="clearModal('#detailsModal')">Reset</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Details Update Modal -->
<div class="modal fade right" id="detailsUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-full-height modal-right" role="document">
    <div class="modal-content modal-custom-content">
      <div class="modal-header modal-custom-header">
        <p class="heading lead m-0">Details Update
        </p>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="details_summary_update">Summary <small class="text-muted">(required, max 60 characters)</small></label>
            <input class="form-control" id="details_summary_update" maxlength="60" autocomplete="off">
          </div>

          <div class="container">
            <div class="form-group">
              <label for="details_body_update">Body <small class="text-muted">(required)</small></label>
              <textarea class="form-control" rows="8" id="details_body_update" autocomplete="off"></textarea>
            </div>
          </div>
        </form>

        <div class="row mt-3">
          <div class="col text-left">
            <ul class="list-unstyled">
                <li><small class="form-text text-muted"><i class="fas fa-highlighter"></i> <strong>Summary</strong> field is limited to 40 characters.</small> </li>
                <li><small class="form-text text-muted"><i class="fas fa-highlighter"></i> HTML markup is allowed in <strong>Body</strong> text area and <strong>Summary</strong> field.</small></li>
          </div>
        </div>

      </div>
      <div class="modal-footer justify-content-center">
        <button onclick="updateDetails()" type="button" class="btn btn-mdb-color">Update</button>
      </div>
    </div>
  </div>
</div>

<!-- Contact Modal -->
<div class="modal fade right" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-full-height modal-right" role="document">
  <div class="modal-content modal-custom-content">
    <div class="modal-header modal-custom-header">
      <p class="heading lead m-0">Contact
      </p>

      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-body">
      <div id="contact-form">
          <form method="POST" action="https://formspree.io/iddziku@gmail.com">

            <div class="form-group">
              <label>Subject</label>
              <input type="text" name="_subject" class="form-control" placeholder="EzGitDoc: " autocomplete="off" required>
              <small class="form-text text-muted">e.g. EzGitDoc: taking part in a project</small>
            </div>
        
            <div class="form-group">
              <label>Your email</label>
              <input type="email" name="_replyto" class="form-control" placeholder="email@test.com" autocomplete="off" required>
            </div>
            
            <!-- Message Description -->
            <div class="form-group">
              <label for="commentArea">Text</label>
              <textarea class="form-control" maxlength="200" rows="5" id="commentArea" autocomplete="off" name="message" placeholder="Description" required></textarea>
              <small class="form-text text-muted">Max 200 characters</small>
            </div>

            <div style="float: right;">
              <button type="submit" class="btn btn-mdb-color">Send Message</button>
            </div>
          </form>
      </div>
      <!-- End #contact-form -->
    </div>
  </div>
</div>
</div>

<!-- Quick Builder Modal -->
<div class="modal fade" id="quickBuilderModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">

  <!-- Change class .modal-sm to change the size of the modal -->
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content modal-custom-content">
      <div class="modal-header modal-custom-header">
        <p class="heading lead m-0">Quickbuilder 1.0
        </p>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group shadow-textarea">
          <label for="exampleFormControlTextarea6">Terminal</label>
          <textarea class="form-control z-depth-1" id="quickBuilderTextArea" autocomplete="off" rows="10" placeholder="// Make document schemes much more faster for the cost of missing preview and less &#10;// applicable options. If you don't need to hurry, use EzGitDoc standard way :)&#10;&#10;// #1: Leave space between every used command.&#10;// #2: Orders are case sensitive.&#10;// #3: Some commands parameters are required.&#10;&#10;Examples:&#10;image{250} header{H3} text header label{#DFD7C8} image link code list{link-3} table{image-2|4} label"></textarea>
        </div>
        <div class="form-group">
          <div class="row">
            <div class="col-md-6" style="padding-left: 25px;">
              Elements with extra parameters<br/>
              <small>Hover over example to see more information.</small>
              <br/>
              <br/>
              <div style="text-align: center; font-size: 20px; font-family: Consolas;">
                <span class="badge badge-light" data-tooltip="tooltip" data-placement="top" title="header{X} where X is value from H1 to H6. H3 is default. {X} is optional.">header{H2}</span>
                <span class="badge badge-light" data-tooltip="tooltip" data-placement="top" title="image{X} where X is integer value. 300 pixels is default value. {X} is optional.">image{250}</span>
                <span class="badge badge-light" data-tooltip="tooltip" data-placement="top" title="list{X-Y} where X is list type(iconic, normal, link) and Y is number of elements. Both parameters are required.">list{normal-4}</span>
                <span class="badge badge-light" data-tooltip="tooltip" data-placement="top" title="table{X-Y|Z} where X is table type(text, image) and Y/Z amount of rows/columns. All parameters are required.">table{text-2|4}</span>
                <span class="badge badge-light" data-tooltip="tooltip" data-placement="top" title="label{X} where X is optional color parameter that accepts hex value.">label{#4256f5}</span>
              </div>
            </div>
            <div style="text-align: center;" class="col-md-6">
              <button type="button" class="btn btn-light btn-sm" onclick="insertCodeTemplate()">code</button>
              <button type="button" class="btn btn-light btn-sm" onclick="insertHeaderTemplate()">header</button>
              <button type="button" class="btn btn-light btn-sm" onclick="insertImageTemplate()">image</button>
              <button type="button" class="btn btn-light btn-sm" onclick="insertLinkTemplate()">link</button>
              <button type="button" class="btn btn-light btn-sm" onclick="insertListTemplate()">list</button>
              <button type="button" class="btn btn-light btn-sm" onclick="insertTableTemplate()">table</button>
              <br/>
              <button type="button" class="btn btn-light btn-sm" onclick="insertTextTemplate()">text</button>
              <button type="button" class="btn btn-light btn-sm" onclick="insertLabelTemplate()">label</button>
              <br/>
              <br/>
              <small>Left whitespace is included automatically</small>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-mdb-color" onclick="generateQuickTemplate()">Generate</button>
      </div>
    </div>
  </div>
</div>

<!-- Quick Builder Result Modal -->
<div class="modal fade right" id="qbResultModal" tabindex="-2" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-side modal-top-right" role="document">
    <div class="modal-content modal-custom-content">
      <div class="modal-header modal-custom-header">
        <p class="heading lead m-0">Generated Output
        </p>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group shadow-textarea">
          <label for="exampleFormControlTextarea6"><i class="far fa-comment-alt"></i></label>
          <textarea class="form-control z-depth-1" id="qbResultTextArea" autocomplete="off" rows="5" placeholder="There is nothing to display..."></textarea>
        </div>
      </div>
      <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-unique btn-sm" data-dismiss="modal">Close</button>
        <button type="button" class="btn blue-gradient btn-sm" onclick="quickBuilderCopyToClipboard()">Copy to clipboard</button>
      </div>
    </div>
  </div>
</div>

<!-- Generated Code Modal -->
<div class="modal fade" id="generatedCodeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content modal-custom-content">
      <div class="modal-header modal-custom-header">
        <p class="heading lead m-0">Success!
        </p>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group shadow-textarea">
          <label for="codeTextBox">Generated Code</label>
          <button type="button" class="btn btn-unique" onclick="saveStaticDataToFile()" style="float: right; margin: 0;">Save to file</button>
          <button type="button" data-toggle="tooltip" data-placement="top" 
          class="btn blue-gradient" style="float: right; margin: 0;" onclick="copyToClipboard(this)">Copy to clipboard</button>
          <textarea class="form-control z-depth-1" id="codeTextBox" rows="8" placeholder="Write something here..." readonly></textarea>
        </div>
      </div>
      <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-mdb-color" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- 
********************************************
Script references
********************************************
-->

    <script src="https://kit.fontawesome.com/37c75e360e.js" crossorigin="anonymous"></script>

    <!-- LESS.js -->
    <script src="//cdn.jsdelivr.net/npm/less" ></script>

    <!-- Iconfic -->
    <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>

    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Custom Scrollbar -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <!-- Popper -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <!-- Bootstrap colorpicker -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.2.0/js/bootstrap-colorpicker.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.13.0/js/mdb.min.js"></script>
    <!-- SortableJS -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.min.js"></script>
    <!-- FileSaverJS -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>

    <!-- ezGitDoc references -->
    <script src="js/ezMisc.js"></script>
    <script src="js/ezUpdateLogic.js"></script>
    <script src="js/ezValidation.js"></script>
    <script src="js/ezSettings.js"></script>
    <script src="js/ezReferencesLogic.js"></script>
    <script src="js/ezGenLogic.js"></script>
    <script src="js/ezLogicTranslator.js"></script>
    <script src="js/ezBtnController.js"></script>
    <script src="js/ezQuickBuilder.js"></script>
</body>
</html>