{% extends "base.html" %} {% set _page_id =
normalize_page_id(hashformat=fileformat) %} {% set _cms_title =
get_page_content(_page_id, 'title', g.lang_code) %} {% set _cms_desc =
get_page_content(_page_id, 'description', g.lang_code) %} {% set _cms_heading =
get_page_content(_page_id, 'page_heading', g.lang_code) %} {% set _cms_page_desc
= get_page_content(_page_id, 'page_description', g.lang_code) %} {% set
_cms_head_html = get_page_content(_page_id, 'head_html', g.lang_code) %} {% set
_cms_og_image = get_page_content(_page_id, 'og_image', g.lang_code) %} {% block
og_image_tag %}{% if _cms_og_image %}<meta
    property="og:image"
    content="{{ _cms_og_image }}"
/>{% endif %}{% endblock %} {% block title %} {% if _cms_title %} {{ _cms_title
}} {% else %} {{ algorithm_name }} {% trans %}Hash Generator{% endtrans %} |
OnlineConvert.cc {% endif %} {% endblock %} {% block description %} {% if
_cms_desc %} {{ _cms_desc }} {% else %} {% trans algo=algorithm_name %}Generate
{{ algo }} hashes online from text or file upload. Free, fast and secure.{%
endtrans %} {% endif %} {% endblock %} {% block extra_head %} {% if
_cms_head_html %}{{ _cms_head_html|safe }}{% endif %} {% endblock %} {% block
head %} {{ super() }}
<link rel="stylesheet" href="/static/css/drop_uploader2.css" />
<style>
    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    @keyframes slideUp {
        from {
            transform: translateY(20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    .fade-in {
        animation: fadeIn 0.3s ease-out;
    }
    .slide-up {
        animation: slideUp 0.4s ease-out;
    }

    .drop_zone {
        border: 1px dashed #ffffff !important;
    }
    .drop_uploader.drop_zone .text,
    .drop_zone .text_wrapper,
    .drop_zone .text_wrapper .fa {
        color: #fff !important;
    }
    .file-upload-wrapper {
        border-radius: 1rem;
        box-sizing: border-box;
        position: relative;
        visibility: hidden;
    }
    .file-upload-wrapper.du-ready {
        visibility: visible;
    }
    /* ── Upload source tab bar ─────────────────────────────────────── */
    .uptab-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 0.5rem 0.5rem 0 0;
        border: none;
        border-bottom: 2px solid transparent;
        color: rgba(255, 255, 255, 0.65);
        background: none;
        cursor: pointer;
        transition: color 0.15s, border-color 0.15s;
        white-space: nowrap;
    }
    .uptab-btn.active {
        color: #fff;
        border-bottom-color: #fff;
    }
    .uptab-btn:hover:not(.active) {
        color: rgba(255, 255, 255, 0.9);
    }

    .drop_uploader.drop_zone {
        overflow: visible !important;
        position: relative !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        min-height: auto !important;
    }

    .drop_uploader .text_wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0;
        gap: 0.65rem;
        position: relative;
        z-index: 10;
        transition: opacity 0.3s ease;
    }
    .drop_uploader .text_wrapper .text {
        display: block;
        color: rgba(255, 255, 255, 0.85) !important;
        font-size: 0.95rem;
        margin: 0;
    }
    .drop_uploader .text_wrapper .text a {
        display: none !important;
    }

    .default-cloud-icon {
        width: 64px;
        height: 48px;
    }
    .default-cloud-icon svg {
        width: 100%;
        height: 100%;
    }

    .drop_uploader.overlay-active .text_wrapper {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .drop_uploader .errors {
        position: relative !important;
        z-index: 10;
    }
    .drop_uploader .errors p {
        margin-top: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        background: #fef2f2;
        color: #dc2626;
        font-size: 0.875rem;
        border: 1px solid #fecaca;
    }
    .dark .drop_uploader .errors p {
        background: #450a0a;
        color: #fca5a5;
        border-color: #7f1d1d;
    }

    ul.files {
        list-style: none !important;
        padding: 0 !important;
        margin: 0.5rem 0 0 0 !important;
        position: static !important;
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
    ul.files li {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem;
        padding: 0.75rem 1rem !important;
        padding-bottom: calc(0.75rem + 4px) !important;
        margin-top: 0.5rem !important;
        border-radius: 0.75rem !important;
        border: 1px solid #e5e7eb !important;
        background: #fff !important;
        overflow: hidden !important;
        font-size: 0.875rem;
        color: #374151;
        width: auto !important;
        float: none !important;
        height: auto !important;
    }
    .dark ul.files li {
        border-color: #1f2937 !important;
        background: #111827 !important;
        color: #d1d5db;
    }
    ul.files li > i:first-child {
        flex-shrink: 0;
    }
    ul.files li .file_name,
    ul.files li > span:first-of-type {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    ul.files li span {
        width: auto !important;
        display: inline-block;
    }
    ul.files li .size {
        flex-shrink: 0;
        font-size: 0.75rem;
        color: #9ca3af;
    }
    ul.files li .action-delete {
        flex-shrink: 0;
        border-radius: 0.5rem;
        padding: 0.25rem 0.5rem;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.2s;
    }
    ul.files li .action-delete:hover {
        opacity: 1;
    }

    ul.files li .progress {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 4px !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        background: #e5e7eb !important;
        overflow: hidden !important;
        width: 100% !important;
        display: block !important;
    }
    .dark ul.files li .progress {
        background: #374151 !important;
    }
    ul.files li .progress .bar {
        height: 100% !important;
        border-radius: 0 0 0.75rem 0.75rem;
        background: #10b981 !important;
        transition: width 0.3s ease;
        display: block !important;
    }

    ul.files li .du_progress {
        display: none !important;
    }

    /* File list placed outside the uploader zone by the plugin */
    #files-list-container:empty { display: none; }

    /* Upload panels */
    #uptab-panel-file,
    #uptab-panel-url {
        width: 100%;
    }
    #uptab-panel-file.hidden,
    #uptab-panel-url.hidden {
        display: none !important;
    }

    /* URL panel input row */
    #url-input-row {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        width: 100%;
    }

    /* ── Clipboard modal ── */
    #clipboard-modal {
        position: fixed; inset: 0; z-index: 9998;
        background: rgba(0,0,0,0.45);
        display: none;
        align-items: center;
        justify-content: center;
    }
    #clipboard-modal.open { display: flex; }
    .cv-clip-box {
        background: #fff;
        border-radius: 12px;
        padding: 24px 24px 20px;
        max-width: 440px;
        width: 90%;
        box-shadow: 0 20px 60px rgba(0,0,0,0.22);
        position: relative;
    }
    .dark .cv-clip-box { background: #1e293b; color: #e2e8f0; }
    .cv-clip-close {
        position: absolute; top: 12px; right: 14px;
        background: none; border: none; font-size: 1.4rem;
        color: #9ca3af; cursor: pointer; line-height: 1;
    }
    .cv-clip-close:hover { color: #374151; }
    .dark .cv-clip-close:hover { color: #fff; }
    .cv-clip-title {
        font-size: 1rem; font-weight: 700; color: #111827;
        margin: 0 0 6px;
    }
    .dark .cv-clip-title { color: #f1f5f9; }
    .cv-clip-lead {
        font-size: 0.88rem; color: #6b7280; margin: 0 0 16px;
    }
    .dark .cv-clip-lead { color: #94a3b8; }
    .cv-clip-rows { margin-bottom: 16px; }
    .cv-clip-row {
        display: flex; align-items: flex-start; gap: 14px;
        margin-bottom: 12px; font-size: 0.9rem; color: #374151;
    }
    .dark .cv-clip-row { color: #cbd5e1; }
    .cv-clip-os {
        display: flex; align-items: center; gap: 6px;
        font-weight: 600; min-width: 82px;
    }
    .cv-clip-steps {
        display: flex; flex-direction: column; gap: 4px;
    }
    .cv-clip-steps kbd {
        display: inline-block;
        padding: 1px 5px;
        font-size: 0.78rem;
        font-family: monospace;
        background: #f3f4f6;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        color: #374151;
    }
    .dark .cv-clip-steps kbd { background: #374151; border-color: #4b5563; color: #f3f4f6; }
    .cv-clip-paste-area {
        display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 8px;
        border: 2px dashed #d1d5db; border-radius: 8px;
        padding: 20px; margin-bottom: 16px;
        color: #9ca3af; font-size: 0.875rem; cursor: pointer;
        outline: none; transition: border-color 0.15s;
    }
    .cv-clip-paste-area:focus { border-color: #22c55e; }
    .dark .cv-clip-paste-area { border-color: #374151; background: #111827; }
    .cv-clip-done {
        display: block; width: 100%;
        padding: 0.5rem 1rem;
        border-radius: 8px; border: 1px solid #d1d5db;
        background: #f9fafb; color: #374151;
        font-size: 0.875rem; font-weight: 500;
        cursor: pointer; transition: background 0.15s;
    }
    .cv-clip-done:hover { background: #f3f4f6; }
    .dark .cv-clip-done { background: #1e293b; border-color: #475569; color: #e2e8f0; }
    .dark .cv-clip-done:hover { background: #334155; }

    /* ── Upload progress overlay ── */
    .upload-progress-overlay {
        position: absolute; inset: 0; display: none;
        flex-direction: column; align-items: center; justify-content: center;
        z-index: 20; border-radius: 0.75rem; cursor: default;
    }
    .upload-progress-overlay .overlay-uploading,
    .upload-progress-overlay .overlay-complete {
        display: none; flex-direction: column;
        align-items: center; justify-content: center;
    }
    .upload-progress-overlay.state-uploading { display: flex; }
    .upload-progress-overlay.state-uploading .overlay-uploading { display: flex; }
    .upload-progress-overlay.state-complete { display: flex; }
    .upload-progress-overlay.state-complete .overlay-complete { display: flex; }
    .upload-spinner-wrap {
        position: relative; width: 80px; height: 80px;
        display: flex; align-items: center; justify-content: center;
    }
    .upload-spinner-wrap .spinner-ring {
        position: absolute; inset: 0; border-radius: 50%;
        border: 3px solid rgba(255,255,255,0.15);
        border-top-color: #fff;
        animation: spin 1s linear infinite;
    }
    .upload-spinner-wrap .cloud-icon-inner { width: 44px; height: 32px; }
    .upload-spinner-wrap .cloud-icon-inner svg { width: 100%; height: 100%; }
    .upload-complete-text {
        margin-top: 0.6rem; font-size: 0.9rem; font-weight: 500;
        color: rgba(255,255,255,0.9); text-align: center;
    }
    .complete-icon { width: 60px; height: 60px; animation: complete-pop 0.45s cubic-bezier(0.175,0.885,0.32,1.275) both; }
    .complete-icon svg { width: 100%; height: 100%; }
    .overlay-complete-buttons {
        display: flex; align-items: center; gap: 0.5rem;
        margin-top: 1rem; flex-wrap: wrap; justify-content: center;
    }
    .overlay-btn {
        display: inline-flex; align-items: center; gap: 0.4rem;
        padding: 0.45rem 1.1rem; border-radius: 0.5rem;
        font-size: 0.82rem; font-weight: 600; cursor: pointer;
        border: none; transition: all 0.18s ease; white-space: nowrap;
    }
    .overlay-btn-white { background: #fff; color: #374151; }
    .overlay-btn-white:hover { background: #f3f4f6; }
    .overlay-btn-start { background: #22c55e; color: #fff; }
    .overlay-btn-start:hover { background: #16a34a; }
    ul.files li .upload-badge {
        flex-shrink: 0; font-size: 0.65rem; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.05em;
        padding: 0.2rem 0.5rem; border-radius: 0.375rem;
        background: #fef3c7; color: #d97706;
        animation: badge-pulse 1.5s ease-in-out infinite;
    }
    .dark ul.files li .upload-badge { background: #451a03; color: #fbbf24; }
    ul.files li.upload-done .upload-badge { background: #d1fae5; color: #059669; animation: none; }
    .dark ul.files li.upload-done .upload-badge { background: #064e3b; color: #34d399; }

    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes complete-pop {
        0% { transform: scale(0.5); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }
    @keyframes badge-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }

      /* ── Back button ─────────────────────────────────────────── */
      .cv-back-btn {
          position: absolute; top: 0.75rem; left: 0.75rem; z-index: 25;
          display: none; align-items: center; gap: 5px;
          padding: 0.3rem 0.75rem; border-radius: 6px;
          background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.35);
          color: rgba(255,255,255,0.95); font-size: 0.78rem; font-weight: 600;
          cursor: pointer; transition: background 0.15s;
      }
      .cv-back-btn:hover { background: rgba(255,255,255,0.32); }
      .cv-back-btn.visible { display: inline-flex; }

      /* ── Split "Choose file" button ─────────────────────────── */
      .cv-upload-split-wrap {
          position: relative; display: inline-flex;
          border-radius: 6px; overflow: visible; margin-top: 1rem;
      }
      .cv-split-main {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 0.5rem 1rem; background: #fff; color: #1f2937;
          font-size: 0.875rem; font-weight: 600; border: none;
          border-radius: 6px 0 0 6px; cursor: pointer; white-space: nowrap;
          transition: background 0.15s;
      }
      .cv-split-main:hover { background: #f3f4f6; }
      .cv-split-chevron {
          display: inline-flex; align-items: center; padding: 0 0.65rem;
          background: #fff; color: #1f2937; font-size: 0.75rem; border: none;
          border-left: 1px solid #d1d5db; border-radius: 0 6px 6px 0;
          cursor: pointer; transition: background 0.15s;
      }
      .cv-split-chevron:hover { background: #f3f4f6; }
      .cv-split-chevron i { transition: transform 0.2s; }
      .cv-upload-split-wrap.open .cv-split-chevron i { transform: rotate(180deg); }

      /* Dropdown list */
      .cv-upload-dropdown {
          position: absolute; top: calc(100% + 4px); left: 0;
          min-width: 200px; background: #fff; border: 1px solid #e5e7eb;
          border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.13);
          list-style: none; margin: 0; padding: 4px 0; z-index: 200;
      }
      .dark .cv-upload-dropdown { background: #1f2937; border-color: #374151; }
      .cv-upload-dropdown li {
          display: flex; align-items: center; gap: 10px;
          padding: 0.55rem 1rem; font-size: 0.875rem; color: #1f2937;
          cursor: pointer; transition: background 0.12s;
      }
      .dark .cv-upload-dropdown li { color: #e5e7eb; }
      .cv-upload-dropdown li:hover { background: #f3f4f6; }
      .dark .cv-upload-dropdown li:hover { background: #374151; }
      .cv-upload-dropdown li i { width: 18px; text-align: center; }

      /* ── Corner quick-access icons ───────────────────────────── */
      .cv-upload-corner-icons {
          position: absolute; bottom: 1rem; right: 1rem;
          display: flex; gap: 6px; z-index: 20;
      }
      .cv-upload-corner-icons button {
          width: 32px; height: 32px; border-radius: 50%;
          background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35);
          color: rgba(255,255,255,0.9); cursor: pointer;
          display: flex; align-items: center; justify-content: center;
          font-size: 0.78rem; transition: background 0.15s, border-color 0.15s; padding: 0;
      }
      .cv-upload-corner-icons button:hover {
          background: rgba(255,255,255,0.32); border-color: rgba(255,255,255,0.6);
      }

      /* ── Fixed-height panel wrapper ─────────────────────────── */
      .cv-panel-inner {
          height: 240px; display: flex; flex-direction: column;
          align-items: center; justify-content: center;
          overflow: visible; width: 100%;
      }
  </style>
{% endblock %} {% block header_menu %}
<ul class="flex items-center">
    <li
        class="relative h-full border-l border-r border-gray-200 dark:border-gray-700"
        data-dropdown="tool-tip"
    >
        <button
            class="h-full bg-white dark:bg-gray-950 px-3 md:px-5 dropdown-toggle flex items-center gap-1 md:gap-2 text-gray-700 dark:text-gray-200 hover:text-[#00796B] dark:hover:text-[#34D399] font-medium text-sm transition-colors"
        >
            {% trans %}Hash Converter{% endtrans %}
            <i class="fa fa-chevron-down text-xs transition-transform"></i>
        </button>
        <div
            class="dropdown-menu-2 hidden absolute top-full -mt-[1px] w-auto min-w-[500px] bg-white dark:bg-gray-900 shadow-2xl dark:shadow-black/30 border border-gray-200 dark:border-gray-700 p-4 z-50 animate-fade-in"
        >
            {% include "shared/items-menu.html" %}
        </div>
    </li>
</ul>
{% endblock %} {% block content %}
{% set _ht_hash = site.get('hero_bg_type', 'gradient') if site is defined else 'gradient' %}
{% set _hero_img = site.get('hero_bg_image', '') if site is defined else '' %}
{% set _hero_lcl = (site.get('hero_img_left_color_light', '#1e3a5f') if site is defined) or '#1e3a5f' %}
{% set _hero_lcd = (site.get('hero_img_left_color_dark', '#0f172a') if site is defined) or '#0f172a' %}
<section class="hero-gradient relative overflow-hidden">
        {% if _ht_hash == 'image' %}
    <style>
    .hero-gradient { background: {{ _hero_lcl }} !important; background-image: none !important; }
    .dark .hero-gradient { background: {{ _hero_lcd }} !important; background-image: none !important; }
    </style>
    {% endif %}
    {% if _ht_hash == 'gradient' %}
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.05%22%3E%3Cpath%20d%3D%22M36%2034v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6%2034v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6%204V0H4v4H0v2h4v4h2V6h4V4H6z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E')] opacity-50"></div>
    {% elif _ht_hash == 'image' and _hero_img %}
    <div class="hero-bg-img"><img src="{{ _hero_img }}" alt="" class="w-full h-full object-contain"></div>
    {% endif %}
    <div
        class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.05%22%3E%3Cpath%20d%3D%22M36%2034v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6%2034v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6%204V0H4v4H0v2h4v4h2V6h4V4H6z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E')] opacity-50"
    ></div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 relative z-10">
        <div class="max-w-3xl animate-slide-up">
            <div class="flex items-center gap-3 mb-4">
                <span class="tool-badge">{% trans %}HASH{% endtrans %}</span>
            </div>
            <h1
                class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4"
            >
                <i class="fa fa-hashtag mr-2"></i>
                {% if _cms_heading %} {{ _cms_heading }} {% else %} {{
                algorithm_name }} {% trans %}Hash Generator{% endtrans %} {%
                endif %}
            </h1>
            <p class="text-lg text-white/90 max-w-2xl leading-relaxed">
                {% if _cms_page_desc %} {{ _cms_page_desc }} {% else %} {% trans
                algo=algorithm_name %}Generate {{ algo }} hashes from text or
                uploaded files. Optionally provide a shared HMAC key or salt.{%
                endtrans %} {% endif %}
            </p>
        </div>
    </div>

</section>

<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="space-y-6">
        {% with messages = get_flashed_messages(category_filter=["error"]) %}{% for msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:"error",msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %} {% if error and error.message %}
        <div
            class="flex items-center gap-3 p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 slide-up"
        >
            <i class="fa fa-circle-exclamation"></i>
            <span>{{ error.message }}</span>
            <button
                type="button"
                class="ml-auto text-red-400 hover:text-red-600"
                onclick="this.parentElement.remove()"
            >
                &times;
            </button>
        </div>
        {% endif %}

        <div class="file-uploader slide-up">
            <div class="flex items-center justify-between mb-3">
                <label
                    class="text-sm font-medium text-gray-700 dark:text-gray-300"
                >
                    <i class="fa fa-upload mr-1.5 text-green-500"></i>{% trans
                    %}Upload a file to hash{% endtrans %}
                </label>
                <span
                    class="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded-full"
                >
                    {% trans %}Max 1 file, up to 1GB{% endtrans %}
                </span>
            </div>

            <div class="relative group">
                <div
                    class="file-upload-wrapper relative rounded-2xl"
                    style="background: linear-gradient(135deg, #3b82f6, #8b5cf6); border: 2px dashed rgba(255,255,255,0.4); padding: 1.5rem 2rem 2rem;"
                    onclick="hashDropzoneClick(event);"
                  >
                      <!-- Back button: shown when a non-file panel is active -->
                      <button type="button" id="cv-back-btn" class="cv-back-btn" onclick="hashSwitchTab('file')">
                          <i class="fa fa-arrow-left"></i> {% trans %}Back{% endtrans %}
                      </button>

                      <!-- Tab bar (hidden — navigation via split button & corner icons) -->
                      <div class="flex gap-1 mb-4 border-b border-white/20" style="display:none">
                          <button type="button" onclick="hashSwitchTab('file')" id="uptab-file" class="uptab-btn active" data-testid="uptab-file">
                              <i class="fa fa-upload mr-1"></i>{% trans %}Upload File{% endtrans %}
                          </button>
                          <button type="button" onclick="hashSwitchTab('url')" id="uptab-url" class="uptab-btn" data-testid="uptab-url">
                              <i class="fa fa-link mr-1"></i>{% trans %}From URL{% endtrans %}
                          </button>
                          <button type="button" onclick="openClipboardModal();" class="uptab-btn" data-testid="uptab-clipboard">
                              <i class="fa fa-clipboard mr-1"></i>{% trans %}Clipboard{% endtrans %}
                          </button>
                      </div>

                      <div class="rounded-xl cv-panel-inner">

                      <!-- URL upload panel -->
                      <div id="uptab-panel-url" class="hidden py-4 text-center w-full">
                          <div class="w-14 h-14 mx-auto mb-3 rounded-full bg-white/10 flex items-center justify-center">
                              <i class="fa fa-link text-2xl text-white"></i>
                          </div>
                          <p class="text-white/80 text-sm mb-3">{% trans %}Paste a direct file URL to import{% endtrans %}</p>
                          <div id="url-input-row">
                              <input type="url" id="url-input-field" placeholder="https://example.com/file.jpg" class="flex-1 px-3 py-2 rounded-lg border border-white/30 bg-white/10 text-white placeholder-white/50 text-sm focus:outline-none focus:border-white/60" onkeydown="if(event.key==='Enter') hashAddUrlFile();" data-testid="input-url-upload">
                              <button type="button" onclick="hashAddUrlFile()" id="btn-add-url" class="px-4 py-2 rounded-lg bg-white text-blue-600 font-semibold text-sm hover:bg-blue-50 transition-all flex-shrink-0" data-testid="btn-add-url">
                                  <i class="fa fa-plus mr-1"></i>{% trans %}Add{% endtrans %}
                              </button>
                          </div>
                      </div>

                      <!-- File upload panel -->
                      <div id="uptab-panel-file">
                          <input id="uploader" type="file" name="files" autocomplete="off" data-method="ajax" data-count="1" data-maxfilesize="1073741824">

                          <!-- Upload progress overlay (managed by uploader.js plugin) -->
                          <div id="upload-progress-overlay" class="upload-progress-overlay" style="display:none;">
                              <div class="overlay-uploading">
                                  <div class="upload-spinner-wrap">
                                      <div class="spinner-ring"></div>
                                      <div class="cloud-icon-inner">
                                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 48" fill="none">
                                              <path d="M50 40H10C5.6 40 2 36.4 2 32C2 28 4.8 24.6 8.6 24C8.2 22.8 8 21.4 8 20C8 12.8 13.6 7 20.8 6C28 5 34.6 9.6 36.4 16.4C37.4 16.2 38.6 16 40 16C46.6 16 52 21.4 52 28V28.2C57 29.2 61 33.6 61 39C61 39.4 60.8 39.8 60.8 40" stroke="rgba(255,255,255,0.9)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                              <path d="M32 38V22M32 22L24 30M32 22L40 30" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                          </svg>
                                      </div>
                                  </div>
                              </div>
                              <div class="overlay-complete" id="overlay-complete-area">
                                  <div class="complete-icon">
                                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
                                          <path d="M12 8h28l12 12v36a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4V12a4 4 0 0 1 4-4z" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.9)" stroke-width="2.5" stroke-linejoin="round"/>
                                          <path d="M40 8v12h12" fill="none" stroke="rgba(255,255,255,0.7)" stroke-width="2.5" stroke-linejoin="round"/>
                                          <path d="M22 36l6 6 14-14" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
                                      </svg>
                                  </div>
                                  <p class="upload-complete-text">{% trans %}File added! Click Generate Hash to continue{% endtrans %}</p>
                                  <div class="overlay-complete-buttons">
                                      <button type="button" id="btn-add-more" class="overlay-btn overlay-btn-white" data-testid="button-add-more">
                                          <i class="fa fa-file-circle-plus"></i> {% trans %}Choose another file{% endtrans %}
                                      </button>
                                      <button type="button" id="btn-overlay-start" class="overlay-btn overlay-btn-start" data-testid="button-overlay-start">
                                          {% trans %}Generate Hash{% endtrans %} <i class="fa fa-arrow-right"></i>
                                      </button>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <!-- /uptab-panel-file -->

                      <!-- Split "Choose file" button -->
                      <div id="cv-split-btn-center" class="flex justify-center">
                      <div class="cv-upload-split-wrap" id="cv-upload-split-wrap">
                          <button type="button" class="cv-split-main"
                              onclick="hashOpenFilePicker(); hashSwitchTab('file');"
                              data-testid="btn-choose-file">
                              <i class="fa fa-file-arrow-up"></i>
                              {% trans %}Choose file{% endtrans %}
                          </button>
                          <button type="button" class="cv-split-chevron"
                              onclick="toggleUploadDropdown(event)"
                              aria-label="{% trans %}More upload options{% endtrans %}">
                              <i class="fa fa-chevron-down"></i>
                          </button>
                          <ul class="cv-upload-dropdown hidden" id="cv-upload-dropdown">
                              <li onclick="hashOpenFilePicker(); hashSwitchTab('file'); closeUploadDropdown();">
                                  <i class="fa fa-folder-open text-gray-500"></i>
                                  {% trans %}From device{% endtrans %}
                              </li>
                              <li onclick="hashSwitchTab('url'); closeUploadDropdown();">
                                  <i class="fa fa-link text-gray-500"></i>
                                  {% trans %}From URL{% endtrans %}
                              </li>
                              <li onclick="openClipboardModal(); closeUploadDropdown();">
                                  <i class="fa fa-clipboard text-gray-500"></i>
                                  {% trans %}From Clipboard{% endtrans %}
                              </li>
                          </ul>
                      </div>
                      </div><!-- /cv-split-btn-center -->

                      </div><!-- /cv-panel-inner -->

                      <!-- Corner quick-access icons -->
                      <div class="cv-upload-corner-icons">
                          <button type="button" onclick="hashOpenFilePicker(); hashSwitchTab('file');" title="{% trans %}From device{% endtrans %}">
                              <i class="fa fa-folder-open"></i>
                          </button>
                          <button type="button" onclick="hashSwitchTab('url');" title="{% trans %}From URL{% endtrans %}">
                              <i class="fa fa-link"></i>
                          </button>
                          <button type="button" onclick="openClipboardModal();" title="{% trans %}From Clipboard{% endtrans %}">
                              <i class="fa fa-clipboard"></i>
                          </button>
                      </div>
                </div>
            </div>
        </div>
        <div id="files-list-container" class="mt-3"></div>
        </div>

        <div class="flex items-center gap-4 slide-up">
            <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
            <span
                class="text-sm font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider"
                >{% trans %}or{% endtrans %}</span
            >
            <div class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></div>
        </div>

        <div
            class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm overflow-hidden slide-up"
        >
            <div
                class="px-6 py-4 border-b border-gray-100 dark:border-gray-800"
            >
                <h3
                    class="font-semibold text-gray-900 dark:text-white flex items-center gap-2"
                >
                    <i class="fa fa-keyboard text-green-500 text-sm"></i>
                    {% trans %}Enter text to generate hash{% endtrans %}
                </h3>
                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
                    {% trans %}Type or paste the text you want to convert to a
                    hash{% endtrans %}
                </p>
            </div>
            <div class="p-6">
                <textarea
                    id="text-input"
                    rows="4"
                    class="w-full px-4 py-3 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-colors resize-y"
                    placeholder="{% trans %}Enter your text here...{% endtrans %}"
                ></textarea>
            </div>
        </div>

        {% if supports_hmac or supports_salt %}
        <div
            class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-sm overflow-hidden slide-up"
        >
            <div
                class="px-6 py-4 border-b border-gray-100 dark:border-gray-800"
            >
                <h3
                    class="font-semibold text-gray-900 dark:text-white flex items-center gap-2"
                >
                    <i class="fa fa-key text-amber-500 text-sm"></i>
                    {% if supports_hmac %} {% trans %}HMAC Key{% endtrans %} {%
                    else %} {% trans %}Salt{% endtrans %} {% endif %}
                    <span class="text-xs font-normal text-gray-400"
                        >({% trans %}optional{% endtrans %})</span
                    >
                </h3>
            </div>
            <div class="p-6">
                <input
                    type="text"
                    id="salt-input"
                    class="w-full px-4 py-3 text-sm rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-colors"
                    placeholder="{% if supports_hmac %}{% trans %}Enter shared HMAC key...{% endtrans %}{% else %}{% trans %}Enter salt value...{% endtrans %}{% endif %}"
                />
                <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">
                    {% if supports_hmac %} {% trans %}Provide a secret key for
                    HMAC-based hash authentication{% endtrans %} {% else %} {%
                    trans %}Provide a salt to strengthen the hash output{%
                    endtrans %} {% endif %}
                </p>
            </div>
        </div>
        {% endif %}

        <form method="post" id="converter-form" class="slide-up">
            <input type="hidden" name="options" value="{}" />
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-3">
                {% trans %}Upload a file or enter text above, then click
                Generate Hash{% endtrans %}
            </p>
            <button
                id="submit_btn"
                disabled
                class="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-8 py-3.5 rounded-xl bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white font-semibold shadow-lg shadow-green-500/30 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300"
                type="submit"
            >
                <i class="fa fa-hashtag text-lg"></i> {% trans %}Generate{%
                endtrans %} {{ algorithm_name }} {% trans %}Hash{% endtrans %}
            </button>
        </form>

    </div>
</div>

{% include "shared/reviews.html" %} {% include "shared/quick-content.html" %} {%
include "shared/quick-access.html" %} {% include "shared/quick-faq.html" %}

<!-- ── Clipboard modal (paste instructions) ────────────────────── -->
<div id="clipboard-modal" onclick="if(event.target===this) closeClipboardModal();">
    <div class="cv-clip-box">
        <button class="cv-clip-close" onclick="closeClipboardModal();" aria-label="Close">&times;</button>
        <h3 class="cv-clip-title"><i class="fa fa-clipboard text-green-500 mr-2"></i>{% trans %}Paste from Clipboard{% endtrans %}</h3>
        <p class="cv-clip-lead">{% trans %}Copy a file or screenshot, then press{% endtrans %} <kbd>Ctrl+V</kbd> / <kbd>Cmd+V</kbd> {% trans %}below.{% endtrans %}</p>
        <div class="cv-clip-rows">
            <div class="cv-clip-row">
                <div class="cv-clip-os">
                    <svg viewBox="0 0 24 24" fill="currentColor" width="22" height="22"><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/></svg>
                    Windows
                </div>
                <div class="cv-clip-steps">
                    <span>{% trans %}Screenshot{% endtrans %} <kbd>Win+Shift+S</kbd></span>
                    <span>{% trans %}File{% endtrans %} <kbd>Ctrl+C</kbd> {% trans %}in Explorer{% endtrans %}</span>
                </div>
            </div>
            <div class="cv-clip-row">
                <div class="cv-clip-os">
                    <i class="fa-brands fa-apple" style="font-size:20px;"></i>
                    macOS
                </div>
                <div class="cv-clip-steps">
                    <span>{% trans %}Screenshot{% endtrans %} <kbd>Cmd+Shift+4</kbd></span>
                    <span>{% trans %}File{% endtrans %} <kbd>Cmd+C</kbd> {% trans %}in Finder{% endtrans %}</span>
                </div>
            </div>
        </div>
        <div class="cv-clip-paste-area" id="cv-clip-paste-area" tabindex="0">
            <i class="fa fa-paste" style="font-size:2rem;color:#9ca3af;"></i>
            <span>{% trans %}Click here, then press Ctrl+V / Cmd+V{% endtrans %}</span>
        </div>
        <button type="button" class="cv-clip-done" onclick="closeClipboardModal();">{% trans %}Close{% endtrans %}</button>
    </div>
</div>
{% endblock %} {% block footer %} {{ super() }}
  <script>
  window.HASH_CFG = {
      uploaderText:    "{% trans %}Drag file here or click to upload{% endtrans %}",
      browseText:      "{% trans %}Choose file{% endtrans %}",
      onlyOneError:    "{% trans %}Only one file allowed{% endtrans %}",
      notAllowedError: "{% trans %}File type is not allowed{% endtrans %}",
      bigFileBefore:   "{% trans %}Files, bigger than{% endtrans %}",
      bigFileAfter:    "{% trans %}is not allowed{% endtrans %}",
      allowedBefore:   "{% trans %}Only{% endtrans %}",
      allowedAfter:    "{% trans %}files allowed{% endtrans %}",
      uploadingBadge:  "{% trans %}Uploading{% endtrans %}",
      confirmNoInput:  "{% trans %}Please upload a file or enter text to continue{% endtrans %}"
  };
  </script>
  <script src="/static/js/hash_uploader.js"></script>
  <script src="/static/js/ahash.js"></script>
{% endblock %} {% block faq_java %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
{% endblock %}