---
layout: feature
---

{%- 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-md-3">
                <div class="categories-section">
                </div>
                <div class="categories-list">
                    <div class="accordion" id="accordionExample">
                        {%- for item in site.data.photo-categories -%}
                        <div class="card card-hover">
                            <div class="card-header" id="heading-{{forloop.index}}">
                                <button class="btn btn-block text-left p-0" type="button" data-toggle="collapse"
                                    data-target="#collapse-{{forloop.index}}" aria-expanded="true"
                                    aria-controls="collapse-{{forloop.index}}">
                                    {{item.category}} <i class="fas fa-angle-down"></i>
                                </button>
                            </div>

                            <div id="collapse-{{forloop.index}}" class="collapse"
                                aria-labelledby="heading-{{forloop.index}}" data-parent="#accordionExample">
                                <div class="card-body">
                                    {%- for i in item.features -%}
                                    <a href="{{i.link}}">{{i.name}} </a>
                                    {%- endfor -%}
                                </div>
                            </div>
                        </div>
                        {%- endfor -%}
                    </div>
                </div>

            </div>
            <div class="col-md-9">
                <div class="row" id="upper-panel">
                    <div class="col-md-8">
                        <div>
                            <div>
                                <div>
                                    {%- assign frameh1 = fileData.H1 | replace: "$variable", page.value -%}
                                    <h1 class="frame-h1">{%- for word in frameh1-%}
                                        {%- if forloop.first == true -%}
                                        {{word | capitalize }}
                                        {%- else -%}
                                        {{word}}
                                        {%- endif -%}
                                        {%- endfor -%}</h1>
                                </div>
                                {%- assign frameh2 = fileData.H2 | replace: "$variable", page.value -%}
                                <h2 class="frame-h2">
                                    {%- for word in frameh2 -%}
                                    {%- if forloop.first == true -%}
                                    {{word | capitalize }}
                                    {%- else -%}
                                    {{word}}
                                    {%- endif -%}
                                    {%- endfor -%}
                                </h2>
                            </div>
                        </div>
                        <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>
                <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-color: {{fileData.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 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-color: {{fileData.color}};">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>