This week, I started to build the Web UI, I wrote HTML and used the Flask framework of Python to publish this website on a local area network. This week, I just finished a bit of this web and will add more functions in the future.
Here is my code:
home.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动测视力系统</title>
<link rel="stylesheet" href="../static/home.css">
</head>
<body>
<button class="language-switcher" id="languageSwitcher" onclick="toggleLanguage()">中文</button>
<button class="about-button" id="aboutButton" onclick="goToAboutPage()">关于此项目</button>
<div class="container">
<h1 id="title">欢迎使用自动测视力系统</h1>
<p id="description">本系统将帮助您检测视力，提供专业的测试方法和建议。</p>
<button class="btn" id="startButton">开始测试</button>
</div>
<script>
let isChinese = true; // 默认语言为中文
// 切换语言函数
function toggleLanguage() {
isChinese = !isChinese;
const title = document.getElementById("title");
const description = document.getElementById("description");
const startButton = document.getElementById("startButton");
const languageSwitcher = document.getElementById("languageSwitcher");
const aboutButton = document.getElementById("aboutButton");
// 添加旋转动画类
languageSwitcher.classList.add('animate');
aboutButton.classList.add('animate');
// 动画结束后移除旋转动画类，确保动画只触发一次
setTimeout(() => {
languageSwitcher.classList.remove('animate');
aboutButton.classList.remove('animate');
}, 500); // 旋转动画持续时间是 500ms
if (isChinese) {
title.textContent = "欢迎使用自动测视力系统";
description.textContent = "本系统使用计算机视觉算法来自动测量视力";
startButton.textContent = "开始测试";
languageSwitcher.textContent = "中文";
aboutButton.textContent = "关于此项目";
} else {
title.textContent = "Welcome to the Automated Vision Test System";
description.textContent = "This system uses computer vision algorithm to measure vision automatically";
startButton.textContent = "Start Test";
languageSwitcher.textContent = "English";
aboutButton.textContent = "About This Project"; // 英文界面下的文本
}
}
// 跳转到关于页面，并传递当前语言信息
function goToAboutPage() {
const url = isChinese ? "/about?lang=zh" : "/about?lang=en";
window.location.href = url;
}
</script>
</body>
</html>
about.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关于此项目</title>
<link rel="stylesheet" href="../static/home.css">
</head>
<body>
<div class="container">
<h1 id="title">关于此项目</h1>
<p id="description">本系统由宁波赫德KAINGMING班的Jackson搭建</p>
<p id="moreInfo">该项目使用计算机视觉算法，来帮助我们的用户进行大规模的视力筛查</p>
<button class="btn" id="backButton" onclick="goBack()">返回首页</button>
</div>
<script>
// 获取 URL 中的语言参数
const urlParams = new URLSearchParams(window.location.search);
const lang = urlParams.get('lang');
// 切换语言
function switchLanguage() {
const title = document.getElementById("title");
const description = document.getElementById("description");
const moreInfo = document.getElementById("moreInfo");
const backButton = document.getElementById("backButton");
if (lang === 'en') {
title.textContent = "About This Project";
description.textContent = "This system was built by Jackson from HDNB KAINGMING class";
moreInfo.textContent = "This project uses computer vision algorithms to help our users conduct large-scale vision screening";
backButton.textContent = "Back to Home";
} else {
title.textContent = "关于此项目";
description.textContent = "本系统由宁波赫德KAINGMING班的Jackson搭建";
moreInfo.textContent = "该项目使用计算机视觉算法，来帮助我们的用户进行大规模的视力筛查";
backButton.textContent = "返回首页";
}
}
// 页面加载时切换语言
window.onload = switchLanguage;
// 返回首页函数
function goBack() {
const url = lang === 'en' ? "/?lang=en" : "/?lang=zh";
window.location.href = url;
}
</script>
</body>
</html>
home.css
/* 通用样式 */
body,
html {
height: 100%;
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
background: #f2f2f2;
overflow: hidden;
}
.container {
text-align: center;
background: #fff;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
padding: 50px 30px;
width: 80%;
max-width: 500px;
animation: fadeIn 2s ease-in-out;
}
/* 标题样式 */
h1 {
font-size: 36px;
color: #4CAF50;
animation: slideInFromTop 1s ease-out;
}
/* 动画效果：从上方滑入 */
@keyframes slideInFromTop {
0% {
transform: translateY(-50px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* 动画效果：淡入 */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* 按钮样式 */
.btn {
background-color: #4CAF50;
color: white;
border: none;
padding: 15px 30px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #45a049;
}
/* 按钮浮动动画 */
.btn:hover {
animation: bounce 0.5s infinite alternate;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
/* 语言切换按钮和关于按钮样式 */
.language-switcher,
.about-button {
position: absolute;
top: 20px;
background-color: #fff;
border: 1px solid #ccc;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease;
}
/* 语言切换按钮点击时的动画效果 */
.language-switcher:active,
.about-button:active {
transform: scale(0.95);
background-color: #f0f0f0;
}
/* 按钮旋转的动画效果 */
@keyframes rotateEffect {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.language-switcher.animate,
.about-button.animate {
animation: rotateEffect 0.5s ease-in-out;
}
/* 设置按钮的具体位置 */
.language-switcher {
right: 150px;
/* 调整间距，增加按钮之间的距离 */
}
.about-button {
right: 20px;
}
webUI.py
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
# 首页路由
@app.route('/')
def home():
lang = request.args.get('lang', 'zh') # 获取URL中的语言参数，默认为中文
return render_template('home.html', lang=lang)
# 关于页面路由
@app.route('/about')
def about():
lang = request.args.get('lang', 'zh') # 获取URL中的语言参数，默认为中文
return render_template('about.html', lang=lang)
if __name__ == '__main__':
# 启动Flask服务并监听所有可用的IP地址，这样在局域网中其他设备可以访问
app.run(host='0.0.0.0', port=5000)
Now, I can access this website on the school LAN, have a look😄