Files
QIDIStudio/resources/web/homepage3/login.html
2026-01-23 09:23:33 +08:00

254 lines
7.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录指南</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
line-height: 1.8;
color: #FFFFFF;
margin: 40px;
padding: 0;
background: white;
min-height: 100vh;
background-image: url('img/loginBackground.png');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}
.content {
max-width: 1000px;
margin: 0;
width: 100%;
}
h1 {
font-weight: normal;
font-size: 55px;
margin-bottom: 50px;
color: #FFFFFF;
text-align: left;
}
.intro {
margin-bottom: 80px;
}
.intro p {
font-size: 20px;
color: #FFFFFF;
line-height: 1.8;
margin: 0;
padding: 0;
}
.button-container {
display: flex;
justify-content: flex-start;
gap: 20px;
margin: 80px 0;
}
.action-button {
background-color: #4459FB;
color: white;
border: none;
padding: 10px 14px 0px;
border-radius: 6px;
font-size: 20px;
cursor: pointer;
min-width: 180px;
height: 60px;
letter-spacing: 1px;
}
.action-button-secondary {
background-color: #4459FB;
color: white;
border: none;
padding: 14px 14px;
border-radius: 6px;
font-size: 20px;
cursor: pointer;
min-width: 180px;
height: 60px;
letter-spacing: 1px;
}
.arrow-icon {
margin-left: 10px;
margin-right: 0px;
padding: 0px;
width: 35px;
height: 35px;
vertical-align: middle;
display: inline-block;
padding: 0;
margin-bottom: 8px;
}
.secondary-arrow-icon {
margin-left: 40px;
margin-right: 0px;
padding: 0px;
width: 35px;
height: 35px;
vertical-align: middle;
display: inline-block;
padding: 0;
margin-bottom: 8px;
}
.more-button {
background-color: transparent;
border: 1px solid white;
color: white;
border-radius: 2px;
cursor: pointer;
}
.faq-section {
margin-top: 20px;
}
.faq-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 0px;
color: #FFFFFF;
}
.faq-item {
margin-bottom: 0px;
}
.faq-question {
font-weight: bold;
margin-bottom: 0px;
font-size: 16px;
color: #FFFFFF;
}
.faq-answer {
font-size: 14px;
color: #FFFFFF;
line-height: 1.6;
margin-bottom: 0px;
}
.support-section {
margin-top: 0px;
color: #FFFFFF;
}
.support-title {
font-weight: bold;
margin-bottom: 0px;
font-size: 16px;
color: #FFFFFF;
}
.support-link {
color: #007bff;
text-decoration: none;
font-size: 14px;
display: inline-block;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
}
.footer {
margin-top: 0px;
text-align: left;
color: #FFFFFF;
font-size: 12px;
}
</style>
</head>
<body>
<div class="content">
<h1>登录指南</h1>
<div class="intro">
<p>通过 QIDI MAKER 或 QIDI LINK 注册并登录账号后,即可将你的 QIDI </p>
<p>STUDIO 软件绑定至账户。</p>
<p>完成绑定后QIDI STUDIO 切片软件可通过 QIDI 云服务器、远程控制并管理
<p>当前全部已登录该用户账号的打印机,实现远程发送打印任务、状态同步与
<p>设备管理。</p>
</div>
<div class="button-container">
<button class="action-button" onclick="buttonClicked(1)" >
<span>QIDI MAKER</span>
<img src="img/arrow-right.png" class = "arrow-icon"/>
</button>
<button class="action-button-secondary" onclick="buttonClicked(2)">
QIDI LINK
<img src="img/arrow-right.png" class = "secondary-arrow-icon"/>
</button>
</div>
<div class="detail-button">
<button class="more-button" id="more" >
了解更多
</button>
</div>
<div class = "detail-text" id = "text-detail">
<div class="faq-section" id="faq">
<div class="faq-item">
<div class="faq-question">QIDI MAKER与QIDI LINK的区别</div>
<div class="faq-answer">QIDI MAKER APP是一个面向用户的一站式3D打印平台致力于为用户提供便<br>
捷、流畅且愉悦的3D打印体验。目前QIDI MAKER暂时仅兼容QIDI Max4<br>
后续将逐步支持更多QIDI 3D打印机型号。</div>
</div>
<div class="faq-item">
<div class="faq-question">账号无法登录?</div>
<div class="faq-answer">如遇到任何问题请随时联系QIDI官方售后支持</div>
</div>
</div>
<div class="support-section">
<div class="support-title">官方售后支持</div>
<div>
<a href="https://wiki.qidi3d.com/en/AfterSalesContact" target="_blank" class="support-link">
https://wiki.qidi3d.com/en/AfterSalesContact
</a>
</div>
</div>
</div>
</div>
<script>
function buttonClicked(index) {
if (window.wx && wx.postMessage) {
wx.postMessage(JSON.stringify({
index: index
}));
}
}
window.addEventListener('DOMContentLoaded', function() {
document.getElementById('text-detail').hidden = true;
});
document.getElementById('more').addEventListener('click', function() {
if (this.dataset.clicked) {
this.style.color = 'white';
this.style.borderColor = 'white';
document.getElementById('text-detail').hidden = true;
delete this.dataset.clicked;
} else {
this.style.color = 'blue';
this.style.borderColor = 'blue';
this.dataset.clicked = 'true';
document.getElementById('text-detail').hidden = false;
}
});
</script>
</body>
</html>