HOME

Mini Shell 1.0
DIR:/home/htlwork.com/www/dev/aippt/resources/views/user/
Current File : /home/htlwork.com/www/dev/aippt/resources/views/user/edit_ppt.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generated Presentation</title>
    <script type="text/javascript" src="../../ppt/js/jquery-1.11.3.min.js"></script>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
            margin: 0;
            padding: 20px;
        }
        .ppt-slide {
            /* width: 960px; */
            height: 540px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin: 10px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding: 20px;
            background-color: white;
           
        }
        .ppt-slide .logo {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 50px;
            height: 50px;
            cursor: pointer;
        }
        .slide-title, .slide-content {
            cursor: pointer;
            outline: none;
        }
        .slide-title {
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            background-color: #4682B4;
            color: white;
            padding: 15px 0;
            margin: 0 0 15px 0;
        }
        .slide-content {
            font-size: 20px;
            color: black;
            text-align: center;
            line-height: 1.4;
            margin: 0;
        }
        /* Toolbar styles */
        .toolbar {
            position: absolute;
            display: none;
            background: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 10;
        }
        .toolbar select, .toolbar input, .toolbar button {
            margin: 2px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            cursor: pointer;
        }
        .close-btn {
            background: red;
            color: white;
            border: none;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            padding: 5px;
            margin-left: 5px;
            border-radius: 3px;
        }


        .col-md-3 {
    border: 2px solid #3498db; /* Beautiful blue border */
    border-radius: 10px;
    padding: 15px;
    background: #f8f9fa; /* Light background */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
     /* max-height: 800px;   */
    
    /* Adjust as needed */
    overflow-y: auto; /* Enables scrolling */
    margin-top:20px;
}

.slide-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.slide-list li {
    padding: 70px;
    margin-bottom: 5px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slide-list li:hover {
    background: #3498db;
    color: white;
}

.slide-list .active_slide{
    background: #3498db;
    color: white;
}









/* Modal Styling */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background: white;
    padding: 20px;
    margin: 10% auto;
    width: 50%;
    text-align: center;
    border-radius: 10px;
}

.close-btn2 {
    float: right;
    font-size: 20px;
    cursor: pointer;
}

#imageResults img {
    width: 100px;
    margin: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.3s;
}

#imageResults img:hover {
    border-color: blue;
}


