JohnSmith9982 commited on
Commit
7822da1
1 Parent(s): b28a1a9

Upload 6 files

Browse files
assets/custom.css CHANGED
@@ -291,17 +291,29 @@ ol:not(.options), ul:not(.options) {
291
  border-bottom-right-radius: 0 !important;
292
  }
293
 
294
- .message p {
 
 
 
 
 
 
 
 
 
295
  margin-top: 0.6em !important;
296
  margin-bottom: 0.6em !important;
297
  }
298
- .message p:first-child { margin-top: 0 !important; }
299
- .message p:last-of-type { margin-bottom: 0 !important; }
300
 
301
  .message .md-message {
302
  display: block;
303
  padding: 0 !important;
304
  }
 
 
 
305
  .message .raw-message {
306
  display: block;
307
  padding: 0 !important;
@@ -408,101 +420,49 @@ thead th {
408
  .message :not(pre) code {
409
  display: inline;
410
  white-space: break-spaces;
 
411
  border-radius: 6px;
412
  margin: 0 2px 0 2px;
413
  padding: .2em .4em .1em .4em;
414
  background-color: rgba(175,184,193,0.2);
415
  }
416
  /* 代码块 */
417
- .message pre code {
418
- display: block;
419
- overflow: auto;
420
- white-space: pre;
421
- background-color: hsla(0, 0%, 0%, 80%)!important;
422
- border-radius: 10px;
423
- padding: 1.2em 1em 0em .5em;
424
- margin: 0.6em 2em 1em 0.2em;
425
- color: #FFF;
426
- box-shadow: 6px 6px 16px hsla(0, 0%, 0%, 0.2);
 
 
 
 
 
 
 
427
  }
428
- .message pre {
429
- padding: 0 !important;
 
 
430
  }
431
- .message pre code div.highlight {
432
- background-color: unset !important;
433
  }
434
-
435
- button.copy-button {
436
- display: none;
437
  }
438
 
439
- /* 代码高亮样式 */
440
- .highlight .hll { background-color: #49483e !important }
441
- .highlight .c { color: #75715e !important } /* Comment */
442
- .highlight .err { color: #960050 !important; background-color: #1e0010 } /* Error */
443
- .highlight .k { color: #66d9ef !important} /* Keyword */
444
- .highlight .l { color: #ae81ff !important} /* Literal */
445
- .highlight .n { color: #f8f8f2 !important} /* Name */
446
- .highlight .o { color: #f92672 !important} /* Operator */
447
- .highlight .p { color: #f8f8f2 !important} /* Punctuation */
448
- .highlight .ch { color: #75715e !important} /* Comment.Hashbang */
449
- .highlight .cm { color: #75715e !important} /* Comment.Multiline */
450
- .highlight .cp { color: #75715e !important} /* Comment.Preproc */
451
- .highlight .cpf { color: #75715e !important} /* Comment.PreprocFile */
452
- .highlight .c1 { color: #75715e !important} /* Comment.Single */
453
- .highlight .cs { color: #75715e !important} /* Comment.Special */
454
- .highlight .gd { color: #f92672 !important} /* Generic.Deleted */
455
- .highlight .ge { font-style: italic !important} /* Generic.Emph */
456
- .highlight .gi { color: #a6e22e !important} /* Generic.Inserted */
457
- .highlight .gs { font-weight: bold !important} /* Generic.Strong */
458
- .highlight .gu { color: #75715e !important} /* Generic.Subheading */
459
- .highlight .kc { color: #66d9ef !important} /* Keyword.Constant */
460
- .highlight .kd { color: #66d9ef !important} /* Keyword.Declaration */
461
- .highlight .kn { color: #f92672 !important} /* Keyword.Namespace */
462
- .highlight .kp { color: #66d9ef !important} /* Keyword.Pseudo */
463
- .highlight .kr { color: #66d9ef !important} /* Keyword.Reserved */
464
- .highlight .kt { color: #66d9ef !important} /* Keyword.Type */
465
- .highlight .ld { color: #e6db74 !important} /* Literal.Date */
466
- .highlight .m { color: #ae81ff !important} /* Literal.Number */
467
- .highlight .s { color: #e6db74 !important} /* Literal.String */
468
- .highlight .na { color: #a6e22e !important} /* Name.Attribute */
469
- .highlight .nb { color: #f8f8f2 !important} /* Name.Builtin */
470
- .highlight .nc { color: #a6e22e !important} /* Name.Class */
471
- .highlight .no { color: #66d9ef !important} /* Name.Constant */
472
- .highlight .nd { color: #a6e22e !important} /* Name.Decorator */
473
- .highlight .ni { color: #f8f8f2 !important} /* Name.Entity */
474
- .highlight .ne { color: #a6e22e !important} /* Name.Exception */
475
- .highlight .nf { color: #a6e22e !important} /* Name.Function */
476
- .highlight .nl { color: #f8f8f2 !important} /* Name.Label */
477
- .highlight .nn { color: #f8f8f2 !important} /* Name.Namespace */
478
- .highlight .nx { color: #a6e22e !important} /* Name.Other */
479
- .highlight .py { color: #f8f8f2 !important} /* Name.Property */
480
- .highlight .nt { color: #f92672 !important} /* Name.Tag */
481
- .highlight .nv { color: #f8f8f2 !important} /* Name.Variable */
482
- .highlight .ow { color: #f92672 !important} /* Operator.Word */
483
- .highlight .w { color: #f8f8f2 !important} /* Text.Whitespace */
484
- .highlight .mb { color: #ae81ff !important} /* Literal.Number.Bin */
485
- .highlight .mf { color: #ae81ff !important} /* Literal.Number.Float */
486
- .highlight .mh { color: #ae81ff !important} /* Literal.Number.Hex */
487
- .highlight .mi { color: #ae81ff !important} /* Literal.Number.Integer */
488
- .highlight .mo { color: #ae81ff !important} /* Literal.Number.Oct */
489
- .highlight .sa { color: #e6db74 !important} /* Literal.String.Affix */
490
- .highlight .sb { color: #e6db74 !important} /* Literal.String.Backtick */
491
- .highlight .sc { color: #e6db74 !important} /* Literal.String.Char */
492
- .highlight .dl { color: #e6db74 !important} /* Literal.String.Delimiter */
493
- .highlight .sd { color: #e6db74 !important} /* Literal.String.Doc */
494
- .highlight .s2 { color: #e6db74 !important} /* Literal.String.Double */
495
- .highlight .se { color: #ae81ff !important} /* Literal.String.Escape */
496
- .highlight .sh { color: #e6db74 !important} /* Literal.String.Heredoc */
497
- .highlight .si { color: #e6db74 !important} /* Literal.String.Interpol */
498
- .highlight .sx { color: #e6db74 !important} /* Literal.String.Other */
499
- .highlight .sr { color: #e6db74 !important} /* Literal.String.Regex */
500
- .highlight .s1 { color: #e6db74 !important} /* Literal.String.Single */
501
- .highlight .ss { color: #e6db74 !important} /* Literal.String.Symbol */
502
- .highlight .bp { color: #f8f8f2 !important} /* Name.Builtin.Pseudo */
503
- .highlight .fm { color: #a6e22e !important} /* Name.Function.Magic */
504
- .highlight .vc { color: #f8f8f2 !important} /* Name.Variable.Class */
505
- .highlight .vg { color: #f8f8f2 !important} /* Name.Variable.Global */
506
- .highlight .vi { color: #f8f8f2 !important} /* Name.Variable.Instance */
507
- .highlight .vm { color: #f8f8f2 !important} /* Name.Variable.Magic */
508
- .highlight .il { color: #ae81ff !important} /* Literal.Number.Integer.Long */
 
291
  border-bottom-right-radius: 0 !important;
292
  }
293
 
294
+ .message.user p {
295
+ white-space: pre-wrap;
296
+ }
297
+ .message .user-message {
298
+ display: block;
299
+ padding: 0 !important;
300
+ white-space: pre-wrap;
301
+ }
302
+
303
+ .message .md-message p {
304
  margin-top: 0.6em !important;
305
  margin-bottom: 0.6em !important;
306
  }
307
+ .message .md-message p:first-child { margin-top: 0 !important; }
308
+ .message .md-message p:last-of-type { margin-bottom: 0 !important; }
309
 
310
  .message .md-message {
311
  display: block;
312
  padding: 0 !important;
313
  }
314
+ .message .raw-message p {
315
+ margin:0 !important;
316
+ }
317
  .message .raw-message {
318
  display: block;
319
  padding: 0 !important;
 
420
  .message :not(pre) code {
421
  display: inline;
422
  white-space: break-spaces;
423
+ font-family: var(--font-mono);
424
  border-radius: 6px;
425
  margin: 0 2px 0 2px;
426
  padding: .2em .4em .1em .4em;
427
  background-color: rgba(175,184,193,0.2);
428
  }
429
  /* 代码块 */
430
+ .message pre,
431
+ .message pre[class*=language-] {
432
+ color: #fff;
433
+ overflow-x: auto;
434
+ overflow-y: hidden;
435
+ margin: .8em 1em 1em 0em !important;
436
+ padding: var(--spacing-xl) 1.2em !important;
437
+ border-radius: var(--radius-lg) !important;
438
+ }
439
+ .message pre code,
440
+ .message pre code[class*=language-] {
441
+ color: #fff;
442
+ padding: 0;
443
+ margin: 0;
444
+ background-color: unset;
445
+ text-shadow: none;
446
+ font-family: var(--font-mono);
447
  }
448
+ /* 覆盖 gradio 丑陋的复制按钮样式 */
449
+ pre button[title="copy"] {
450
+ border-radius: 5px;
451
+ transition: background-color .2s ease;
452
  }
453
+ pre button[title="copy"]:hover {
454
+ background-color: #333232;
455
  }
456
+ pre button .check {
457
+ color: #fff !important;
458
+ background: var(--neutral-950) !important;
459
  }
460
 
461
+ /* 覆盖prism.css */
462
+ .language-css .token.string,
463
+ .style .token.string,
464
+ .token.entity,
465
+ .token.operator,
466
+ .token.url {
467
+ background: none !important;
468
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
assets/custom.js CHANGED
@@ -17,13 +17,11 @@ var chatbotWrap = null;
17
  var apSwitch = null;
18
  var empty_botton = null;
19
  var messageBotDivs = null;
20
- // var renderLatex = null;
21
  var loginUserForm = null;
22
  var logginUser = null;
23
 
24
  var userLogged = false;
25
  var usernameGotten = false;
26
- var shouldRenderLatex = false;
27
  var historyLoaded = false;
28
 
29
  var ga = document.getElementsByTagName("gradio-app");
@@ -51,7 +49,6 @@ function gradioLoaded(mutations) {
51
  chatbot = document.querySelector('#chuanhu_chatbot');
52
  chatbotWrap = document.querySelector('#chuanhu_chatbot > .wrap');
53
  apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
54
- // renderLatex = document.querySelector("#render_latex_checkbox > label > input");
55
  empty_botton = document.getElementById("empty_btn")
56
 
57
  if (loginUserForm) {
@@ -80,10 +77,6 @@ function gradioLoaded(mutations) {
80
  }
81
  setChatbotScroll();
82
  }
83
- // if (renderLatex) { // renderLatex 加载出来了没?
84
- // shouldRenderLatex = renderLatex.checked;
85
- // updateMathJax();
86
- // }
87
  if (empty_botton) {
88
  emptyHistory();
89
  }
@@ -246,10 +239,10 @@ function showOrHideUserInfo() {
246
  function toggleDarkMode(isEnabled) {
247
  if (isEnabled) {
248
  document.body.classList.add("dark");
249
- // document.body.style.setProperty("background-color", "var(--neutral-950)", "important");
250
  } else {
251
  document.body.classList.remove("dark");
252
- // document.body.style.backgroundColor = "";
253
  }
254
  }
255
  function adjustDarkMode() {
@@ -377,41 +370,6 @@ function addChuanhuButton(botElement) {
377
  botElement.insertBefore(toggleButton, copyButton);
378
  }
379
 
380
- function addCopyCodeButton(pre) {
381
- var code = null;
382
- var firstChild = null;
383
- code = pre.querySelector('code');
384
- if (!code) return;
385
- firstChild = code.querySelector('div');
386
- if (!firstChild) return;
387
- var oldCopyButton = null;
388
- oldCopyButton = code.querySelector('button.copy-code-btn');
389
- // if (oldCopyButton) oldCopyButton.remove();
390
- if (oldCopyButton) return; // 没太有用,新生成的对话中始终会被pre覆盖,导致按钮消失,这段代码不启用……
391
- var codeButton = document.createElement('button');
392
- codeButton.classList.add('copy-code-btn');
393
- codeButton.textContent = '\uD83D\uDCCE';
394
-
395
- code.insertBefore(codeButton, firstChild);
396
- codeButton.addEventListener('click', function () {
397
- var range = document.createRange();
398
- range.selectNodeContents(code);
399
- range.setStartBefore(firstChild);
400
- navigator.clipboard
401
- .writeText(range.toString())
402
- .then(() => {
403
- codeButton.textContent = '\u2714';
404
- setTimeout(function () {
405
- codeButton.textContent = '\uD83D\uDCCE';
406
- }, 2000);
407
- })
408
- .catch(e => {
409
- console.error(e);
410
- codeButton.textContent = '\u2716';
411
- });
412
- });
413
- }
414
-
415
  function renderMarkdownText(message) {
416
  var mdDiv = message.querySelector('.md-message');
417
  if (mdDiv) mdDiv.classList.remove('hideM');
@@ -425,73 +383,17 @@ function removeMarkdownText(message) {
425
  if (mdDiv) mdDiv.classList.add('hideM');
426
  }
427
 
428
- var rendertime = 0; // for debugging
429
- var mathjaxUpdated = false;
430
-
431
- function renderMathJax() {
432
- messageBotDivs = document.querySelectorAll('.message.bot .md-message');
433
- for (var i = 0; i < messageBotDivs.length; i++) {
434
- var mathJaxSpan = messageBotDivs[i].querySelector('.MathJax_Preview');
435
- if (!mathJaxSpan && shouldRenderLatex && !mathjaxUpdated) {
436
- MathJax.Hub.Queue(["Typeset", MathJax.Hub, messageBotDivs[i]]);
437
- rendertime +=1; // for debugging
438
- // console.log("renderingMathJax", i)
439
- }
440
- }
441
- mathjaxUpdated = true;
442
- // console.log("MathJax Rendered")
443
- }
444
-
445
- function removeMathjax() {
446
- // var jax = MathJax.Hub.getAllJax();
447
- // for (var i = 0; i < jax.length; i++) {
448
- // // MathJax.typesetClear(jax[i]);
449
- // jax[i].Text(newmath)
450
- // jax[i].Reprocess()
451
- // }
452
- // 我真的不会了啊啊啊,mathjax并没有提供转换为原先文本的办法。
453
- mathjaxUpdated = true;
454
- // console.log("MathJax removed!");
455
- }
456
-
457
- function updateMathJax() {
458
- // renderLatex.addEventListener("change", function() {
459
- // shouldRenderLatex = renderLatex.checked;
460
- // if (!mathjaxUpdated) {
461
- // if (shouldRenderLatex) {
462
- // renderMathJax();
463
- // } else {
464
- // console.log("MathJax Disabled")
465
- // removeMathjax();
466
- // }
467
- // } else {
468
- // if (!shouldRenderLatex) {
469
- // mathjaxUpdated = false; // reset
470
- // }
471
- // }
472
- // });
473
- if (shouldRenderLatex && !mathjaxUpdated) {
474
- renderMathJax();
475
- }
476
- mathjaxUpdated = false;
477
- }
478
-
479
  let timeoutId;
480
  let isThrottled = false;
481
  var mmutation
482
- // 监听所有元素中 bot message 的变化,用来查找需要渲染的mathjax, 并为 bot 消息添加复制按钮。
483
  var mObserver = new MutationObserver(function (mutationsList) {
484
  for (mmutation of mutationsList) {
485
  if (mmutation.type === 'childList') {
486
  for (var node of mmutation.addedNodes) {
487
  if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
488
- if (shouldRenderLatex) {
489
- renderMathJax();
490
- mathjaxUpdated = false;
491
- }
492
  saveHistoryHtml();
493
  document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
494
- document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot pre').forEach(addCopyCodeButton);
495
  }
496
  if (node.tagName === 'INPUT' && node.getAttribute('type') === 'range') {
497
  setSlider();
@@ -499,27 +401,17 @@ var mObserver = new MutationObserver(function (mutationsList) {
499
  }
500
  for (var node of mmutation.removedNodes) {
501
  if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
502
- if (shouldRenderLatex) {
503
- renderMathJax();
504
- mathjaxUpdated = false;
505
- }
506
  saveHistoryHtml();
507
  document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
508
- document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot pre').forEach(addCopyCodeButton);
509
  }
510
  }
511
  } else if (mmutation.type === 'attributes') {
512
  if (mmutation.target.nodeType === 1 && mmutation.target.classList.contains('message') && mmutation.target.getAttribute('data-testid') === 'bot') {
513
- document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot pre').forEach(addCopyCodeButton); // 目前写的是有点问题的,会导致加button次数过多,但是bot对话内容生成时又是不断覆盖pre的……
514
  if (isThrottled) break; // 为了防止重复不断疯狂渲染,加上等待_(:з」∠)_
515
  isThrottled = true;
516
  clearTimeout(timeoutId);
517
  timeoutId = setTimeout(() => {
518
  isThrottled = false;
519
- if (shouldRenderLatex) {
520
- renderMathJax();
521
- mathjaxUpdated = false;
522
- }
523
  document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
524
  saveHistoryHtml();
525
  }, 500);
@@ -551,9 +443,13 @@ function loadHistoryHtml() {
551
  var tempDiv = document.createElement('div');
552
  tempDiv.innerHTML = historyHtml;
553
  var buttons = tempDiv.querySelectorAll('button.chuanhu-btn');
 
554
  for (var i = 0; i < buttons.length; i++) {
555
  buttons[i].parentNode.removeChild(buttons[i]);
556
  }
 
 
 
557
  var fakeHistory = document.createElement('div');
558
  fakeHistory.classList.add('history-message');
559
  fakeHistory.innerHTML = tempDiv.innerHTML;
@@ -594,7 +490,6 @@ observer.observe(targetNode, { childList: true, subtree: true });
594
  window.addEventListener("DOMContentLoaded", function () {
595
  isInIframe = (window.self !== window.top);
596
  historyLoaded = false;
597
- shouldRenderLatex = !!document.querySelector('script[src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"]');
598
  });
599
  window.addEventListener('resize', setChatbotHeight);
600
  window.addEventListener('scroll', setChatbotHeight);
 
17
  var apSwitch = null;
18
  var empty_botton = null;
19
  var messageBotDivs = null;
 
20
  var loginUserForm = null;
21
  var logginUser = null;
22
 
23
  var userLogged = false;
24
  var usernameGotten = false;
 
25
  var historyLoaded = false;
26
 
27
  var ga = document.getElementsByTagName("gradio-app");
 
49
  chatbot = document.querySelector('#chuanhu_chatbot');
50
  chatbotWrap = document.querySelector('#chuanhu_chatbot > .wrap');
51
  apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
 
52
  empty_botton = document.getElementById("empty_btn")
53
 
54
  if (loginUserForm) {
 
77
  }
78
  setChatbotScroll();
79
  }
 
 
 
 
80
  if (empty_botton) {
81
  emptyHistory();
82
  }
 
239
  function toggleDarkMode(isEnabled) {
240
  if (isEnabled) {
241
  document.body.classList.add("dark");
242
+ document.body.style.setProperty("background-color", "var(--neutral-950)", "important");
243
  } else {
244
  document.body.classList.remove("dark");
245
+ document.body.style.backgroundColor = "";
246
  }
247
  }
248
  function adjustDarkMode() {
 
370
  botElement.insertBefore(toggleButton, copyButton);
371
  }
372
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
373
  function renderMarkdownText(message) {
374
  var mdDiv = message.querySelector('.md-message');
375
  if (mdDiv) mdDiv.classList.remove('hideM');
 
383
  if (mdDiv) mdDiv.classList.add('hideM');
384
  }
385
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
386
  let timeoutId;
387
  let isThrottled = false;
388
  var mmutation
389
+ // 监听所有元素中 bot message 的变化,为 bot 消息添加复制按钮。
390
  var mObserver = new MutationObserver(function (mutationsList) {
391
  for (mmutation of mutationsList) {
392
  if (mmutation.type === 'childList') {
393
  for (var node of mmutation.addedNodes) {
394
  if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
 
 
 
 
395
  saveHistoryHtml();
396
  document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
 
397
  }
398
  if (node.tagName === 'INPUT' && node.getAttribute('type') === 'range') {
399
  setSlider();
 
401
  }
402
  for (var node of mmutation.removedNodes) {
403
  if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
 
 
 
 
404
  saveHistoryHtml();
405
  document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
 
406
  }
407
  }
408
  } else if (mmutation.type === 'attributes') {
409
  if (mmutation.target.nodeType === 1 && mmutation.target.classList.contains('message') && mmutation.target.getAttribute('data-testid') === 'bot') {
 
410
  if (isThrottled) break; // 为了防止重复不断疯狂渲染,加上等待_(:з」∠)_
411
  isThrottled = true;
412
  clearTimeout(timeoutId);
413
  timeoutId = setTimeout(() => {
414
  isThrottled = false;
 
 
 
 
415
  document.querySelectorAll('#chuanhu_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
416
  saveHistoryHtml();
417
  }, 500);
 
443
  var tempDiv = document.createElement('div');
444
  tempDiv.innerHTML = historyHtml;
445
  var buttons = tempDiv.querySelectorAll('button.chuanhu-btn');
446
+ var gradioCopyButtons = tempDiv.querySelectorAll('button.copy_code_button');
447
  for (var i = 0; i < buttons.length; i++) {
448
  buttons[i].parentNode.removeChild(buttons[i]);
449
  }
450
+ for (var i = 0; i < gradioCopyButtons.length; i++) {
451
+ gradioCopyButtons[i].parentNode.removeChild(gradioCopyButtons[i]);
452
+ }
453
  var fakeHistory = document.createElement('div');
454
  fakeHistory.classList.add('history-message');
455
  fakeHistory.innerHTML = tempDiv.innerHTML;
 
490
  window.addEventListener("DOMContentLoaded", function () {
491
  isInIframe = (window.self !== window.top);
492
  historyLoaded = false;
 
493
  });
494
  window.addEventListener('resize', setChatbotHeight);
495
  window.addEventListener('scroll', setChatbotHeight);
assets/html/appearance_switcher.html ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <div style="display: flex; justify-content: space-between;">
2
+ <span style="margin-top: 4px !important;">
3
+ {label}
4
+ </span>
5
+ <span>
6
+ <label class="apSwitch" for="checkbox">
7
+ <input type="checkbox" id="checkbox">
8
+ <div class="apSlider"></div>
9
+ </label>
10
+ </span>
11
+ </div>
assets/html/footer.html ADDED
@@ -0,0 +1 @@
 
 
1
+ <div class="versions">{versions}</div>