DevelopmentTeam/MassageRobot_Dobot
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
MassageRobot_Dobot/UI_next/templates/handheld_mode.html
swayneleong 1967009793 初次加入
2025-05-27 15:46:31 +08:00

376 lines
12 KiB
HTML
Raw Permalink Blame History

<!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/handheld_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" 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 active" 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">
<iframe id="massage-plan-visualization" class="body-image" src="{{ url_for('massage_plan_visualization') }}"
style="border: none;"></iframe>
</div>
<div class="tile dynamic-function">
<iframe
id="dynamic_function_iframe"
src="{{ url_for('dynamic_function', mode='handheld', 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/handheld_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>
Reference in New Issue View Git Blame Copy Permalink