File: /var/www/html/tmpr/../tmpr/../tmpr/../tmpr/../tmpr/../brandcreator/logosv1.php
<?php
session_start();
if (isset($_SESSION['svg'])) {
$svgFile = $_SESSION['svg'];
$svgFile2 = urldecode($svgFile);
// Use $svg as needed
}
if (isset($_GET['name'])) {
$name = $_GET['name'];
if (empty($name)) {
header("Location: https://www.thebrand.ai/brandcreator/choose");
}
} else {
header("Location: https://www.thebrand.ai/brandcreator/choose");
}
if (isset($_GET['iconID'])) {
$iconID = $_GET['iconID'];
if (empty($iconID)) {
header("Location: https://www.thebrand.ai/brandcreator/choose");
}
} else {
header("Location: https://www.thebrand.ai/brandcreator/choose");
}
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");
}
?>
<?php
function centerSvgElementsSimple($svgContent) {
libxml_use_internal_errors(true); // suppress warnings
$svg = simplexml_load_string($svgContent);
if ($svg === false) {
return $svgContent; // loading failed, return original
}
$namespaces = $svg->getNamespaces(true);
if (isset($namespaces[''])) {
$svg->registerXPathNamespace('svg', $namespaces['']);
}
$width = (float) $svg['width'];
$height = (float) $svg['height'];
if (isset($svg['viewBox'])) {
$viewBox = preg_split('/\s+/', (string) $svg['viewBox']);
if (count($viewBox) == 4) {
$width = (float) $viewBox[2];
$height = (float) $viewBox[3];
}
}
// Create <g> element
$g = $svg->addChild('g');
$g->addAttribute('transform', "translate($width/2,$height/2)");
// Move all existing children into new <g>
foreach ($svg->children() as $child) {
$domChild = dom_import_simplexml($child);
$domGroup = dom_import_simplexml($g);
$domGroup->appendChild($domChild);
}
return $svg->asXML();
}
function resizeSvgProportionally(string $svgContent, int $targetSize = 200): string {
// Extract viewBox
preg_match('/viewBox="([^"]+)"/i', $svgContent, $viewBoxMatch);
if ($viewBoxMatch) {
list($vbX, $vbY, $vbWidth, $vbHeight) = explode(' ', $viewBoxMatch[1]);
} else {
// fallback: use width and height attributes
preg_match('/width="(\d+)[^"]*"/i', $svgContent, $widthMatch);
preg_match('/height="(\d+)[^"]*"/i', $svgContent, $heightMatch);
$vbWidth = $widthMatch[1] ?? 100;
$vbHeight = $heightMatch[1] ?? 100;
$svgContent = preg_replace('/<svg/i', '<svg viewBox="0 0 ' . $vbWidth . ' ' . $vbHeight . '"', $svgContent, 1);
}
// Normalize values
$vbWidth = floatval($vbWidth);
$vbHeight = floatval($vbHeight);
// Calculate scale (we want the larger dimension to become 300)
$scaleFactor = $targetSize / max($vbWidth, $vbHeight);
$newWidth = round($vbWidth * $scaleFactor);
$newHeight = round($vbHeight * $scaleFactor);
// Replace or insert width/height
$svgContent = preg_replace('/width="[^"]*"/i', '', $svgContent);
$svgContent = preg_replace('/height="[^"]*"/i', '', $svgContent);
$svgContent = preg_replace('/<svg/i', '<svg width="' . $newWidth . '" height="' . $newHeight . '"', $svgContent, 1);
return $svgContent;
}
function searchFontDetails($searchTerm,$searchTerm2) {
// Database connection parameters
$host = 'localhost';
$user = 'root';
$pass = 'Pw4TheBrand!';
$db = 'thebrand';
// Connect to MySQL
$mysqli = new mysqli($host, $user, $pass, $db);
// Check connection
if ($mysqli->connect_error) {
die('Connect Error (' . $mysqli->connect_errno . ') ' . $mysqli->connect_error);
}
// Sanitize input
$sanitized = $mysqli->real_escape_string($searchTerm);
$sanitized2 = $mysqli->real_escape_string($searchTerm2);
// Set UTF-8 encoding
$mysqli->query("SET NAMES 'utf8'");
// Query: adjust column names and table as needed
$sql = "SELECT * FROM gfonts WHERE family LIKE '{$sanitized}' AND fullName LIKE '{$sanitized2}'";
$result = $mysqli->query($sql);
// Collect results
$fonts = [];
if ($result && $result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$fonts[] = $row;
}
}
// Close connection
$mysqli->close();
// Return results (empty array if none found)
return $fonts;
}
function filterBrandpacksByKeyword($filename, $keyword, $exactMatch = true) {
// Check if file exists
if (!file_exists($filename)) {
die("Error: File '$filename' does not exist.");
}
// Read the file content
$jsonContent = file_get_contents($filename);
if ($jsonContent === false) {
die("Error: Unable to read the file '$filename'.");
}
// Decode JSON content
$data = json_decode($jsonContent, true);
if (!is_array($data)) {
die("Error: JSON data is invalid or not an array.");
}
$keywordLower = strtolower(trim($keyword));
// Filter by checking packs
$filtered = array_filter($data, function($node) use ($keywordLower, $exactMatch) {
if (!isset($node['packs']) || !is_array($node['packs'])) {
return false;
}
foreach ($node['packs'] as $pack) {
$packNormalized = strtolower(trim($pack));
if ($exactMatch && $packNormalized === $keywordLower) {
return true;
} elseif (!$exactMatch && str_contains($packNormalized, $keywordLower)) {
return true;
}
}
return false;
});
// Re-index the array
$filtered = array_values($filtered);
// Convert to JSON
$filteredJson = json_encode($filtered, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
if ($filteredJson === false) {
die("Error: Failed to encode filtered JSON.");
}
return $filteredJson;
}
// Example usage:
// Pass the keyword as a GET parameter, e.g., script.php?keyword=modern
$keyword = $_GET['style'];
if (empty($keyword)) {
die("Please provide a keyword parameter, e.g. ?keyword=simple");
}
// Path to your JSON file
$jsonFile = 'files/json/typepacks.json';
/*$jsonFile = 'files/json/logolayouts.json';*/
// Call the function
$filteredJsonStyle = filterBrandpacksByKeyword($jsonFile, $keyword);
$filteredNodes = json_decode($filteredJsonStyle, true);
?>
<?php
function renderAllLogos(array $layouts, array $data, $fontFamily, $url, $fontNo, $h1FontSize, $h1LineHeight, $h1LetterSpacing): string {
$output = '';
foreach ($layouts as $layout) {
/* $output .= '<h3>' . htmlspecialchars($layout['name']) . '</h3>';*/
$layoutName = $layout['name'];
$output .= renderLogoSVG($layout, $data, $layoutName, $fontFamily, $url, $fontNo, $h1FontSize, $h1LineHeight, $h1LetterSpacing);
}
return $output;
}
// Function to get alignment for a specific element
function getAlignment($structure, $elementName) {
foreach ($structure['rows'] as $row) {
foreach ($row['columns'] as $column) {
if (isset($column['element']) && $column['element'] === $elementName) {
return $column['alignment'] ?? null;
}
}
}
return null;
}
function renderLogoSVG(array $layout, array $data,$layoutName, $fontFamily, $url, $fontNo, $h1FontSize, $h1LineHeight, $h1LetterSpacing): string {
$svgWidth = 250;
$svgHeight = 180;
$structure = $layout['structure'] ?? [];
$defaults = $layout['defaults'] ?? [];
$logoIconAlignment = getAlignment($structure, 'logoIcon');
$businessNameAliautocentergnment = getAlignment($structure, 'businessName');
$sloganAlignment = getAlignment($structure, 'slogan');
if ($logoIconAlignment === 'center' || $sloganAlignment === 'center' || $businessNameAliautocentergnment === 'center') {
$autocenter = "autocenter";
$verticalCenter = 20;
}
else
{
$verticalCenter = 60;
}
$svg = '<svg class="' . $autocenter . '" width="' . $svgWidth . '" height="' . $svgHeight . '" viewBox="0 0 ' . $svgWidth . ' ' . $svgHeight . '" xmlns="http://www.w3.org/2000/svg" style="width:250px; height:130px; object-fit:contain; display:block;">';
$svg .='
<defs>
<style type="text/css">
@font-face {
font-family: \'' . $fontFamily. '\';
src: url(\'' . $url. '\') format(\'woff\');
}
.google-font-' . $fontNo. ' {
font-family: \'' . $fontFamily. '\', sans-serif;
font-size: ' . $h1FontSize. 'px;
line-height:' . $h1LineHeight. ';
fill: #000000;
letter-spacing:' . $h1LetterSpacing. ';
}
</style>
</defs>';
if (isset($structure['layers'])) {
$svg .= renderLayers($structure['layers'], $data, $svgWidth, $svgHeight, $defaults,$layoutName, $fontFamily, $url, $fontNo, $h1FontSize, $h1LineHeight, $h1LetterSpacing);
} elseif (isset($structure['rows'])) {
$svg .= renderRows($structure['rows'], $data, 0, $verticalCenter, $svgWidth, 60, $defaults,$layoutName, $fontFamily, $url, $fontNo, $h1FontSize, $h1LineHeight, $h1LetterSpacing);
} else {
$svg .= '<text x="10" y="50" fill="red">error</text>';
}
$svg .= '</svg>';
return $svg;
}
function renderRows(array $rows, array $data, int $xOffset, int $yOffset, int $totalWidth, int $rowHeight, array $defaults,$layoutName, $fontFamily, $url, $fontNo, $h1FontSize, $h1LineHeight, $h1LetterSpacing): string {
$output = '';
foreach ($rows as $row) {
$x = $xOffset;
foreach ($row['columns'] as $col) {
$widthPercent = isset($col['width']) ? floatval(rtrim($col['width'], '%')) : 100;
$widthPx = ($widthPercent / 100) * $totalWidth;
if (isset($col['rows'])) {
$output .= renderRows($col['rows'], $data, $x, $yOffset, $widthPx, $rowHeight / 1.5, $defaults,$layoutName, $fontFamily, $url, $fontNo, $h1FontSize, $h1LineHeight, $h1LetterSpacing);
} elseif (isset($col['element'])) {
$element = $col['element'];
$align = $col['alignment'] ?? $defaults['horizontalAlignment'] ?? 'left';
$xPos = match ($align) {
'center' => $x + ($widthPx / 2),
'right' => $x + $widthPx - 10,
default => $x + 10
};
$fontSize = $col['fontSize'] ?? ($element === 'businessName' ? 20 : 14);
$fill = $col['fontColor'] ?? ($element === 'slogan' ? '#777' : '#111');
/* if ($col['alignment'] === 'center') {
}*/
if ($element === 'logoIcon') {
$iconSvgRaw = @file_get_contents($data['logoIcon']);
// Match the whole SVG tag including attributes
preg_match('/<svg[^>]*>.*?<\/svg>/is', $iconSvgRaw, $matches);
$iconSvgFull = $matches[0] ?? '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><rect width="60" height="60" fill="#ccc"/><text x="5" y="35" font-size="10" fill="#000">No Icon</text></svg>';
$scale = $col['iconScale'] ?? $defaults['iconScale'] ?? 0.4;
$yOffset2 = $yOffset;
$xPos2 = 10; // Equivalent to your current logic
$output .= '<g transform="translate(' . $xPos2 . ',' . $yOffset2 . ') scale(' . $scale . ')">' . $iconSvgFull . '</g>';
}
elseif (isset($data[$element])) {
$text = htmlspecialchars($data[$element]);
$yText = $yOffset + $fontSize;
if ($element === 'slogan') {
$yText =$yText+10;
}
if ($layoutName === 'Horizontal Left Icon' && empty($data['slogan'])) {
$yText =$yOffset + $fontSize +37;
$xPos = $xPos -10;
if ($element === 'slogan') {
$yText =$yText+20;
$fontSize=$fontSize-20;
} if ($element === 'businessName' && empty($data['slogan'])) {
$yText =$yText-20;
}
if ($element === 'slogan') {
$yText =$yText+10;
}
}
if ($layoutName === 'Monogram' && empty($data['slogan'])) {
$yText =$yOffset +7;
$fontSize = $fontSize-20;
if ($element === 'slogan') {
$yText =$yText+10;
}
} if ($layoutName === 'Classic Vertical Stack') {
$yText =$yOffset +40;
}
if ($layoutName === 'Emblem Badge') {
$yText =$yOffset +35;
}
$output .= '<text x="' . $xPos . '" y="' . $yText . '" text-anchor="' . $align . '" font-size="' . $fontSize . '" fill="' . $fill . '" class="google-font-' .$fontNo. '">'
. $text . '</text>';
}
}
$x += $widthPx;
}
$yOffset += $rowHeight;
}
return $output;
}
function renderLayers(array $layers, array $data, int $width, int $height, array $defaults,$layoutName, $fontFamily, $url, $fontNo, $h1FontSize, $h1LineHeight, $h1LetterSpacing): string {
$output = '';
foreach ($layers as $layer) {
$element = $layer['element'];
$align = $layer['alignment'] ?? $defaults['horizontalAlignment'] ?? 'center';
$x = match ($align) {
'center' => $width / 2,
'right' => $width - 10,
default => 10
};
$y = $height / 2;
if ($element === 'logoIcon') {
$iconSvgRaw = @file_get_contents($data['logoIcon']);
// Match the whole SVG tag including attributes
preg_match('/<svg[^>]*>.*?<\/svg>/is', $iconSvgRaw, $matches);
$iconSvgFull = $matches[0] ?? '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><rect width="60" height="60" fill="#ccc"/><text x="5" y="35" font-size="10" fill="#000">No Icon</text></svg>';
$scale = $col['iconScale'] ?? $defaults['iconScale'] ?? 0.4;
$yOffset2 = $yOffset;
$xPos2 = 10; // Equivalent to your current logic
$output .= '<g transform="translate(' . $xPos2 . ',' . $yOffset2 . ') scale(' . $scale . ')">' . $iconSvgFull . '</g>';
} elseif (isset($data[$element])) {
if ($layer['alignment'] === 'center') {
$x="50%"; $y="50%";$align="middle"; $dominantbaseline="middle";
}
if ($layer['alignment'] === 'left') {
$x="0";
}
$fontSize = $layer['fontSize'] ?? 20;
$text = htmlspecialchars($data[$element]);
$output .= '<text x="0" y="' . $y . '" text-anchor="' . $align . '" font-size="' . $fontSize . '" dominant-baseline="' . $dominantbaseline . '" fill="#000" font-family="Poppins">'
. $text . '</text>';
}
}
return $output;
}
// === RUN CODE ===
$layoutsJson = json_decode(file_get_contents(__DIR__ . '/files/json/logolayouts.json'), true);
$svgFile = urldecode($svgFile);
$svgFile= centerSvgElementsSimple($svgFile);
$svgFileOriginal = $svgFile;
$svgFile = resizeSvgProportionally($svgFile);
// Remove line breaks and encode
$base64 = base64_encode($svgFile);
$base64Original = base64_encode($svgFileOriginal);
$dataUri = 'data:image/svg+xml;base64,' . $base64;
$dataUriOriginal = 'data:image/svg+xml;base64,' . $base64Original;
$parts = explode(' ', trim($name));
$slogan = isset($parts[1]) ? $parts[1] : 'Built for Impact';
$secondName = isset($parts[1]) ? $parts[1] : '';
$firstName = $parts[0] ?? '';
// Get first character of first and last name (if exists)
$initials = '';
if (isset($parts[0])) $initials .= strtoupper($parts[0][0]);
if (isset($parts[1])) $initials .= strtoupper($parts[1][0]);
$data = [
'logoIcon' => ''.$dataUri.'',
'logoIconOriginal' => ''.$dataUriOriginal.'',
'businessName' => ''.$firstName.'',
'slogan' => ''.$secondName.'',
'monogram' => ''.$initials.'',
'businessNamePart1' => ''.$firstName.'',
'businessNamePart2' => ''.$slogan.''
];
/*$randomLayout = [$layoutsJson['logoLayouts'][array_rand($layoutsJson['logoLayouts'])]];
echo renderAllLogos($randomLayout, $data);*/
/*echo renderAllLogos($layoutsJson['logoLayouts'], $data);*/
?>
<style></style>
<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">
<style>
#svg-wrapper {
max-width: 1000px; /* Limit max width */
margin: 10px auto; /* Center horizontally with vertical margin */
padding: 10px;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
#svg-container {
display: flex;
flex-wrap: wrap; /* Wrap SVG items to next line */
justify-content: center; /* Center items horizontally */
gap: 10px; /* Space between SVG items */
min-height: 200px; /* Optional: reserve space */
}
/*#svg-container svg { border: 1px solid #ddd; margin-left: 10px; margin-bottom:10px; width: 250px; height:180px; float:left }
*/
.pagination {
clear: both; /* Prevents float overlap */
margin-top: 5px; /* Space above the pagination */
padding-top: 5px; /* Optional: internal spacing */
text-align: center;
align-self: flex-end;/* Optional: 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>
</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" style="position: relative; display: block; height: auto;">
<div class="brandcreator--onboard-screen-container"
style="max-width: 100%; width: 100%; overflow-y: hidden; position: relative; padding-bottom: 65px;">
<h1>Choose Your Favorite Logo Layout!</h1>
<div id="svg-wrapper" style="margin-top:30px">
<div id="svg-container">
<?php
$currentPage = $_GET['page'] ?? 1;
$itemsPerPage = 3;
$totalItems = count($filteredNodes);
$totalPages = ceil($totalItems / $itemsPerPage);
$offset = ($currentPage - 1) * $itemsPerPage;
$paginatedNodes = array_slice($filteredNodes, $offset, $itemsPerPage);
$fontNo = 0;
// Loop through each filtered node and extract h1, h2, p details
echo '<div id="paginated-content">';
foreach ($paginatedNodes as $index => $node) {
// Extract h1 details
$h1FontSize = $node['h1']['fontSize'] ?? null;
$h1LineHeight = $node['h1']['lineHeight'] ?? null;
$h1LetterSpacing = $node['h1']['letterSpacing'] ?? null;
$h1Weight = $node['h1']['weight'] ?? null;
$h1Name = $node['h1']['name'] ?? null;
// Extract h2 details
$h2FontSize = $node['h2']['fontSize'] ?? null;
$h2TextTransform = $node['h2']['textTransform'] ?? null;
$h2LineHeight = $node['h2']['lineHeight'] ?? null;
$h2LetterSpacing = $node['h2']['letterSpacing'] ?? null;
$h2Weight = $node['h2']['weight'] ?? null;
$h2Name = $node['h2']['name'] ?? null;
// Extract p details
$pFontSize = $node['p']['fontSize'] ?? null;
$pLineHeight = $node['p']['lineHeight'] ?? null;
$pLetterSpacing = $node['p']['letterSpacing'] ?? null;
$pWeight = $node['p']['weight'] ?? null;
$pName = $node['p']['name'] ?? null;?>
<?php
$searchTerm = $h1Name;
$searchTerm2 = $searchTerm." $h1Weight";
$fontDetails = searchFontDetails($searchTerm,$searchTerm2);
if (!empty($fontDetails)) {
foreach ($fontDetails as $font) {
$fontNo++;
$fontFamily = htmlspecialchars($font['family']);
$fullName = htmlspecialchars($font['fullName']);
$url = htmlspecialchars($font['url']);
?>
<?php
$total = count($layoutsJson['logoLayouts']);
for ($i = 0; $i < $total; $i++) {
echo '<div class="svg-item" style="display:inline-block; margin-left:10px;margin-bottom:10px; border: 1px solid #ddd; overflow:hidden">';
/* echo "Layout #" . ($i + 1) . ": " . $layouts[$i]['name'] . "<br>";*/
$firstLayout = [$layoutsJson['logoLayouts'][$i]];
$renderedSVG = renderAllLogos($firstLayout, $data, $fontFamily, $url, $fontNo, $h1FontSize, $h1LineHeight, $h1LetterSpacing);
echo $renderedSVG= centerSvgElementsSimple($renderedSVG);
echo " </div>";
}
/* $firstLayout = [$layoutsJson['logoLayouts'][0]];
print_r($firstLayout);
exit();*/
/* $randomLayout = [$layoutsJson['logoLayouts'][array_rand($layoutsJson['logoLayouts'])]];*/
/* echo renderAllLogos($randomLayout, $data, $fontFamily, $url, $fontNo, $h1FontSize, $h1LineHeight, $h1LetterSpacing);*/ /*echo renderAllLogos($randomLayout, $data, $fontFamily, $url, $fontNo, $h1FontSize, $h1LineHeight, $h1LetterSpacing); */ ?>
<?php
?>
<?php
// Use $font['font_name'], $font['font_family'], $font['font_url'], etc.
/* echo "Family: " . htmlspecialchars($font['family']) . "<br>";
echo "Weight: " . htmlspecialchars($font['fullName']) . "<br>";*/
}
}
?>
<?php
/*// Example output for each node
echo "Node #".($index + 1)." (ID: {$node['_id']}):\n";
echo "H1 - Font: {$h1Name}, Size: {$h1FontSize}px, Line Height: {$h1LineHeight}, Letter Spacing: {$h1LetterSpacing}, Weight: {$h1Weight}\n";
echo "H2 - Font: {$h2Name}, Size: {$h2FontSize}px, Text Transform: {$h2TextTransform}, Line Height: {$h2LineHeight}, Letter Spacing: {$h2LetterSpacing}, Weight: {$h2Weight}\n";
echo "P - Font: {$pName}, Size: {$pFontSize}px, Line Height: {$pLineHeight}, Letter Spacing: {$pLetterSpacing}, Weight: {$pWeight}\n";
echo str_repeat("-", 50) . "\n\n";*/
// Now you can use these variables ($h1FontSize, $h1Name, etc.) as needed in your app
}
echo '</div>';
// Pagination links
echo '<div id="pagination" class="pagination">';
// Previous button
if ($currentPage > 1) {
echo '<a href="#" class="page-link" data-page="' . ($currentPage - 1) . '">«</a>';
}
$maxLinks = 10;
$start = max(1, $currentPage - floor($maxLinks / 2));
$end = $start + $maxLinks - 1;
if ($end > $totalPages) {
$end = $totalPages;
$start = max(1, $end - $maxLinks + 1);
}
for ($i = $start; $i <= $end; $i++) {
$active = $i == $currentPage ? 'active' : '';
echo '<a href="#" class="page-link ' . $active . '" data-page="' . $i . '">' . $i . '</a>';
}
// Next button
if ($currentPage < $totalPages) {
echo '<a href="#" class="page-link" data-page="' . ($currentPage + 1) . '">»</a>';
}
echo '</div>';
?>
</div>
</div>
</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">3</div>
</div>
<div class="brandcreator--onboard-screen-progress-icon-container">
<div class="brandcreator--onboard-screen-progress-icon-active">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 brandcreator--onboard-screen-button-disabled" style="">Next
</div>
</div>
</div>
<script src="files/assets/brandcreator/js/jquery.js?l"
type="text/javascript"></script>
<script>
document.querySelectorAll("svg.autocenter").forEach(svg => {
const svgWidth = svg.clientWidth;
// 1. Center <g> elements
svg.querySelectorAll("g").forEach(group => {
const transform = group.getAttribute("transform") || "";
const scaleMatch = transform.match(/scale\(([^)]+)\)/);
const scale = scaleMatch ? parseFloat(scaleMatch[1]) : 1;
group.setAttribute("transform", "scale(1)");
const bbox = group.getBBox();
group.setAttribute("transform", transform);
const centerX = svgWidth / 2 - (bbox.width * scale) / 2 - (bbox.x * scale);
group.setAttribute("transform", `translate(${centerX}, 0) scale(${scale})`);
});
// 2. Center <text> elements that are direct children (not inside a <g>)
svg.querySelectorAll(":scope > text").forEach(text => {
text.setAttribute("text-anchor", "middle");
text.setAttribute("x", svgWidth / 2); // Center point of the SVG
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const paginationLinks = document.querySelectorAll('.page-link');
paginationLinks.forEach(link => {
link.addEventListener('click', function (e) {
e.preventDefault();
const newPage = this.getAttribute('data-page');
// Get current URLSearchParams
const urlParams = new URLSearchParams(window.location.search);
// Set or update the 'page' parameter
urlParams.set('page', newPage);
// Rebuild the query string and redirect
const newUrl = window.location.pathname + '?' + urlParams.toString();
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 = 'icons?' + urlParams.toString();
window.location.href = redirectUrl;
});
}
});
$(document).ready(function() {
$('.svg-item').on('click', function() {
// 'this' refers to the clicked .svg-item div
var svgElement = $(this).find('svg').get(0);
if (!svgElement) {
alert('SVG not found!');
return;
}
// Get the SVG markup as a string
var svgString = svgElement.outerHTML;
// URL-encode the SVG markup
var encodedSVG = encodeURIComponent(svgString);
// Prepare POST data
var formData = new FormData();
formData.append('svgLogo', encodedSVG);
// Preserve current GET parameters
var params = new URLSearchParams(window.location.search);
// Send the POST request
fetch('https://www.thebrand.ai/brandcreator/files/connect/svgLogoSave.php', {
method: 'POST',
body: formData
}).then(function(response) {
// Redirect to /colors with current GET variables
window.location.href = 'colors' + (params.toString() ? '?' + params.toString() : '');
});
});
});
</script>
</html>