main.html

<!--

All Locusts are Grasshoppers
But not all Grasshoppers are Locusts

//_____ __
@ )====// .\___
\#\_\__(_/_\\_/
  / /       \\

-->

<!DOCTYPE html>

<html>
  <head>
    <title>Grasshopper</title>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/addlist.css">
    <link rel="stylesheet" href="css/menubutton.css">
    <link rel="stylesheet" href="css/needcontext.css">
    <link rel="stylesheet" href="css/overrides.css">

    <link id="custom_font" rel="stylesheet" type="text/css" href="">

    <script src="js/bundle.libs.js"></script>
    <script src="js/app.js"></script>
    <script src="js/bundle.main.js"></script>
    <script src="js/overrides.js"></script>
  </head>

  <body>
    <div id="all" class="hidden">
      <div id="cover"></div>
      <div id="background" class="background"></div>

      <div id="supermain">
        <div id="main">
          <div id="main_top"></div>
          <div id="main_center"></div>
          <div id="main_bottom"></div>
        </div>
      </div>

      <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
        <symbol id="back_icon" viewBox="0 0 32 32" fill="currentColor">
          <path d="M 17 5 L 15.40625 6.1875 L 3.40625 15.1875 L 2.34375 16 L 3.40625 16.8125 L 15.40625 25.8125 L 17 27 L 17 19.625 L 25.40625 25.8125 L 27 26.96875 L 27 5.03125 L 25.40625 6.1875 L 17 12.375 Z M 25 8.96875 L 25 23.03125 L 16.59375 16.84375 L 15.46875 16 L 16.59375 15.15625 Z M 15 9 L 15 23 L 5.6875 16 Z"/>
        </symbol>

        <symbol id="speaker_icon" viewBox="0 0 32 32" fill="currentColor">
          <path d="M 17 3.59375 L 15.28125 5.28125 L 9.5625 11 L 5 11 L 5 21 L 9.5625 21 L 15.28125 26.71875 L 17 28.40625 Z M 23.8125 8.1875 L 22.40625 9.59375 C 25.925781 13.113281 25.925781 18.761719 22.40625 22.28125 L 23.8125 23.71875 C 28.09375 19.4375 28.09375 12.46875 23.8125 8.1875 Z M 15 8.4375 L 15 23.5625 L 10.71875 19.28125 L 10.40625 19 L 7 19 L 7 13 L 10.40625 13 L 10.71875 12.71875 Z M 20.90625 11.09375 L 19.5 12.5 C 21.410156 14.410156 21.402344 17.574219 19.46875 19.59375 L 20.9375 21 C 23.601563 18.21875 23.59375 13.78125 20.90625 11.09375 Z"/>
        </symbol>

        <symbol id="sun_icon" viewBox="0 0 32 32" fill="currentColor">
          <path d="M 15 3 L 15 8 L 17 8 L 17 3 Z M 7.5 6.09375 L 6.09375 7.5 L 9.625 11.0625 L 11.0625 9.625 Z M 24.5 6.09375 L 20.9375 9.625 L 22.375 11.0625 L 25.90625 7.5 Z M 16 9 C 12.144531 9 9 12.144531 9 16 C 9 19.855469 12.144531 23 16 23 C 19.855469 23 23 19.855469 23 16 C 23 12.144531 19.855469 9 16 9 Z M 16 11 C 18.773438 11 21 13.226563 21 16 C 21 18.773438 18.773438 21 16 21 C 13.226563 21 11 18.773438 11 16 C 11 13.226563 13.226563 11 16 11 Z M 3 15 L 3 17 L 8 17 L 8 15 Z M 24 15 L 24 17 L 29 17 L 29 15 Z M 9.625 20.9375 L 6.09375 24.5 L 7.5 25.90625 L 11.0625 22.375 Z M 22.375 20.9375 L 20.9375 22.375 L 24.5 25.90625 L 25.90625 24.5 Z M 15 24 L 15 29 L 17 29 L 17 24 Z"/>
        </symbol>

        <symbol id="arrow_up_icon" viewBox="0 0 32 32" fill="currentColor">
          <polygon points="16 8 4 24 28 24" />
        </symbol>
        <symbol id="arrow_up_empty_icon" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2">
          <polygon points="16 8 4 24 28 24" />
        </symbol>

        <symbol id="arrow_down_icon" viewBox="0 0 32 32" fill="currentColor">
          <polygon points="16 24 4 8 28 8" />
        </symbol>
        <symbol id="arrow_down_empty_icon" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2">
          <polygon points="16 24 4 8 28 8" />
        </symbol>

        <symbol id="arrow_left_icon" viewBox="0 0 32 32" fill="currentColor">
          <polygon points="24 4 8 16 24 28" />
        </symbol>
        <symbol id="arrow_left_empty_icon" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2">
          <polygon points="24 4 8 16 24 28" />
        </symbol>

        <symbol id="arrow_right_icon" viewBox="0 0 32 32" fill="currentColor">
          <polygon points="8 4 24 16 8 28" />
        </symbol>
        <symbol id="arrow_right_empty_icon" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2">
          <polygon points="8 4 24 16 8 28" />
        </symbol>
      </svg>
    </div>

    <template id="template_about">
      <div id="about_container" class="flex_column_center gap_2">
        <img id="about_image" class="about_image" src="img/grasshopper.png">
        <div id="about_dev" class="flex_column_center"></div>

        <div class="flex_row_center gap_1">
          <div id="show_about_info" class="doubleline">Info</div>
          <div>|</div>
          <div id="show_about_lore" class="doubleline">Lore</div>
          <div>|</div>
          <div id="show_about_credits" class="doubleline">Credits</div>
          <div>|</div>
          <div id="show_about_links" class="doubleline">Links</div>
          <div>|</div>
          <div id="show_about_donate" class="doubleline">Donate</div>
        </div>

        <div>grasshopper@merkoba.com</div>
      </div>
    </template>

    <template id="template_about_info">
      <div id="about_info_container" class="flex_column_center gap_2">
        <img class="about_image" src="img/info.jpg">

        <div id="about_filter_container" class="flex_row_center gap_1">
          <div id="about_filter_bottom" class="button filter_btn"></div>
          <input type="text" autocomplete="off" spellcheck="false" class="text small_filter" id="about_info_filter" placeholder="Filter">
          <div id="about_filter_clear" class="button filter_btn"></div>
        </div>

        <div id="about_info" class="filter_container"></div>
      </div>
    </template>

    <template id="template_about_lore">
      <div id="about_container" class="flex_column_center gap_2">
        <img class="about_image" src="img/leaf.jpg">
        <div id="about_lore"></div>
      </div>
    </template>

    <template id="template_about_credits">
      <div id="about_container" class="flex_column_center gap_2">
        <img class="about_image" src="img/mural.jpg">
        <div id="about_credits"></div>
      </div>
    </template>

    <template id="template_about_donate">
      <div id="about_container" class="flex_column_center gap_2">
        <div class="flex_column_center gap_1">
          <div class="about_header">
            Here you can support the development of Grasshopper
            through crypto donations, ko-fi, or other means
          </div>
        </div>

        <hr class="full_width">

        <div class="flex_column_center gap_2">
          <div class="about_item">Bitcoin:</div>
          <img class="about_image" src="img/donate_bitcoin.png">
          <div id="about_donate_bitcoin"></div>
        </div>

        <hr class="full_width">

        <div class="flex_column_center gap_2">
          <div class="about_item">Monero:</div>
          <img class="about_image" src="img/donate_monero.png">
          <div id="about_donate_monero"></div>
        </div>

        <hr class="full_width">

        <div class="flex_column_center gap_1">
          <div class="about_item">Ethereum (USDC on Base):</div>
          <div id="about_donate_eth"></div>
        </div>

        <hr class="full_width">

        <a target="_blank" href="https://ko-fi.com/glue">Ko-Fi</a>

        <hr class="full_width">

        <div>grasshopper@merkoba.com</div>
      </div>
    </template>

    <template id="template_about_links">
      <div id="about_container" class="flex_column_center gap_2">
        <img class="about_image" src="img/icon.jpg">
        <div id="about_links" class="flex_column_center gap_15"></div>
      </div>
    </template>

    <template id="template_about_top">
      <div class="flex_row_center gap_15">
        <div id="about_name"></div>
        <div id="about_close" class="button"></div>
      </div>
    </template>

    <template id="template_about_info_top">
      <div class="flex_row_center gap_15">
        <div id="about_info_name"></div>
        <div id="about_info_close" class="button"></div>
      </div>
    </template>

    <template id="template_about_lore_top">
      <div class="flex_row_center gap_15">
        <div id="about_lore_name"></div>
        <div id="about_lore_close" class="button"></div>
      </div>
    </template>

    <template id="template_about_credits_top">
      <div class="flex_row_center gap_15">
        <div id="about_credits_name"></div>
        <div id="about_credits_close" class="button"></div>
      </div>
    </template>

    <template id="template_about_donate_top">
      <div class="flex_row_center gap_15">
        <div id="about_donate_name"></div>
        <div id="about_donate_close" class="button"></div>
      </div>
    </template>

    <template id="template_about_links_top">
      <div class="flex_row_center gap_15">
        <div id="about_links_name"></div>
        <div id="about_links_close" class="button"></div>
      </div>
    </template>

    <template id="template_lock_screen">
      <div id="lock_screen_container" class="flex_column_center gap_2">
        <img id="lock_screen_image">
        <div id="lock_screen_text"></div>
      </div>
    </template>

    <template id="template_lock_screen_top">
      <div class="flex_row_center gap_2">
        <div id="unlock_screen" class="button">Unlock</div>
      </div>
    </template>

    <template id="template_color_picker">
      <div id="color_picker_container" class="flex_column_center gap_2">
        <div id="color_picker"></div>

        <div class="flex_column_center gap_2">
          <div class="flex_row_center gap_2">
            <div id="color_picker_copy_hex" class="button color_picker_button" title="Copy the Hex value to the clipboard">HEX</div>
            <div id="color_picker_copy_rgb" class="button color_picker_button" title="Copy the RGB value to the clipboard">RGB</div>
            <div id="color_picker_copy_hsl" class="button color_picker_button" title="Copy the HSL value to the clipboard">HSL</div>
          </div>

          <div class="flex_row_center gap_2">
            <div id="color_picker_copy_hexa" class="button color_picker_button" title="Copy the Hex alpha value to the clipboard">HEXA</div>
            <div id="color_picker_copy_rgba" class="button color_picker_button" title="Copy the RGBA value to the clipboard">RGBA</div>
            <div id="color_picker_copy_hsla" class="button color_picker_button" title="Copy the HSLA value to the clipboard">HSLA</div>
          </div>

          <div class="flex_row_center gap_1">
            <input id="color_picker_name_input" type="text" placeholder="Color Name">
            <div id="color_picker_name_button" class="button color_picker_button" title="Set the color using names like 'red'">Set</div>
          </div>
        </div>
      </div>
    </template>

    <template id="template_color_picker_top">
      <div class="flex_row_center gap_2">
        <div>Color Picker</div>
        <div id="color_picker_close" class="button">Close</div>
      </div>
    </template>

    <template id="template_signals">
      <div id="signals_container" class="flex_column_center gap_2">
        <div id="signals_filter_container" class="flex_row_center gap_1">
          <div id="signals_filter_bottom" class="button filter_btn"></div>
          <input type="text" autocomplete="off" spellcheck="false" class="text small_filter" id="signals_filter" placeholder="Filter">
          <div id="signals_filter_clear" class="button filter_btn"></div>
        </div>

        <div id="signals_items" class="filter_container flex_column_center gap_2"></div>
      </div>
    </template>

    <template id="template_signals_top">
      <div class="flex_row_center gap_15">
        <div id="signals_info">Signals</div>
        <div id="signals_edit" class="button">Edit</div>
        <div id="signals_close" class="button">Close</div>
      </div>
    </template>

    <template id="template_alert">
      <div id="alert_message"></div>
    </template>

    <template id="template_textarea">
      <div id="textarea_title"></div>

      <div id="textarea_content">
        <img id="textarea_image">

        <textarea autocomplete="off" spellcheck="false" id="textarea_text" class="textarea" readonly></textarea>
        <div id="textarea_simple"></div>

        <div id="textarea_buttons" class="flex_row_center gap_1">
          <div id="textarea_close" class="button">Close</div>
          <div id="textarea_copy" class="button">Copy</div>
        </div>

        <div id="textarea_custom_buttons" class="flex_row_center gap_1"></div>
      </div>
    </template>

    <template id="template_palette">
      <div class="flex_row_center gap_1">
        <input type="text" autocomplete="off" spellcheck="false" id="palette_filter" class="text" placeholder="Command">
        <div id="palette_filter_clear" class="button filter_btn">x</div>
      </div>

      <div id="palette_items" class="filter_container"></div>
    </template>

    <template id="template_close_tabs">
      <div class="flex_column_center gap_2">
        <div class="flex_row_center gap_2">
          <div id="close_tabs_prev" class="button">&lt;</div>
          <div id="close_tabs_title" class="flex_row_center bigger action"></div>
          <div id="close_tabs_next" class="button">&gt;</div>
        </div>

        <div class="flex_column_center gap_2">
          <div id="close_tabs_include_pins_container" class="flex_row_center gap_1 self_start">
            <input id="close_tabs_include_pins" class="settings_checkbox" type="checkbox">
            <div>Include Pins</div>
          </div>

          <div id="close_tabs_include_normal_container" class="flex_row_center gap_1 self_start">
            <input id="close_tabs_include_normal" class="settings_checkbox" type="checkbox">
            <div>Include Normal</div>
          </div>

          <div id="close_tabs_include_unloaded_container" class="flex_row_center gap_1 self_start">
            <input id="close_tabs_include_unloaded" class="settings_checkbox" type="checkbox">
            <div>Include Unloaded</div>
          </div>
        </div>

        <div id="close_tabs_button" class="button">Close</div>
      </div>
    </template>

    <template id="template_sort_tabs">
      <div class="flex_column_center gap_2">
        <div>Sort By Domain</div>

        <div class="flex_row_center gap_1 self_start" title="Include unloaded tabs">
          <input id="sort_tabs_pins" class="settings_checkbox" type="checkbox">
          <div>Include Pins</div>
        </div>

        <div class="flex_row_center gap_1 self_start" title="Include unloaded tabs">
          <input id="sort_tabs_normal" class="settings_checkbox" type="checkbox">
          <div>Include Normal</div>
        </div>

        <div class="flex_row_center gap_1 self_start" title="Include unloaded tabs">
          <input id="sort_tabs_reverse" class="settings_checkbox" type="checkbox">
          <div>In Reverse</div>
        </div>

        <div id="sort_tabs_button" class="button">Sort</div>
      </div>
    </template>

    <template id="template_dialog">
      <div id="dialog_message" class="pre_wrap"></div>
      <div id="dialog_buttons" class="flex_row_center gap_1"></div>
    </template>

    <template id="template_prompt">
      <div class="flex_column_center gap_15">
        <div id="prompt_info" class="hidden"></div>

        <div id="prompt_container" class="flex_row_center gap_1">
          <input type="text" id="prompt_input" class="prompt_input text" list="prompt_suggestions">
          <div id="prompt_list" class="button" title="Pick from a list"></div>
        </div>
      </div>

      <div class="flex_row_center gap_1">
        <div id="prompt_fill" class="button button_2">Fill</div>
        <div id="prompt_clear" class="button button_2">Clear</div>
        <div id="prompt_reveal" class="button button_2">Reveal</div>
        <div id="prompt_submit" class="button">Submit</div>
      </div>
    </template>

    <datalist id="prompt_suggestions"></datalist>
    <script src="js/init.js"></script>
  </body>
</html>