url_shortener.html

url_shortener.html (2063B)
      1 {% extends "base.html" %}
      2 {% from "_icons.html" import icon %}
      3 {% set page_title = 'URL Shortener' %}
      4 {% set page_description = 'Shorten and mask any public URL.' %}
      5 {% block page_class %}shorten{% endblock %}
      6 
      7 {% block content %}
      8 <section class="page-head">
      9     <h1>URL Shortener</h1>
     10     <p class="lede">Paste any public <code>https://</code> URL and get back a masked, shareable link. The destination is never exposed until someone visits the masked URL.</p>
     11 </section>
     12 
     13 <p class="callout callout-warning" role="note">
     14     {{ icon('clock', 18) }}
     15     <span><strong>Rate limit:</strong> each IP can create <strong>10 links per minute</strong> and <strong>50 per hour</strong>. Failed attempts count too. Only <code>https://</code> URLs up to 2048 characters are accepted. <a href="/documentation#rate-limits">How rate limits work</a></span>
     16 </p>
     17 
     18 <div class="input-group" id="shorten-group">
     19     <input type="url" id="url-input" class="url-input" placeholder="Paste a URL to shorten (e.g. https://example.com)" aria-label="URL to shorten" autocomplete="off" spellcheck="false" required>
     20     <button type="button" class="input-clear-btn" id="url-clear" aria-label="Clear URL">{{ icon('close', 16, 2.5) }}</button>
     21 </div>
     22 
     23 <div class="actions">
     24     <button type="button" class="btn btn-primary" id="shorten-btn">
     25         <span class="btn-icon btn-icon-default">{{ icon('link') }}</span>
     26         <span class="btn-icon btn-icon-spinner spin-anim">{{ icon('loader') }}</span>
     27         <span id="shorten-btn-label">Shorten URL</span>
     28     </button>
     29 </div>
     30 
     31 <div id="error-box" class="error-box" role="alert" aria-live="polite"></div>
     32 
     33 <div id="result" class="result-box" hidden>
     34     <h2>Your masked URL</h2>
     35     <div class="result-url">
     36         <a href="#" id="masked-link" target="_blank" rel="noopener noreferrer"></a>
     37         <button type="button" class="btn btn-sm" id="copy-btn" data-copy="">{{ icon('copy', 14) }}<span>Copy</span></button>
     38     </div>
     39     <p class="info-text">This link will redirect to the destination URL when visited.</p>
     40 </div>
     41 {% endblock %}