269 lines
8.4 KiB
HTML
Executable File
269 lines
8.4 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0 , maximum-scale=1.0, user-scalable=no"
|
|
/>
|
|
<title>动态功能选择器</title>
|
|
<style>
|
|
body,
|
|
html {
|
|
height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
.dynamic-function {
|
|
height: 100%;
|
|
width: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
position: relative;
|
|
}
|
|
.function-switch {
|
|
/* width: 150px;
|
|
height: 25px;
|
|
top: 2.5%; */
|
|
/* add-code */
|
|
/* width: 200px; */
|
|
/* display: grid;
|
|
grid-template-columns: repeat(3, 1fr); */
|
|
|
|
height: 30px;
|
|
position: absolute;
|
|
top: 10px;
|
|
background-color: #dddddd93;
|
|
border-radius: 15px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
/* height: 30px;
|
|
transform: translateX(-50%);
|
|
left: 25%;
|
|
position: absolute;
|
|
top: 10px;
|
|
background-color: #dddddd93;
|
|
border-radius: 15px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center; */
|
|
}
|
|
.function {
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: small;
|
|
transition: color 0.2s ease-in-out, font-weight 0.2s ease-in-out;
|
|
position: relative;
|
|
z-index: 3;
|
|
padding: 0 14px;
|
|
height: 30px;
|
|
}
|
|
.function.active {
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
.slider {
|
|
position: absolute;
|
|
/* add-code */
|
|
/* height: 30px;
|
|
width: calc(100% / 3); */
|
|
height: 30px;
|
|
background: linear-gradient(
|
|
to right bottom,
|
|
rgb(212, 96, 241),
|
|
rgba(145, 66, 197, 0.5)
|
|
);
|
|
border-radius: 15px;
|
|
transition: left 0.2s ease-in-out;
|
|
z-index: 1;
|
|
box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
|
|
}
|
|
iframe {
|
|
height: 100%;
|
|
width: 100%;
|
|
border: none;
|
|
border-radius: 15px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
z-index: 0;
|
|
transition: opacity 0.2s ease-in-out, z-index 0.2s ease-in-out;
|
|
}
|
|
iframe.active {
|
|
opacity: 1;
|
|
z-index: 2; /* Make sure active iframe is always on top */
|
|
}
|
|
iframe.inactive {
|
|
opacity: 0;
|
|
z-index: 1;
|
|
}
|
|
</style>
|
|
<script src="{{ url_for('static', filename='js/i18n/jquery-3.7.1.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/i18n/jquery.i18n.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/i18n/setting-lang.js') }}"></script>
|
|
</head>
|
|
<body>
|
|
<div class="dynamic-function">
|
|
<div class="function-switch">
|
|
<div class="slider"></div>
|
|
<div
|
|
class="function chatbot"
|
|
i18n="control.tabbar.title"
|
|
wait="true"
|
|
></div>
|
|
<div
|
|
class="function status active"
|
|
i18n="control.tabbar.title2"
|
|
wait="true"
|
|
></div>
|
|
<!-- <div class="function chatbot active" i18n="control.tabbar.title">AI</div>
|
|
<div class="function status " i18n="control.tabbar.title2">按摩</div> -->
|
|
<div
|
|
class="function music"
|
|
i18n="control.tabbar.title3"
|
|
wait="true"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Preloading iframes -->
|
|
<!-- <iframe id="ai-frame" src="{{ url_for('ai_chatbot') }}" class="content-frame active"></iframe>
|
|
<iframe id="massage-frame" src="{{ url_for('control_panel') }}" class="content-frame inactive"></iframe> -->
|
|
<iframe
|
|
id="ai-frame"
|
|
src="{{ url_for('ai_chatbot') }}"
|
|
class="content-frame inactive"
|
|
></iframe>
|
|
<iframe
|
|
id="massage-frame"
|
|
src="{{ url_for('control_panel', mode=mode) if mode else url_for('control_panel') }}"
|
|
class="content-frame active"
|
|
></iframe>
|
|
<iframe
|
|
id="music-frame"
|
|
src="{{ url_for('music') }}"
|
|
class="content-frame inactive"
|
|
></iframe>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const functions = document.querySelectorAll(".function");
|
|
const slider = document.querySelector(".slider");
|
|
const iframes = {
|
|
ai: document.getElementById("ai-frame"),
|
|
massage: document.getElementById("massage-frame"),
|
|
music: document.getElementById("music-frame"),
|
|
};
|
|
|
|
// add-code
|
|
let activeIndex = 1; // 默认激活状态
|
|
// let activeIndex = 0; // 默认激活状态
|
|
let iframeList = [iframes.ai, iframes.massage, iframes.music];
|
|
|
|
// 初始时将滑块定位到第一个激活的元素
|
|
// const initialSliderPosition = `calc(100% / 3 * ${activeIndex})`;
|
|
|
|
// const initialSliderPosition = functions[activeIndex].offsetLeft + "px";
|
|
// slider.style.left = initialSliderPosition;
|
|
// // slider.style.width = functions[activeIndex].clientWidth + 'px';
|
|
|
|
setTimeout(() => {
|
|
const initialSliderPosition =
|
|
functions[activeIndex].offsetLeft + "px";
|
|
slider.style.left = initialSliderPosition;
|
|
slider.style.width = functions[activeIndex].clientWidth + "px";
|
|
}, 500); // 等待翻译完成
|
|
|
|
functions.forEach((func, index) => {
|
|
func.addEventListener("click", function () {
|
|
if (index !== activeIndex) {
|
|
// Move slider
|
|
// slider.style.left = `calc(100% / 3 * ${index})`;
|
|
slider.style.left = func.offsetLeft + "px";
|
|
setTimeout(() => {
|
|
slider.style.width = func.clientWidth + "px";
|
|
}, 100); // 等待浏览器渲染完成
|
|
|
|
// Hide current iframe and show the new one
|
|
iframeList[activeIndex].classList.remove("active");
|
|
iframeList[activeIndex].classList.add("inactive");
|
|
|
|
iframeList[index].classList.remove("inactive");
|
|
iframeList[index].classList.add("active");
|
|
|
|
// Update active class for function buttons
|
|
functions.forEach((f) => f.classList.remove("active"));
|
|
func.classList.add("active");
|
|
|
|
activeIndex = index;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
// let lang = "zh";
|
|
// let lang;
|
|
|
|
// function setSelectedLanguage() {
|
|
// if (localStorage.getItem("selectedLanguage")) {
|
|
// lang = localStorage.getItem("selectedLanguage");
|
|
// } else {
|
|
// // 判断系统语言
|
|
// let language = navigator.language || navigator.userLanguage;
|
|
// language = language.toLowerCase();
|
|
// if (language.includes("jp")) {
|
|
// lang = "jp";
|
|
// } else if (language.includes("en")) {
|
|
// lang = "en";
|
|
// } else if (language.includes("ko")) {
|
|
// lang = "ko";
|
|
// } else {
|
|
// lang = "zh";
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// setSelectedLanguage();
|
|
|
|
|
|
// document.getElementById('massage-frame').onload = function() {
|
|
// // let language = navigator.language || navigator.userLanguage;
|
|
// // language = language.toLowerCase();
|
|
// // let lang = 'zh';
|
|
// // if(language.includes('en-us')) {
|
|
// // lang = 'en';
|
|
// // } else if(language .includes('zh') ){
|
|
// // lang = 'zh';
|
|
// // } else if(language .includes('jp') ){
|
|
// // lang = 'jp';
|
|
// // }
|
|
|
|
// // 获取本地存储的语言设置
|
|
// let massageFrame = document.getElementById('massage-frame').contentWindow;
|
|
|
|
// let musicFrame = document.getElementById('music-frame').contentWindow;
|
|
// massageFrame.changeLang(lang);
|
|
// musicFrame.changeLang(lang);
|
|
// }
|
|
|
|
// function setFrameLanguage(frameName, lang) {
|
|
// document.getElementById(frameName).onload = function () {
|
|
// let Frame = document.getElementById(frameName).contentWindow;
|
|
// Frame.changeLang(lang);
|
|
// };
|
|
// }
|
|
</script>
|
|
</body>
|
|
</html>
|