.stylish-search {
    border: 2px solid #3498db; /* Nice blue border */
    border-radius: 25px; /* Rounded corners */
    padding: 10px 15px;
    font-size: 16px;
    transition: 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.stylish-search:focus {
    border-color: #2c3e50;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.8);
}

.search-container {
    max-width: 400px; /* Limit width */
    margin: auto; /* Center align */
}

.input-group-text {
    background: #3498db;
    color: white;
    border: none;
    border-radius: 25px 0 0 25px;
}

.btn-primary {
    border-radius: 0 25px 25px 0;
    font-weight: bold;
}

    </style>
</head>
<body>

<!-- Floating toolbar -->
<div id="toolbar" class="toolbar">
    <button class="close-btn" onclick="hideToolbar()">✖</button>
    <select id="fontSizeSelector">
        <option value="16">16px</option>
        <option value="20">20px</option>
        <option value="24">24px</option>
        <option value="28">28px</option>
        <option value="32">32px</option>
        <option value="36">36px</option>
    </select>
    <input type="color" id="textColorPicker">
    <button onclick="toggleBold()">B</button>
    <button onclick="toggleItalic()">I</button>
</div>



<!-- Context Menu for Deleting a Slide -->
<div id="contextMenu" class="dropdown-menu" style="display: none; position: absolute;">
    <button class="dropdown-item" id="deleteSlide">Delete Slide</button>
</div>

<input type="file" id="logoUploader" style="display: none;" accept="image/*">

<!-- Modal -->
<div id="imageModal" class="modal">
    <div class="modal-content">
        <span class="close-btn2">&times;</span>
        <h2>Select an Image</h2>
        <!-- <input type="text" id="searchQuery" placeholder="Enter keyword (e.g., cricket)">
        <button onclick="searchImages()">Search</button> -->

        <div class="input-group mb-3 search-container">
    <span class="input-group-text">
        <i class="bi bi-search"></i>
    </span>
    <input type="text" id="searchQuery" class="form-control stylish-search" placeholder="Enter keyword (e.g., cricket)">
    <button class="btn btn-primary" onclick="searchImages()">Search</button>
</div>
        <div id="imageResults"></div>
    </div>
</div>

<div class="container">

<div class="row">
<div class="col-md-3">

<ul class="slide-list">

<li class="active_slide"  data-slide-index="1">Slide 1</li>
<li class=""  data-slide-index="2">Slide 2</li>
<li class=""  data-slide-index="3">Slide 3</li>
<li class=""  data-slide-index="4">Slide 4</li>
<li class=""  data-slide-index="5">Slide 5</li>

</ul>
    </div>

    <div class="col-md-9">
<?php
$slidesData = [
    ['title' => 'Welcome to the Presentation', 'content' => 'This is an introduction slide.'],
    ['title' => 'Company Overview', 'content' => 'We are a leading company in the tech industry.'],
    ['title' => 'Our Services', 'content' => 'We offer software development, cloud computing, and IT consulting.'],
    ['title' => 'Key Achievements', 'content' => 'We successfully launched 10 major projects last year.'],
    ['title' => 'Contact Us', 'content' => 'Visit our website or contact sales@company.com.']
];

foreach ($slidesData as $index => $slide) {
    $displayStyle = ($index === 0) ? 'block' : 'none'; // Show first slide, hide others
    echo '<div class="ppt-slide" slide-index="'. ($index + 1) .'" style="display:'. $displayStyle .';">
    <div class="row">
     <div class="col-md-2">
            <img src="../../front/logo.png" alt="Logo" class="logo" onclick="changeLogo()">
            </div>
             <div class="col-md-10">
            <div class="slide-title" contenteditable="true" onclick="showToolbar(this, event)">' . htmlspecialchars($slide['title']) . '</div>
            </div>
            </div>
            <div class="slide-content" contenteditable="true" onclick="showToolbar(this, event)">' . nl2br(htmlspecialchars($slide['content'])) . '</div>
          </div>';
}

?>

</div>
</div>
</div>
<script>
let selectedElement = null;

function showToolbar(element, event) {
    event.stopPropagation(); // Prevents event bubbling

    let toolbar = document.getElementById("toolbar");
    selectedElement = element;


       // Remove border from all editable elements
       $(".slide-title, .slide-content").css("border", "none");

// Add dotted border to the selected element
$(selectedElement).css({
    "border": "2px dotted #3498db", // Dotted blue border
    "padding": "5px" // Small padding to make it visually appealing
});




    // Position toolbar above the selected text
    toolbar.style.left = event.pageX + "px";
    toolbar.style.top = (event.pageY - 50) + "px";
    toolbar.style.display = "block";

    // Set current values in toolbar
    document.getElementById("fontSizeSelector").value = parseInt(getComputedStyle(element).fontSize);
    document.getElementById("textColorPicker").value = rgbToHex(getComputedStyle(element).color);
}

// Hide toolbar manually
function hideToolbar() {
    document.getElementById("toolbar").style.display = "none";
}

// Change font size
document.getElementById("fontSizeSelector").addEventListener("change", function() {
    if (selectedElement) {
        selectedElement.style.fontSize = this.value + "px";
    }
});

// Change text color
document.getElementById("textColorPicker").addEventListener("input", function() {
    if (selectedElement) {
        selectedElement.style.color = this.value;
    }
});

// Toggle Bold
function toggleBold() {
    if (selectedElement) {
        selectedElement.style.fontWeight = selectedElement.style.fontWeight === "bold" ? "normal" : "bold";
    }
}

// Toggle Italic
function toggleItalic() {
    if (selectedElement) {
        selectedElement.style.fontStyle = selectedElement.style.fontStyle === "italic" ? "normal" : "italic";
    }
}

// Hide toolbar when clicking outside
document.addEventListener("click", function(event) {
    let toolbar = document.getElementById("toolbar");
    if (!toolbar.contains(event.target)) {
        toolbar.style.display = "none";
        $(".slide-title, .slide-content").css("border", "none"); // Remove border when clicking outside
    }
});

// Convert RGB to Hex
function rgbToHex(rgb) {
    let match = rgb.match(/\d+/g);
    return match ? "#" + match.map(x => ('0' + parseInt(x).toString(16)).slice(-2)).join('') : "#000000";
}



// Function to show the corresponding slide and update the active state
$(".slide-list").on("click", "li", function () {
    // Get the clicked slide index
    const index = $(this).data("slide-index");

    // Hide all slides
    $(".ppt-slide").hide();

    // Show the selected slide using correct indexing
    $(".ppt-slide[slide-index='" + index + "']").show();

    // Remove the active class from all li items and add it to the clicked li
    $(".slide-list li").removeClass("active_slide");
    $(this).addClass("active_slide");
});



 // Right-click event on slide list items
 $(".slide-list").on("contextmenu", "li", function (event) {
        event.preventDefault(); // Prevent default right-click menu

        selectedSlideIndex = $(this).data("slide-index"); // Store selected slide index
        
        // Show custom context menu
        $("#contextMenu").css({
            display: "block",
            left: event.pageX,
            top: event.pageY
        });
    });

    // Hide context menu when clicking outside
    $(document).click(function () {
        $("#contextMenu").hide();
    });

  
    // Delete slide and adjust indexes
    $("#deleteSlide").click(function () {
        if (selectedSlideIndex !== null) {
            let slideListItems = $(".slide-list li");
            let slides = $(".ppt-slide");

            // Find the index of the deleted slide in the list
            let slideToRemove = $(".slide-list li[data-slide-index='" + selectedSlideIndex + "']");
            let slideContentToRemove = $(".ppt-slide[slide-index='" + selectedSlideIndex + "']");

            // Get the next slide index if possible
            let nextSlide = slideToRemove.next().length ? slideToRemove.next() : slideToRemove.prev();

            // Remove the selected slide
            slideToRemove.remove();
            slideContentToRemove.remove();

            // Adjust slide indexes
            $(".slide-list li").each(function (newIndex) {
                $(this).attr("data-slide-index", newIndex + 1).text("Slide " + (newIndex + 1));
            });

            $(".ppt-slide").each(function (newIndex) {
                $(this).attr("slide-index", newIndex + 1);
            });

            // Show next available slide
            if (nextSlide.length) {
                let newIndex = nextSlide.data("slide-index");
                $(".ppt-slide[slide-index='" + newIndex + "']").show();
                $(".slide-list li[data-slide-index='" + newIndex + "']").addClass("active_slide");
            }

            // Hide context menu
            $("#contextMenu").hide();
        }
    });

//     function changeLogo() {
//     document.getElementById("logoUploader").click();
// }

// Listen for file selection and change the logo
document.getElementById("logoUploader").addEventListener("change", function(event) {
    let file = event.target.files[0];
    if (file) {
        let reader = new FileReader();
        reader.onload = function(e) {
            document.querySelectorAll(".logo").forEach(logo => {
                logo.src = e.target.result; // Set uploaded image as logo
            });
        };
        reader.readAsDataURL(file);
    }
});



// document.getElementById("logo").addEventListener("click", function () {
//     document.getElementById("imageModal").style.display = "block";
// });

document.querySelector(".close-btn2").addEventListener("click", function () {
    document.getElementById("imageModal").style.display = "none";
});

// Close modal when clicking outside
window.onclick = function (event) {
    let modal = document.getElementById("imageModal");
    if (event.target === modal) {
        modal.style.display = "none";
    }
};

function searchImages() {
    let query = document.getElementById("searchQuery").value;
    if (!query) {
        alert("Please enter a search keyword.");
        return;
    }

    let apiKey = "AIzaSyDcj5pyLw4zbkowOZTZtMFy9dMgAytScyo"; // Replace with your actual API key
    let cx = "209fc36c3cc5b44f1"; // Replace with your Custom Search Engine ID
    let url = `https://www.googleapis.com/customsearch/v1?q=${encodeURIComponent(query)}&cx=${cx}&searchType=image&key=${apiKey}`;

    fetch(url)
        .then(response => response.json())
        .then(data => {
            let images = data.items;
            let imageResultsDiv = document.getElementById("imageResults");
            imageResultsDiv.innerHTML = ""; // Clear previous results

            images.forEach(item => {
                let imgElement = document.createElement("img");
                imgElement.src = item.link;
                imgElement.onclick = function () {
                    document.querySelectorAll(".logo").forEach(logo => {
                        logo.src = item.link; // Apply image to all elements with class 'logo'
                    });
                    document.getElementById("imageModal").style.display = "none"; // Close modal
                };
                imageResultsDiv.appendChild(imgElement);
            });
        })
        .catch(error => console.error("Error fetching images:", error));
}

// Trigger image search on logo click
function changeLogo() {
    // searchImages("cricket logo");

    document.getElementById("imageModal").style.display = "block";
}





</script>

</body>
</html>