{% extends "base.html" %}
{% 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 title %}{% if _cms_title %}{{ _cms_title }}{% else %}{% trans %}Website Screenshot Tool{% endtrans %} | OnlineConvert.cc{% endif %}{% endblock %}
{% block description %}{% if _cms_desc %}{{ _cms_desc }}{% else %}{% trans %}Capture website screenshots as PNG, JPG, PDF or TIFF with custom resolution and browser options{% endtrans %}{% endif %}{% endblock %}
{% block og_image_tag %}{% if _cms_og_image %}<meta property="og:image" content="{{ _cms_og_image }}">{% endif %}{% endblock %}
{% block extra_head %}{% if _cms_head_html %}{{ _cms_head_html|safe }}{% endif %}{% endblock %}

{% block head %}
{{ super() }}
<style>
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes slideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
    .fade-in { animation: fadeIn 0.3s ease-out; }
    .slide-up { animation: slideUp 0.3s ease-out; }
    .pulse { animation: pulse 2s infinite; }
    .toggle-checkbox:checked { right: 0; border-color: #3b82f6; }
    .toggle-checkbox:checked + .toggle-label { background-color: #3b82f6; }
    .toggle-checkbox { right: 1.25rem; transition: right 0.2s ease-in-out; }
    .range-slider { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.3); outline: none; }
    .range-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: white; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
    .range-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: white; cursor: pointer; border: none; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
    .option-input { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: white; border-radius: 0.5rem; padding: 0.4rem 0.6rem; text-align: center; font-size: 0.875rem; outline: none; transition: all 0.2s; }
    .option-input:focus { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.2); }
    .option-select { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); color: white; border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; outline: none; cursor: pointer; }
    .option-select option { background: #1e3a5f; color: white; }
    .cta-btn { transition: all 0.3s ease; }
    .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3); }
    .cta-btn:active { transform: translateY(0); }
</style>
{% endblock %}

