Files
QIDIStudio/resources/web/homepage3/login.html
2026-01-23 11:55:27 +08:00

278 lines
8.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../include/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../include/globalapi.js"></script>
<script type="text/javascript" src="../data/text.js"></script>
<title class='trans'>Login Guide</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
line-height: 1.8;
color: #FFFFFF;
margin-top: 0px;
margin-left : 45px;
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: 1600px;
margin: 0;
width: 100%;
}
h1 {
font-weight: 300;
font-size: 79px;
margin-bottom: 42px;
margin-top: 20px;
color: #FFFFFF;
text-align: left;
}
.intro {
margin-bottom: 138px;
}
.intro p {
font-size: 24px;
color: #FFFFFF;
line-height: 1.43;
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: 8px;
font-size: 30px;
cursor: pointer;
min-width: 200px;
height: 78px;
width: 295px;
letter-spacing: 1px;
}
.action-button-secondary {
background-color: #4459FB;
color: white;
border: none;
padding: 16px 14px 10px 18px;
border-radius: 8px;
font-size: 30px;
cursor: pointer;
min-width: 180px;
height: 78px;
width: 300px;
letter-spacing: 1px;
margin-left : 25px;
}
.arrow-icon {
margin-left: 13px;
margin-right: 0px;
padding: 0px;
width: 48px;
height: 48px;
vertical-align: middle;
display: inline-block;
padding: 0;
margin-bottom: 8px;
}
.secondary-arrow-icon {
margin-left: 60px;
margin-right: 0px;
padding: 0px;
width: 48px;
height: 48px;
vertical-align: middle;
display: inline-block;
padding: 0;
margin-bottom: 8px;
}
.more-button {
background-color: transparent;
border: 1px solid white;
color: white;
font-size: 18px;
height: 30px;
width: 105px;
border-radius: 5px;
cursor: pointer;
margin-top: 60px;
font-weight: 550;
}
.faq-section {
margin-top: 40px;
}
.faq-title {
font-size: 18px;
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-question2 {
font-weight: 900;
margin-bottom: 0px;
font-size: 17px;
color: #FFFFFF;
}
.answer {
margin-bottom: 15px;
}
.faq-answer p {
font-size: 16px;
color: #FFFFFF;
line-height: 1.6;
margin-bottom: 0px;
margin: 0;
padding: 0;
}
.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: 16px;
display: inline-block;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
text-decoration: underline;
}
.footer {
margin-top: 0px;
text-align: left;
color: #FFFFFF;
font-size: 12px;
}
</style>
</head>
<body>
<div class="content">
<h1 class="trans" tid="t204">Login Guide</h1>
<div class="intro" >
<p class="trans" tid="t205">After registering and logging in with QIDI MAKER or QIDI LINK account, you can bind your QIDI STUDIO software to your account.</p>
<p class='trans' tid="t206">After the binding is completed, the QIDI STUDIO slicing software can remotely control and manage the pre-printing machine through the QIDI cloud server, enabling the remote sending</p>
<p class='trans' tid="t207"> of print jobs, status synchronization, and device management.</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 trans" id="more" tid="t208">
More
</button>
</div>
<div class = "detail-text" id = "text-detail">
<div class="faq-section" id="faq">
<div class="faq-item">
<div class="faq-question trans" tid="t209">What is the difference between QIDI MAKER and QIDI LINK ?</div>
<div class="faq-answer">
<p class="trans" tid="t210">QIDI MAKER is a comprehensive upgrade of QIDI LINK, which can better adapt to QIDI 3D printers, providing </p>
<p class="trans" tid="t211">more stable and faster connection as well as richer functions and support.</p>
<p class="trans" tid="t212">QIDI MAKER will gradually support more models of QIDI 3D printers.</p>
</div>
</div>
<div class="faq-item">
<div class="faq-question2 trans" tid="t213">The account cannot be logged in?</div>
<div class="faq-answer trans" tid="t214">If you encounter any problems, please feel free to contact the official after-sales support of QIDI at any time:</div>
</div>
</div>
<div class="support-section">
<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() {
TranslatePage();
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>