diff --git a/src/middlewares/install.js b/src/middlewares/install.js index cc3210e..49e3d5b 100644 --- a/src/middlewares/install.js +++ b/src/middlewares/install.js @@ -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"], }, diff --git a/src/views/page/extra/about.pug b/src/views/page/extra/about.pug index eca20e9..6e3a120 100644 --- a/src/views/page/extra/about.pug +++ b/src/views/page/extra/about.pug @@ -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 \ No newline at end of file +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, + }); diff --git a/src/views/page/extra/style.css b/src/views/page/extra/style.css new file mode 100644 index 0000000..68dd56e --- /dev/null +++ b/src/views/page/extra/style.css @@ -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; + } +} \ No newline at end of file diff --git a/src/views/page/index/index.pug b/src/views/page/index/index.pug index 81b0fb6..221f557 100644 --- a/src/views/page/index/index.pug +++ b/src/views/page/index/index.pug @@ -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: [`烟锁长堤柳色新，
霞映归舟渡水滨。
过客停桡寻旧梦，
一川风月正宜人。`], - typeSpeed: 80, - shuffle: true, - showCursor: false, - }; - - var typed = new Typed('.typed', options); - }; + Particles.init({ + selector: '#background', + maxParticles: 350, + }); diff --git a/src/views/page/login/index.pug b/src/views/page/login/index.pug index 30664d4..326e9be 100644 --- a/src/views/page/login/index.pug +++ b/src/views/page/login/index.pug @@ -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) { diff --git a/src/views/page/login/style.css b/src/views/page/login/style.css new file mode 100644 index 0000000..68dd56e --- /dev/null +++ b/src/views/page/login/style.css @@ -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; + } +} \ No newline at end of file