460 lines
14 KiB
HTML
Executable File
460 lines
14 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>
|
|
<link
|
|
rel="apple-touch-icon"
|
|
sizes="180x180"
|
|
href="{{ url_for('static', filename='images/webapp/apple-touch-icon.png') }}"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="32x32"
|
|
href="{{ url_for('static', filename='images/webapp/favicon-32x32.png') }}"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="16x16"
|
|
href="{{ url_for('static', filename='images/webapp/favicon-16x16.png') }}"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/ico"
|
|
href="{{ url_for('static', filename='images/webapp/favicon.ico') }}"
|
|
/>
|
|
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" /> -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ url_for('static', filename='css/smart_mode.css') }}?v={{ time }}"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ url_for('static', filename='css/volume.css') }}?v={{ time }}"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ url_for('static', filename='css/mode_real_info.css') }}?v={{ time }}"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ url_for('static', filename='css/hint.css') }}?v={{ time }}"
|
|
/>
|
|
<script src="{{ url_for('static', filename='js/socketio/socket.io.min.js') }}"></script>
|
|
<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="top-bar">
|
|
<a href="{{ url_for('home') }}" class="logo">
|
|
<img
|
|
src="{{ url_for('static', filename='images/common/首页.svg') }}"
|
|
alt="首页"
|
|
/>
|
|
</a>
|
|
<!-- 模式切换按钮 -->
|
|
<div class="mode-switch">
|
|
<!-- <div
|
|
class="mode smart-mode active"
|
|
i18n="topbar.model1"
|
|
onclick="switchMode('smart_mode')"
|
|
>
|
|
智能模式
|
|
</div> -->
|
|
<div class="mode smart-mode active" onclick="switchMode('smart_mode')" i18n="topbar.model1"></div>
|
|
<div class="mode manual-mode" onclick="switchMode('manual_mode')" i18n="topbar.model2"></div>
|
|
<div class="mode handheld-mode" onclick="switchMode('handheld_mode')" i18n="topbar.model3"></div>
|
|
</div>
|
|
|
|
<div class="volume-control" id="volume-control">
|
|
<!-- 背景 -->
|
|
<div class="volume-background"></div>
|
|
<!-- 音量值显示 -->
|
|
<div class="volume-value" id="volume-value">50</div>
|
|
<!-- 可调节的白色底色 -->
|
|
<div class="volume-progress" id="volume-progress"></div>
|
|
<div class="volume-icon-box">
|
|
<img
|
|
id="volume-icon"
|
|
src="/static/images/volume/vol-med.png"
|
|
alt="音量"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="date-time-container">
|
|
<div class="date-box">
|
|
<div class="weekday"></div>
|
|
<div class="date"></div>
|
|
</div>
|
|
<div class="time"></div>
|
|
</div>
|
|
|
|
<div class="right-section">
|
|
<div class="status" onclick="toggleConnection()">
|
|
<img
|
|
src="{{ url_for('static', filename='images/common/disconnected.svg') }}"
|
|
id="status-icon"
|
|
alt="Connection Status"
|
|
/>
|
|
<span id="status-text"></span>
|
|
</div>
|
|
<div class="shutdown" onclick="shutdownSystem()">
|
|
<img
|
|
src="{{ url_for('static', filename='images/common/shutdown.svg') }}"
|
|
id="shutdown-icon"
|
|
alt="Shutdown"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mode-real-info" id="mode-real-info" style="display: none">
|
|
<div class="dot"></div>
|
|
<div class="info-text" id="info-text" role="text"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="tile massage-info">
|
|
<div class="content-switch-box">
|
|
<div class="content-switch">
|
|
<div class="slider-toggle"></div>
|
|
<div
|
|
class="toggle-option image-option active"
|
|
i18n="smart_mode.physiotherapy"
|
|
resize-font="true"
|
|
checkHeight="true"
|
|
changeLineHeight="true"
|
|
smallSize="40"
|
|
></div>
|
|
<div
|
|
class="toggle-option 3d-option inactive"
|
|
i18n="smart_mode.3d"
|
|
resize-font="true"
|
|
checkHeight="true"
|
|
changeLineHeight="true"
|
|
smallSize="40"
|
|
></div>
|
|
<!-- <div
|
|
class="toggle-option webpage-option inactive"
|
|
i18n="smart_mode.health"
|
|
resize-font="true"
|
|
checkHeight="true"
|
|
changeLineHeight="true"
|
|
smallSize="40"
|
|
></div> -->
|
|
</div>
|
|
</div>
|
|
<div class="dynamic-content">
|
|
<!-- Preloading iframes -->
|
|
<img
|
|
id="img-content-frame"
|
|
src="{{ url_for('static', filename='images/smart_mode/back.png') }}"
|
|
class="content-display active"
|
|
alt="Fallback Image"
|
|
/>
|
|
<!-- <div class="line"></div>
|
|
<div class="line2"></div> -->
|
|
|
|
<div
|
|
class="static-image content-display inactive"
|
|
id="iframe-container"
|
|
>
|
|
<img
|
|
id="img2d-image"
|
|
src="{{ url_for('static', filename='images/smart_mode/穴位.png') }}"
|
|
alt="2D Image"
|
|
/>
|
|
|
|
<iframe
|
|
id="three-d-model"
|
|
style="display: none"
|
|
src="{{ url_for('three_d_model') }}?v={{ time }}"
|
|
frameborder="0"
|
|
></iframe>
|
|
|
|
<button id="toggle3D">
|
|
<img
|
|
id="toggle3D-icon"
|
|
src="{{ url_for('static', filename='images/smart_mode/2d.svg') }}"
|
|
alt="2D"
|
|
/>
|
|
</button>
|
|
</div>
|
|
<!-- <iframe
|
|
id="web-content-frame"
|
|
src="/modify_web?url=http://m.layeyese.com/"
|
|
class="content-display inactive"
|
|
></iframe> -->
|
|
</div>
|
|
<!-- <div class="static-image" id="iframe-container">
|
|
<iframe src="{{ url_for('model') }}?v={{ time }}" frameborder="0" loading="lazy" defer></iframe>
|
|
<img
|
|
id="img2d-image"
|
|
src="{{ url_for('static', filename='images/smart_mode/穴位.png') }}"
|
|
alt="2D Image"
|
|
/>
|
|
<button id="toggle3D">
|
|
<img
|
|
id="toggle3D-icon"
|
|
src="{{ url_for('static', filename='images/smart_mode/2d.svg') }}"
|
|
alt="2D"
|
|
/>
|
|
</button>
|
|
</div> -->
|
|
</div>
|
|
<div class="tile dynamic-function">
|
|
<iframe
|
|
id="dynamic_function_iframe"
|
|
src="{{ url_for('dynamic_function') }}?v={{ time }}"
|
|
frameborder="0"
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="ai-message"></div> -->
|
|
<!-- <div id="messageBox" i18n="smart_mode.msg4">
|
|
使用“小悠师傅” 或 “小悠小悠”唤醒我...
|
|
</div>
|
|
<iframe
|
|
class="ai-ball"
|
|
src="{{ url_for('ai_ball') }}?v={{ time }}"
|
|
frameborder="0"
|
|
></iframe> -->
|
|
<div class="change-head">
|
|
<div class="head-btn">
|
|
<img
|
|
class="btn-icon"
|
|
src="{{ url_for('static', filename='images/massage_control/head/深部热疗.png') }}"
|
|
alt=""
|
|
/>
|
|
<div
|
|
class="btn-text"
|
|
style="display: none"
|
|
i18n="control.massage.data_text"
|
|
resize-font="true"
|
|
smallSize="60"
|
|
></div>
|
|
</div>
|
|
<div class="head-btn">
|
|
<img
|
|
class="btn-icon"
|
|
src="{{ url_for('static', filename='images/massage_control/head/点阵按摩.png') }}"
|
|
alt=""
|
|
/>
|
|
<div
|
|
class="btn-text"
|
|
style="display: none"
|
|
i18n="control.massage.data_text2"
|
|
resize-font="true"
|
|
smallSize="60"
|
|
></div>
|
|
</div>
|
|
<div class="head-btn">
|
|
<img
|
|
class="btn-icon"
|
|
src="{{ url_for('static', filename='images/massage_control/head/全能滚珠.png') }}"
|
|
alt=""
|
|
/>
|
|
<div
|
|
class="btn-text"
|
|
style="display: none"
|
|
i18n="control.massage.data_text3"
|
|
resize-font="true"
|
|
smallSize="60"
|
|
></div>
|
|
</div>
|
|
<div class="head-btn">
|
|
<img
|
|
class="btn-icon"
|
|
src="{{ url_for('static', filename='images/massage_control/head/指疗通络.png') }}"
|
|
alt=""
|
|
/>
|
|
<div
|
|
class="btn-text"
|
|
style="display: none"
|
|
i18n="control.massage.data_text4"
|
|
resize-font="true"
|
|
smallSize="60"
|
|
></div>
|
|
</div>
|
|
<div class="head-btn">
|
|
<img
|
|
class="btn-icon"
|
|
src="{{ url_for('static', filename='images/massage_control/head/滚滚刺疗.png') }}"
|
|
alt=""
|
|
/>
|
|
<div
|
|
class="btn-text"
|
|
style="display: none"
|
|
i18n="control.massage.data_text5"
|
|
resize-font="true"
|
|
smallSize="60"
|
|
></div>
|
|
</div>
|
|
<div class="head-btn">
|
|
<img
|
|
class="btn-icon"
|
|
src="{{ url_for('static', filename='images/massage_control/head/温砭舒揉.png') }}"
|
|
alt=""
|
|
/>
|
|
<div
|
|
class="btn-text"
|
|
style="display: none"
|
|
i18n="control.massage.data_text6"
|
|
resize-font="true"
|
|
smallSize="60"
|
|
></div>
|
|
</div>
|
|
<div class="head-btn">
|
|
<img
|
|
class="btn-icon"
|
|
src="{{ url_for('static', filename='images/massage_control/head/离子光灸.png') }}"
|
|
alt=""
|
|
/>
|
|
<div
|
|
class="btn-text"
|
|
style="display: none"
|
|
i18n="control.massage.data_text7"
|
|
resize-font="true"
|
|
smallSize="60"
|
|
></div>
|
|
</div>
|
|
<div class="head-btn">
|
|
<img
|
|
class="btn-icon"
|
|
src="{{ url_for('static', filename='images/massage_control/head/能量热疗.png') }}"
|
|
alt=""
|
|
/>
|
|
<div
|
|
class="btn-text"
|
|
style="display: none"
|
|
i18n="control.massage.data_text8"
|
|
resize-font="true"
|
|
smallSize="60"
|
|
></div>
|
|
</div>
|
|
<div class="head-btn">
|
|
<img
|
|
class="btn-icon"
|
|
src="{{ url_for('static', filename='images/massage_control/head/天球滚捏.png') }}"
|
|
alt=""
|
|
/>
|
|
<div
|
|
class="btn-text"
|
|
style="display: none"
|
|
i18n="control.massage.data_text9"
|
|
resize-font="true"
|
|
smallSize="60"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<!-- Popup Modal -->
|
|
<div id="popup-modal" class="popup-modal">
|
|
<div class="popup-content">
|
|
<p id="popup-message">这里是消息内容</p>
|
|
<div id="popup-buttons">
|
|
<button
|
|
id="confirm-btn"
|
|
onclick="confirmAction()"
|
|
i18n="popup.confirm_btn"
|
|
>
|
|
确认
|
|
</button>
|
|
<button
|
|
id="cancel-btn"
|
|
onclick="cancelAction()"
|
|
i18n="popup.cancel_btn"
|
|
>
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hint-modal" id="hint-modal" style="display: none">
|
|
<div class="hint-container" id="hint-container">
|
|
<div class="hint-title" id="hint-title"></div>
|
|
<div class="hint-content" id="hint-content"></div>
|
|
<div class="hint-footer">
|
|
<div
|
|
class="hint-btn cancel-hint"
|
|
id="cancel-hint-btn"
|
|
></div>
|
|
<div
|
|
class="hint-btn confirm-hint"
|
|
id="confirm-hint-btn"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/common.js') }}?v={{ time }}"></script>
|
|
<script src="{{ url_for('static', filename='js/smart_mode.js') }}?v={{ time }}"></script>
|
|
<script src="{{ url_for('static', filename='js/set_volume.js') }}?v={{ time }}"></script>
|
|
<script src="{{ url_for('static', filename='js/mode_real_info.js') }}?v={{ time }}"></script>
|
|
<script src="{{ url_for('static', filename='js/self_hint.js') }}?v={{ time }}"></script>
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> -->
|
|
|
|
<script>
|
|
// function changeLang2(lang) {
|
|
// $.getJSON("../static/i18n/i18n_" + lang + ".json", function (data) {
|
|
// $("[i18n]").each(async function () {
|
|
// var key = $(this).attr("i18n"); // 获取元素的 i18n 属性值
|
|
|
|
// // 使用自定义函数解析嵌套的 JSON 键
|
|
// var value = getNestedValue(data, key);
|
|
// if (value) {
|
|
// $(this).text(value); // 替换文本内容
|
|
// }
|
|
|
|
// await callback2(this);
|
|
// });
|
|
// });
|
|
// }
|
|
|
|
// changeLang2("zh");
|
|
// // changeLang2(lang);
|
|
|
|
// function callback2(ele) {
|
|
// if (ele.attributes.wait && ele.classList.contains("active")) {
|
|
// const sliderToggle = document.querySelector(".slider-toggle");
|
|
// sliderToggle.style.left = `${ele.offsetLeft}px`;
|
|
// sliderToggle.style.width = `${ele.clientWidth}px`;
|
|
|
|
// // const contentSwitch = document.querySelector(".content-switch");
|
|
// // contentSwitch.style.marginLeft = `-${
|
|
// // contentSwitch.clientWidth / 2
|
|
// // }px`;
|
|
// // contentSwitch.style.left = `50%`;
|
|
// }
|
|
// }
|
|
|
|
setTimeout(() => {
|
|
const toggleOption = document.querySelectorAll(".toggle-option");
|
|
console.log(toggleOption);
|
|
toggleOption.forEach((ele) => {
|
|
if (ele.classList.contains("active")) {
|
|
const sliderToggle = document.querySelector(".slider-toggle");
|
|
sliderToggle.style.left = `${ele.offsetLeft}px`;
|
|
sliderToggle.style.width = `${ele.clientWidth}px`;
|
|
// const contentSwitch = document.querySelector(".content-switch");
|
|
// // contentSwitch.style.marginLeft = `-${
|
|
// // contentSwitch.clientWidth / 2
|
|
// // }px`;
|
|
// // contentSwitch.style.left = `50%`;
|
|
}
|
|
});
|
|
}, 500);
|
|
|
|
// eruda.init();
|
|
</script>
|
|
</body>
|
|
</html>
|