Skip to content

fix: euler、gauss、mindspore年报登录背景更换，交互统一 #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 26, 2024
Merged

fix: euler、gauss、mindspore年报登录背景更换，交互统一 #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
310 changes: 164 additions & 146 deletions pkg/app/pagewriter/login/euler-en.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,165 +1,183 @@
{{define "sign_in.html"}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>openEuler</title>
<style>
* {
padding: 0;
margin: 0;
}

body {
background: #002FA7;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>openEuler</title>
<style>
* {
padding: 0;
margin: 0;
}

.wrap {
height: 100vh;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/euler_pc.jpg) no-repeat center/cover;
padding: 0 80px;
}
body {
background: #002fa7;
}

.wrap .box {
margin-top: 30vh;
display: flex;
align-items: center;
flex-direction: column;
}
.wrap {
height: 100vh;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/euler_pc.jpg)
no-repeat center/cover;
padding: 0 80px;
}

.wrap .button {
width: 300px;
line-height: 58px;
border: 0 none;
background: #002FA7;
box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.11);
border-radius: 8px;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
.wrap .box {
margin-top: 30vh;
display: flex;
align-items: center;
flex-direction: column;
}

.wrap .label {
font-size: 14px;
color: #fff;
margin-top: 30px;
display: flex;
align-items: center;
}
.wrap .button {
padding: 12px 32px;
font-size: 16px;
line-height: 24px;
border: 0 none;
background: #2a489e;
border-radius: 26px;
text-align: center;
color: #fff;
font-weight: bold;
cursor: pointer;
}

.wrap .label {
font-size: 14px;
color: #fff;
margin-top: 30px;
display: flex;
align-items: center;
}

.checkbox {
cursor: pointer;
}

.wrap .label a {
color: #fff;
display: inline-block;
text-decoration: none;
}
.wrap .label a:hover {
color: #002FA7;
}
.wrap .label a {
color: #fff;
display: inline-block;
text-decoration: none;
}
.wrap .label a:hover {
color: #002fa7;
}

.wrap .label .info {
padding-left: 10px;
}
.wrap .label .info p{
display: none;
}
.wrap .label .info {
padding-left: 10px;
}
.wrap .label .info p {
display: none;
}

.wrap .not-allowed {
cursor: not-allowed;
color: white;
background: grey;
}
.wrap .not-allowed {
cursor: not-allowed;
color: white;
background: grey;
}

@media (max-width: 768px) {
.wrap {
padding: 0;
box-sizing: border-box;
background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/euler_h5.jpg) no-repeat left bottom /cover;
}
.wrap .box {
margin-top: 6vh;
}
.wrap .box form,
.wrap .button{
width: 100%;
}

.wrap .label {
font-size: 14px;
color: #fff;
margin-top: 60px;
}
}
@media (max-width: 768px) {
.wrap {
padding: 0;
box-sizing: border-box;
background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/euler_h5.jpg)
no-repeat left bottom / cover;
}
.wrap .box {
margin-top: 6vh;
}
.wrap .box form,
.wrap .button {
width: 100%;
}

