File: /var/www/html/tmpr/../tmpr/../tmpr/../brandcreator/mylogo.php
<?php
session_start();
$logoReal = $_SESSION['myLogo'];
if (isset($_SESSION['svgLogo'])) {
$svgFile = $_SESSION['svgLogo'];
}
if (isset($_GET['choose'])) {
$choose = $_GET['choose'];
if (empty($choose)) {
header("Location: https://www.thebrand.ai/brandcreator/choose");
}
} else {
header("Location: https://www.thebrand.ai/brandcreator/choose");
}
if (isset($_GET['style'])) {
$style = $_GET['style'];
if (empty($style)) {
header("Location: https://www.thebrand.ai/brandcreator/choose");
}
} else {
header("Location: https://www.thebrand.ai/brandcreator/choose");
}
?>
<html style=""
class="no-touchevents wf-rubik-n5-active wf-robotomono-n3-active wf-poppins-n7-active wf-poppins-n6-active wf-roboto-n4-active wf-sansitaone-n4-active wf-kameron-n4-active wf-trocchi-n4-active wf-robotocondensed-n4-active wf-raleway-n4-active wf-playfairdisplay-n9-active wf-alice-n4-active wf-ultra-n4-active wf-quattrocento-n4-active wf-fanwoodtext-n4-active wf-archivoblack-n4-active wf-tenorsans-n4-active wf-eczar-n7-active wf-eczar-n4-active wf-worksans-n4-active wf-stintultraexpanded-n4-active wf-pontanosans-n4-active wf-unicaone-n4-active wf-abel-n4-active wf-domine-n4-active wf-cabin-n4-active wf-oswald-n5-active wf-oswald-n4-active wf-opensans-n4-active wf-nixieone-n4-active wf-oldstandard-n4-inactive wf-slabo-n4-inactive wf-active">
<head>
<meta name="author" content="Brand AI"/>
<link rel="shortcut icon" type="image/png" href="https://www.thebrand.ai/i/uploads/logo/logo_6119277f674cd2.png"/>
<meta property="og:locale" content="en-US"/>
<meta property="og:site_name" content="Brand AI"/>
<meta property="og:image" content="https://www.thebrand.ai/i/uploads/logo/logo_62a4de26e93f0.png"/>
<meta property="og:image:width" content="160"/>
<meta property="og:image:height" content="60"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="Design Like A Pro! Unlock Your Creativity with AI Design Tools | The Brand AI - Brand AI"/>
<meta property="og:description" content="Elevate your brand with AI-powered logo, poster, and brochure designs. Get stunning business cards and banners. Unleash the potential of AI in design."/>
<meta property="og:url" content="https://www.thebrand.ai/i/"/>
<meta property="fb:app_id" content=""/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@Brand AI"/>
<meta name="twitter:title" content="Design Like A Pro! Unlock Your Creativity with AI Design Tools | The Brand AI - Brand AI"/>
<meta name="twitter:description" content="Elevate your brand with AI-powered logo, poster, and brochure designs. Get stunning business cards and banners. Unleash the potential of AI in design."/>
<link rel="canonical" href="https://www.thebrand.ai/i/"/>
<meta charset="utf-8">
<title>BrandCreator | Professional Brand & Logo Design Made Easy</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://www.thebrand.ai/brandcreator/favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="https://www.thebrand.ai/brandcreator/webclip.png" rel="apple-touch-icon">
<meta name="description"
content="Tap into the power of smart brand design. Create a complete, professional & entirely unique brand in minutes.">
<link href="files/assets/brandcreator.css?ttwet" rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Rubik:500,500%7CRoboto+Mono:300%7CPoppins:700,600%7CRoboto:400%7CSansita+One:400,400%7CKameron:400%7CTrocchi:400,400%7CRoboto+Condensed:400%7COld+Standard:400,400%7CRaleway:400%7CPlayfair+Display:900,900%7CAlice:400%7CUltra:400,400%7CSlabo:400%7CQuattrocento:400,400%7CFanwood+Text:400%7CArchivo+Black:400,400%7CTenor+Sans:400%7CEczar:700,400%7CWork+Sans:400%7CStint+Ultra+Expanded:400,400%7CPontano+Sans:400%7CUnica+One:400,400%7CAbel:400%7CDomine:400,400,400%7CCabin:400%7COswald:500,400%7CNixie+One:400,400%7COpen+Sans:400"
media="all">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Rubik:500,500%7CRoboto+Mono:300%7CPoppins:700,600%7CRoboto:400%7CSansita+One:400,400%7CKameron:400%7CTrocchi:400,400%7CRoboto+Condensed:400%7COld+Standard:400,400%7CRaleway:400%7CPlayfair+Display:900,900%7CAlice:400%7CUltra:400,400%7CSlabo:400%7CQuattrocento:400,400%7CFanwood+Text:400%7CArchivo+Black:400,400%7CTenor+Sans:400%7CEczar:700,400%7CWork+Sans:400%7CStint+Ultra+Expanded:400,400%7CPontano+Sans:400%7CUnica+One:400,400%7CAbel:400%7CDomine:400,400,400%7CCabin:400%7COswald:500,400%7CNixie+One:400,400%7COpen+Sans:400"
media="all">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Rubik:500,500%7CRoboto+Mono:300%7CPoppins:700,600%7CRoboto:400%7CSansita+One:400,400%7CKameron:400%7CTrocchi:400,400%7CRoboto+Condensed:400%7COld+Standard:400,400%7CRaleway:400%7CPlayfair+Display:900,900%7CAlice:400%7CUltra:400,400%7CSlabo:400%7CQuattrocento:400,400%7CFanwood+Text:400%7CArchivo+Black:400,400%7CTenor+Sans:400%7CEczar:700,400%7CWork+Sans:400%7CStint+Ultra+Expanded:400,400%7CPontano+Sans:400%7CUnica+One:400,400%7CAbel:400%7CDomine:400,400,400%7CCabin:400%7COswald:500,400%7CNixie+One:400,400%7COpen+Sans:400"
media="all">
<style>
#svg-wrapper {
max-width: 900px; /* Limit max width */
/* Center horizontally with vertical margin */
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 50px;
padding: 0px;
box-sizing: border-box;
font-family: Arial, sans-serif;
overflow:auto;
}
#svg-container {
display: flex;
flex-wrap: wrap; /* Wrap SVG items to next line */
justify-content: center; /* Center items horizontally */
gap: 15px; /* Space between SVG items */
min-height: 200px;
overflow:auto;
/* Optional: reserve space */
}
.pagination {
margin-top: 0px;
text-align: center; /* Center pagination links */
}
/* Example pagination link styles */
.pagination a {
display: inline-block;
margin: 0 6px;
padding-top: 8px;
padding-right: 14px;
padding-left: 14px;
padding-bottom: 8px;
border: 1px solid #ddd;
border-radius: 15px;
color: #333;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.pagination a:hover {
background-color: #eee;
}
.pagination a.active {
background-color: #eb008b;
color: white;
border-color: #eb008b;
}
</style>
<style>
.containerLogo { min-width: 600px;background: #fff; padding: 30px; border-radius: 20px; box-shadow: 0 2px 8px #ccc; }
.upload-area {
border: 2px dashed #eb008b;
border-radius: 8px;
padding: 40px;
text-align: center;
color: #888;
cursor: pointer;
transition: background 0.2s;
}
.upload-area.dragover { background: #e3f0ff; }
#preview { margin: 20px auto; display: none; max-width: 100%; border-radius: 6px; }
#progressBar { width: 100%; height: 8px; background: #eee; border-radius: 4px; margin: 20px 0; display: none; }
#progressBar div { height: 100%; width: 0; background: #eb008b; border-radius: 4px; transition: width 0.3s; }
.colors { display: flex; gap: 8px; margin-top: 15px; }
.color-box { width: 28px; height: 28px; border-radius: 4px; border: 1px solid #ddd; }
.uploadbutton
{
margin: 0 6px;
padding-top: 8px;
padding-right: 14px;
padding-left: 14px;
padding-bottom: 8px;
border:0px;
border-radius: 15px;
color: #333;
text-decoration: none;
cursor: pointer;
color:#ffffff;
transition: background-color 0.3s ease;
background: #eb008b;
font-size:20px;
}
#preview
{
max-height:200px;
}
</style>
</head>
<body>
<div id="react">
<div class="brandcreator--header brandcreator--header-dashboard ">
<div class="brandcreator--header-background" style="width: 100vw; z-index: 0;"></div>
<div class="brandcreator--brand-menu" style="top: -100vh;">
<div class="brandcreator--header-item " data-tip="true" data-tip-disable="true"
data-for="footertip_undefined" style="cursor: pointer; background-color: transparent;">
<div class="brandcreator--header-icon-text" style="color: rgb(25, 25, 25);">
<!--<div class="brandcreator--header-profile-picture-menu-icon"><img src="https://lh3.googleusercontent.com/a/ACg8ocImzSnwECRTlo1rZvZ9x1miwqaBUyr6iQgm5sGATnT4ZmJG74ObAQ=s50" style="border-radius: 100%; height: 32px; margin-right: 0px;" class=""></div>-->
</div>
</div>
<div class="brandcreator--header-item " data-tip="true" data-tip-disable="true"
data-for="footertip_undefined" style="cursor: pointer; background-color: transparent;">
<div class="brandcreator--header-icon-text" style="color: rgb(25, 25, 25);"></div>
</div>
</div>
<div class="brandcreator--header-left"><a href="https://www.thebrand.ai/brandcreator/choose">
<div data-tip="true" data-for="footertip_Go to your dashboard" data-tip-disable="false"
class="brandcreator--header-item " style="cursor: pointer; background-color: transparent;"
currentitem="false">
<img src="files/assets/logo-white3.png" alt="" class="image-47 white-logo" style="max-width:60px; margin-top: 10px; display: block;">
</div>
<div class="__react_component_tooltip place-right type-dark " data-id="tooltip"
style="left: 82px; top: 14px;"><!--Go to your dashboard-->
</div>
</a></div>
<div class="brandcreator--header-center"></div>
<div class="brandcreator--header-right">
<div class="brandcreator--header-item " data-tip="true" data-tip-disable="true"
data-for="footertip_undefined" style="cursor: pointer; background-color: transparent;">
<button type="button" class="brandcreator--dropdown" style="position: relative; color: rgb(25, 25, 25);"
aria-haspopup="true" aria-expanded="false">
<div data-for="footertip3"
style="z-index: 10; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;"></div>
<div>
<!--<div class="brandcreator--header-profile-picture-menu-icon"><img
src="https://lh3.googleusercontent.com/a/ACg8ocImzSnwECRTlo1rZvZ9x1miwqaBUyr6iQgm5sGATnT4ZmJG74ObAQ=s50"
style="border-radius: 100%; height: 32px; margin-right: 0px;" class=""></div>
</div>-->
<svg class="" viewBox="-1 -1 9 14"
style="transition: 200ms; transform: rotate(90deg); height: 12px; margin-left: -5px; margin-right: 0px; margin-top: 8px;">
<polyline stroke="rgb(25, 25, 25)" stroke-width="1.5" vector-effect="non-scaling-stroke"
fill="none" points="0 0 6 5.99950763 0 11.9990153"></polyline>
</svg>
</button>
</div>
</div>
</div>
<div class="brandcreator--notifications"></div>
<div class="brandcreator--onboard-screen"><h1>Upload Your Own Logo</h1>
<div class="brandcreator--onboard-screen-container">
<div class="containerLogo">
<form id="logoForm" enctype="multipart/form-data" method="post">
<div class="upload-area" id="uploadArea">
Drag & Drop your logo here<br>or<br>
<input type="file" id="fileInput" name="logo" accept=".png,.jpg,.jpeg,.svg" style="display:none;">
<button type="button" onclick="document.getElementById('fileInput').click();">Choose File</button>
</div>
<img id="preview" src="#" alt="Logo Preview">
<div id="progressBar"><div></div></div>
<div style="text-align: center; margin-top:20px;" ><button type="submit" class="uploadbutton">Upload</button></div>
</form>
<div id="colorPalette" style="display:none;">
<h4>Extracted Colors:</h4>
<div class="colors" id="colors"></div>
</div>
</div>
</div>
<!-- <div class="brandcreator--icon-search">
</div>-->
</div>
<div class="brandcreator--onboard-screen-buttons">
<div class="brandcreator--onboard-screen-back ">Back</div>
<div class="brandcreator--onboard-screen-progress ">
<div class="brandcreator--onboard-screen-progress-icon-container">
<div class="brandcreator--onboard-screen-progress-icon">1</div>
</div>
<div class="brandcreator--onboard-screen-progress-icon-container">
<div class="brandcreator--onboard-screen-progress-icon">2</div>
</div>
<div class="brandcreator--onboard-screen-progress-icon-container">
<div class="brandcreator--onboard-screen-progress-icon-active">3</div>
</div>
<div class="brandcreator--onboard-screen-progress-icon-container">
<div class="brandcreator--onboard-screen-progress-icon-disabled">4</div>
</div>
<div class="brandcreator--onboard-screen-progress-icon-container">
<div class="brandcreator--onboard-screen-progress-icon-disabled">5</div>
</div>
</div>
<div class="brandcreator--onboard-screen-next " style="cursor: pointer;">Next</div>
</div>
</div>
<script src="files/assets/brandcreator/js/jquery.js?l"
type="text/javascript"></script>
<script>
// Drag-and-drop animation and file handling
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');
const progressBar = document.getElementById('progressBar');
const progress = progressBar.querySelector('div');
const form = document.getElementById('logoForm');
let file;
uploadArea.addEventListener('click', () => fileInput.click());
uploadArea.addEventListener('dragover', (e) => {
e.preventDefault();
uploadArea.classList.add('dragover');
});
uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('dragover'));
uploadArea.addEventListener('drop', (e) => {
e.preventDefault();
uploadArea.classList.remove('dragover');
file = e.dataTransfer.files[0];
fileInput.files = e.dataTransfer.files;
showPreview(file);
});
fileInput.addEventListener('change', () => {
file = fileInput.files[0];
showPreview(file);
});
function showPreview(file) {
if (!file) return;
const reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
preview.style.display = 'block';
};
if (file.type.startsWith('image/')) reader.readAsDataURL(file);
}
// AJAX upload with progress animation
form.addEventListener('submit', function(e) {
e.preventDefault();
if (!fileInput.files[0]) return alert('Please select a file.');
progressBar.style.display = 'block';
progress.style.width = '0%';
const data = new FormData();
data.append('logo', fileInput.files[0]);
const xhr = new XMLHttpRequest();
xhr.open('POST', 'files/connect/logoSave.php', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
let percent = (e.loaded / e.total) * 100;
progress.style.width = percent + '%';
}
};
xhr.onload = function() {
progress.style.width = '100%';
if (xhr.status === 200) {
setTimeout(() => {
progressBar.style.display = 'none';
const res = JSON.parse(xhr.responseText);
if (res.success) {
showColors(res.colors);
const queryString = window.location.search; // e.g. "?param1=value1¶m2=value2"
const urlParams = new URLSearchParams(queryString);
const logosUrl = 'processLogo.php' + queryString+'&iconID=1';
window.location.href = logosUrl;
} else {
alert(res.error || 'Upload failed.');
}
}, 500);
} else {
alert('Upload failed.');
}
};
xhr.send(data);
});
function showColors(colors) {
if (!colors) return;
document.getElementById('colorPalette').style.display = 'block';
const colorsDiv = document.getElementById('colors');
colorsDiv.innerHTML = '';
colors.forEach(color => {
const box = document.createElement('div');
box.className = 'color-box';
box.style.background = '#' + color;
colorsDiv.appendChild(box);
});
}
</script>
<script>$(document).ready(function() {
checkBrandName();
// Check on every keystroke
$('input[name="nameofbrand"]').on('input', function() {
checkBrandName();
});
function checkBrandName() {
var brandName = $('input[name="nameofbrand"]').val().trim();
var $nextButton = $('.brandcreator--onboard-screen-next');
if (brandName !== '') {
// Remove disabled class, add active class
$nextButton
.removeClass('brandcreator--onboard-screen-button-disabled')
.addClass('brandcreator--onboard-screen-button')
.css('background-color', '#0a82f4');
} else {
// Revert if empty
$nextButton
.addClass('brandcreator--onboard-screen-button-disabled')
.removeClass('brandcreator--onboard-screen-button')
.css('background-color', '');
}
}
// Detect click on element with id 'nologo'
$(".brandcreator--onboard-screen-next").click(function() {
var businessName = $('input[name="nameofbrand"]').val().trim();
window.location.href = "icons?choose=<?php echo $choose; ?>&style=<?php echo $style; ?>&name=" + businessName;
});
/* $(document).ready(function() {
const pageSize = 20;
let currentPage = 1;
let totalPages = 1;
function loadSVGs(page, searchTerm = '') {
$.ajax({
url: 'https://www.thebrand.ai/brandcreator/files/connect/svgswow2.php',
type: 'GET',
data: { page: page, pageSize: pageSize, search: searchTerm },
dataType: 'json',
success: function(response) {
// response should contain { svgs: [svgString,...], totalCount: number }
renderSVGs(response.svgs);
totalPages = Math.ceil(response.totalCount / pageSize);
renderPagination(totalPages, page);
},
error: function() {
$('#svg-container').html('<p>Error loading SVGs.</p>');
}
});
}
function renderSVGs(svgs) {
let html = '';
/!* svgs.forEach(svg => {
html += `<div class="svg-item" style="display:inline-block; margin:10px;">${svg}</div>`;
});*!/
svgs.forEach(item => {
const svgString = item.svg;
const escapedSVG = encodeURIComponent(svgString);
const svgID = item.id;
const base64 = btoa(unescape(encodeURIComponent(svgString)));
const imgSrc = `data:image/svg+xml;base64,${base64}`;
html += `<div id="${svgID}" class="svg-item" style="display:inline-block; margin:10px;" data-attribute="${escapedSVG}">
<img src="${imgSrc}" alt="SVG" style="width:80px; height:80px; object-fit:contain; display:block;" />
</div>`;
});
$('#svg-container').html(html);
}
function renderPagination(totalPages, currentPage) {
totalPages = 10;
let paginationHtml = '';
// Previous button
if (currentPage > 1) {
paginationHtml += `<a href="#" class="page-link" data-page="${currentPage - 1}">«</a>`;
}
// Page numbers
for (let i = 1; i <= totalPages; i++) {
paginationHtml += `<a href="#" class="page-link ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</a>`;
}
// Next button
if (currentPage < totalPages) {
paginationHtml += `<a href="#" class="page-link" data-page="${currentPage + 1}">»</a>`;
}
$('#pagination').html(paginationHtml);
}
// Handle page click
$('#pagination').on('click', 'a.page-link', function(e) {
e.preventDefault();
const page = parseInt($(this).data('page'));
if (page && page !== currentPage) {
currentPage = page;
if ($('#svg-search').val().trim() === '') {
var searchTerm = '';
}
else
{
var searchTerm = $('#svg-search').val().trim();
}
loadSVGs(currentPage,searchTerm);
}
});
// Initial load
loadSVGs(currentPage);
let currentSearchTerm = '';
$('#svg-search').on('input', function() {
const val = $(this).val().trim();
if (val.length >= 3) {
currentSearchTerm = val;
loadSVGs(1, currentSearchTerm); // Load page 1 with search term
} else if (val.length === 0) {
currentSearchTerm = '';
loadSVGs(1, ''); // Load default (no search)
}
});
});*/
});
$(document).ready(function() {
$(document).on('click', '.svg-item', function() {
// Get the clicked element's ID
const iconID = $(this).attr('id');
const iconSVG = $(this).attr('data-attribute');
$.ajax({
url: 'https://www.thebrand.ai/brandcreator/files/connect/svgSave.php',
type: 'POST',
data: { svg: iconSVG },
success: function(response) {
// Optionally handle response
// Get current GET parameters (including '?')
const currentParams = window.location.search;
// Build new URL with existing parameters + iconID
const separator = currentParams ? '&' : '?';
const newUrl = `logos${currentParams}${separator}iconID=${encodeURIComponent(iconID)}`;
// Redirect to the new URL
window.location.href = newUrl;
},
error: function() {
// Get current GET parameters (including '?')
const currentParams = window.location.search;
// Build new URL with existing parameters + iconID
const separator = currentParams ? '&' : '?';
const newUrl = `icons${currentParams}${separator}iconID=${encodeURIComponent(iconID)}`;
// Redirect to the new URL
window.location.href = newUrl;
}
});
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const backBtn = document.querySelector('.brandcreator--onboard-screen-back');
if (backBtn) {
backBtn.addEventListener('click', function (e) {
e.preventDefault();
// Get current query string
const urlParams = new URLSearchParams(window.location.search);
// Redirect to icons.php with same parameters
const redirectUrl = 'business?' + urlParams.toString();
window.location.href = redirectUrl;
});
}
});
</script>
<script>
document.querySelectorAll('.brandcreator--onboard-screen-progress-icon').forEach(function(div) {
div.addEventListener('click', function() {
if (this.textContent.trim() === '1') {
// Get the current URL's query string
const queryString = window.location.search;
// Redirect to business with the same query string
window.location.href = 'business' + queryString;
}
});
});
</script>
</body>
</html>