topuser
/
koa3-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

更新页面布局和样式，新增作品展示组件，优化登录页面结构和样式，整合粒子特效和GSAP动画

pure
谢亚昕 2 months ago
parent
46abe373d8
commit
7376d9e640
6 changed files with 155 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/middlewares/install.js
  2. 28
      src/views/page/extra/about.pug
  3. 22
      src/views/page/extra/style.css
  4. 52
      src/views/page/index/index.pug
  5. 97
      src/views/page/login/index.pug
  6. 22
      src/views/page/login/style.css

2
src/middlewares/install.js
View File

@ -75,6 +75,8 @@ export default async app => {
"'unsafe-eval'",
"https://cdnjs.cloudflare.com",
"https://cdn.jsdelivr.net",
"https://unpkg.co",
"https://assets.codepen.io",
],
"img-src": ["'self'", "data:", "https://bpic.588ku.com", "https://user-images.githubusercontent.com"],
},

28
src/views/page/extra/about.pug
View File

@ -1,7 +1,25 @@
extends /layouts/empty.pug
extends /layouts/root.pug
block pageHead
block $$head
style
include ./style.css
block pageContent
.container.my-5
include /htmx/markdown/index.pug
block $$content
.page-layout.bg-gray-50
navbar
//- .placeholder(class="h-[75px] w-full opacity-0")
.fixed.top-0.left-0.right-0.z-10(class="h-[75px]")
.container.h-full
a.h-full.flex.items-center.float-left.text-2xl.font-bold(href="/") 烟霞渡
canvas#background.absolute.block.top-0.left-0.z-0
.container.relative(class="mt-[75px] pt-10")
include /htmx/markdown/index.pug
block $$scripts
+js("https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js")
script.
Particles.init({
selector: '#background',
maxParticles: 350,
});

22
src/views/page/extra/style.css
View File

@ -0,0 +1,22 @@
.page-layout {
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
position: relative;
}
.container {
max-width: 1226px;
margin-right: auto;
margin-left: auto;
/* padding-left: 20px;
padding-right: 20px; */
}
@media (max-width: 640px) {
.container {
padding-left: 10px;
padding-right: 10px;
}
}

52
src/views/page/index/index.pug
View File

