xxxxxxxxxx415
<html lang="en"> <head> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <main> <div style="display:flex;flex-direction:row;justify-content:space-between;width:80%;margin:auto; max-width:480px;"> <h2>安價主</h2> <h2>的</h2> <h2>自我表述</h2> </div> <div class="container"> <div class="profile"> <div style="width:30px;aspect-ratio:1/1; margin:auto;background:var(--paper);margin-top:10px;border-radius:50%;text-align:center;align-self:center;"><h3>？</h3></div> <div style="width:50px;aspect-ratio:1/1; margin:auto;background:var(--paper);margin-top:1px;border-radius:50%;"></div> </div> <div class="q-box"> <div class="question"><!--圈選答案 --> <p style="position:absolute;top:0;color:var(--sub);" >01</p> <h4>更文速度</h4> <div contenteditable="true" spellcheck="false" style="margin:auto;margin-top:10px; width:80%;" > 一中骰就開更 / 日更 / 2-3天一更 / 週更 / 其他 </div> </div> <div class="question"><!--圈選答案 --> <p style="position:absolute;top:0;color:var(--sub);" >02</p> <h4>每次更新的篇幅</h4> <div id="q1" contenteditable="true" spellcheck="false" style="margin:auto;margin-top:10px; width:80%;"> 一次一樓 / 一次三樓以上 / 一言不合就蓋公寓 ...etc </div> </div> <div style="display:flex; flex-direction:row;margin:auto;width:100%;gap:8px"> <div class="question" style="width:55%;"><!--圈選答案 --> <p style="position:absolute;top:0;color:var(--sub);" >03</p> <h4>停骰多久會<br>渾身不對勁</h4> <div id="q1" contenteditable="true" spellcheck="false" style="margin:auto;margin-top:10px; width:80%;"> 1天 / 2-3天 / 一週 / 一個月 / 沒這個問題 ...etc </div> </div> <div class="question" style="width:50%;align-item:center;"> <!--輸入簡答 --> <p style="position:absolute;top:0;color:var(--sub);" >04</p> <h4>愛用骰子</h4> <select style="width:fit-content;text-align:center;"> <option value="0">請選擇～</option> <option value="1">硬幣</option> <option value="2">剪刀石頭布</option> <option value="3">紅綠藍黑嗚嗚茲拉</option> <option value="4">內褲骰</option> <option value="4">擲筊</option> <option value="4"> 籤筒</option> <option value="4">青色六面骰</option> <option value="5">眼睛六面骰</option> <option value="6">黃色四面骰</option> <option value="7">粉色八面骰</option> <option value="8">0-9數字骰</option> <option value="9">貓耳十面骰</option> <option value="10">十二面骰</option> <option value="11">二十面骰</option> <option value="12">拉霸機</option> </select> <!-- <div id="q1" contenteditable="true" spellcheck="false" style="margin:auto;margin-top:10px; width:80%;">輸入你的答案 </div> --> </div> </div> <div class="question"> <!--輸入簡答 --> <p style="position:absolute;top:0;color:var(--sub);" >05</p> <h4>卡骰或停骰怎麼處理</h4> <span id="q1" contenteditable="true" spellcheck="false" style="margin:auto;margin-top:10px; width:80%;">輸入你的答案 </span> </div> <div style="display:flex; flex-direction:row;margin:auto;width:100%;gap:8px"> <div class="question" style="width:60%;"><!--圈選答案 --> <p style="position:absolute;top:0;color:var(--sub);" >06</p> <h4>你的每篇安價<br>字數大約落在...？</h4> <div id="q1" contenteditable="true" spellcheck="false" style="margin:auto;margin-top:10px; width:80%;"> ～短篇有短篇的驚艷～<br>～長篇有長篇的細水流長～ </div> </div> <div class="question" style="width:40%;"> <!--輸入簡答 --> <p style="position:absolute;top:0;color:var(--sub);" >07</p> <h4>平均安價<br>開始到結束的<br>進行時間</h4> <div id="q1" contenteditable="true" spellcheck="false" style="margin:auto;margin-top:10px; width:80%;">輸入你的答案 </div> </div> </div> </div> </div> <div class="container" style="margin-top:30px;"> <div class="q-box"> <div class="question"> <!--輸入簡答 --> <p style="position:absolute;top:0;color:var(--sub);" >08</p> <h4>寫安價時的腦內活動</h4> <div id="q1" contenteditable="true" spellcheck="false" style="margin:auto;margin-top:10px; width:80%;"> 煩惱、心情分享... 等等 </div> </div> <div class="question"> <!--輸入簡答 --> <p style="position:absolute;top:0;color:var(--sub);" >09</p> <h4>定義自己的安價風格</h4> <div id="q1" contenteditable="true" spellcheck="false" style="margin:auto;margin-top:10px; width:80%;">#輕鬆向、#正劇向、#搞笑向、#CP、#同人、#原創 #R18... etc </div> </div> <div class="question"> <!--輸入簡答 --> <p style="position:absolute;top:0;color:var(--sub);" >10</p> <h4>介紹自己的文風</h4> <div id="q1" contenteditable="true" spellcheck="false" style="margin:auto;margin-top:10px; width:80%;">自我描述一下～ </div> </div> <div class="question"> <!--輸入簡答 --> <p style="position:absolute;top:0;color:var(--sub);" >11</p> <h4>分享一些自我流安價小技巧</h4> <div id="q1" contenteditable="true" spellcheck="false" style="margin:auto;margin-top:10px; width:80%;">請描述～ </div> </div> <div class="question" ><!--圈選答案 --> <p style="position:absolute;top:0;color:var(--sub);" >12</p> <h4>會習慣認領安價嗎</h4> <div style="margin-top:10px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap;"> <div id="q1" contenteditable="true" spellcheck="false" style="margin:auto;margin-top:10px; width:80%;">會，進行時就認領 / 會，結束後認領 / 不會，但不介意被認出來 / 不會，而且介意被認出來 ...etc </div> </div> </div> <div class="question" ><!--圈選答案 --> <p style="position:absolute;top:0;color:var(--sub);" >13</p> <h4>會整理作品嗎</h4> <div id="q1" contenteditable="true" spellcheck="false" style="margin:auto;margin-top:10px; width:80%;">會 / 不會 </div> </div> </div> <!-- 我是內框框--> </div> <!--我是外框框--> <div class="container" style="margin-top:30px; margin-bottom:30px;"> <div class="q-box" style="background:none;display:flex; flex-direction:row;justify-content:space-between;"> <h2 style="color: var(--paper);width:fit-content; letter-spacing:5px;">自選作品</h2> <div style="width:70%; border:2px dashed var(--stroke);width:80%;border-radius:8px;background:var(--paper);"> <div class="bg-container" id="bgContainer"> <p>點我上傳作品連結 QRCode 或其他照片 </p> </div> <input type="file" id="fileInput" accept="image/*"> <!-- File upload input --> <span id="q1" contenteditable="true" spellcheck="false" style="margin:20px;margin-top:10px; background:var(--answer);; color:var(--paper);font-size:12px;padding:3px;"> 作品介紹～（此頁不強迫） </span> </div> </div> </div> <div class="palette"> <h3 style="text-align:center;">調色盤</h3> <div style="margin-top:10px;"> 自己調 </div> <div style="display:flex; flex-direction:row; flex-wrap:wrap;justify-content:center; gap:5px;"> <div class="palette-segement"> <input id="bg" type="color" style="margin:auto;" value="#257180"> <label for="bg" style="color:rgb(120,120,120); font-size:small;">背景色</label> </div> <div class="palette-segement"> <input id="og-font" type="color" value="#257180" > <label for="og-font" style="color:rgb(120,120,120); font-size:small;" >題目字＆匡線</label> </div> <div class="palette-segement"> <input id="panel" type="color" value="#CB6040"> <label for="panel" style="color:rgb(120,120,120); font-size:small;" >背景面板</label> </div> <div class="palette-segement"> <input id="paper" type="color" value="#F2E5BF"> <label for="paper" style="color:rgb(120,120,120); font-size:small;">底紙＆大標</label> </div> <div class="palette-segement"> <input id="answer" type="color" value="#CB6040"> <label for="answer" style="color:rgb(120,120,120); font-size:small;">回答字</label> </div> </div> <div> 或 </div> <div style="margin-top:10px;"> 使用參考色票(點按選擇) </div> <div style="display:flex; flex-direction:row; flex-wrap:wrap;justify-content:center; gap:10px;"> <div class="palette-segement" onclick="Colorsets( '#257180',' #257180','#CB6040','#ffeed6','#CB6040')"> <div style="background: linear-gradient(to right, #257180 0%, #257180 40%, #CB6040 40%, #CB6040 60%, #CB6040 60%, #CB6040 80%, #F2E5BF 80%, #F2E5BF 100% );color:white; padding:3px;border-radius:10;width:150px;">retro</div> </div> <div class="palette-segement" onclick="Colorsets('#DFA878','#BA704F','#BA704F','#ffeed6','#6C3428')"> <div style="background: linear-gradient(to right, #6C3428 0%, #6C3428 40%, #BA704F 40%, #BA704F 60%, #DFA878 60%, #DFA878 80%, #ffeed6 80%, #ffeed6 100% );color:rgb(236,236,236); padding:3px;border-radius:10;width:150px;" > coffee</div> </div> <div class="palette-segement" onclick="Colorsets('#E3FEF7','#77B0AA','#77B0AA','#135D66','#E3FEF7')"> <div style="background: linear-gradient(to right, #135D66 0%, #135D66 60%, #77B0AA 60%, #77B0AA 80%, #E3FEF7 80%, #E3FEF7 100% );color:rgb(238,238,238); padding:3px;border-radius:10;width:150px;">cool</div> </div> <div class="palette-segement" onclick="Colorsets('#FF8787','#5f883f','#F8C4B4','#fbffd1','#5f883f')"> <div style="background: linear-gradient(to right, #FF8787 0%, #FF8787 40%, #F8C4B4 40%, #F8C4B4 60%, #fbffd1 60%, #fbffd1 80%, #5f883f 80%, #5f883f 100% );color:rgb(94,148,102); padding:3px;border-radius:10;width:150px;">melon</div> </div> <div class="palette-segement" onclick="Colorsets('#262626','#939393','#D8D8D8','#FFFFFF','#262626')"> <div style="background: linear-gradient(to right, #262626 0%, #262626 40%, #939393 40%, #939393 60%, #FFFFFF 60%, #FFFFFF 80%, #D8D8D8 80%, #D8D8D8 100% );color:rgb(168,168,168); padding:3px;border-radius:10;width:150px;">black & white</div> </div> </div> </div> </main> <script type="text/javascript"> const bgContainer = document.getElementById('bgContainer'); const fileInput = document.getElementById('fileInput'); bgContainer.addEventListener('click', function() { fileInput.click(); }); fileInput.addEventListener('change', function(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(e) { bgContainer.style.backgroundImage = `url(${e.target.result})`; bgContainer.style.border="none"; bgContainer.innerHTML = ''; }; // Read the image as a data URL (base64 string) reader.readAsDataURL(file); } }); let bgColor = document.getElementById("bg"); let OG = document.getElementById("og-font") let Panel = document.getElementById("panel") let Paper =document.getElementById("paper"); let answer =document.getElementById("answer"); bgColor.addEventListener('input', function(){ document.documentElement.style.setProperty('--background', bgColor.value); }) OG.addEventListener('input', function(){ document.documentElement.style.setProperty('--stroke', OG.value); }) Panel.addEventListener('input', function(){ document.documentElement.style.setProperty('--bg', Panel.value); }) Paper.addEventListener('input', function(){ document.documentElement.style.setProperty('--paper', Paper.value); }) answer.addEventListener('input', function(){ document.documentElement.style.setProperty('--answer', answer.value); }) function Colorsets( c1, c2, c3, c4, c5){ document.documentElement.style.setProperty('--background', c1); document.documentElement.style.setProperty('--stroke', c2); document.documentElement.style.setProperty('--bg',c3); document.documentElement.style.setProperty('--paper', c4); document.documentElement.style.setProperty('--answer', c5); } </script> </body></html>