File: /var/www/html/tmpr/../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">☰</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">↶</button>
<button class="header-icon" aria-label="Redo">↷</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">📄</span> Templates</li>
<li><span class="icon">⬛</span> Elements</li>
<li><span class="icon">📷</span> Photos</li>
<li><span class="icon">📝</span> Text</li>
<li><span class="icon">📤</span> Uploads</li>
<li><span class="icon">🎨</span> Videos</li>
<li><span class="icon">🎵</span> Audio</li>
<li><span class="icon">📊</span> Charts</li>
<li><span class="icon">📋</span> Tables</li>
</ul>
</div>
<div class="sidebar-section">
<h4>Work Kits</h4>
<ul>
<li><span class="icon">💼</span> HR Tools</li>
<li><span class="icon">📈</span> Marketing</li>
<li><span class="icon">💳</span> Sales</li>
<li><span class="icon">🎨</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">×</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>