tpl/screenshot.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>${screenshot} - ${software_name_}</title>
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../style/base.css?t=1658505138017">
    <link rel="stylesheet" href="../style/index.css?t=1658505138017">
</head>
<body>

<div class="central">
    ${@import tpl/tpl_nav_root.html}
    ${@import tpl/tpl_header.html}

    <div class="body">
        <div class="screenshot" id="screenshot">
            <div class="section">
                <h1>${software_name_} ${screenshot}</h1>
            </div>
            <div class="section">
                <div>
                    <h4>${software_name_}</h4>
                    <img loading="lazy" src="../images/screenshot_software.png" alt="${software_name_}" width="800">
                    <img loading="lazy" src="../images/screenshot_software2.png" alt="${software_name_}" width="800">
                    <img loading="lazy" src="../images/screenshot_software_file_browser_webdav.png" alt="${software_name_} File browser WebDAV" width="800">
                    <img loading="lazy" src="../images/screenshot_software_file_browser_ssh.png" alt="${software_name_} File browser SSH, SFTP" width="800">
                    <img loading="lazy" src="../images/screenshot_software_file_browser_ftp.png" alt="${software_name_} File browser FTP" width="800">
                    <img loading="lazy" src="../images/screenshot_software_file_browser_add.png" alt="${software_name_} File browser Add host" width="800">
                    <img loading="lazy" src="../images/screenshot_software_file_browser_log.png" alt="${software_name_} File browser log" width="800">
                    <img loading="lazy" src="../images/screenshot_software_lite.png" width="800" alt="${software_name_} Lite">
                </div>
                <div>
                    <h4>${add_task}</h4>
                    <img loading="lazy" src="../images/screenshot_add_task.png" alt="${software_name_} ${add_task}">
                    <img loading="lazy" src="../images/screenshot_add_task2.png" alt="${software_name_} ${add_task}">
                    <img loading="lazy" src="../images/screenshot_add_task3.png" alt="${software_name_} ${add_task}">
                    <img loading="lazy" src="../images/screenshot_add_task4.png" alt="${software_name_} ${add_task}">
                </div>
                <div>
                    <h4>${edit_task}</h4>
                    <img loading="lazy" src="../images/screenshot_edit_task.png" alt="${software_name_} ${edit_task}">
                    <img loading="lazy" src="../images/screenshot_edit_task2.png" alt="${software_name_} ${edit_task}">
                </div>

                <div>
                    <h4>${torrent_confirm}</h4>
                    <img loading="lazy" src="../images/screenshot_torrent_confirm.png" alt="${software_name_} ${torrent_confirm}">
                </div>
                <div>
                    <img loading="lazy" src="../images/screenshot_http_confirm.png" alt="${software_name_} HTTP confirm">
                </div>
                <div>
                    <img loading="lazy" src="../images/screenshot_links_confirm.png" alt="${software_name_} ${feature_34}">
                </div>
                <div>
                    <h4>${add_catalog}</h4>
                    <img loading="lazy" src="../images/screenshot_add_catalog.png" alt="${software_name_} ${add_catalog}">
                </div>
                <div>
                    <h4>${settings}</h4>
                    <img loading="lazy" src="../images/screenshot_settings.png" alt="${software_name_} ${settings}">
                </div>
                <div>
                    <h4>${proxy}</h4>
                    <img loading="lazy" src="../images/screenshot_proxy.png" alt="${software_name_} ${proxy}">
                </div>
                <div>
                    <h4>${feature_45}</h4>
                    <img loading="lazy" src="../images/screenshot_site_rule.png" alt="${software_name_} ${feature_45}">
                    <img loading="lazy" src="../images/screenshot_site_rule2.png" alt="${software_name_} ${feature_45}2">
                </div>
                <div>
                    <h4>${filter}</h4>
                    <img loading="lazy" src="../images/screenshot_filter.png" alt="${software_name_} ${filter}">
                </div>
                <div>
                    <h4>${refresh_address}</h4>
                    <img loading="lazy" src="../images/screenshot_refresh_address.png" alt="${software_name_} ${refresh_address}">
                </div>
                <div>
                    <h4>${create_torrent}</h4>
                    <img loading="lazy" src="../images/screenshot_create_torrent.png" alt="${software_name_} ${create_torrent}">
                </div>
                <div>
                    <h4>${download_speed_limit}</h4>
                    <img loading="lazy" src="../images/screenshot_download_speed_limit.png" alt="${software_name_} ${download_speed_limit}">
                </div>
                <div>
                    <h4>${translate}</h4>
                    <img loading="lazy" src="../images/screenshot_translate.png" alt="${software_name_} ${translate}">
                </div>
                <div>
                    <h4>${http_tool}</h4>
                    <img loading="lazy" src="../images/screenshot_http_tool.png" alt="${software_name_} ${http_tool}">
                </div>
                <div>
                    <h4>${checksum_tool}</h4>
                    <img loading="lazy" src="../images/screenshot_checksum_tool.png" alt="${software_name_} ${checksum_tool}">
                </div>
            </div>

            <div class="section">
                <h2>${browser_extension} ${screenshot}</h2>
            </div>
            <div class="section">
                <div>
                    <h4>${video_bar}</h4>
                    <img loading="lazy" src="../images/extension_video_bar.png" alt="${video_bar}">
                </div>
                
                <div>
                    <h4>${videos_panel}</h4>
                    <img loading="lazy" src="../images/extension_videos.png" alt="${videos_panel}">
                </div>

                <div>
                    <h4>${audios_panel}</h4>
                    <img loading="lazy" src="../images/extension_audios.png" alt="${audios_panel}">
                </div>

                <div>
                    <h4>...</h4>
                    <img loading="lazy" src="../images/extension_popup_custom.png" alt="extension_popup_custom">
                </div>

                <div>
                    <h4>...</h4>
                    <img loading="lazy" src="../images/extension_res_explorer_images.png" alt="extension_res_explorer_images">
                </div>

                <div>
                    <h4>...</h4>
                    <img loading="lazy" src="../images/extension_res_explorer_scripts.png" alt="extension_res_explorer_scripts">
                </div>

                <div>
                    <h4>...</h4>
                    <img loading="lazy" src="../images/extension_preview.png" alt="extension_preview">
                </div>

                <div>
                    <h4>...</h4>
                    <img loading="lazy" src="../images/extension_collector_videos.png" alt="extension_collector_videos">
                </div>

                <div>
                    <h4>...</h4>
                    <img loading="lazy" src="../images/extension_collector_audios.png" alt="extension_collector_audios">
                </div>

                <div>
                    <h4>...</h4>
                    <img loading="lazy" src="../images/extension_settings.png" alt="extension_settings">
                </div>

            </div>
        </div>
    </div>

    ${@import tpl/tpl_footer.html}
</div>
<script src="../script/base.js"></script>
${@import tpl/tpl_analysis.html}
</body>
</html>