291 lines
8.9 KiB
HTML
Executable File
291 lines
8.9 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/all.min.css') }}?v={{ time }}"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ url_for('static', filename='css/home.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 }}"
|
|
/>
|
|
<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">
|
|
<div class="logo">
|
|
<img
|
|
src="{{ url_for('static', filename='images/webapp/favicon.ico') }}"
|
|
alt="具身风暴"
|
|
/>
|
|
</div>
|
|
|
|
<div class="ir-btn" id="ir-btn">
|
|
<img
|
|
class="ir-icon"
|
|
src="{{ url_for('static', filename='images/home/ir.png') }}"
|
|
alt="红外报告按钮"
|
|
/>
|
|
<text class="ir-text" i18n="home.ir_text"></text>
|
|
</div>
|
|
|
|
<div class="volume-control" id="volume-control">
|
|
<!-- 背景 -->
|
|
<div class="volume-background"></div>
|
|
<!-- 音量值显示 -->
|
|
<div class="volume-value" id="volume-value">0%</div>
|
|
<!-- 可调节的白色底色 -->
|
|
<div class="volume-progress" id="volume-progress"></div>
|
|
<div class="volume-icon-box">
|
|
<img
|
|
id="volume-icon"
|
|
src="/static/images/volume/vol-mute.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="language-select-box">
|
|
<select
|
|
name="language"
|
|
id="language-select"
|
|
onchange="selectLang(this.value)"
|
|
>
|
|
<option value="zh">中文</option>
|
|
<!-- <option value="jp">日本語</option> -->
|
|
<option value="en">English</option>
|
|
<!-- <option value="ko">한국어</option> -->
|
|
</select>
|
|
</div>
|
|
<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 health" id="health_btn">
|
|
<span i18n="home.panel"></span>
|
|
<img
|
|
src="{{ url_for('static', filename='images/home/massage.svg') }}"
|
|
alt="按摩"
|
|
class="health-icon"
|
|
/>
|
|
</div>
|
|
<div class="tile music">
|
|
<span i18n="home.panel2"></span>
|
|
<img
|
|
src="{{ url_for('static', filename='images/home/music.svg') }}"
|
|
alt="音乐"
|
|
class="music-icon"
|
|
/>
|
|
</div>
|
|
<div class="tile settings" id="setting_btn">
|
|
<span i18n="home.panel3"></span>
|
|
<img
|
|
src="{{ url_for('static', filename='images/home/setting.svg') }}"
|
|
alt="设置"
|
|
class="settings-icon"
|
|
/>
|
|
</div>
|
|
<div class="tile learning" id="learning_btn">
|
|
<span i18n="home.panel4"></span>
|
|
<img
|
|
src="{{ url_for('static', filename='images/home/learn.svg') }}"
|
|
alt="教学"
|
|
class="learning-icon"
|
|
/>
|
|
</div>
|
|
<div class="tile help" id="help_btn">
|
|
<span i18n="home.panel5"></span>
|
|
<img
|
|
src="{{ url_for('static', filename='images/home/help.svg') }}"
|
|
alt="帮助"
|
|
class="help-icon"
|
|
/>
|
|
</div>
|
|
<!-- <div class="circle-breath" id="voiceBall"></div> -->
|
|
</div>
|
|
<!-- 设置进入密码框 -->
|
|
<div id="pwd-modal" class="pwd-modal">
|
|
<div class="modal-content">
|
|
<div i18n="popup.title"></div>
|
|
<input id="pwd-input" type="password" value="jsfb" />
|
|
<div class="model-btn">
|
|
<button
|
|
id="pwd-confirm-btn"
|
|
onclick="pwdConfirm()"
|
|
i18n="popup.confirm_btn"
|
|
>
|
|
确认
|
|
</button>
|
|
<button
|
|
id="pwd-cancel-btn"
|
|
onclick="pwdCancel()"
|
|
i18n="popup.cancel_btn"
|
|
>
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="iframe-popup" class="popup">
|
|
<div class="iframe-popup-content">
|
|
<!-- <span class="close">×</span> -->
|
|
<iframe
|
|
id="music-iframe"
|
|
src="{{ url_for('music') }}"
|
|
frameborder="0"
|
|
></iframe>
|
|
</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>
|
|
|
|
<script src="{{ url_for('static', filename='js/common.js') }}?v={{ time }}"></script>
|
|
<script src="{{ url_for('static', filename='js/home.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>
|
|
let langSelect = $("#language-select");
|
|
let selectVal = langSelect.find("option");
|
|
|
|
// 切换语言
|
|
selectVal.map((index, ele) => {
|
|
if (ele.value === lang) {
|
|
selectVal.eq(index).attr("selected", true);
|
|
// changeLang(lang);
|
|
}
|
|
});
|
|
|
|
// 设置本地存储保存切换的语言
|
|
function setLanguage(lang) {
|
|
localStorage.setItem("selectedLanguage", lang);
|
|
}
|
|
|
|
// 选择下拉框修改语言
|
|
function selectLang(lang) {
|
|
setLanguage(lang);
|
|
loadLanguageFun(lang);
|
|
setFrameLanguage("music-iframe", lang);
|
|
updateDateTime(true, lang);
|
|
// resetBash(lang);
|
|
}
|
|
|
|
function setFrameLanguage(frameName, lang) {
|
|
console.log("Set Frame Language", frameName, lang);
|
|
let Frame = document.getElementById(frameName);
|
|
Frame.contentWindow.loadLanguageFun(lang);
|
|
}
|
|
|
|
// function resetBash(lang) {
|
|
// console.log("Reset Bash", lang);
|
|
// fetch("/run-script", {
|
|
// method: "POST",
|
|
// headers: {
|
|
// "Content-Type": "application/json",
|
|
// },
|
|
// body: JSON.stringify({ script_type: lang }),
|
|
// })
|
|
// .then((response) => response.json())
|
|
// .then((data) => {
|
|
// if (data.error) {
|
|
// console.error("Error:", data.error);
|
|
// } else {
|
|
// console.log("Script Output:", data.output);
|
|
// console.log("Script Error:", data.error);
|
|
// }
|
|
// })
|
|
// .catch((error) => {
|
|
// console.error("Error:", error);
|
|
// });
|
|
// }
|
|
</script>
|
|
</body>
|
|
</html>
|