---
layout: feature
---
<style>
.frame-h2 {
max-width: 100%;
margin-bottom: 40px;
}
</style>
{%- assign fileData = site.data[page.folderName][page.lang][page.fileName] -%}
<div class="container mt-4">
<div class="col-md-11 mx-auto">
<div class="row">
<div class="col-12">
<div class="col-12">
<div>
<div>
<div>
{%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
<h1 class="frame-h1 text-center">{%- for word in frameh1-%}
{%- if forloop.first == true -%}
{{word | capitalize }}
{%- else -%}
{{word}}
{%- endif -%}
{%- endfor -%}</h1>
</div>
{%- assign frameh2 = fileData.H2 | replace: "$variable", page.value -%}
<div>
<h2 class="frame-h2 text-center">
{%- for word in frameh2 -%}
{%- if forloop.first == true -%}
{{word | capitalize }}
{%- else -%}
{{word}}
{%- endif -%}
{%- endfor -%}
</h2>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 mx-auto">
<div class="row" id="upper-panel">
<div class="col-md-4">
<div class="preview-section">
<img src="{{fileData.mainPreviewImage}}" alt="">
</div>
<h3 id="example-h3">Examples</h3>
<div class="image-samples" onclick="openExamplesModal()">
{%- for item in fileData.imageSamples -%}
<img src="{{item}}" alt="sample">
{%- endfor -%}
</div>
</div>
<div class="col-md-4">
<form id="effect-form" data-feature-name="{{page.featureName}}">
{%- for item in fileData.elements -%}
{%- if item.type == "image" -%}
<label for="{{item.id}}">{{item.label}}</label>
<div class="d-flex mb-15">
<button class="choose-image" type="button" id="{{item.id}}"
data-index="{{forloop.index}}" onclick="clickInput(this)">Choose
image</button>
<button class="cam-image" id="cam-{{forloop.index}}"><i
class="fas fa-camera"></i></button>
<img class="small-image-preview" style="display: none;"
id="image-pre-{{forloop.index}}"></img>
</div>
<input class="d-none" id="file-{{forloop.index}}" type="file" onchange="fileOnChange(this)"
data-index="{{forloop.index}}" accept=".webp,.png,.jpg,.jpeg" required />
{%- endif -%}
{%- if item.type == "text" -%}
<label for="{{item.id}}">{{item.label}}</label>
<input class="mb-15" type="text" placeholder="Your Text" id="{{item.id}}">
{%- endif -%}
{%- endfor -%}
<div class="d-flex">
<button class="submit-btn" type="submit">Go</button>
</div>
</form>
</div>
<div class="col-md-3">
<div class="categories-section">
</div>
<div class="categories-list">
<ul class="pl-0">
{%- for item in site.data.photo-categories -%}
{%- if page.category == item.category -%}
<li class="active-cat">
<a class="category-link " href="{{item.link}}">{{item.category}}</a>
</li>
{%- else -%}
<li>
<a class="category-link" href="{{item.link}}">{{item.category}}</a>
</li>
{%- endif -%}
{%- endfor -%}
</ul>
</div>
</div>
</div>
<div class="row">
<div id="workspace" data-name="together_forever" style="display: none;">
<div class="row">
<div class="col-12 mb-4">
<div class="d-flex justify-content-between">
<div class="result-info">
<a href="{{page.permalink}}" target="_blank">{{page.featureName}}</a>
<i class="fas fa-chevron-right"></i>
<div>result</div>
</div>
<button id="download-button"
style=" background: linear-gradient(to right, var(--pink), var(--purple));"><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 class="col-md-12 mx-auto">
<div class="select-img-panel">
<div id="saving-data" style="display: block;">
<img loading="lazy" src="/assets/images/loader.gif" alt="saving"> <span
class="ml-2">Saving
your
images...</span>
</div>
<div id="canvas-panel">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="crop-image-modal-container">
<div class="row w-100">
<div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
<div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
<div>Select an area you would like to use</div>
<div>
<button onclick="closeModal()">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="crop-image-modal-body">
</div>
<div class="crop-btn-section">
<button id="crop" class="mx-auto my-3"
style=" background: linear-gradient(to right, var(--pink), var(--purple));">crop</button>
</div>
</div>
</div>
</div>
<div class="example-images-modal-container">
<div class="row w-100">
<div class="example-images-modal col-lg-6 col-md-8 mx-auto">
<div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
<div>Examples</div>
<div>
<button onclick="closeExamplesModal()">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="example-images-modal-body">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner w-75 mx-auto">
{%- for item in fileData.imageSamples -%}
{%- if forloop.index == 1 -%}
<div class="carousel-item active">
<img src="{{item}}" class="d-block w-100" alt="{{item}}">
</div>
{%- endif -%}
<div class="carousel-item">
<img src="{{item}}" class="d-block w-100" alt="{{item}}">
</div>
{%- endfor -%}
</div>
<button class="carousel-control-prev" type="button"
data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button"
data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>