Leecheng/superstar_v2
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
superstar_v2/themes/superstar/_www/love-message.html

344 lines
11 KiB
HTML
Raw Permalink Normal View History

Add themes/superstar/_www
2025-05-19 15:09:57 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>真情告白</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
text-align: center;
margin: 20px;
}
.header {
superstar_v2
2025-06-24 10:35:01 +08:00
background: #D32F2F;
Add themes/superstar/_www
2025-05-19 15:09:57 +08:00
padding: 10px 0;
color: white;
font-size: 24px;
font-weight: 500;
text-align: center;
}
.banner {
width: 100%;
max-width: 600px;
margin: 0 auto 20px;
}
.banner img {
width: 100%;
height: auto;
}
.menu-toggle {
position: absolute;
top: 10px;
left: 10px;
cursor: pointer;
}
.menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 250px;
background: white;
transform: translateX(-250px);
transition: transform 0.3s ease;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
overflow-y: auto;
}
.menu.active {
transform: translateX(0);
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
padding: 15px 20px;
border-bottom: 1px solid #ccc;
}
.menu ul li a {
text-decoration: none;
color: #333;
display: block;
}
.menu ul li a:hover {
background: #eee;
}
.content {
margin: 20px;
}
.notice {
color: #3333ff;
font-size: 0.9em;
text-align: left;
}
#inputText {
width: 100%;
padding: 8px;
margin: 10px 0;
font-size: 1em;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
pointer-events: auto !important;
cursor: text !important;
}
.length-display {
color: #ff0000;
font-size: 1em;
margin-bottom: 10px;
display: none;
text-align: left;
}
.submit-btn {
background-color: #D32F2F;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s;
}
.submit-btn:hover {
background-color: #b52b2b;
}
a {
text-decoration: none;
color: inherit;
}
input,
button {
pointer-events: auto !important;
cursor: text !important;
}
button {
cursor: pointer !important;
}
input[type="text"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
pointer-events: auto !important;
}
.form-group button,
.submit-btn {
border: none;
background-color: #D32F2F;
color: white;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s;
}
.form-group button:hover,
.submit-btn:hover {
background-color: #b52b2b;
}
</style>
</head>
<body>
<div class="header">真情告白</div>
<!-- Add Banner -->
<div class="banner">
<img src="手機點歌/BANNER-12.png" alt="超級巨星 Banner">
</div>
<div class="menu-toggle">
<svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M4,10h24c0.553,0,1-0.447,1-1s-0.447-1-1-1H4c-0.553,0-1,0.447-1,1S3.447,10,4,10z"/><path d="M28,15H4c-0.553,0-1,0.447-1,1s0.447,1,1,1h24c0.553,0,1-0.447,1-1S28.553,15,28,15z"/><path d="M28,22H4c-0.553,0-1,0.447-1,1s0.447,1,1,1h24c0.553,0,1-0.447,1-1S28.553,22,28,22z"/></svg>
</div>
<div class="menu">
<ul>
<li><a href="windows.html" class="menu-link">首頁</a></li>
<li><a href="new-songs.html" class="menu-link">新歌快報</a></li>
<li><a href="top-ranking.html" class="menu-link">熱門排行</a></li>
<li><a href="search-singer.html" class="menu-link">歌星查詢</a></li>
<li><a href="search-song.html" class="menu-link">歌名查詢</a></li>
<li><a href="clicked-song.html" class="menu-link">已點歌曲</a></li>
<!-- //<li><a href="my-favorite.html" class="menu-link">我的最愛</a></li> -->
<li><a href="sound-control.html" class="menu-link">聲音控制</a></li>
<li><a href="social-media.html" class="menu-link">社群媒體</a></li>
<li><a href="love-message.html" class="menu-link">真情告白</a></li>
<li><a href="mood-stickers.html" class="menu-link">心情貼圖</a></li>
</ul>
</div>
<div class="container">
<div class="content">
<h2>真情告白</h2>
<input type="text" id="inputText" oninput="updateLength()" maxlength="64" placeholder="請輸入您的留言">
<div class="length-display" id="charCountDisplay">字串長度：<span id="charCount">0</span>個單位</div>
<button class="submit-btn" onclick="submitMessage()">確認送出</button>
</div>
</div>
<div class="notice">
<ul>
<li>注意：不要使用特殊符號，可能無法正常顯示！</li>
<li>播歌畫面可顯示的字串長度為64（會員名稱 + 訊息內容）！</li>
<li>如果非要給這愛加個期限，我希望是一萬年…真情告白，等您留言！（每則留言輪播三次）</li>
</ul>
<script>
// 首先處理導航 - 確保最高優先級
document.addEventListener('DOMContentLoaded', function() {
// 導航處理
const menuLinks = document.querySelectorAll('.menu-link');
menuLinks.forEach(link => {
// 移除所有現有的事件監聽器
const oldLink = link.cloneNode(true);
link.parentNode.replaceChild(oldLink, link);
// 添加新的點擊處理
oldLink.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
const href = this.getAttribute('href');
if (href) {
window.location.href = href;
}
}, true); // 使用捕獲階段
});
// 菜單切換
const menuToggle = document.querySelector('.menu-toggle');
const menu = document.querySelector('.menu');
if (menuToggle && menu) {
menuToggle.addEventListener('click', (e) => {
e.stopPropagation();
e.stopImmediatePropagation();
menu.classList.toggle('active');
}, true);
document.addEventListener('click', (e) => {
if (!menu.contains(e.target) && !menuToggle.contains(e.target)) {
menu.classList.remove('active');
}
}, true);
}
});
function updateLength() {
var inputText = document.getElementById("inputText").value;
var charCountDisplay = document.getElementById("charCountDisplay");
var charCount = document.getElementById("charCount");
charCount.innerText = inputText.length;
if (inputText.length > 0) {
charCountDisplay.style.display = "block";
} else {
charCountDisplay.style.display = "none";
}
}
function submitMessage() {
const message = document.getElementById('inputText').value;
if (message.trim() !== '') {
fetch('/message', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
body: JSON.stringify({ message })
})
.then(response => response.text())
.then(data => {
console.log('後端回應:', data);
alert('留言已提交');
document.getElementById('inputText').value = '';
document.getElementById('charCount').textContent = '0';
})
.catch(error => {
console.error('錯誤:', error);
alert('留言提交失敗');
});
} else {
alert('留言內容不能為空');
}
}
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
});
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', (e) => {
e.preventDefault();
if(button.onclick) {
button.onclick.call(this);
}
});
});
// 首先阻止所有連結的默認行為
document.querySelectorAll('a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
}, true);
});
// 特別處理輸入框，確保它在最高優先級
const messageInput = document.getElementById('inputText');
if (messageInput) {
['mousedown', 'mouseup', 'click', 'focus', 'touchstart'].forEach(eventType => {
messageInput.addEventListener(eventType, function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
}, { capture: true, passive: false });
});
// 特別處理輸入事件
messageInput.addEventListener('input', function(e) {
updateLength();
}, { capture: true, passive: true });
}
// 特別處理提交按鈕
const submitButton = document.querySelector('.submit-btn');
if (submitButton) {
submitButton.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
submitMessage();
}, { capture: true, passive: false });
}
// 移除所有 onclick 屬性並重新綁定事件
document.querySelectorAll('[onclick]').forEach(element => {
const onclickValue = element.getAttribute('onclick');
if (onclickValue) {
element.removeAttribute('onclick');
element.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
if (element.classList.contains('submit-btn')) {
submitMessage();
}
}, { capture: true, passive: false });
}
});
</script>
</body>
</html>
Reference in New Issue Copy Permalink