251 lines
12 KiB
HTML
251 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Twitch Panels Creator</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<h1>Twitch Panels</h1>
|
|
<button id="themeToggle" class="theme-toggle" aria-label="Toggle theme">
|
|
<svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="5"></circle>
|
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
</svg>
|
|
<svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="main-grid">
|
|
<!-- Left Column -->
|
|
<div class="left-column">
|
|
<section class="card">
|
|
<h2 class="card-title">Тексты панелей</h2>
|
|
|
|
<div class="input-group">
|
|
<input type="text" id="panelTextInput" placeholder="Введите текст..." class="text-input" />
|
|
<button id="addTextBtn" class="btn btn-primary">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="textsList" class="texts-list"></div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2 class="card-title">Настройки текста</h2>
|
|
|
|
<div class="settings-grid">
|
|
<div class="setting-row">
|
|
<label class="setting-label">Размер</label>
|
|
<div class="setting-control">
|
|
<input type="range" id="fontSize" min="12" max="48" value="18" class="slider" />
|
|
<span class="value-display" id="fontSizeValue">18</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<label class="setting-label">Шрифт</label>
|
|
<select id="fontFamily" class="select-input">
|
|
<option value="Arial">Arial</option>
|
|
<option value="Verdana">Verdana</option>
|
|
<option value="Georgia">Georgia</option>
|
|
<option value="Times New Roman">Times New Roman</option>
|
|
<option value="Courier New">Courier New</option>
|
|
<option value="Impact">Impact</option>
|
|
<option value="Comic Sans MS">Comic Sans MS</option>
|
|
<option value="Trebuchet MS">Trebuchet MS</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<label class="setting-label">Цвет</label>
|
|
<div class="setting-control">
|
|
<input type="color" id="textColor" value="#ffffff" class="color-input" />
|
|
<span class="color-value" id="textColorValue">#ffffff</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<label class="setting-label">Выравнивание</label>
|
|
<div class="alignment-buttons">
|
|
<button class="align-btn active" data-align="left">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="17" y1="10" x2="3" y2="10"></line>
|
|
<line x1="21" y1="6" x2="3" y2="6"></line>
|
|
<line x1="21" y1="14" x2="3" y2="14"></line>
|
|
<line x1="17" y1="18" x2="3" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
<button class="align-btn" data-align="center">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="10" x2="6" y2="10"></line>
|
|
<line x1="21" y1="6" x2="3" y2="6"></line>
|
|
<line x1="21" y1="14" x2="3" y2="14"></line>
|
|
<line x1="18" y1="18" x2="6" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
<button class="align-btn" data-align="right">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="21" y1="10" x2="7" y2="10"></line>
|
|
<line x1="21" y1="6" x2="3" y2="6"></line>
|
|
<line x1="21" y1="14" x2="3" y2="14"></line>
|
|
<line x1="21" y1="18" x2="7" y2="18"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<label class="setting-label">Отступы</label>
|
|
<div class="setting-control">
|
|
<input type="range" id="sidePadding" min="0" max="50" value="10" class="slider" />
|
|
<span class="value-display" id="sidePaddingValue">10</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<label class="setting-label">Смещение</label>
|
|
<div class="setting-control">
|
|
<input type="range" id="centerOffset" min="-50" max="50" value="0" class="slider" />
|
|
<span class="value-display" id="centerOffsetValue">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="right-column">
|
|
<section class="card">
|
|
<h2 class="card-title">Фоновое изображение</h2>
|
|
|
|
<div class="crop-editor">
|
|
<div class="crop-canvas-container" id="cropCanvasContainer">
|
|
<canvas id="cropCanvas" class="crop-canvas"></canvas>
|
|
<div class="crop-box" id="cropBox">
|
|
<div class="crop-handle nw"></div>
|
|
<div class="crop-handle ne"></div>
|
|
<div class="crop-handle sw"></div>
|
|
<div class="crop-handle se"></div>
|
|
<div class="crop-handle n"></div>
|
|
<div class="crop-handle s"></div>
|
|
<div class="crop-handle w"></div>
|
|
<div class="crop-handle e"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="crop-controls">
|
|
<button id="uploadBgBtn" class="btn btn-secondary">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="17 8 12 3 7 8"></polyline>
|
|
<line x1="12" y1="3" x2="12" y2="15"></line>
|
|
</svg>
|
|
Загрузить
|
|
</button>
|
|
<input type="file" id="bgImageInput" accept="image/*" style="display: none" />
|
|
|
|
<button id="resetCropBtn" class="btn btn-outline">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="1 4 1 10 7 10"></polyline>
|
|
<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
|
|
</svg>
|
|
Сбросить
|
|
</button>
|
|
</div>
|
|
|
|
<div class="settings-grid">
|
|
<div class="setting-row">
|
|
<label class="setting-label">Яркость</label>
|
|
<div class="setting-control">
|
|
<input type="range" id="bgBrightness" min="50" max="150" value="100" class="slider" />
|
|
<span class="value-display" id="bgBrightnessValue">100</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<label class="setting-label">Контраст</label>
|
|
<div class="setting-control">
|
|
<input type="range" id="bgContrast" min="50" max="150" value="100" class="slider" />
|
|
<span class="value-display" id="bgContrastValue">100</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<div class="card-header-row">
|
|
<h2 class="card-title">Панели <span class="badge" id="panelCount">0</span></h2>
|
|
<div class="panel-nav">
|
|
<button id="prevPanel" class="nav-btn" disabled>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="15 18 9 12 15 6"></polyline>
|
|
</svg>
|
|
</button>
|
|
<span id="panelIndicator" class="panel-indicator">0 / 0</span>
|
|
<button id="nextPanel" class="nav-btn" disabled>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-viewer">
|
|
<div id="panelDisplay" class="panel-display">
|
|
<div class="empty-state">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="9" y1="9" x2="15" y2="9"></line>
|
|
</svg>
|
|
<p>Добавьте тексты для создания панелей</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-actions">
|
|
<button id="downloadCurrentBtn" class="btn btn-primary" disabled>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="7 10 12 15 17 10"></polyline>
|
|
<line x1="12" y1="15" x2="12" y2="3"></line>
|
|
</svg>
|
|
Скачать
|
|
</button>
|
|
<button id="downloadAllBtn" class="btn btn-outline" disabled>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"></path>
|
|
<polyline points="7 11 12 16 17 11"></polyline>
|
|
<line x1="12" y1="16" x2="12" y2="4"></line>
|
|
</svg>
|
|
Скачать все
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|