<?php include("assetsX/includesMobile/parts/config.php"); ?>
<?php include("assetsX/includesMobile/parts/header-import.php"); ?>
<style>
canvas{
box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}
</style>
<div id="brandeditor" class="backend content-gutter content-limit-wide">
<?php include("assetsX/includesMobile/parts/presets.php"); ?>
<div class="hero-demo">
<?php /*include("assetsX/includesMobile/parts/theme.php"); */ ?>
<div class="demo">
<?php include("assetsX/includesMobile/parts/EditorOptions.php"); ?>
<div class="hero-demo-editor-wrapper" data-state="active" data-module="HeroDemo" data-context="@media (min-width:32em)" style="" >
<div class="hero-demo-editor"><!--<p class="demo-loading"><span>Loading editor...</span></p>-->
<div class="TheBrandRoot TheBrandRootComponent thebrand-editor"
data-env="portrait narrow has-navigation-preference-left has-navigation-preference-bottom has-controlgroups-preference-bottom has-controltabs-preference-bottom has-toolbar-preference-top is-animated pointer-coarse pointer-no-hover is-compact has-limited-space has-toolbar has-navigation chrome-118"
>
<!-- <div class="TheBrandRoot TheBrandRootComponent thebrand-editor"
data-env="landscape has-navigation-preference-left has-navigation-preference-bottom has-controlgroups-preference-bottom has-controltabs-preference-bottom has-toolbar-preference-top is-animated pointer-coarse pointer-no-hover has-toolbar has-navigation chrome-118"
style="">-->
<?php include("assetsX/includesMobile/parts/navToolsImport.php"); ?>
<?php include("assetsX/includesMobile/parts/navMain.php"); ?>
<div class="TheBrandTabPanels TheBrandMain ">
<div class="TheBrandTabPanel " >
<div class="TheBrandUtilPanel" >
<div class="TheBrandUtilMain">
<!-- Page Loader START -->
<div id="brandeditor-main-loader" class="brandeditor-loader-wrap">
<div class="brandeditor-loader-inner">
<div class="brandeditor-loader"></div>
</div>
</div>
<!-- Page Loader END -->
<!-- Top Bar START -->
<!-- --><?php /*include("editorIncludes/top-bar.php"); */?>
<!-- Top Bar END -->
<!-- Icon Menu START -->
<?php include("editorIncludes/icon-menu.php"); ?>
<!-- Icon Menu END -->
<!-- Icon Panel START -->
<?php include("editorIncludes/icon-panel.php"); ?>
<!-- Toggle Left -->
<div id="brandeditor-toggle-left"><span class="material-icons">chevron_left</span></div>
<!-- Icon Panel END -->
<!-- Body START -->
<div id="brandeditor-body" >
<div class="brandeditor-wrap ">
<div id="brandeditor-ruler" class="brandeditor-inner-wrap">
<!-- Ruler -->
<!-- <div id="brandeditor-ruler-icon" class="closed" title="Ruler Menu"></div>-->
<!-- Canvas Content START -->
<div id="brandeditor-content" >
<!-- Canvas Image -->
<div id="brandeditor-canvas-img-wrap">
<!-- <img id="brandeditor-canvas-img" src="files/templates/img/15.jpg" data-filename="placeholder" data-template="" />-->
<!-- <img id="brandeditor-canvas-img" src="" data-filename="template" data-template="files/templates/json/22.json" />-->
<?php
if ($_SERVER['SERVER_ADDR'] == '127.0.0.1' || $_SERVER['SERVER_ADDR'] == '::1') {
?>
<img id="brandeditor-canvas-img" src="" data-filename="template" data-template="files/templates/json/15.json" />
<?php
} else {
?>
<?php $themeidX =str_replace("webjson","","$themeid");
$template= $_GET['template'];
if(empty($template))
{
$template= 1;
}
else
{
$template= $_GET['template'];
}
?>
<?php $layout= $_GET['layout'];
if(!empty($layout))
{?>
<img id="brandeditor-canvas-img" src="" data-filename="<?php echo $title; ?>" data-template="https://www.thebrand.ai/TheBrandZ/mode.php?mode=getTextLayout&id=<?php echo $layout;?>" />
<?php } else
{
?>
<img id="brandeditor-canvas-img" src="" data-filename="<?php echo $title; ?>" data-template="https://www.thebrand.ai/TheBrandZ/interpretTemplatesImportV1.php?template=<?php echo $template;?><?php echo $category;?>" />
<?php
}?>
<?php
}
?>
</div>
<div id="brandeditor-canvas-wrap">
<!-- Canvas Loader -->
<div id="brandeditor-canvas-overlay"></div>
<div id="brandeditor-canvas-loader">
<div class="brandeditor-loader"></div>
</div>
<!-- Canvas - Don't remove canvas element! -->
<canvas id="brandeditor-canvas"></canvas>
</div>
<!-- Zoom & Pan Buttons -->
<!-- Zoom & Pan Buttons -->
<div class="brandeditor-content-bar">
<div class="brandeditor-img-size"><span id="brandeditor-img-width">0</span>px<span class="material-icons">clear</span><span id="brandeditor-img-height">0</span>px</div>
<button id="brandeditor-img-drag" class="brandeditor-btn"><span class="material-icons">pan_tool</span></button>
<!-- <div id="brandeditor-img-zoom-counter" class="brandeditor-counter">
<button id="brandeditor-img-zoom-out" class="counter-minus brandeditor-btn"><span class="material-icons">remove</span></button>
<input id="brandeditor-img-zoom" class="brandeditor-form-field numeric-field" type="text" value="100" autocomplete="off" data-min="10" data-max="200" data-step="5">
<button id="brandeditor-img-zoom-in" class="counter-plus brandeditor-btn"><span class="material-icons">add</span></button>
</div>-->
</div>
</div>
<!-- Canvas Content END -->
</div>
</div>
</div>
<!-- Body END -->
<!-- Toggle Right Button -->
<div id="brandeditor-toggle-right"><span class="material-icons">chevron_right</span></div>
<!-- Right Column START -->
<?php include("editorIncludes/right.php"); ?>
<span class="brandeditor-icon-panel-content">
<!-- Right Column END -->
<!-- Modal Add New START -->
<?php include("editorIncludes/modal-new.php"); ?>
<!-- Modal Add New END -->
<!-- Modal Add New START -->
<?php include("editorIncludes/modal-elements.php"); ?>
<!-- Modal Add New END -->
<!-- Modal Add New START -->
<?php include("editorIncludes/modal-frames.php"); ?>
<!-- Modal Add New END -->
<!-- Modal Save START -->
<?php include("editorIncludes/modal-save.php"); ?>
<!-- Modal Save END -->
<!-- Modal Media Library START -->
<?php include("editorIncludes/modal-libraryTest.php"); ?>
<?php include("editorIncludes/modal-settings.php"); ?>
<?php include("editorIncludes/modal-icons.php"); ?>
<!-- Modal Media Library END -->
<!-- Modal SVG Library START -->
<?php include("editorIncludes/modal-svg.php"); ?>
<!-- Modal SVG Library END -->
<!-- Modal History START -->
<?php include("editorIncludes/modal-history.php"); ?>
</span>
<!-- Modal History END -->
<!-- Translation Strings -->
<script>
/* <![CDATA[ */
var brandeditorParams = {
"textbox": "Enter Your Text Here",
"object": "Object",
"loading": "Loading...",
"loadmore": "Load More",
"saved": "Saved!",
"imgsaved": "Image is saved.",
"tempsaved": "Template is saved.",
"freeDrawing": "Free drawing",
"frame": "Frame",
"image": "Image",
"circle": "Circle",
"square": "Square",
"rectangle": "Rectangle",
"triangle": "Triangle",
"ellipse": "Ellipse",
"trapezoid": "Trapezoid",
"pentagon":"Pentagon",
"octagon":"Octagon",
"emerald": "Emerald",
"star": "Star",
"element": "Element",
"customSvg": "Custom SVG",
"success": "Success",
"error": "Error",
"delete": "Delete",
"duplicate": "Duplicate",
"showhide": "Show/Hide",
"lockunlock": "Lock/Unlock",
"text": "Text",
"started": "Editing started.",
"added": "added.",
"removed": "removed.",
"resized": "resized.",
"edited": "edited.",
"replaced": "replaced.",
"rotated": "rotated.",
"moved": "moved.",
"scaled": "scaled.",
"flipped": "flipped.",
"cropped": "cropped.",
"bg": "Canvas",
"filter": "filter",
"showRulers":"Show rulers",
"hideRulers":"Hide rulers",
"showGuides":"Show guides",
"hideGuides":"Hide guides",
"clearAllGuides":"Clear all guides",
"question1":"Are you sure you want clear the history?",
"question2":"Are you sure you want to delete the layers?",
"question3":"Are you sure you want to crop the image?",
"question4":"Are you sure you want to resize the image?",
"noDuplicate":"You can not duplicate multiple objects. Please select single object to duplicate.",
"warning": "Warning",
"qrCode": "QR Code",
"startDrawing": "Start Drawing",
"stopDrawing": "Stop Drawing",
"erased": "Pixels erased."
};
/* ]]> */
</script>
<!-- Scripts END -->
<!-- Body END -->
<?php
if ($_SERVER['SERVER_ADDR'] == '127.0.0.1' || $_SERVER['SERVER_ADDR'] == '::1') {
?>
<?php
} else {
?>
<script>
$(document).ready(function(){
// Wait 5 seconds and click #brandeditor-toggle-right
const apikey="SnJeKdzoLJiTT1Ge8rud21n5uvhWZPBTT0I9AwBtNSyG1pQLAJA5sRqh"; //use the apikey you have generated
const input=document.querySelector("input");
const search_btn=document.querySelector(".search_btn");
const showmore_btn=document.querySelector(".showmore");
let page_num=1;
let search_text="";
let search=false;
/* input.addEventListener("input",(event)=>{
event.preventDefault();
search_text=event.target.value;
})
*/
search_btn.addEventListener("click",()=>{
if(input.value==="")
{
alert("Please enter the some text")
return;
}
cleargallery();
search=true;
var search_text = $("#searchPexels").val();
SearchPhotos(search_text,page_num);
})
function cleargallery(){
document.querySelector("#brandeditor-library-my").innerHTML="";
page_num=1;
/* CuratedPhotos(page_num);*/
}
async function CuratedPhotos(page_num){
// fetch the data from api
//const data=await fetch(`https://api.pexels.com/v1/curated?page=${page_num}&orientation=square`,
const data=await fetch(`https://api.pexels.com/v1/search?query=backgrounds&page=${page_num}`,
{
method: "GET",
headers: {
Accept: "application/json",
Authorization: apikey, //use the apikey you have generated
},
});
const response=await data.json(); //convert the response to json
console.log(response);
display_images(response); // call the display_images method to display the images on page
}
function display_images(response){
//use forEach loop to iterate on each item
response.photos.forEach((image) => {
const photo= document.getElementById('brandeditor-library-my');
var htmlToAppend =`<div class="brandeditor-masonry-item" data-keyword="Photo By: ${image.photographer}📸">
<div class="brandeditor-masonry-item-inner">
<div class="brandeditor-img-wrap" style="min-height: auto;">
<img class="lazy entered loaded" data-src="${image.src.small}" data-full="${image.src.large2x}" data-filename="Photo By: ${image.photographer}📸" title="Photo By: ${image.photographer}📸" src="${image.src.small}">
</div>
<div class="brandeditor-masonry-item-desc">Photo By: ${image.photographer}📸</div>
</div>
</div>`;
photo.insertAdjacentHTML('afterbegin', htmlToAppend);
});
}
async function SearchPhotos(query, page_num){
const data=await fetch(`https://api.pexels.com/v1/search?query=${query}&page=${page_num}`,
{
method: "GET",
headers: {
Accept: "application/json",
Authorization: apikey,
},
});
const response=await data.json();
console.log(response);
display_images(response);
}
showmore_btn.addEventListener("click", () => {
if(!search){
page_num++;
CuratedPhotos(page_num);
}
else{
var search_text = $("#searchPexels").val();
if(search_text==="")
return;
page_num++;
SearchPhotos(search_text,page_num);
}
})
setTimeout(function() {
CuratedPhotos(page_num);
}, 15000);
});
</script>
<?php
}
?>
<form id="engineX">
<input type='hidden' id='myaccountX' value="<?php if(!empty($slug)) {echo $catalogidX; }else {echo $_COOKIE['euserid'];} ?>" />
<input type='hidden' id='AppNoX' value="<?php echo $appno; ?>" />
<?php if(!empty($_GET["showPic"])) {?><input type='hidden' id='showPic' value="1" /><?php } else {?><input type='hidden' id='showPic' value="0" /><?php }?>
<input type='hidden' id='meX' value="<?php echo $_COOKIE['euserid']; ?>" />
<input type='hidden' id='youX' value="<?php echo $catalogidX; ?>" /><input type='hidden' id='pichaX' value="<?php echo $pichaX; ?>" />
<input type='hidden' id='pager' value="<?php if(!empty($_GET["page"])){echo $_GET["page"]; } else {echo "0";} ?>" />
<?php if($mode=="tafuta") {?><input type='hidden' id='tafuta' value="<?php echo $tafuta; ?>" /><?php } ?>
<input type='hidden' id='hastheme' value="<?php if (empty($makeit)) {?>0<?php } else {?>1<?php }?>" />
<input type='hidden' id='currentTheme' value="0" />
<input type='hidden' id='currentID' value="<?php echo str_replace("webjson","","$themeid");; ?>" />
<input type='hidden' id='currentCategory' value='<?php echo $category; ?>' />
<input type='hidden' id='currentDesign' value="" />
<input type='hidden' id='snapID' value="" />
</form>
</div>
<div class="TheBrandUtilHeader">
<?php include("assetsX/includesMobile/tabs/head-elements.php"); ?>
<?php include("assetsX/includesMobile/tabs/head-pan.php"); ?>
<?php include("assetsX/includesMobile/tabs/head-text.php"); ?>
<?php include("assetsX/includesMobile/tabs/head-filterz.php"); ?> <?php include("assetsX/includesMobile/tabs/head-frame-options.php"); ?>
</div>
<div class="TheBrandUtilFooter">
<?php include("assetsX/includesMobile/tabs/mid-text-new.php"); ?>
<?php include("assetsX/includesMobile/tabs/mid-image.php"); ?>
<?php include("assetsX/includesMobile/tabs/mid-shapes.php"); ?>
<?php include("assetsX/includesMobile/tabs/mid-elements.php"); ?>
<?php include("assetsX/includesMobile/tabs/mid-adjust.php"); ?>
<?php include("assetsX/includesMobile/tabs/mid-filterz.php"); ?>
</div>
</div>
</div>
</div>
<!--
<!-- --><?php /*include("assetsX/includesMobile/parts/dialo.php"); */?>
</div>
</div>
</div>
</div>
</div>
</div>
<form id="engineX">
<input type='hidden' id='myaccountX' value="<?php if(!empty($slug)) {echo $catalogidX; }else {echo $_COOKIE['euserid'];} ?>" />
<input type='hidden' id='AppNoX' value="<?php echo $appno; ?>" />
<?php if(!empty($_GET["showPic"])) {?><input type='hidden' id='showPic' value="1" /><?php } else {?><input type='hidden' id='showPic' value="0" /><?php }?>
<input type='hidden' id='meX' value="<?php echo $_COOKIE['euserid']; ?>" />
<input type='hidden' id='youX' value="<?php echo $catalogidX; ?>" /><input type='hidden' id='pichaX' value="<?php echo $pichaX; ?>" />
<input type='hidden' id='pager' value="<?php if(!empty($_GET["page"])){echo $_GET["page"]; } else {echo "0";} ?>" />
<?php if($mode=="tafuta") {?><input type='hidden' id='tafuta' value="<?php echo $tafuta; ?>" /><?php } ?>
<input type='hidden' id='hastheme' value="<?php if (empty($makeit)) {?>0<?php } else {?>1<?php }?>" />
</form>
</body>
</html>