</style>
</head>
<body>
.wrap .label {
font-size: 14px;
color: #fff;
margin-top: 60px;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<form method="GET" action="{{.ProxyPrefix}}/start">
<input type="hidden" name="rd" value="{{.Redirect}}">
<button type="submit" class="button not-allowed block is-primary">Sign in with {{.ProviderName}}</button>
</form>
<div class="label">
<input class="checkbox" type="checkbox">
<div class="info">
<p class="lang-zh">我已阅读并同意<a href="/agreement_ch.html" target="_blank">《用户授权协议》</a>和社区<a
href='https://www.openeuler.org/zh/other/privacy/' target="_blank">《隐私政策》</a>
<div class="box">
<form method="GET" action="{{.ProxyPrefix}}/start">
<input type="hidden" name="rd" value="{{.Redirect}}" />
<button type="submit" class="button not-allowed block is-primary">
Sign in with {{.ProviderName}}
</button>
</form>
<div class="label">
<input class="checkbox" type="checkbox" />
<div class="info">
<p class="lang-zh">
我已阅读并同意<a href="/agreement_ch.html" target="_blank"
>《用户授权协议》</a
>和社区<a
href="https://www.openeuler.org/zh/other/privacy/"
target="_blank"
>《隐私政策》</a
>
</p>
<p class="lang-en">I have read and agree to the <a href="/agreement_en.html" target="_blank">User
Agreement</a> and the <a href='https://www.openeuler.org/en/other/privacy/' target="_blank">Privacy Policy</a>
</p>
</div>
</div>
<p class="lang-en">
I have read and agree to the
<a href="/agreement_en.html" target="_blank">User Agreement</a>
and the
<a
href="https://www.openeuler.org/en/other/privacy/"
target="_blank"
>Privacy Policy</a
>
</p>
</div>
</div>
</div>
</div>
<script>
let checkbox = document.querySelector('.checkbox');
let btn = document.querySelector('.button');
checkbox.addEventListener('click',function() {
checkbox.checked ? btn.classList.remove('not-allowed') : btn.classList.add('not-allowed')
})
btn.addEventListener('click',function() {
checkbox.checked ? '' : event.preventDefault()
})
if (window.location.hash) {
(function () {
var inputs = document.getElementsByName('rd');
for (var i = 0; i < inputs.length; i++) {
// Add hash, but make sure it is only added once
var idx = inputs[i].value.indexOf('#');
if (idx >= 0) {
// Remove existing hash from URL
inputs[i].value = inputs[i].value.substr(0, idx);
}
inputs[i].value += window.location.hash;
}
})();
}

// 根据中英文显示文案
let lang = 'zh-CN';
if(window.location.pathname.includes('en')){
document.querySelector('.lang-en').style.display='block';
document.querySelector('.lang-zh').remove();
lang = 'en';
}else{
document.querySelector('.lang-zh').style.display='block';
document.querySelector('.lang-en').remove();
lang = 'zh-CN';
}
document.documentElement.setAttribute('lang',lang)
let checkbox = document.querySelector(".checkbox");
let btn = document.querySelector(".button");
checkbox.addEventListener("click", function () {
checkbox.checked
? btn.classList.remove("not-allowed")
: btn.classList.add("not-allowed");
});
btn.addEventListener("click", function () {
checkbox.checked ? "" : event.preventDefault();
});
if (window.location.hash) {
(function () {
var inputs = document.getElementsByName("rd");
for (var i = 0; i < inputs.length; i++) {
// Add hash, but make sure it is only added once
var idx = inputs[i].value.indexOf("#");
if (idx >= 0) {
// Remove existing hash from URL
inputs[i].value = inputs[i].value.substr(0, idx);
}
inputs[i].value += window.location.hash;
}
})();
}

// 根据中英文显示文案
let lang = "zh-CN";
if (window.location.pathname.includes("en")) {
document.querySelector(".lang-en").style.display = "block";
document.querySelector(".lang-zh").remove();
lang = "en";
} else {
document.querySelector(".lang-zh").style.display = "block";
document.querySelector(".lang-en").remove();
lang = "zh-CN";
}
document.documentElement.setAttribute("lang", lang);
</script>
</body>
</html>
{{end}}
</body>
</html>
{{end}}
15 changes: 9 additions & 6 deletions pkg/app/pagewriter/login/euler.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,16 @@
}

.wrap .button {
width: 300px;
line-height: 58px;
padding: 12px 32px;
font-size: 16px;
line-height: 24px;
border: 0 none;
background: #002fa7;
box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.11);
border-radius: 8px;
background: #2a489e;
border-radius: 26px;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}

.wrap .label {
Expand All @@ -53,6 +53,9 @@
margin-top: 30px;
display: flex;
align-items: center;
}

.checkbox {
cursor: pointer;
}

Expand Down
Loading
Loading