label-editor.html 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>TSC 标签可视化编辑器</title>
  7. <!-- QR Code 生成库 -->
  8. <script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
  9. <style>
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. box-sizing: border-box;
  14. }
  15. body {
  16. font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  17. background: #f5f5f5;
  18. padding: 20px;
  19. }
  20. .container {
  21. max-width: 1400px;
  22. margin: 0 auto;
  23. background: white;
  24. border-radius: 8px;
  25. box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  26. overflow: hidden;
  27. }
  28. .header {
  29. background: #2c3e50;
  30. color: white;
  31. padding: 20px 30px;
  32. display: flex;
  33. justify-content: space-between;
  34. align-items: center;
  35. }
  36. .header h1 {
  37. font-size: 24px;
  38. font-weight: 500;
  39. }
  40. .header-actions {
  41. display: flex;
  42. gap: 10px;
  43. }
  44. .btn {
  45. padding: 10px 20px;
  46. border: none;
  47. border-radius: 4px;
  48. cursor: pointer;
  49. font-size: 14px;
  50. transition: all 0.3s;
  51. }
  52. .btn-primary {
  53. background: #3498db;
  54. color: white;
  55. }
  56. .btn-primary:hover {
  57. background: #2980b9;
  58. }
  59. .btn-success {
  60. background: #27ae60;
  61. color: white;
  62. }
  63. .btn-success:hover {
  64. background: #229954;
  65. }
  66. .main-content {
  67. display: flex;
  68. height: calc(100vh - 140px);
  69. }
  70. .sidebar {
  71. width: 300px;
  72. border-right: 1px solid #ddd;
  73. overflow-y: auto;
  74. padding: 20px;
  75. }
  76. .sidebar h3 {
  77. margin-bottom: 15px;
  78. color: #2c3e50;
  79. font-size: 16px;
  80. }
  81. .element-list {
  82. list-style: none;
  83. }
  84. .element-item {
  85. padding: 12px;
  86. margin-bottom: 8px;
  87. background: #f8f9fa;
  88. border-radius: 4px;
  89. cursor: pointer;
  90. transition: all 0.2s;
  91. border-left: 3px solid #3498db;
  92. }
  93. .element-item:hover {
  94. background: #e9ecef;
  95. }
  96. .element-item.selected {
  97. background: #d4e6f1;
  98. border-left-color: #2980b9;
  99. }
  100. .element-item .label {
  101. font-weight: 500;
  102. color: #2c3e50;
  103. display: block;
  104. margin-bottom: 4px;
  105. }
  106. .element-item .type {
  107. font-size: 12px;
  108. color: #7f8c8d;
  109. }
  110. .canvas-area {
  111. flex: 1;
  112. padding: 30px;
  113. display: flex;
  114. flex-direction: column;
  115. align-items: center;
  116. background: #ecf0f1;
  117. }
  118. .canvas-wrapper {
  119. background: white;
  120. box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  121. border-radius: 4px;
  122. padding: 20px;
  123. position: relative;
  124. }
  125. .canvas-container {
  126. position: relative;
  127. border: 2px solid #bdc3c7;
  128. background: white;
  129. cursor: crosshair;
  130. }
  131. .canvas-element {
  132. position: absolute;
  133. cursor: move;
  134. border: 2px solid transparent;
  135. transition: border-color 0.2s;
  136. }
  137. .canvas-element:hover {
  138. border-color: #3498db;
  139. }
  140. .canvas-element.selected {
  141. border-color: #e74c3c;
  142. box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.3);
  143. }
  144. .canvas-element.text-element {
  145. white-space: nowrap;
  146. font-family: Arial, sans-serif;
  147. padding: 2px 4px;
  148. }
  149. .canvas-element.qrcode-element {
  150. background: #ecf0f1;
  151. display: flex;
  152. align-items: center;
  153. justify-content: center;
  154. font-size: 10px;
  155. color: #7f8c8d;
  156. }
  157. .properties-panel {
  158. width: 320px;
  159. border-left: 1px solid #ddd;
  160. overflow-y: auto;
  161. padding: 20px;
  162. }
  163. .properties-panel h3 {
  164. margin-bottom: 15px;
  165. color: #2c3e50;
  166. font-size: 16px;
  167. }
  168. .property-group {
  169. margin-bottom: 20px;
  170. }
  171. .property-group label {
  172. display: block;
  173. margin-bottom: 5px;
  174. color: #34495e;
  175. font-size: 13px;
  176. font-weight: 500;
  177. }
  178. .property-group input,
  179. .property-group select {
  180. width: 100%;
  181. padding: 8px;
  182. border: 1px solid #ddd;
  183. border-radius: 4px;
  184. font-size: 13px;
  185. }
  186. .property-group input:focus,
  187. .property-group select:focus {
  188. outline: none;
  189. border-color: #3498db;
  190. }
  191. .info-bar {
  192. padding: 10px 20px;
  193. background: #34495e;
  194. color: white;
  195. font-size: 13px;
  196. display: flex;
  197. justify-content: space-between;
  198. }
  199. .zoom-controls {
  200. display: flex;
  201. align-items: center;
  202. gap: 10px;
  203. margin-bottom: 15px;
  204. }
  205. .zoom-btn {
  206. padding: 5px 12px;
  207. background: #7f8c8d;
  208. color: white;
  209. border: none;
  210. border-radius: 3px;
  211. cursor: pointer;
  212. font-size: 12px;
  213. }
  214. .zoom-btn:hover {
  215. background: #6c7a7d;
  216. }
  217. .zoom-level {
  218. font-size: 13px;
  219. color: #2c3e50;
  220. min-width: 60px;
  221. text-align: center;
  222. }
  223. .property-row {
  224. display: grid;
  225. grid-template-columns: 1fr 1fr;
  226. gap: 10px;
  227. }
  228. </style>
  229. </head>
  230. <body>
  231. <div class="container">
  232. <div class="header">
  233. <h1>TSC 标签可视化编辑器</h1>
  234. <div class="header-actions">
  235. <button class="btn btn-primary" onclick="loadConfig()">加载配置</button>
  236. <button class="btn btn-success" onclick="saveConfig()">保存配置</button>
  237. </div>
  238. </div>
  239. <div class="main-content">
  240. <!-- 左侧元素列表 -->
  241. <div class="sidebar">
  242. <h3>📋 标签元素</h3>
  243. <ul class="element-list" id="elementList"></ul>
  244. </div>
  245. <!-- 中间画布区域 -->
  246. <div class="canvas-area">
  247. <div class="zoom-controls">
  248. <button class="zoom-btn" onclick="zoomOut()">缩小 -</button>
  249. <span class="zoom-level" id="zoomLevel">100%</span>
  250. <button class="zoom-btn" onclick="zoomIn()">放大 +</button>
  251. <button class="zoom-btn" onclick="resetZoom()">重置</button>
  252. </div>
  253. <div class="canvas-wrapper">
  254. <div class="canvas-container" id="canvas"></div>
  255. </div>
  256. </div>
  257. <!-- 右侧属性面板 -->
  258. <div class="properties-panel">
  259. <h3>⚙️ 属性设置</h3>
  260. <div id="propertiesContent">
  261. <p style="color: #7f8c8d; font-size: 13px;">请选择一个元素</p>
  262. </div>
  263. </div>
  264. </div>
  265. <div class="info-bar">
  266. <span>标签尺寸: <span id="labelSize">76.2mm × 38.1mm</span></span>
  267. <span>选中元素: <span id="selectedElement">无</span></span>
  268. </div>
  269. </div>
  270. <script>
  271. // 全局变量
  272. let config = null;
  273. let selectedElementId = null;
  274. let zoom = 1.0;
  275. const DPI = 203 / 25.4; // 203 DPI,1mm = 8 dots
  276. const qrModules = {}; // 元素 id → 二维码模块数(renderCanvas 时算出来,属性面板用来提示实际尺寸)
  277. let isDragging = false;
  278. let dragStartX = 0;
  279. let dragStartY = 0;
  280. let dragElement = null;
  281. // 加载配置
  282. async function loadConfig() {
  283. try {
  284. const response = await fetch('../config/label-config.json');
  285. config = await response.json();
  286. renderCanvas();
  287. renderElementList();
  288. showMessage('配置加载成功', 'success');
  289. } catch (error) {
  290. showMessage('配置加载失败: ' + error.message, 'error');
  291. }
  292. }
  293. // 保存配置
  294. function saveConfig() {
  295. if (!config) {
  296. showMessage('没有配置可保存', 'error');
  297. return;
  298. }
  299. const json = JSON.stringify(config, null, 2);
  300. const blob = new Blob([json], { type: 'application/json' });
  301. const url = URL.createObjectURL(blob);
  302. const a = document.createElement('a');
  303. a.href = url;
  304. a.download = 'label-config.json';
  305. a.click();
  306. URL.revokeObjectURL(url);
  307. showMessage('配置已下载', 'success');
  308. }
  309. // 渲染画布
  310. function renderCanvas() {
  311. if (!config) return;
  312. const canvas = document.getElementById('canvas');
  313. const widthPx = config.labelSize.width * DPI * zoom;
  314. const heightPx = config.labelSize.height * DPI * zoom;
  315. canvas.style.width = widthPx + 'px';
  316. canvas.style.height = heightPx + 'px';
  317. canvas.innerHTML = '';
  318. config.elements.forEach(element => {
  319. const div = document.createElement('div');
  320. div.className = 'canvas-element';
  321. div.id = 'canvas-' + element.id;
  322. div.dataset.id = element.id;
  323. const x = element.x * zoom;
  324. const y = element.y * zoom;
  325. div.style.left = x + 'px';
  326. div.style.top = y + 'px';
  327. if (element.type === 'text') {
  328. div.className += ' text-element';
  329. div.textContent = element.text;
  330. div.style.fontSize = (element.fontSize * zoom) + 'px';
  331. div.style.fontFamily = element.fontFamily;
  332. div.style.fontWeight = element.fontStyle === 1 ? 'bold' : 'normal';
  333. } else if (element.type === 'qrcode') {
  334. div.className += ' qrcode-element';
  335. div.style.width = (element.width * zoom) + 'px';
  336. div.style.height = (element.height * zoom) + 'px';
  337. div.style.background = 'white';
  338. div.style.padding = '0';
  339. const cell = Math.max(1, parseInt(element.cellWidth) || 4);
  340. // 打印机是从元素左上角开始画的,预览也钉左上角;虚线框画在符号外 4 个模块处 = 静区
  341. div.style.display = 'block';
  342. div.style.outline = '1px dashed #bdc3c7';
  343. div.style.outlineOffset = (-4 * cell * zoom) + 'px';
  344. // 生成真实二维码
  345. const qrData = element.text || '+KB60IS3031T811001201'; // 默认示例数据
  346. try {
  347. const qr = new QRCode(div, {
  348. text: qrData,
  349. width: 100,
  350. height: 100,
  351. colorDark: '#000000',
  352. colorLight: '#ffffff',
  353. correctLevel: eccLevelOf(element.eccLevel)
  354. });
  355. // 打印机实际尺寸 = 单元宽度(点) × 模块数,跟 width/height 预留框无关
  356. const modules = (qr._oQRCode && qr._oQRCode.getModuleCount)
  357. ? qr._oQRCode.getModuleCount() : 21;
  358. qrModules[element.id] = modules;
  359. const realPx = cell * modules * zoom;
  360. const img = div.querySelector('canvas, img, table');
  361. if (img) {
  362. img.style.width = realPx + 'px';
  363. img.style.height = realPx + 'px';
  364. img.style.imageRendering = 'pixelated';
  365. }
  366. const overflow = realPx > Math.min(element.width, element.height) * zoom + 0.5;
  367. if (overflow) div.style.outline = '2px dashed #e74c3c';
  368. div.title = `二维码实际 ${cell}点 × ${modules}模块 = ${cell * modules}点(${(cell * modules / 8).toFixed(1)}mm)`
  369. + `,四周另留 4 模块静区(共 ${cell * (modules + 8)} 点),预留框 ${element.width}×${element.height} 点`
  370. + (overflow ? ':超框了,打印时会自动压小单元宽度' : '');
  371. } catch (e) {
  372. div.textContent = 'QR';
  373. div.style.background = '#ecf0f1';
  374. }
  375. }
  376. if (element.id === selectedElementId) {
  377. div.className += ' selected';
  378. }
  379. div.addEventListener('click', (e) => {
  380. e.stopPropagation();
  381. selectElement(element.id);
  382. });
  383. div.addEventListener('mousedown', startDrag);
  384. canvas.appendChild(div);
  385. });
  386. document.getElementById('labelSize').textContent =
  387. `${config.labelSize.width}mm × ${config.labelSize.height}mm`;
  388. }
  389. // 拖拽开始
  390. function startDrag(e) {
  391. isDragging = true;
  392. dragElement = e.target;
  393. dragStartX = e.clientX;
  394. dragStartY = e.clientY;
  395. const elementId = dragElement.dataset.id;
  396. selectElement(elementId);
  397. document.addEventListener('mousemove', onDrag);
  398. document.addEventListener('mouseup', stopDrag);
  399. e.preventDefault();
  400. }
  401. // 拖拽中
  402. function onDrag(e) {
  403. if (!isDragging || !dragElement) return;
  404. const dx = (e.clientX - dragStartX) / zoom;
  405. const dy = (e.clientY - dragStartY) / zoom;
  406. const elementId = dragElement.dataset.id;
  407. const element = config.elements.find(el => el.id === elementId);
  408. if (element) {
  409. element.x = Math.max(0, element.x + dx);
  410. element.y = Math.max(0, element.y + dy);
  411. renderCanvas();
  412. updateProperties();
  413. }
  414. dragStartX = e.clientX;
  415. dragStartY = e.clientY;
  416. }
  417. // 拖拽结束
  418. function stopDrag() {
  419. isDragging = false;
  420. dragElement = null;
  421. document.removeEventListener('mousemove', onDrag);
  422. document.removeEventListener('mouseup', stopDrag);
  423. }
  424. // 渲染元素列表
  425. function renderElementList() {
  426. const list = document.getElementById('elementList');
  427. list.innerHTML = '';
  428. config.elements.forEach(element => {
  429. const li = document.createElement('li');
  430. li.className = 'element-item';
  431. li.dataset.id = element.id;
  432. li.innerHTML = `
  433. <span class="label">${element.label}</span>
  434. <span class="type">${element.type === 'text' ? '文本' : '二维码'} - (${Math.round(element.x)}, ${Math.round(element.y)})</span>
  435. `;
  436. li.addEventListener('click', () => selectElement(element.id));
  437. list.appendChild(li);
  438. });
  439. }
  440. // 选择元素
  441. function selectElement(elementId) {
  442. selectedElementId = elementId;
  443. // 更新列表选中状态
  444. document.querySelectorAll('.element-item').forEach(item => {
  445. item.classList.toggle('selected', item.dataset.id === elementId);
  446. });
  447. // 更新画布选中状态
  448. document.querySelectorAll('.canvas-element').forEach(el => {
  449. el.classList.toggle('selected', el.dataset.id === elementId);
  450. });
  451. const element = config.elements.find(el => el.id === elementId);
  452. document.getElementById('selectedElement').textContent = element ? element.label : '无';
  453. updateProperties();
  454. }
  455. // 更新属性面板
  456. function updateProperties() {
  457. if (!selectedElementId) {
  458. document.getElementById('propertiesContent').innerHTML =
  459. '<p style="color: #7f8c8d; font-size: 13px;">请选择一个元素</p>';
  460. return;
  461. }
  462. const element = config.elements.find(el => el.id === selectedElementId);
  463. if (!element) return;
  464. let html = '';
  465. // 位置属性
  466. html += `
  467. <div class="property-group">
  468. <label>ID</label>
  469. <input type="text" value="${element.id}" disabled>
  470. </div>
  471. <div class="property-group">
  472. <div class="property-row">
  473. <div>
  474. <label>X 坐标 (dots)</label>
  475. <input type="number" value="${element.x}" onchange="updateElementProperty('x', parseFloat(this.value))">
  476. </div>
  477. <div>
  478. <label>Y 坐标 (dots)</label>
  479. <input type="number" value="${element.y}" onchange="updateElementProperty('y', parseFloat(this.value))">
  480. </div>
  481. </div>
  482. </div>
  483. `;
  484. if (element.type === 'text') {
  485. html += `
  486. <div class="property-group">
  487. <label>文本内容</label>
  488. <input type="text" value="${element.text}" onchange="updateElementProperty('text', this.value)">
  489. </div>
  490. <div class="property-group">
  491. <label>字体大小 (pt)</label>
  492. <input type="number" value="${element.fontSize}" onchange="updateElementProperty('fontSize', parseInt(this.value))">
  493. </div>
  494. <div class="property-group">
  495. <label>字体</label>
  496. <select value="${element.fontFamily}" onchange="updateElementProperty('fontFamily', this.value)">
  497. <option value="Arial" ${element.fontFamily === 'Arial' ? 'selected' : ''}>Arial</option>
  498. <option value="SimSun" ${element.fontFamily === 'SimSun' ? 'selected' : ''}>SimSun (宋体)</option>
  499. <option value="SimHei" ${element.fontFamily === 'SimHei' ? 'selected' : ''}>SimHei (黑体)</option>
  500. </select>
  501. </div>
  502. <div class="property-group">
  503. <label>字体样式</label>
  504. <select value="${element.fontStyle}" onchange="updateElementProperty('fontStyle', parseInt(this.value))">
  505. <option value="0" ${element.fontStyle === 0 ? 'selected' : ''}>正常</option>
  506. <option value="1" ${element.fontStyle === 1 ? 'selected' : ''}>加粗</option>
  507. </select>
  508. </div>
  509. `;
  510. } else if (element.type === 'qrcode') {
  511. html += `
  512. <div class="property-group">
  513. <div class="property-row">
  514. <div>
  515. <label>预览框宽 (dots)</label>
  516. <input type="number" value="${element.width}" onchange="updateElementProperty('width', parseInt(this.value))">
  517. </div>
  518. <div>
  519. <label>预览框高 (dots)</label>
  520. <input type="number" value="${element.height}" onchange="updateElementProperty('height', parseInt(this.value))">
  521. </div>
  522. </div>
  523. </div>
  524. <div class="property-group">
  525. <label>纠错等级</label>
  526. <select value="${element.eccLevel}" onchange="updateElementProperty('eccLevel', this.value)">
  527. <option value="L" ${element.eccLevel === 'L' ? 'selected' : ''}>L (7%)</option>
  528. <option value="M" ${element.eccLevel === 'M' ? 'selected' : ''}>M (15%)</option>
  529. <option value="Q" ${element.eccLevel === 'Q' ? 'selected' : ''}>Q (25%)</option>
  530. <option value="H" ${element.eccLevel === 'H' ? 'selected' : ''}>H (30%)</option>
  531. </select>
  532. </div>
  533. <div class="property-group">
  534. <label>单元宽度(点,1~10)</label>
  535. <input type="number" value="${element.cellWidth}" onchange="updateElementProperty('cellWidth', this.value)">
  536. <div style="font-size:12px;margin-top:6px;line-height:1.5;">${qrSizeHint(element)}</div>
  537. </div>
  538. `;
  539. }
  540. document.getElementById('propertiesContent').innerHTML = html;
  541. }
  542. // 更新元素属性
  543. function updateElementProperty(property, value) {
  544. if (!selectedElementId) return;
  545. const element = config.elements.find(el => el.id === selectedElementId);
  546. if (element) {
  547. element[property] = value;
  548. renderCanvas();
  549. renderElementList();
  550. updateProperties();
  551. }
  552. }
  553. // 纠错等级 → qrcode.js 常量(打印时读的是同一个配置值,L 只有 7%,默认按 M)
  554. function eccLevelOf(level) {
  555. switch ((level || '').toUpperCase()) {
  556. case 'L': return QRCode.CorrectLevel.L;
  557. case 'Q': return QRCode.CorrectLevel.Q;
  558. case 'H': return QRCode.CorrectLevel.H;
  559. default: return QRCode.CorrectLevel.M;
  560. }
  561. }
  562. // 二维码实际打印尺寸提示:实际尺寸 = 单元宽度 × 模块数,超框时打印会按框把单元宽度压小
  563. function qrSizeHint(element) {
  564. const cell = Math.max(1, parseInt(element.cellWidth) || 4);
  565. const modules = qrModules[element.id];
  566. if (!modules) return '实际打印尺寸 = 单元宽度 × 模块数';
  567. const dots = cell * modules;
  568. const box = Math.min(element.width, element.height);
  569. const overflow = dots > box;
  570. const color = overflow ? '#e74c3c' : '#27ae60';
  571. return `<span style="color:${color}">实际打印 = ${cell} × ${modules} = ${dots} 点(${(dots / 8).toFixed(1)}mm)`
  572. + (overflow ? `,超出预留框 ${box} 点,打印时会自动压小` : `,在预留框 ${box} 点内`)
  573. + `;四周再留 4 模块静区,整块占 ${dots + 8 * cell} 点(${((dots + 8 * cell) / 8).toFixed(1)}mm)</span>`;
  574. }
  575. // 缩放控制
  576. function zoomIn() {
  577. zoom = Math.min(zoom + 0.1, 2.0);
  578. document.getElementById('zoomLevel').textContent = Math.round(zoom * 100) + '%';
  579. renderCanvas();
  580. }
  581. function zoomOut() {
  582. zoom = Math.max(zoom - 0.1, 0.5);
  583. document.getElementById('zoomLevel').textContent = Math.round(zoom * 100) + '%';
  584. renderCanvas();
  585. }
  586. function resetZoom() {
  587. zoom = 1.0;
  588. document.getElementById('zoomLevel').textContent = '100%';
  589. renderCanvas();
  590. }
  591. // 显示消息
  592. function showMessage(message, type) {
  593. const color = type === 'success' ? '#27ae60' : '#e74c3c';
  594. const div = document.createElement('div');
  595. div.style.cssText = `
  596. position: fixed;
  597. top: 20px;
  598. right: 20px;
  599. background: ${color};
  600. color: white;
  601. padding: 15px 25px;
  602. border-radius: 4px;
  603. box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  604. z-index: 1000;
  605. animation: slideIn 0.3s ease-out;
  606. `;
  607. div.textContent = message;
  608. document.body.appendChild(div);
  609. setTimeout(() => {
  610. div.style.animation = 'slideOut 0.3s ease-out';
  611. setTimeout(() => div.remove(), 300);
  612. }, 2000);
  613. }
  614. // 初始化
  615. window.addEventListener('load', loadConfig);
  616. </script>
  617. <style>
  618. @keyframes slideIn {
  619. from {
  620. transform: translateX(400px);
  621. opacity: 0;
  622. }
  623. to {
  624. transform: translateX(0);
  625. opacity: 1;
  626. }
  627. }
  628. @keyframes slideOut {
  629. from {
  630. transform: translateX(0);
  631. opacity: 1;
  632. }
  633. to {
  634. transform: translateX(400px);
  635. opacity: 0;
  636. }
  637. }
  638. </style>
  639. </body>
  640. </html>