{% assign file = page.fileName %}
{% assign lang = page.lang %}
{% assign folder = page.folderName %}
{% assign featureData= site.data[folder][lang][file] %}
<!DOCTYPE html>
<html lang="{{page.lang}}">
{% include head/index.html %}
<body>
{% include header/index.html %}
<div class="flex-container feature1-flex-container">
<div class="flex-class py-4 mt-4 mt-md-0">
<div id="h1-img-wrapper" class="d-flex justify-content-center align-items-center">
{%- assign featureh1 = featureData.H1 | replace: "$variable", page.value -%}
<h1 class="feature1-h1">{%- for word in featureh1-%}
{%- if forloop.first == true -%}
{{word }}
{%- else -%}
{{word}}
{%- endif -%}
{%- endfor -%}</h1>
</div>
{%- assign featureh2 = featureData.H2 | replace: "$variable", page.value -%}
<h2 class="feature1-h2">
{%- for word in featureh2 -%}
{%- if forloop.first == true -%}
{{word | capitalize }}
{%- else -%}
{{word}}
{%- endif -%}
{%- endfor -%}
</h2>
</div>
</div>
{%- if site.noFeatureBox == true -%}
<div class="feature-content-box" id="theme-content-box">
{{content}}
</div>
{%- else -%}
{%- if page.noBox == true -%}
<div class="feature-content-box" id="theme-content-box">
{{content}}
</div>
{%- else -%}
<div class="feature-content-box" id="theme-content-box">
<div class="container">
{%- assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
{%- if page.removeBox != true -%}
<div class="custom-box" data-color="{{boxColor}}">
<div style="display: none;" id="file-loader">
<img src="/spinner.gif" alt="">
<p>Please Wait ,Loading Your file </p>
</div>
<div class="saving-file-download-wrap" style="display: none;">
<img loading="lazy" class="trust-img" src="/trust.svg" alt="trust">
<p class="text-white my-2">Thanks for your patience</p>
<button class="btn" id="download-zip">Download</button>
</div>
<div class="file-input" id="inputbox" style="color:#fff">
<div class="m-auto">
<div class="d-flex justify-content-center align-items-center">
<div id="Inputbox" class="boxes" style="background-color: {{boxColor}};">
<img height="21px" width="21px" src="/assets/images/add.svg" alt="add " />
<span class="ml-3">CHOOSE FILE</span>
</div>
<div class="file-pick-dropdown" style="background-color:{{boxColor}}">
<i class="fas fa-angle-down arrow-sign"></i>
<div class="file-picker-dropdown" style="display: none">
<button id="filepicker">
<svg class="mr-3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path id="Path" d="M8.33331 3H15.6666L23 15H15.6666L8.33331 3Z"
fill="#FFC107">
</path>
<path id="Path_2" d="M4.6012 21L8.30086 15H23L19.3333 21H4.6012Z"
fill="#1976D2"></path>
<path id="Path_3" d="M1 15.0625L4.60119 21L12 9L8.33333 3L1 15.0625Z"
fill="#4CAF50"></path>
</svg>
Google Drive
</button>
<button id="dropbox">
<svg class="mr-3" viewBox="0 0 24 24" fill="#0061FF"
xmlns="http://www.w3.org/2000/svg">
<path id="icon"
d="M12.0146 6.57367L6.50732 10.1473L12.0146 13.721L6.50732 17.2947L1 13.6912L6.50732 10.1176L1 6.57367L6.50732 3L12.0146 6.57367ZM6.47803 18.4263L11.9854 14.8527L17.4927 18.4263L11.9854 22L6.47803 18.4263ZM12.0146 13.6912L17.522 10.1176L12.0146 6.57367L17.4927 3L23 6.57367L17.4927 10.1473L23 13.721L17.4927 17.2947L12.0146 13.6912Z">
</path>
</svg>
Dropbox
</button>
</div>
</div>
</div>
</div>
<p id="dropfile" class="text-dark">or drop your file here</p>
<p id="error" class="p-3"></p>
</div>
</div>
{%- endif -%}
{%- if page.workspace -%}
<div class="workspace" style="display: none">
<div class="row mx-auto">
<div class="col-md-10 mx-auto">
{{content}}
</div>
</div>
</div>
{%- else -%}
<div class="workspace" style="display: none;">
<div class="row">
<div class="col-12">
<div class="download-wrapper mt-3">
<div class="row rowclass">
<div class="col-7">
<div class="d-flex align-items-center">
<div class="select-format-title">image's format</div>
<div class="download-format">
<select name="image-format" id="image-format">
{%- if pageData.downloadFormats -%}
{%- for item in pageData.downloadFormats -%}
<option value="{{item}}">{{item}}</option>
{%- endfor -%}
{%- else -%}
<option value="png">png</option>
<option value="jpg">jpg</option>
<option value="jpeg">jpeg</option>
<option value="webp">webp</option>
<option value="gif">gif</option>
{%- endif -%}
</select>
</div>
</div>
</div>
<div class="col-5">
<div class="d-flex align-items-center">
<button id="download-button" style="background-color: {{pageData.color}};"><svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM382.6 302.6l-103.1 103.1C270.7 414.6 260.9 416 256 416c-4.881 0-14.65-1.391-22.65-9.398L129.4 302.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L224 306.8V128c0-17.69 14.33-32 32-32s32 14.31 32 32v178.8l49.38-49.38c12.5-12.5 32.75-12.5 45.25 0S395.1 290.1 382.6 302.6z" />
</svg>Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
{%- if page.commonStructure != false -%}
<div class="row">
<div class="col-md-7 mx-auto mb-2">
<div class="select-img-panel">
<div id="saving-data" style="display: none;">
<img loading="lazy" src="/assets/images/loader.gif" alt="saving"> <span
class="ml-2">Saving your
images...</span>
</div>
<div id="canvas-box-panel">
</div>
</div>
</div>
<div class="col-md-5">
<div class="options-panel">
{%- if pageData.optionPanelTitle -%}
<div class="title">
{{pageData.optionPanelTitle}}
</div>
{%- endif -%}
{{content}}
</div>
</div>
</div>
{%- else -%}
{{content}}
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
{%- endif -%}
{%- endif -%}
{%- if featureData.TEXTUAL_CONTENT -%}
<div class="container mt-4 mb-5">
<div class="row px-0">
<div class="col-md-12 mx-auto">
<div class="row">
{% for data in featureData.TEXTUAL_CONTENT %}
<div class="col-md-4 my-4">
<img class="feature-card-img" src="{{data.logoUrl}}" loading="lazy" height="48px" width="48px"
alt="{{data.header}}" {%- if site.crossorigin -%} crossorigin {%- endif -%}>
<div class="feature-card-title">{{data.header | replace: "$variable", page.value}}</div>
<div class="feature1-card-desc">{{data.content | replace: "$variable", page.value}}</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{%- endif -%}
{%- if featureData.HOW_TO_CONTENT -%}
<section class="how-to-section">
<div class="container">
<div class="row">
<div class="col-md-12 mx-auto">
<div class="row">
<h4 class="feature1-how-to-heading w-100 text-center mb-5">
{{featureData.HOW_TO_CONTENT.mainHeading |
replace:
"$variable",
page.value}}</h4>
{%- for data in featureData.HOW_TO_CONTENT.steps -%}
<div class="col-md-4 d-flex justify-content-center order-{{forloop.index}}">
<div class="feature1-how-to-right">
<span class="feature1-howto-steps" style="color: {{boxColor}} ">Step
{{forloop.index}}</span>
<h3 class="feature1-how-to-title">{{data.heading | replace:
"$variable",
page.value}}</h3>
<ol class="how-to-list">
<li id="step{{forloop.index}}" class="feature1-how-to-list-item">
{{data.desc |
replace: "$variable",
page.value}}
</li>
</ol>
</div>
</div>
{%- endfor -%}
</div>
</div>
</div>
</div>
</section>
{%- endif -%}
{%- assign showFaqs= true -%}
{%- for item in site.noFaqsList -%}
{%- if item == page.lang -%}
{%- assign showFaqs = false -%}
{%- break -%}
{%- else -%}
{%- assign showFaqs = true -%}
{%- endif -%}
{%- endfor -%}
{%- if showFaqs == true -%}
{%- if featureData.FAQ.size>0 -%}
<section class="faq-section">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<main class="faqs">
<h3 class="feature-h1 text-left mb-4" style="font-weight:900">{{featureData.faqheading |
default: "FAQ's"}}</h3>
{% for data in featureData.FAQ %}
<details open>
<summary>{{data.question | replace: "$variable",page.value}}</summary>
<div class="faq__content">
<p style="color:#5c5e60; font-size:14px">{{data.answer | replace: "$variable",
page.value}}</p>
</div>
</details>
{% endfor %}
</main>
</div>
</div>
</div>
</section>
{%- endif -%}
{%- endif -%}
{%- include share/socialshare.html -%}
{%- include Rating/rating.html -%}
{%- assign langen = "en" -%}
{%- if site.data[folder][langen][file].categories -%}
{% assign categories= site.data[folder][langen][file].categories %}
{%- else -%}
{% assign categories= page.categories %}
{%- endif -%}
{%- if site.data[folder][langen][file].tags -%}
{% assign tags= site.data[folder][langen][file].tags %}
{%- else -%}
{% assign tags= page.tags %}
{%- endif -%}
{%- if categories.size> 0 or tags.size>0-%}
{%- include section/related_categories_post.html -%}
{%- else -%}
{%- include section/recent_posts.html -%}
{% endif %}
{%- if site.customblogdata -%}
{%- if categories.size> 0 or tags.size>0-%}
{%- include customblog/relatedposts.html -%}
{%- else -%}
{%- include customblog/recentposts.html -%}
{% endif %}
{%- endif -%}
{% include footer/index.html %}
{% include script.html %}
</body>
</html>