xxxxxxxxxx186
<html lang="en"><head> <meta name="description" content="Webpage description goes here" /> <meta charset="utf-8"> <title>Change_me</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content=""> <link rel="stylesheet" href="style.css"> <script src="http://code.jquery.com/jquery-latest.min.js"></script></head><body><!-- <svg width="500" height="18" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="patt1" x="0" y="0" width="24" height="9" patternUnits="userSpaceOnUse"> <path d="M0 1H6.83774C6.83774 3.01515 7.92453 8 12 8C16.0755 8 17.1623 3.01515 17.1623 1H24" stroke="black" fill="none"/> </pattern> </defs> <rect width="500" height="9" x="0" y="0" stroke="none" fill="url(#patt1)" /> </svg> --><div style="display: flex;flex-direction: row; padding: 5px; justify-content: center; align-items: center;"> <div class="receipt-paper" id="receipt-paper"><div class="paper-dot"></div><div class="paper-dot-bottom"></div> <div class="paper"></div> <div contenteditable="true" style="text-align: center; margin:10px;"spellcheck ="false"> <h1>我的小舖（店名）<br>RECEIPT</h1> </div> <div class="" style="display: flex;flex-direction: column; justify-content: center; gap:1px; margin:5px;"> <div contenteditable="true" style="text-align: center;"><p>Taiwan, Taipei</p></div> <div contenteditable="true" spellcheck ="false"style="text-align: center;"><p>Creator : 輸入大名</p></div> <div contenteditable="true" style="text-align: center;"><p>Date: 18/11/2024 <br>Time: 14:24</p></div> <div style="text-align: center; border-top:2px dotted var(--ink); border-bottom:2px dotted var(--ink); margin:10px; padding-top: 5px;padding-bottom: 5px;"><p contenteditable="true" spellcheck ="false">簡短自介、喜歡的東東... etc</p></div> </div> <div style="display: flex; margin:auto; flex-direction: column; gap: 5px;"> <div class="items" style="background-color:var(--ink);color:var(--paper)"> <!-- <span>description</span> <span>price</span> --> <span contenteditable="true" spellcheck ="false">title</span> <span contenteditable="true" spellcheck ="false">words</span> </div> <div style="border-bottom:2px dotted var(--ink)"></div> <div class="items portal"> <div class="title-div" ><span contenteditable="true" spellcheck ="false">標題1</span></div> <span id="wordcount" onmouseout="SumUp()" ontouchend="SumUp()" contenteditable="true" spellcheck ="false">0</span> </div> <div class="items portal"> <div class="title-div"><span contenteditable="true" spellcheck ="false">標題2</span></div> <span contenteditable="true" id="wordcount" onmouseout="SumUp() ontouchend="SumUp()"">0</span> </div> <div class="items portal"> <div class="title-div"><span contenteditable="true" spellcheck ="false">標題3</span></div> <span id="wordcount" onmouseout="SumUp()" ontouchend="SumUp()" contenteditable="true">0</span> </div> <div class="items portal"> <div class="title-div"><span contenteditable="true" spellcheck ="false">標題4</span></div> <span id="wordcount" onmouseout="SumUp()" ontouchend="SumUp()" contenteditable="true">0</span> </div> <div class="items portal"> <div class="title-div"><span contenteditable="true" spellcheck ="false">標題5</span></div> <span id="wordcount" onmouseout="SumUp()" ontouchend="SumUp()" contenteditable="true">0</span> </div> <div style="border-bottom:2px dotted var(--ink);"></div> <div style=" display:flex; flex-direction: row; justify-content: space-between;"> <span contenteditable="true" >item count</span> <span contenteditable="true">5</span> </div> <div style=" display:flex; flex-direction: row; justify-content: space-between;"> <span contenteditable="true">total</span> <span id="total_words" contenteditable="true" >0</span> </div> <div style="border-bottom:2px dotted var(--ink);"></div> <div ><h2 class="endnote" contenteditable="true" spellcheck ="false">Thanks for Reading ;)</h2></div> <div > <p style="text-align: center;font-size:9px;" contenteditable="true" spellcheck ="false">▼ Share Your Thoughts </p></div> <div > <p class="barcode" contenteditable="true" spellcheck ="false" >HelloWorld</p></div> </div> </div> <div> <div class="titles" style="color: var(--title); font-weight: 600;"> <h1 contenteditable="true" spellcheck ="false" style="color: var(--title); font-weight: 600;"> (你的名字)的<br>Top 5 創作！!</h1> </div></div></div><div id="menu" style="margin-top:50px;height:70px;background-color: rgb(225, 225, 225); display: flex; flex-direction: row;flex-wrap: wrap; gap:15px; padding: 5px; align-items: center;"> <div style="font-size:12px"><input type="color" id="paperColor" value="#F48080" /> <label for="paperColor">紙色</label></div> <div style="font-size:12px"><input type="color" id="ink" value="#000000" /> <label for="ink">墨水</label></div> <div style="font-size:12px"><input type="color" id="bg" value="#ffffff" /> <label for="bg">背景底色</label></div> <div style="font-size:12px"><input type="color" id="title" value="#000000" /> <label for="title">標題字</label></div> <p>字皆可編輯！條碼也可以！字數統計會延遲，再點一下就會正常了</p></div> <script> let paperColor = document.getElementById("paperColor"); let inkColor = document.getElementById("ink") let bgColor = document.getElementById("bg") let titleColor =document.getElementById("title"); paperColor.addEventListener('input', function(){ document.documentElement.style.setProperty('--paper', paperColor.value); })inkColor.addEventListener('input', function(){ document.documentElement.style.setProperty('--ink', inkColor.value); }) bgColor.addEventListener('input', function(){ document.documentElement.style.setProperty('--bg', bgColor.value); }) titleColor.addEventListener('input', function(){ document.documentElement.style.setProperty('--title', titleColor.value); }) let words = document.querySelectorAll('#wordcount'); function SumUp(){var total = 0; words.forEach(words => {total += parseFloat(words.textContent) || 0; // Adding numbers, default to 0 if not a number }); document.getElementById('total_words').textContent = total; console.log(total);});} // document.querySelectorAll('#wordcount').forEach(span => {// span.addEventListener('click', console.log("hello")); // This will trigger when content changes// }); </script></body></html>