listing_tool.html

---
layout: page
css-list:
  - "assets/css/index.css"
  - "assets/css/merchant.css"
javascript-list:
  - "assets/js/merchant.js"
---
<!-- hero section -->
<section class="hero-section">
  <div class="content">      
    <img class="logo" alt="Pirate Accepted Here" src="{{ site.baseurl }}/button/button6.png" style="max-width: 300px;margin: 40px auto;"/>
    <div>
      <h1>Merchant Listing Tool</h1>
      <strong>Begin accepting ARRR today!</strong>
      <p>
        Use this form to create and submit a listing for your store on ARRRmada.com
      </p>
      <a class="btn" href="{{ site.baseurl }}/" title="View Pirate Chain merchants">◄ HOME</a>
    </div>
  </div>
</section>

<!-- Merchant listing builder -->
<section class="merchant-listingBuilder">
  <div class="content">

    <h2>Build Your Listing</h2>
    <p style="max-width: 550px; margin: auto;">
      Design your custom listing, then generate a code for submital to the ARRRmada.com directory.
    </p>
    <p>
      <label for="merchantNameInput">Merchant Name <span id="nameCharCount">0/35</span></label>
      <input type="text" id="merchantNameInput" maxlength="35" oninput="updateCharacterCount('merchantNameInput', 'nameCharCount')" />

      <label for="merchantDescInput">Description  <span id="descCharCount">0/160</span></label>
      <textarea id="merchantDescInput" maxlength="160" oninput="updateCharacterCount('merchantDescInput', 'descCharCount')"></textarea>

      <label for="merchantURLInput" >Listing Link URL:</label>
      <input type="text" id="merchantURLInput" />
      <button id="merchantURLButton" onclick="updateMerchantURL()">Add Link URL</button>
      <p id="urlMessage"></p>
    </p>

    <!-- Listing Preview -->
    <label for="listing_preview">Listing Preview:</label>
    <div class="merchant-box" id="listing_preview">
      <div class="merchant-imgbox">
        <img alt="Default Merchant Image" class="merchant-img" src="{{ site.baseurl }}/assets/img/site/default_merchant.png" id="merchant_img" />
      </div>
      <h2 id="merchant_name"></h2>
      <p class="merchant-description" id="merchant_description"></p>
      <div class="tag-box" id="merchant_tags"></div>
    </div>
    <p>
      <a href="" id="merchant_url" target="_blank" rel="noopener noreferrer"></a>
    </p>

    <label for="merchantImageInput" >Upload Listing Image:</label>
    <input type="file" id="merchantImageInput" accept="image/*" onchange="updateMerchantImage()" />
    <input type="hidden" id="merchant_image_filename" />
    <p id="uploadMessage"></p>

    <label for="tagSelectionCount">Select Tags <span id="tagSelectionCount">0/6</span></h3>  
    <div id="tagsInput" class="grid-container">
      {% assign sortedTags = site.data.tags | sort: 'name' %}
      {% for tag in sortedTags %}
        <div class="grid-item">
          <input type="checkbox" id="tag-{{tag.id}}" data-id="{{tag.id}}" data-name="{{tag.name}}" onchange="updateTagSelection()" />
          <label class="tag_name" for="tag-{{tag.id}}">{{tag.name}}</label>
        </div>
      {% endfor %}
    </div>

    <p class="generate_desc">
      Satisfied with your listing design?
    </p>
    <button class="btn generate_code" onclick="generateCode()">Generate Listing Code</button>
    <div id="errorMessage"></div>
    <div id="codeOutputContainer">
      <div id="codeOutput">This is the text to be copied</div>
      <button id="copyButton" title="copy code" onclick="copyToClipboard()">
        &#x1F4CB;
      </button>
      <div id="copiedText" class="hidden">Code Copied!</div>
    </div>
    
    <div id="submitListing">
      <h2>SUBMIT YOUR LISTING</h2>
      <p>You have two options to submit the code and thus your listing. One is via Github, for which you need an account on Github. And secondly, with the help of a Sapling transaction.
      <p>
        <b>SAVE YOUR CODE</b> - The code you've generated represents your unique listing. Be sure to save it before leaving this page.
      </p>
      <p>
         Please copy the entire code, including the <b>"---BEGIN CODE---"</b> and <b>"---END CODE---"</b> parts.
      </p>
      <p>
        To submit your listing for review in the ARRRmada directory, please initiate a GitHub form below where you will paste your code and upload the chosen image.
      </p>
      <p>
        <a class="btn" href="{{ site.repo }}/issues/new?assignees=&labels=&projects=&template=merchant_listing_submission.yaml" target="_blank" rel="noopener noreferrer">SUBMIT LISTING</a>
      </p>
      <p>
       You also have the second <strong>option to submit your entry with a Sapling transaction</strong>. You can simply copy the complete code and send it as a memo within the transaction to the following address:</p>
      <p>
        zs1uud9mr4mth03cnk96d2ssjhjzg28ugq8zk5vvezqam9h9em3sr9d7582ststcrrcqecujrcx9w9
      </p>
      <p>Please note that if you register your listing in a Sapling transaction, you must also send the path to an image with the generated listing code if an image is to be displayed in 
        addition to the link and description. </p>
      <p>Please be patient, both options may cause delays as the entries are checked manually. 
      </p>
    </div>
  </div>
</section>