@ -4,6 +4,16 @@ block $$head
style
include ./style.css
mixin Project()
.text-2xl.font-bold.mb-6.text-center 作品
.grid.grid-cols-1.gap-6(class="md:grid-cols-2 lg:grid-cols-3")
.p-3.flex.gap-4
img(src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650", alt="", class="w-20 h-20 shadow rounded-[50%] object-cover")
.flex.justify-center.flex-col
a.font-bold.text-lg.mb-2(href="/") 灵巧代码
p.text-gray-600.line-clamp-2(style="min-height: 2em") 用electron开发
//- .text-center.text-sm.my-6.p-2(class) 查看更多
block $$content
.page-layout.bg-gray-50
navbar
@ -14,38 +24,24 @@ block $$content
//- .float-left.h-full.flex(class="ml-[100px]")
//- a.flex.items-center.px-5(href="/") 关于
.float-right.h-full.flex
a.flex.items-center.px-5(href="/login") 登录
if !user
a.flex.items-center.px-5(href="/login") 登录
else
a.flex.items-center.px-5.cursor-pointer(hx-post="/logout") 退出
a.flex.items-center.px-5.cursor-pointer 后台
a.flex.items-center.px-5(href="/profile") 欢迎您，#{user.username}
canvas#background.absolute.block.top-0.left-0.z-0
.min-h-screen.relative
.container
div(class="mt-[75px] p-[40px] h-[350px] flex justify-center items-center text-xl" style="line-height: 2.1;")
.typed(style="letter-spacing: 0.2em;")
.text-2xl.font-bold.mb-6.ml-3.text-center 作品
.grid.grid-cols-1.gap-6(class="md:grid-cols-2 lg:grid-cols-3")
.p-3.flex.gap-4
img(src="https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650", alt="", class="w-20 h-20 shadow rounded-[50%] object-cover")
.flex.justify-center.flex-col
a.font-bold.text-lg.mb-2(href="/") 灵巧代码
p.text-gray-600.line-clamp-2(style="min-height: 2em") 管理文本
.text-center.text-sm.my-6.p-2(class) 查看更多
.container(class="mt-[75px] pt-10")
+Project()
include /htmx/footer/index.pug
block $$scripts
+js("https://cdn.jsdelivr.net/npm/typed.js@2.0.12")
+js("https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js")
+js("https://unpkg.co/gsap@3/dist/gsap.min.js")
+js("https://assets.codepen.io/16327/SplitText3-beta.min.js?b=43")
script.
window.onload= function() {
Particles.init({
selector: '#background',
maxParticles: 350,
});
var options = {
strings: [`烟锁长堤柳色新，<br>霞映归舟渡水滨。<br>过客停桡寻旧梦，<br>一川风月正宜人。`],
typeSpeed: 80,
shuffle: true,
showCursor: false,
};
var typed = new Typed('.typed', options);
};
Particles.init({
selector: '#background',
maxParticles: 350,
});

97
src/views/page/login/index.pug
View File

@ -1,42 +1,69 @@
extends /layouts/empty.pug
extends /layouts/root.pug
block pageHead
//- style.
//- body {
//- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
//- min-height: 100vh;
//- }
block $$head
style
include ./style.css
block pageContent
.h-full(class="sm:px-6 lg:px-8")
.container.h-full.flex.items-center.justify-end.px-4
.max-w-md.w-full.space-y-8
.bg-white.py-8.px-4.shadow-xl.rounded-2xl(class="sm:px-10")
.text-center.mb-8
h2.text-3xl.font-bold.text-gray-900 欢迎回来
p.text-gray-600.mt-2 请登录您的账户
form.space-y-6(hx-post="/login")
include _ui/username.pug
include _ui/password.pug
.flex.items-center.justify-between
.flex.items-center
//- input#remember-me.h-4.w-4.text-blue-600.border-gray-300.rounded(type="checkbox" class="focus:ring-blue-500")
//- label.ml-2.block.text-sm.text-gray-900(for="remember-me") 记住我
.text-sm
a.font-medium.text-blue-600(href="#" class="hover:text-blue-500") 忘记密码？
div
button.group.relative.w-full.flex.justify-center.py-3.px-4.border.border-transparent.text-sm.font-medium.rounded-md.text-white.bg-blue-600(type="submit" class="hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out")
span.absolute.left-0.inset-y-0.flex.items-center.pl-3
//- svg.h-5.w-5.text-blue-500(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="group-hover:text-blue-400")
//- path(fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd")
span 登录
.text-center
p.text-sm.text-gray-600
| 还没有账户？
a.font-medium.text-blue-600(href="/register" class="hover:text-blue-500") 立即注册
block pageScripts
block $$content
.page-layout.bg-gray-50
navbar
//- .placeholder(class="h-[75px] w-full opacity-0")
.fixed.top-0.left-0.right-0.z-10(class="h-[75px]")
.container.h-full
a.h-full.flex.items-center.float-left.text-2xl.font-bold(href="/") 烟霞渡
canvas#background.absolute.block.top-0.left-0.z-0
.h-full.relative(class="sm:px-6 lg:px-8")
.container.h-full.flex.items-center
.flex-1.h-full.flex.items-center.justify-center
h1.text-4xl.font-bold#chars
div 烟霞渡！
.mt-5 欢迎您的到来
.flex-1.px-4.max-w-md
.w-full.space-y-8
.py-8.px-4(class="sm:px-10")
.text-center.mb-8
form.space-y-6(hx-post="/login")
include _ui/username.pug
include _ui/password.pug
.flex.items-center.justify-between
.flex.items-center
//- input#remember-me.h-4.w-4.text-blue-600.border-gray-300.rounded(type="checkbox" class="focus:ring-blue-500")
//- label.ml-2.block.text-sm.text-gray-900(for="remember-me") 记住我
.text-sm
a.font-medium.text-blue-600(href="#" class="hover:text-blue-500") 忘记密码？
div
button.group.relative.w-full.flex.justify-center.py-3.px-4.border.border-transparent.text-sm.font-medium.rounded-md.text-white.bg-blue-600(type="submit" class="hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out")
span.absolute.left-0.inset-y-0.flex.items-center.pl-3
//- svg.h-5.w-5.text-blue-500(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="group-hover:text-blue-400")
//- path(fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd")
span 登录
.text-center
p.text-sm.text-gray-600
| 还没有账户？
a.font-medium.text-blue-600(href="/register" class="hover:text-blue-500") 立即注册
block $$scripts
+js("https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js")
+js("https://unpkg.co/gsap@3/dist/gsap.min.js")
+js("https://assets.codepen.io/16327/SplitText3-beta.min.js?b=43")
script.
Particles.init({
selector: '#background',
maxParticles: 350,
});
gsap.registerPlugin(SplitText);
let split, animation;
split = SplitText.create("#chars", {type:"chars"});
animation && animation.revert();
animation = gsap.from(split.chars, {
x: 150,
opacity: 0,
duration: 1.7,
ease: "power4",
stagger: 0.04
})
document.addEventListener('htmx:error', function(evt) {
if(evt.detail.elt instanceof HTMLElement) {
if(evt.detail.elt.tagName === 'FORM' && evt.detail.xhr) {

22
src/views/page/login/style.css
View File

@ -0,0 +1,22 @@
.page-layout {
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
position: relative;
}
.container {
max-width: 1226px;
margin-right: auto;
margin-left: auto;
/* padding-left: 20px;
padding-right: 20px; */
}
@media (max-width: 640px) {
.container {
padding-left: 10px;
padding-right: 10px;
}
}
Write Preview
Loading…
Cancel
Save