{% block content %}
{% set _ht_screenshot = 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_screenshot == '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_screenshot == '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_screenshot == '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="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 %}SCREENSHOT{% 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-camera mr-2"></i>{{ _cms_heading if _cms_heading else _('Website Screenshot Tool') }}
            </h1>
            <p class="text-lg text-white/90 max-w-2xl leading-relaxed">{{ _cms_page_desc if _cms_page_desc else _('Capture high-resolution screenshots of any website as PNG, JPG, PDF or TIFF') }}</p>
        </div>
    </div>
</section>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" id="screenshot-root">

    <form method="POST" action="{{ full_url('/capture-screenshot') }}" id="screenshot-form" class="space-y-6">
        <input type="hidden" name="width" id="form-field-width" value="1280">
        <input type="hidden" name="height" id="form-field-height" value="1280">
        <input type="hidden" name="zoom" id="form-field-zoom" value="100">
        <input type="hidden" name="fullsize" id="form-field-fullsize" value="false">
        <input type="hidden" name="format" id="form-field-format" value="png">
        <input type="hidden" name="scale" id="form-field-scale" value="100">

        <div id="url-bar-wrapper" class="relative border-2 border-gray-200 dark:border-gray-700 rounded-2xl bg-white dark:bg-gray-900 overflow-hidden shadow-lg slide-up">
            <div class="flex items-center bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                <input type="text" name="url" id="url-input" placeholder="{% trans %}https://www.example.com{% endtrans %}"
                    class="flex-1 px-5 py-4 bg-transparent text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 text-lg outline-none border-none"
                    autocomplete="url" spellcheck="false" required>
                <button type="submit" id="btn-shot" class="px-8 py-4 bg-red-500 hover:bg-red-600 text-white font-bold text-base transition-all flex items-center gap-2 rounded-tr-xl">
                    <i class="fa fa-camera"></i> {% trans %}Shot{% endtrans %}
                </button>
            </div>
            <div id="url-error" class="hidden px-5 py-2 bg-red-50 dark:bg-red-900/30 text-red-600 dark:text-red-400 text-sm">
                <i class="fa fa-exclamation-circle mr-1"></i> <span id="url-error-msg"></span>
            </div>
        </div>

        <div id="processing-section" class="hidden">
            <div class="border border-gray-200 dark:border-gray-700 rounded-2xl bg-white dark:bg-gray-900 overflow-hidden shadow-lg">
                <div class="p-10 text-center">
                    <div class="w-20 h-20 mx-auto bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center text-white text-3xl shadow-lg mb-4">
                        <i class="fa fa-cog fa-spin"></i>
                    </div>
                    <h3 class="font-semibold text-gray-900 dark:text-white text-lg mb-1">{% trans %}Capturing Screenshot...{% endtrans %}</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">{% trans %}Please wait while we capture the website at{% endtrans %}</p>
                    <p class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-4 truncate max-w-lg mx-auto px-4" id="capturing-url-text"></p>
                    <div class="w-full max-w-md mx-auto h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                        <div class="h-full bg-gradient-to-r from-blue-500 to-green-500 rounded-full transition-all duration-1000" id="progress-bar" style="width:0%"></div>
                    </div>
                    <p class="text-xs text-gray-400 mt-3">{% trans %}This may take a few seconds depending on the website{% endtrans %}</p>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

            <div class="space-y-6">
                <div class="relative group">
                    <div class="absolute -inset-0.5 bg-gradient-to-r from-blue-500 via-purple-500 to-blue-600 rounded-2xl opacity-30 group-hover:opacity-50 blur transition-opacity duration-500"></div>
                    <div class="relative bg-gradient-to-br from-[#2c5f8a] to-[#1e3a5f] rounded-2xl p-6 shadow-xl">
                        <h3 class="text-xl font-bold text-white text-center mb-6 border-b border-white/20 pb-3">
                            <i class="fa fa-globe mr-2"></i>{% trans %}Browser Options{% endtrans %}
                        </h3>

                        <div class="space-y-5">
                            <div class="flex items-center justify-between">
                                <label class="text-white text-sm font-medium">{% trans %}Full size{% endtrans %}</label>
                                <div class="relative inline-block w-10 align-middle select-none">
                                    <input type="checkbox" id="fullsize-toggle" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-2 border-gray-300 appearance-none cursor-pointer z-10" style="top:2px;">
                                    <label for="fullsize-toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-400 cursor-pointer transition-colors duration-200"></label>
                                </div>
                            </div>

                            <div class="flex items-center justify-between gap-4">
                                <label class="text-white text-sm font-medium whitespace-nowrap">{% trans %}Resolution{% endtrans %}</label>
                                <select id="resolution-value" class="option-select flex-1 max-w-[200px]">
                                    <option value="1280×1280×1">1280×1280</option>
                                    <option value="1920×1080×1">1920×1080</option>
                                    <option value="1366×768×1">1366×768</option>
                                    <option value="1024×768×1">1024×768</option>
                                    <option value="800×600×1">800×600</option>
                                    <option value="375×812×1">375×812 ({{ _('Mobile') }})</option>
                                    <option value="768×1024×1">768×1024 ({{ _('Tablet') }})</option>
                                </select>
                            </div>

                            <div class="flex items-center gap-4">
                                <label class="text-white text-sm font-medium w-16">{% trans %}Width{% endtrans %}</label>
                                <input type="range" id="width-slider" min="320" max="3840" value="1280" class="range-slider flex-1">
                                <input type="number" id="width-textbox" value="1280" min="320" max="3840" class="option-input w-20">
                            </div>

                            <div class="flex items-center gap-4">
                                <label class="text-white text-sm font-medium w-16">{% trans %}Height{% endtrans %}</label>
                                <input type="range" id="height-slider" min="200" max="3840" value="1280" class="range-slider flex-1">
                                <input type="number" id="height-textbox" value="1280" min="200" max="3840" class="option-input w-20">
                            </div>

                            <div class="flex items-center gap-4">
                                <label class="text-white text-sm font-medium w-16">{% trans %}Zoom{% endtrans %}</label>
                                <input type="range" id="zoom-slider" min="25" max="500" value="100" class="range-slider flex-1">
                                <input type="number" id="zoom-textbox" value="100" min="25" max="500" class="option-input w-20">
                            </div>

                            <div class="flex items-center justify-between pt-1 border-t border-white/10">
                                <span class="text-white/70 text-sm">{% trans %}Browser size{% endtrans %}</span>
                                <span id="browser-size" class="text-white font-medium text-sm">1280 × 1280 px</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="relative group">
                    <div class="absolute -inset-0.5 bg-gradient-to-r from-green-500 via-teal-500 to-green-600 rounded-2xl opacity-30 group-hover:opacity-50 blur transition-opacity duration-500"></div>
                    <div class="relative bg-gradient-to-br from-[#2c5f8a] to-[#1e3a5f] rounded-2xl p-6 shadow-xl">
                        <h3 class="text-xl font-bold text-white text-center mb-6 border-b border-white/20 pb-3">
                            <i class="fa fa-image mr-2"></i>{% trans %}Image Options{% endtrans %}
                        </h3>

                        <div class="space-y-5">
                            <div class="flex items-center justify-between gap-4">
                                <label class="text-white text-sm font-medium">{% trans %}Format{% endtrans %}</label>
                                <select id="format-value" class="option-select flex-1 max-w-[200px]">
                                    <option value="png">PNG</option>
                                    <option value="jpg">JPG</option>
                                    <option value="pdf">PDF</option>
                                    <option value="tiff">TIFF</option>
                                </select>
                            </div>

                            <div class="flex items-center gap-4">
                                <label class="text-white text-sm font-medium w-16">{% trans %}Scale{% endtrans %}</label>
                                <input type="range" id="scale-slider" min="10" max="200" value="100" class="range-slider flex-1">
                                <input type="number" id="scale-textbox" value="100" min="10" max="200" class="option-input w-20">
                            </div>

                            <div class="flex items-center justify-between pt-1 border-t border-white/10">
                                <span class="text-white/70 text-sm">{% trans %}Image size{% endtrans %}</span>
                                <span id="image-size" class="text-white font-medium text-sm">1280 × 1280 px</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="space-y-6">
                <div class="relative group">
                    <div class="absolute -inset-0.5 bg-gradient-to-r from-purple-500 via-pink-500 to-purple-600 rounded-2xl opacity-30 group-hover:opacity-50 blur transition-opacity duration-500"></div>
                    <div class="relative bg-gradient-to-br from-[#2c5f8a] to-[#1e3a5f] rounded-2xl p-6 shadow-xl">
                        <h3 class="text-xl font-bold text-white text-center mb-4">
                            <i class="fa fa-camera-retro mr-2"></i>{% trans %}Website Screenshot{% endtrans %}
                        </h3>
                        <h4 class="text-lg font-bold text-white text-center mb-4">{% trans %}Capture a Website Screenshot Online{% endtrans %}</h4>
                        <div class="text-white/80 text-sm leading-relaxed space-y-3 text-center">
                            <p>{% trans %}A free and easy-to-use online tool platform that offers you high-resolution and perfectly captured pictures of different websites available on the internet.{% endtrans %}</p>
                            <p>{% trans %}Whether it's a YouTube Video, News article, Tweet, Facebook Post, or any other type of website, the tool can help you to easily take pictures and save them on your PC or Mobile phone.{% endtrans %}</p>
                            <p>{% trans %}You don't require an API or scripts to download and use on your PC. Since it's a platform, everything is performed on the website on the run time.{% endtrans %}</p>
                            <p>{% trans %}All you need is to enter the URL of the web page on the text field and size it up according to your needs.{% endtrans %}</p>
                            <p class="font-semibold text-white">{% trans %}At last, click on the button to get the screenshot.{% endtrans %}</p>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <button type="button" class="cta-btn px-4 py-4 rounded-xl bg-gradient-to-r from-red-500 to-red-600 text-white font-bold text-sm shadow-lg flex items-center justify-center gap-2" data-format="pdf">
                        <i class="fa fa-file-pdf text-lg"></i> {% trans %}Save as PDF{% endtrans %}
                    </button>
                    <button type="button" class="cta-btn px-4 py-4 rounded-xl bg-gradient-to-r from-amber-500 to-orange-500 text-white font-bold text-sm shadow-lg flex items-center justify-center gap-2" data-format="jpg">
                        <i class="fa fa-image text-lg"></i> {% trans %}Save as JPG{% endtrans %}
                    </button>
                    <button type="button" class="cta-btn px-4 py-4 rounded-xl bg-gradient-to-r from-blue-500 to-blue-600 text-white font-bold text-sm shadow-lg flex items-center justify-center gap-2" data-format="png">
                        <i class="fa fa-image text-lg"></i> {% trans %}Save as PNG{% endtrans %}
                    </button>
                    <button type="button" class="cta-btn px-4 py-4 rounded-xl bg-gradient-to-r from-emerald-500 to-green-600 text-white font-bold text-sm shadow-lg flex items-center justify-center gap-2" data-format="tiff">
                        <i class="fa fa-images text-lg"></i> {% trans %}Save as TIFF{% endtrans %}
                    </button>
                </div>
            </div>
        </div>

    </form>

    <div id="error-section" class="mt-8 hidden">
        <div class="border border-red-300 dark:border-red-700 rounded-2xl bg-white dark:bg-gray-900 overflow-hidden shadow-lg">
            <div class="flex items-center gap-3 p-4 bg-gradient-to-r from-red-500 to-red-600">
                <div class="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center text-white">
                    <i class="fa fa-circle-exclamation"></i>
                </div>
                <div class="flex-1">
                    <div class="font-semibold text-white">{% trans %}Something went wrong{% endtrans %}</div>
                    <div class="text-xs text-white/80" id="error-message"></div>
                </div>
            </div>
            <div class="p-5 text-center">
                <i class="fa fa-bug text-5xl text-red-500 mb-3"></i>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4" id="error-details"></p>
                <button type="button" id="btn-try-again" class="px-4 py-2 rounded-lg bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300 text-sm font-medium hover:bg-red-200 dark:hover:bg-red-900/60 transition-all">
                    <i class="fa fa-rotate-left mr-1"></i> {% trans %}Try Again{% endtrans %}
                </button>
            </div>
        </div>
    </div>

</div>

<div id="toast" class="fixed bottom-5 right-5 bg-gray-900 text-white px-4 py-3 rounded-lg shadow-lg transform transition-all duration-300 translate-y-20 opacity-0 z-50 flex items-center gap-2">
    <i class="fa fa-check-circle text-green-400"></i>
    <span id="toast-message">{% trans %}Action completed{% endtrans %}</span>
</div>
{% endblock %}

{% block footer %}
{{ super() }}
<script src="/static/js/screenshot-tools.js?v=asd34"></script>
{% endblock %}