HEX

File: /var/www/html/tmpr/..//tmpr/..//tmpr/../tmpr/..//tmpr/../tmpr/../tmpr/../brandKit/brandkit.php
<!--CREATE TABLE logos (
id INT AUTO_INCREMENT PRIMARY KEY,
file_path VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE brand_colors (
id INT AUTO_INCREMENT PRIMARY KEY,
color_code VARCHAR(7) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE brand_voice (
id INT AUTO_INCREMENT PRIMARY KEY,
voice_text TEXT NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE photos (
id INT AUTO_INCREMENT PRIMARY KEY,
file_path VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE graphics (
id INT AUTO_INCREMENT PRIMARY KEY,
file_path VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE icons (
id INT AUTO_INCREMENT PRIMARY KEY,
file_path VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE fonts (
id INT AUTO_INCREMENT PRIMARY KEY,
font_name VARCHAR(255) NOT NULL,
font_type ENUM('Title', 'Subtitle', 'Heading', 'Subheading', 'Section Header', 'Body', 'Quote', 'Caption') NOT NULL,
file_path VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE font_selections (
id INT AUTO_INCREMENT PRIMARY KEY,
font_type ENUM('Title', 'Subtitle', 'Heading', 'Subheading', 'Section Header', 'Body', 'Quote', 'Caption') NOT NULL,
font_id INT NOT NULL,
FOREIGN KEY (font_id) REFERENCES fonts(id)
);
-->

<?php
require 'config.php';
// Database connection

// Fetch available fonts for selection dropdowns
$fonts = $conn->query("SELECT * FROM fonts")->fetchAll(PDO::FETCH_ASSOC);

// Fetch selected fonts to display them later if needed
$selected_fonts = [];
$stmt = $conn->query("SELECT * FROM font_selections");
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $selected_fonts[$row['font_type']] = $row['font_id'];
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brand Kit</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>

<div class="container mt-5">
    <h1>Brand Kit</h1>

    <!-- Section 1: Logo Upload -->
    <h2>Upload Logos</h2>
    <form id="logoUploadForm" enctype="multipart/form-data">
        <input type="file" name="logo[]" multiple required>
        <button type="submit" class="btn btn-primary">Upload Logo</button>
    </form>
    <div id="logoDisplay" class="mt-3"></div>

    <!-- Section 2: Brand Colors -->
    <h2>Add Brand Colors</h2>
    <form id="colorPickerForm">
        <input type="color" id="colorPicker" required>
        <button type="submit" class="btn btn-primary">Add Color</button>
    </form>
    <div id="colorDisplay" class="mt-3"></div>

    <!-- Section 3: Add Brand Voice -->
    <h2>Add Brand Voice</h2>
    <form id="voiceForm">
        <textarea id="voiceInput" required class="form-control"></textarea>
        <button type="submit" class="btn btn-primary">Add Brand Voice</button>
    </form>
    <div id="voiceDisplay" class="mt-3"></div>

    <!-- Section 4: Upload Photos -->
    <h2>Upload Photos</h2>
    <form id="photoUploadForm" enctype="multipart/form-data">
        <input type="file" name="photo[]" multiple required>
        <button type="submit" class="btn btn-primary">Upload Photo</button>
    </form>
    <div id="photoDisplay" class="mt-3"></div>

   <!-- Section 5: Upload Graphics -->
   <h2>Upload Graphics</h2>
   <form id="graphicUploadForm" enctype="multipart/form-data">
       <input type="file" name="graphic[]" multiple required>
       <button type="submit" class="btn btn-primary">Upload Graphic</button>
   </form>
   <div id="graphicDisplay" class="mt-3"></div>

   <!-- Section 6: Upload Icons -->
   <h2>Upload Icons</h2>
   <form id="iconUploadForm" enctype="multipart/form-data">
       <input type="file" name="icon[]" multiple required>
       <button type="submit" class="btn btn-primary">Upload Icon</button>
   </form>
   <div id="iconDisplay" class="mt-3"></div>

   <!-- Section 7: Upload Fonts -->
   <h2>Upload Fonts</h2>
   <form id="fontUploadForm" enctype="multipart/form-data">
       <input type="file" name="font" accept=".ttf,.otf,.woff,.woff2" required>
       <select name="font_type" required>
           <option value="">Select Font Type</option>
           <?php foreach ($fonts as $font): ?>
               <option value="<?= $font['id'] ?>"><?= $font['font_name'] ?></option>
           <?php endforeach; ?>
       </select>
       <button type="submit" class="btn btn-primary">Upload Font</button>
   </form>
   <div id="fontDisplay" class="mt-3"></div>

   <!-- Font Selection Section -->
   <h2>Select Fonts for Each Section</h2>
   <form id="fontSelectionForm">
       <?php foreach (['Title', 'Subtitle', 'Heading', 'Subheading', 'Section Header', 'Body', 'Quote', 'Caption'] as $type): ?>
           <div class='form-group'>
               <label for='<?= strtolower($type) ?>Font'><?= $type ?> Font:</label>
               <select name='<?= strtolower($type) ?>Font' id='<?= strtolower($type) ?>Font' class='form-control'>
                   <?php foreach ($fonts as $font): ?>
                       <option value='<?= $font['id'] ?>' <?= (isset($selected_fonts[$type]) && $selected_fonts[$type] == $font['id']) ? "selected" : "" ?>><?= $font['font_name'] ?></option>
                   <?php endforeach; ?>
               </select>
           </div>
       <?php endforeach; ?>
       <button type='submit' class='btn btn-primary'>Save Font Selections</button>
   </form>

</div>

<script>
// AJAX for Logo Upload
$(document).ready(function() {

   // Logo Upload
   $('#logoUploadForm').on('submit', function(e) {
       e.preventDefault();
       var formData = new FormData(this);
       $.ajax({
           url: 'upload_logo.php',
           type: 'POST',
           data: formData,
           contentType: false,
           processData: false,
           success: function(response) {
               var res = JSON.parse(response);
               if (res.status === "success") {
                   $('#logoDisplay').append('<img src="' + res.file_path + '" width=100>');
               }
           }
       });
   });

   // Color Picker
   $('#colorPickerForm').on('submit', function(e) {
       e.preventDefault();
       var colorCode = $('#colorPicker').val();
       $.ajax({
           url: 'add_color.php',
           type: 'POST',
           data: { color_code: colorCode },
           success: function(response) {
               var res = JSON.parse(response);
               if (res.status === "success") {
                   $('#colorDisplay').append('<div style=\"background-color:' + colorCode + '; width:50px; height:50px;\"></div>');
               }
           }
       });
   });

   // Brand Voice
   $('#voiceForm').on('submit', function(e) {
       e.preventDefault();
       $.ajax({
           url: 'add_voice.php',
           type: 'POST',
           data: { voice_text: $('#voiceInput').val() },
           success: function(response) {
               var res = JSON.parse(response);
               if (res.status === "success") {
                   $('#voiceDisplay').append('<p>' + $('#voiceInput').val() + '</p>');
               }
           }
       });
   });

   // Photo Upload
   $('#photoUploadForm').on('submit', function(e) {
       e.preventDefault();
       var formData = new FormData(this);
       $.ajax({
           url: 'upload_photo.php',
           type: 'POST',
           data: formData,
           contentType: false,
           processData: false,
           success: function(response) {
               var res = JSON.parse(response);
               if (res.status === "success") {
                   $('#photoDisplay').append('<img src="' + res.file_path + '" width=100>');
               }
           }
       });
   });

   // Graphics Upload
   $('#graphicUploadForm').on('submit', function(e) {
       e.preventDefault();
       var formData = new FormData(this);
       $.ajax({
           url: 'upload_graphic.php',
           type: 'POST',
           data: formData,
           contentType: false,
           processData: false,
           success: function(response) {
               var res = JSON.parse(response);
               if (res.status === "success") {
                   $('#graphicDisplay').append('<img src="' + res.file_path + '" width=100>');
               }
           }
       });
   });

   // Icons Upload
   $('#iconUploadForm').on('submit', function(e) {
       e.preventDefault();
       var formData = new FormData(this);
       $.ajax({
           url: 'upload_icon.php',
           type: 'POST',
           data: formData,
           contentType: false,
           processData: false,
           success: function(response) {
               var res = JSON.parse(response);
               if (res.status === "success") {
                   $('#iconDisplay').append('<img src="' + res.file_path + '" width=100>');
               }
           }
       });
   });

   // Font Upload AJAX
   $('#fontUploadForm').on('submit', function(e) {
       e.preventDefault();
       var formData = new FormData(this);

       $.ajax({
          url: 'upload_font.php',
          type: 'POST',
          data: formData,
          contentType: false,
          processData: false,
          success: function(response) {
              var res = JSON.parse(response);
              if (res.status === "success") {
                  $('#fontDisplay').append('<p>' + res.file_path + '</p>');
              } else {
                  alert(res.message);
              }
          }
      });
   });

   // Save Font Selections AJAX
   $('#fontSelectionForm').on('submit', function(e) {
      e.preventDefault();

      $.ajax({
          url: 'save_font_selection.php',
          type: 'POST',
          data: $(this).serialize(),
          success: function(response) {
              var res = JSON.parse(response);
              if (res.status === "success") {
                  alert("Font selections saved successfully!");
              } else {
                  alert(res.message);
              }
          }
      });
  });
});
</script>

</body>
</html>