760 lines
39 KiB
HTML
Executable File
760 lines
39 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="{{ url_for('static', filename='css/select_program.css') }}?v={{ time }}" />
|
||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/jquery.dataTables.min.css') }}">
|
||
<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" onclick="switchMode('smart_mode')" i18n="topbar.model1"></div>
|
||
<div class="mode manual-mode active" 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="weekday"></div>
|
||
<div class="date"></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="body-container">
|
||
<div class="body-image" id="body-image-container">
|
||
<img id="massage-img-box" class="massage-img-box"
|
||
src="{{ url_for('static', filename='images/smart_mode/belly.png') }}" alt="Fallback Image" />
|
||
<!-- <img id="leg-contour" class="contour-img" src="{{ url_for('static', filename='images/massage_control/contour/leg.png') }}" style="display: none;" alt="Fallback Image" />
|
||
<img id="back-contour" class="contour-img" src="{{ url_for('static', filename='images/massage_control/contour/back.png') }}" style="display: none;" alt="Fallback Image" />
|
||
<img id="belly-contour" class="contour-img" src="{{ url_for('static', filename='images/massage_control/contour/belly.png') }}" style="display: none;" alt="Fallback Image" /> -->
|
||
|
||
<div class="resize-container" id="resize-container">
|
||
<div class="center-point"></div>
|
||
<div class="rotate-line">
|
||
<div class="ojo-point-box" id="ojo-point-box">
|
||
<div class="ojo-point" id="ojo-point"></div>
|
||
<div class="ojo-text" id="ojo-text">大椎</div>
|
||
</div>
|
||
</div>
|
||
<div class="rotate-handle">
|
||
<img src="{{ url_for('static', filename='images/select_program/rotate.svg') }}" alt="rotate" />
|
||
</div>
|
||
<div class="neck-point-left">
|
||
<div class="neck-point" id="neck-point-left"></div>
|
||
<div class="neck-text" id="neck-text-left">脖子左侧</div>
|
||
</div>
|
||
<div class="neck-point-right">
|
||
<div class="neck-point" id="neck-point-right"></div>
|
||
<div class="neck-text" id="neck-text-right">脖子右侧</div>
|
||
</div>
|
||
<div class="neck-point-bottom-left">
|
||
<div class="neck-point" id="neck-point-bottom-left"></div>
|
||
</div>
|
||
<div class="neck-point-bottom-right">
|
||
<div class="neck-point" id="neck-point-bottom-right"></div>
|
||
</div>
|
||
<div class="resize-handle top-left"></div>
|
||
<div class="resize-handle top-right"></div>
|
||
<div class="resize-handle bottom-left"></div>
|
||
<div class="resize-handle bottom-right"></div>
|
||
</div>
|
||
<!-- 线条拖动容器 -->
|
||
<div class="line-container" id="line-container">
|
||
<!-- 左侧三个点 -->
|
||
<div class="line-point" id="line-point-1">
|
||
<div class="leg-text" id="leg-text-left">左臀部下沿</div>
|
||
</div>
|
||
<div class="line-point" id="line-point-2">
|
||
<div class="leg-text" id="leg-text-left">膝关节后侧</div>
|
||
</div>
|
||
<div class="line-point" id="line-point-3">
|
||
<div class="leg-text" id="leg-text-left">足外踝后方</div>
|
||
</div>
|
||
<!-- 右侧三个点 -->
|
||
<div class="line-point" id="line-point-4">
|
||
<div class="leg-text" id="leg-text-right">右臀部下沿</div>
|
||
</div>
|
||
<div class="line-point" id="line-point-5">
|
||
<div class="leg-text" id="leg-text-right">膝关节后侧</div>
|
||
</div>
|
||
<div class="line-point" id="line-point-6">
|
||
<div class="leg-text" id="leg-text-right">足外踝后方</div>
|
||
</div>
|
||
<!-- 曲率控制点 -->
|
||
<div class="curve-point" id="curve-point-1"></div>
|
||
<div class="curve-point" id="curve-point-2"></div>
|
||
<div class="curve-point" id="curve-point-3"></div>
|
||
<div class="curve-point" id="curve-point-4"></div>
|
||
<svg class="line-svg">
|
||
<!-- 左侧线段 -->
|
||
<path id="curve-segment-1" d="" fill="none" stroke="#fff" stroke-width="2"></path>
|
||
<path id="curve-segment-2" d="" fill="none" stroke="#fff" stroke-width="2"></path>
|
||
<!-- 右侧线段 -->
|
||
<path id="curve-segment-3" d="" fill="none" stroke="#fff" stroke-width="2"></path>
|
||
<path id="curve-segment-4" d="" fill="none" stroke="#fff" stroke-width="2"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<iframe id="massage-plan-visualization" class="body-image" src="{{ url_for('massage_plan_visualization') }}"
|
||
style="display: none; border: none;"></iframe>
|
||
</div>
|
||
<div class="operate-container">
|
||
<div class="function-switch">
|
||
<div class="slider"></div>
|
||
<div class="function chatbot" i18n="control.tabbar.title" wait="true"></div>
|
||
<div class="function active" i18n="control.tabbar.title2" wait="true"></div>
|
||
<div class="function plans" i18n="control.tabbar.title4" wait="true"></div>
|
||
<div class="function music" i18n="control.tabbar.title3" wait="true"></div>
|
||
</div>
|
||
<!-- ai -->
|
||
<iframe id="ai-frame" src="{{ url_for('ai_chatbot') }}" class="content-frame inactive operate-iframe"></iframe>
|
||
<!-- 按摩 -->
|
||
<div class="massage-frame operate-iframe active" id="massage-frame">
|
||
<!-- 按摩部位选择 -->
|
||
<div class="operate-panel step active" id="step1">
|
||
<div class="operate-title" i18n="control.manual.step1.title" style="height: 27px;"></div>
|
||
<div class="operate-subtitle" i18n="control.manual.step1.sub-title"></div>
|
||
<div class="operate-button">
|
||
<div class="operate-button-item" data-part="belly">
|
||
<img class="item-icon"
|
||
src="{{ url_for('static', filename='images/massage_control/bodypart/belly_normal-btn.png') }}" alt="" />
|
||
<div class="item-title" i18n="control.manual.step1.bodyPart"></div>
|
||
</div>
|
||
</div>
|
||
<div class="operate-subtitle" i18n="control.manual.step1.sub-title2"></div>
|
||
<div class="operate-button">
|
||
<div class="operate-button-item" data-part="shoulder">
|
||
<img class="item-icon"
|
||
src="{{ url_for('static', filename='images/massage_control/bodypart/shoulder_normal-btn.png') }}"
|
||
alt="" />
|
||
<div class="item-title" i18n="control.manual.step1.bodyPart2"></div>
|
||
</div>
|
||
<div class="operate-button-item" data-part="back">
|
||
<img class="item-icon"
|
||
src="{{ url_for('static', filename='images/massage_control/bodypart/back_normal-btn.png') }}" alt="" />
|
||
<div class="item-title" i18n="control.manual.step1.bodyPart3"></div>
|
||
</div>
|
||
<div class="operate-button-item" data-part="waist">
|
||
<img class="item-icon"
|
||
src="{{ url_for('static', filename='images/massage_control/bodypart/waist_normal-btn.png') }}" alt="" />
|
||
<div class="item-title" i18n="control.manual.step1.bodyPart4"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="operate-subtitle" i18n="control.manual.step1.sub-title3"></div>
|
||
<div class="operate-button">
|
||
<div class="operate-button-item" data-part="leg">
|
||
<img class="item-icon"
|
||
src="{{ url_for('static', filename='images/massage_control/bodypart/leg_normal-btn.png') }}" alt="" />
|
||
<div class="item-title" i18n="control.manual.step1.bodyPart5"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 按摩头选择 -->
|
||
<div class="operate-panel step" id="step2">
|
||
<div class="operate-title" i18n="control.manual.step2.title"></div>
|
||
<div class="header-button" id="header-button">
|
||
<div class="header-button-item" data-header="thermotherapy" id="head1" style="display: none;">
|
||
<img class="header-img"
|
||
src="{{ url_for('static', filename='images/massage_control/head/深部热疗.png') }}"></img>
|
||
<div class="header-text" i18n="control.massage.data_text" resize-font=true checkHeight=true
|
||
changeLineHeight="true" smallSize="40"></div>
|
||
</div>
|
||
<div class="header-button-item" data-header="shockwave" id="head2" style="display: none;">
|
||
<img class="header-img"
|
||
src="{{ url_for('static', filename='images/massage_control/head/点阵按摩.png') }}"></img>
|
||
<div class="header-text" i18n="control.massage.data_text2" resize-font=true checkHeight=true
|
||
changeLineHeight="true" smallSize="58"></div>
|
||
</div>
|
||
<div class="header-button-item" data-header="ball" id="head3" style="display: none;">
|
||
<img class="header-img"
|
||
src="{{ url_for('static', filename='images/massage_control/head/全能滚珠.png') }}"></img>
|
||
<div class="header-text" i18n="control.massage.data_text3" resize-font=true checkHeight=true
|
||
changeLineHeight="true" smallSize="58"></div>
|
||
</div>
|
||
<div class="header-button-item" data-header="finger" id="head4" style="display: none;">
|
||
<img class="header-img"
|
||
src="{{ url_for('static', filename='images/massage_control/head/指疗通络.png') }}"></img>
|
||
<div class="header-text" i18n="control.massage.data_text4" resize-font=true checkHeight=true
|
||
changeLineHeight="true" smallSize="58"></div>
|
||
</div>
|
||
<div class="header-button-item" data-header="roller" id="head5" style="display: none;">
|
||
<img class="header-img"
|
||
src="{{ url_for('static', filename='images/massage_control/head/滚滚刺疗.png') }}"></img>
|
||
<div class="header-text" i18n="control.massage.data_text5" resize-font=true checkHeight=true
|
||
changeLineHeight="true" smallSize="58"></div>
|
||
</div>
|
||
<div class="header-button-item" data-header="stone" id="head6" style="display: none;">
|
||
<img class="header-img"
|
||
src="{{ url_for('static', filename='images/massage_control/head/温砭舒揉.png') }}"></img>
|
||
<div class="header-text" i18n="control.massage.data_text6" resize-font=true checkHeight=true
|
||
changeLineHeight="true" smallSize="58"></div>
|
||
</div>
|
||
<div class="header-button-item" data-header="ion" id="head7" style="display: none;">
|
||
<img class="header-img"
|
||
src="{{ url_for('static', filename='images/massage_control/head/离子光灸.png') }}"></img>
|
||
<div class="header-text" i18n="control.massage.data_text7" resize-font=true checkHeight=true
|
||
changeLineHeight="true" smallSize="58"></div>
|
||
</div>
|
||
<div class="header-button-item" data-header="heat" id="head8" style="display: none;">
|
||
<img class="header-img"
|
||
src="{{ url_for('static', filename='images/massage_control/head/能量热疗.png') }}"></img>
|
||
<div class="header-text" i18n="control.massage.data_text8" resize-font=true checkHeight=true
|
||
changeLineHeight="true" smallSize="58"></div>
|
||
</div>
|
||
<div class="header-button-item" data-header="spheres" id="head9" style="display: none;">
|
||
<img class="header-img"
|
||
src="{{ url_for('static', filename='images/massage_control/head/天球滚捏.png') }}"></img>
|
||
<div class="header-text" i18n="control.massage.data_text9" resize-font=true checkHeight=true
|
||
changeLineHeight="true" smallSize="58"></div>
|
||
</div>
|
||
</div>
|
||
<div class="step-button-box">
|
||
<div class="prev step-button" id="prev2">
|
||
<img class="step-button-icon" src="{{ url_for('static', filename='images/select_program/back.png') }}"
|
||
alt="" />
|
||
<div class="step-button-text" i18n="control.manual.step2.back_btn"></div>
|
||
</div>
|
||
<div class="prev step-button" id="photo">
|
||
<img class="step-button-icon" src="{{ url_for('static', filename='images/select_program/photo.png') }}"
|
||
alt="" />
|
||
<div class="step-button-text" i18n="control.manual.step2.photo_btn"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="operate-panel step" id="step3">
|
||
<div class="operate-title" i18n="control.manual.step3.title"></div>
|
||
<div class="step-button-box">
|
||
<div class="step-button" id="acupuncture-btn">
|
||
<img class="step-button-icon"
|
||
src="{{ url_for('static', filename='images/select_program/acupuncture.png') }}" alt="" />
|
||
<div class="step-button-text" i18n="control.manual.step3.choose_btn" resize-font=true smallSize="10"
|
||
style="overflow-x: auto; max-width: 80px; text-wrap: nowrap;"></div>
|
||
</div>
|
||
<div class="radio-box">
|
||
<span i18n="control.manual.step3.radio"></span>
|
||
<div class="radio-switch">
|
||
<div class="radio-slide-toggle" style="left: 0px"></div>
|
||
</div>
|
||
<span i18n="control.manual.step3.radio2"></span>
|
||
</div>
|
||
<div class="step-input-box" id="time-input-box">
|
||
<div class="step-input-text" style="margin-right: 6px; text-align: right;"
|
||
i18n="control.manual.step3.radio_label"></div>
|
||
<button type="button" class="loop-btn" id="time-decrease-btn">-</button>
|
||
<input type="text" id="time-num" class="input-num" value="15分钟" readonly />
|
||
<button type="button" class="loop-btn" id="time-increase-btn">+</button>
|
||
</div>
|
||
|
||
<div class="step-input-box" id="loop-input-box" style="display: none;">
|
||
<div class="step-input-text" style="margin-right: 6px;" i18n="control.manual.step3.radio_label2"></div>
|
||
<button type="button" class="loop-btn" id="decrease-btn">-</button>
|
||
<input type="number" id="acupuncture-num" class="input-num" value="1" readonly />
|
||
<button type="button" class="loop-btn" id="increase-btn">+</button>
|
||
</div>
|
||
<!-- <div class="step-button" id="loop-btn">
|
||
<img class="step-button-icon" src="{{ url_for('static', filename='images/select_program/acupuncture.png') }}" alt="" />
|
||
<div class="step-button-text">循环几次</div>
|
||
</div> -->
|
||
</div>
|
||
<div class="acupuncture-fun">
|
||
<span i18n="control.manual.step5.sub-title"></span>
|
||
<span id="acupuncture-name">默认</span>
|
||
</div>
|
||
<div class="operate-title" i18n="control.manual.step3.title2" style="margin-top: 16px;"></div>
|
||
<div class="step-button-box">
|
||
<div class="prev step-button" id="re-select">
|
||
<img class="step-button-icon" src="{{ url_for('static', filename='images/select_program/back.png') }}"
|
||
alt="" />
|
||
<div class="step-button-text" i18n="control.manual.step3.re_choose_btn"></div>
|
||
</div>
|
||
<div class="prev step-button" id="re-photo">
|
||
<img class="step-button-icon" src="{{ url_for('static', filename='images/select_program/photo.png') }}"
|
||
alt="" />
|
||
<div class="step-button-text" i18n="control.manual.step3.re_photo_btn"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="operate-title" i18n="control.manual.step3.title3" style="margin-top: 16px;"></div>
|
||
<div class="step-button-box">
|
||
<div class="manual-switch">
|
||
<div class="manual-slide-toggle" style="left: 0px"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="operate-title" i18n="control.manual.step3.title4" style="margin-top: 16px;"></div>
|
||
<div class="step-button-box">
|
||
<div class="step-button" id="get-acupoint-btn">
|
||
<img class="step-button-icon" src="{{ url_for('static', filename='images/select_program/scan.png') }}"
|
||
alt="" />
|
||
<div class="step-button-text" i18n="control.manual.step3.get_acupoint_btn"></div>
|
||
</div>
|
||
<div class="step-button" id="start-btn">
|
||
<img class="step-button-icon" src="{{ url_for('static', filename='images/select_program/start.png') }}"
|
||
alt="" />
|
||
<div class="step-button-text" i18n="control.manual.step3.start_btn"></div>
|
||
</div>
|
||
<div class="pre-heat" id="pre-heat" style="display: none; ">
|
||
<!-- <span i18n="control.massage.data_text6"></span> -->
|
||
<img class="heat-hint-icon" src="{{ url_for('static', filename='images/hint/hint.png') }}" alt="">
|
||
<span i18n="control.manual.step3.pre_heat"></span>
|
||
<span id="stone-val"></span>
|
||
</div>
|
||
<div class="step-input-box" id="temp-input-box" style="display: none;">
|
||
<div class="step-input-text" style="margin-right: 6px; text-align: right; "
|
||
i18n="control.manual.step3.radio_label3"></div>
|
||
<button type="button" class="loop-btn" id="temper-decrease-btn">-</button>
|
||
<input type="text" id="temper-num" class="input-num" style="width: 20px;" readonly />
|
||
<button type="button" class="loop-btn" id="temper-increase-btn">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="operate-panel step" id="step4">
|
||
<div class="operate-title" i18n="control.manual.step4.title"></div>
|
||
<div class="acupuncture-btn" id="massage-setting-btn">
|
||
<div class="acupuncture-text" i18n="control.manual.step4.back_btn"></div>
|
||
<img class="acupuncture-icon" src="{{ url_for('static', filename='images/select_program/back.png') }}"
|
||
alt="">
|
||
</div>
|
||
<iframe id="acupuncture-iframe"></iframe>
|
||
</div>
|
||
<div class="operate-panel step" id="step5">
|
||
<div class="operate-title">
|
||
<span i18n="control.manual.step5.title"></span>
|
||
<span i18n="control.manual.step5.sub-title"></span>
|
||
<span id="massage-plan-text">默认</span>
|
||
</div>
|
||
<!-- <div class="acupuncture-btn" id="acupuncture-btn">
|
||
<div class="acupuncture-text">穴位设置</div>
|
||
<img class="acupuncture-icon" src="{{ url_for('static', filename='images/select_program/acupuncture.png') }}" alt="">
|
||
</div> -->
|
||
<div class="massage-type-container">
|
||
<div class="massage-info-item">
|
||
<div class="massage-info-part">
|
||
<div class="massage-info-bg"></div>
|
||
<img class="info-part-icon" src="" alt="" />
|
||
<div class="info-part-title"></div>
|
||
</div>
|
||
</div>
|
||
<div class="massage-info-item">
|
||
<div class="massage-info-head">
|
||
<img class="info-header-img" src="" alt="" />
|
||
<div class="info-header-text"></div>
|
||
</div>
|
||
</div>
|
||
<div class="info-long-item">
|
||
<div class="massage-info-acupoint">
|
||
<div class="info-acupoint-box">
|
||
<div class="info-acupoint-text">
|
||
<img class="info-acupoint-img"
|
||
src="{{ url_for('static', filename='images/select_program/now_acupoint.svg') }}" alt="">
|
||
<span class="info-acupoint-label" i18n="control.manual.step5.now_acu"></span>
|
||
</div>
|
||
<div class="info-acupoint-text" id="info-acupoint-text">-</div>
|
||
</div>
|
||
<div class="info-acupoint-box">
|
||
<div class="info-acupoint-text">
|
||
<img class="info-acupoint-img"
|
||
src="{{ url_for('static', filename='images/select_program/stroke.svg') }}" alt="">
|
||
<span class="info-acupoint-label" i18n="control.manual.step5.now_tec"></span>
|
||
</div>
|
||
<div class="info-acupoint-text" id="massage-type-text">-</div>
|
||
</div>
|
||
</div>
|
||
<div class="massage-info-operation">
|
||
<div class="massage-operation-btn" id="add-massage" role="button">
|
||
<img class="operation-icon" src="{{ url_for('static', filename='images/select_program/more.svg') }}"
|
||
alt="">
|
||
<span class="operation-text" i18n="control.manual.step5.add_btn"></span>
|
||
</div>
|
||
<div class="massage-operation-btn" id="skip-massage" role="button">
|
||
<img class="operation-icon" src= "{{ url_for('static', filename='images/select_program/skip.svg') }}" alt="">
|
||
<span class="operation-text" i18n="control.manual.step5.skip_btn"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="operate-title" style="margin-top: 20px;" i18n="control.massage.header_title2"></div>
|
||
<div class="massage-params">
|
||
<!-- 参数区域将根据按摩头动态生成 -->
|
||
<div class="status-container">
|
||
<div class="status-card" id="strength-card">
|
||
<div class="status-title">
|
||
<span i18n="control.massage.title4" resize-font="true" changeLineHeight="true" smallSize="30"
|
||
checkHeight="true" class="status-title-span">
|
||
</span>
|
||
<span class="common-range" id="force-range"></span>
|
||
</div>
|
||
<div class="status-content" id="force">
|
||
<span class="force-value common-value">20</span>
|
||
<span class="force-unit common-unit">N</span>
|
||
</div>
|
||
<div class="force-button common-button">
|
||
<button class="force-down-btn">
|
||
<div class="force-down common-down"></div>
|
||
</button>
|
||
<button class="force-add-btn">
|
||
<div class="force-add common-add"></div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="status-card" id="temperature-card">
|
||
<div class="status-title">
|
||
<span i18n="control.massage.title5" resize-font="true" changeLineHeight="true" smallSize="30"
|
||
checkHeight="true" class="status-title-span"></span>
|
||
<span class="common-range" id="temperature-range"></span>
|
||
</div>
|
||
<div class="status-content" id="temperature">
|
||
<span class="temperature-value common-value">1</span>
|
||
<!-- <span class="temperature-unit common-unit">°C</span> -->
|
||
</div>
|
||
<div class="temperature-button common-button">
|
||
<button class="temperature-down-btn">
|
||
<div class="temperature-down common-down"></div>
|
||
</button>
|
||
<button class="temperature-add-btn">
|
||
<div class="temperature-add common-add"></div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="status-card" id="current-card">
|
||
<div class="status-title">
|
||
<span i18n="control.massage.title6" resize-font="true" changeLineHeight="true" smallSize="30"
|
||
checkHeight="true" class="status-title-span"></span>
|
||
<span class="common-range" id="gear-range">[0~5]</span>
|
||
<!-- <span id="gear-range">[1~15]</span> -->
|
||
</div>
|
||
<div class="status-content common-no-unit" id="gear">
|
||
<span class="gear-value common-no-unit-value">1</span>
|
||
</div>
|
||
<div class="gear-button common-button">
|
||
<button class="gear-down-btn">
|
||
<div class="gear-down common-down"></div>
|
||
</button>
|
||
<button class="gear-add-btn">
|
||
<div class="gear-add common-add"></div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="status-card" id="shake-card">
|
||
<div class="status-title">
|
||
<span i18n="control.massage.title7" resize-font="true" changeLineHeight="true" smallSize="30"
|
||
checkHeight="true" class="status-title-span"></span>
|
||
<span id="shake-range" class="common-range">[0~5]</span>
|
||
</div>
|
||
<div class="status-content common-no-unit" id="shake">
|
||
<span class="shake-value common-no-unit-value">1</span>
|
||
</div>
|
||
<div class="shake-button common-button">
|
||
<button class="shake-down-btn">
|
||
<div class="shake-down common-down"></div>
|
||
</button>
|
||
<button class="shake-add-btn">
|
||
<div class="shake-add common-add"></div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="status-card" id="frequency-card" style="display: none">
|
||
<div class="status-title">
|
||
<span i18n="control.massage.title7" resize-font="true" changeLineHeight="true" smallSize="30"
|
||
checkHeight="true" class="status-title-span"></span>
|
||
<span class="common-range" id="frequency-range">[1~16]</span>
|
||
</div>
|
||
<div class="status-content common-no-unit" id="frequency">
|
||
<span class="frequency-value common-no-unit-value">1</span>
|
||
</div>
|
||
<div class="frequency-button common-button">
|
||
<button class="frequency-down-btn">
|
||
<div class="frequency-down common-down"></div>
|
||
</button>
|
||
<button class="frequency-add-btn">
|
||
<div class="frequency-add common-add"></div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="status-card" id="press-card" style="display: none">
|
||
<div class="status-title">
|
||
<span i18n="control.massage.title8" resize-font="true" changeLineHeight="true" smallSize="30"
|
||
checkHeight="true" class="status-title-span"></span>
|
||
<span id="press-range" class="common-range">[1~27]</span>
|
||
</div>
|
||
<div class="status-content common-no-unit" id="press">
|
||
<span class="press-value common-no-unit-value">1</span>
|
||
</div>
|
||
<div class="press-button common-button">
|
||
<button class="press-down-btn">
|
||
<div class="press-down common-down"></div>
|
||
</button>
|
||
<button class="press-add-btn">
|
||
<div class="press-add common-add"></div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="status-card" id="speed-card" style="display: none">
|
||
<div class="status-title">
|
||
<span i18n="control.massage.title9" resize-font="true" changeLineHeight="true" smallSize="30"
|
||
checkHeight="true" class="status-title-span"></span>
|
||
<span class="common-range" id="speed-range">[0~3]</span>
|
||
</div>
|
||
<div class="status-content common-no-unit" id="speed">
|
||
<span class="speed-value common-no-unit-value">1</span>
|
||
</div>
|
||
<div class="speed-button common-button">
|
||
<button class="speed-down-btn">
|
||
<div class="speed-down common-down"></div>
|
||
</button>
|
||
<button class="speed-add-btn">
|
||
<div class="speed-add common-add"></div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="status-card" id="direction-card" style="display: none">
|
||
<div class="status-title">
|
||
<span i18n="control.massage.title10" resize-font="true" changeLineHeight="true" smallSize="30"
|
||
checkHeight="true" class="status-title-span"></span>
|
||
</div>
|
||
<div class="status-content" id="direction">
|
||
<div class="direction-container">
|
||
<div class="common-switch">
|
||
<div class="common-slide-toggle" style="left: 40px"></div>
|
||
<!-- <div class="common-option"></div>
|
||
<div class="common-option active"></div> -->
|
||
</div>
|
||
<span class="direction-value" i18n="control.massage.title10_txt" resize-font="true"
|
||
changeLineHeight="true" smallSize="40" checkHeight="true"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="status-card" id="high-card" style="display: none">
|
||
<div class="status-title">
|
||
<span i18n="control.massage.title11" resize-font="true" changeLineHeight="true" smallSize="30"
|
||
checkHeight="true" class="status-title-span">
|
||
</span>
|
||
<span class="common-range" id="high-range">[4~15]CM</span>
|
||
</div>
|
||
<div class="status-content common-no-unit" id="high">
|
||
<span class="high-value common-no-unit-value">6</span>
|
||
</div>
|
||
<div class="high-button common-button">
|
||
<button class="high-down-btn">
|
||
<div class="high-down common-down"></div>
|
||
</button>
|
||
<button class="high-add-btn">
|
||
<div class="high-add common-add"></div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="button-container">
|
||
<div class="control-button">
|
||
<div class="pause-btn-box">
|
||
<button class="pause" id="pause">
|
||
<img class="pause-icon" id="pause-icon" src="/static/images/select_program/pause.png" alt="">
|
||
<div class="progress-num"></div>
|
||
</button>
|
||
<div class="progress-bar"></div>
|
||
</div>
|
||
<button class="stop" id="stop">
|
||
<div i18n="control.massage.stop_btn"></div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="step-status">
|
||
<div class="step-box" id="step-box">
|
||
<div class="step-item active">
|
||
<div class="step-subtitle" id="title1"></div>
|
||
</div>
|
||
<div class="step-arrow">
|
||
<img src="/static/images/select_program/arrow.svg" alt="">
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-subtitle" id="title2"></div>
|
||
</div>
|
||
<div class="step-arrow">
|
||
<img src="/static/images/select_program/arrow.svg" alt="">
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-subtitle" id="title3"></div>
|
||
</div>
|
||
<div class="step-arrow">
|
||
<img src="/static/images/select_program/arrow.svg" alt="">
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-subtitle" id="title4" i18n="control.massage.start_btn"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 疗程 -->
|
||
<iframe id="plans-frame" src="{{ url_for('massage_plans') }}"
|
||
class="content-frame inactive operate-iframe"></iframe>
|
||
<!-- 音乐 -->
|
||
<iframe id="music-frame" src="{{ url_for('music') }}" class="content-frame inactive operate-iframe"></iframe>
|
||
</div>
|
||
</div>
|
||
|
||
<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/base.js') }}?v={{ time }}"></script>
|
||
<script src="{{ url_for('static', filename='js/common.js') }}?v={{ time }}"></script>
|
||
<script src="{{ url_for('static', filename='js/interact.min.js') }}"></script>
|
||
|
||
<script src="{{ url_for('static', filename='js/select_program.js') }}?v={{ time }}"></script>
|
||
<script src="{{ url_for('static', filename='js/anime.min.js') }}"></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/license_module.js') }}"></script>
|
||
<script src="{{ url_for('static', filename='js/self_hint.js') }}?v={{ time }}"></script>
|
||
|
||
<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"),
|
||
plans: document.getElementById("plans-frame"),
|
||
music: document.getElementById("music-frame"),
|
||
};
|
||
|
||
// add-code
|
||
let activeIndex = 1; // 默认激活状态
|
||
// let activeIndex = 0; // 默认激活状态
|
||
let iframeList = [iframes.ai, iframes.massage, iframes.plans, iframes.music];
|
||
|
||
// 初始时将滑块定位到第一个激活的元素
|
||
// const initialSliderPosition = `calc(100% / 3 * ${activeIndex})`;
|
||
|
||
// // 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";
|
||
}, 1000); // 等待翻译完成
|
||
|
||
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");
|
||
|
||
// 处理body-image和massage-plan-visualization的显示/隐藏
|
||
const bodyImageContainer = document.getElementById("body-image-container");
|
||
const massagePlanVisualization = document.getElementById("massage-plan-visualization");
|
||
|
||
if (index === 2) { // 疗程界面
|
||
// 隐藏body-image，显示massage-plan-visualization
|
||
bodyImageContainer.style.display = "none";
|
||
massagePlanVisualization.style.display = "block";
|
||
} else {
|
||
// 显示body-image，隐藏massage-plan-visualization
|
||
bodyImageContainer.style.display = "block";
|
||
massagePlanVisualization.style.display = "none";
|
||
}
|
||
|
||
activeIndex = index;
|
||
}
|
||
|
||
if (index === 1 && nowStep === 4) {
|
||
const acupointFrame = document.getElementById('acupuncture-iframe').contentWindow;
|
||
acupointFrame.fetchMassagePlans();
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |