Добавил кнопке на главной странице анимацию сияния

frontend-park-mail-ru · Mar 23, 2024 · 3aa577a · 3aa577a
1 parent 0f983f7
commit 3aa577a
Show file tree

Hide file tree

Showing 22 changed files with 352 additions and 239 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -1 +1,4 @@
-last 4 versions
+last 4 versions
+Safari >= 12
+not dead
+> 0.5%
diff --git a/.github/workflows/flow.yaml b/.github/workflows/flow.yaml
@@ -3,7 +3,7 @@ name: YouNote build
 on:
   push:
     branches:
-      - home
+      - Home
       - dev
       - vls-36
       - vls-58
@@ -18,28 +18,28 @@ jobs:
           host: ${{ secrets.HOST }}
           username: ${{ secrets.USERNAME }}
           key: ${{ secrets.PRIVATE_KEY }}
-          script: cd /home/${{ secrets.USERNAME }}/frontend/2024_1_scratch_senior_devs && git pull
+          script: cd /Home/${{ secrets.USERNAME }}/frontend/2024_1_scratch_senior_devs && git pull
       - name: Build frontend
         uses: appleboy/ssh-action@master
         with:
           timeout: 10m
           host: ${{ secrets.HOST }}
           username: ${{ secrets.USERNAME }}
           key: ${{ secrets.PRIVATE_KEY }}
-          script: cd /home/${{ secrets.USERNAME }}/frontend/2024_1_scratch_senior_devs && npm run build
+          script: cd /Home/${{ secrets.USERNAME }}/frontend/2024_1_scratch_senior_devs && npm run build
       - name: Build frontend
         uses: appleboy/ssh-action@master
         with:
           timeout: 10m
           host: ${{ secrets.HOST }}
           username: ${{ secrets.USERNAME }}
           key: ${{ secrets.PRIVATE_KEY }}
-          script: sudo cp -rf /home/${{ secrets.USERNAME}}/frontend/2024_1_scratch_senior_devs/dist/* /opt/public/
+          script: sudo cp -rf /Home/${{ secrets.USERNAME}}/frontend/2024_1_scratch_senior_devs/dist/* /opt/public/
       - name: Build frontend
         uses: appleboy/ssh-action@master
         with:
           timeout: 10m
           host: ${{ secrets.HOST }}
           username: ${{ secrets.USERNAME }}
           key: ${{ secrets.PRIVATE_KEY }}
-          script: sudo mkdir -p /opt/public/src && sudo rsync -av --delete /home/${{ secrets.USERNAME }}/frontend/2024_1_scratch_senior_devs/public/src/assets/ /opt/public/src/assets/
+          script: sudo mkdir -p /opt/public/src && sudo rsync -av --delete /Home/${{ secrets.USERNAME }}/frontend/2024_1_scratch_senior_devs/public/src/assets/ /opt/public/src/assets/
diff --git a/dist/main.css b/dist/main.css
diff --git a/dist/main.js b/dist/main.js
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,3 @@
-module.exports = {
-    plugins: [
-        require('autoprefixer')
-    ]
-}
+export const plugins = [
+    require('autoprefixer')
+];
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel='shortcut icon' type='image/x-icon' href='./src/assets/logo.png' />
 </head>
 <body>

diff --git a/public/src/Card/Card.sass b/public/src/Card/Card.sass
@@ -0,0 +1,28 @@
+@import "/public/src/utils/variables.sass"
+
+.card
+	background: rgba(255, 255, 255, .015)
+	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), 0 8px 15px rgba(0, 0, 0, 0.1), 0 0 0 1px  rgba(255, 255, 255, 0.1)
+	padding: 15px
+	border-radius: 15px
+	display: flex
+	justify-content: flex-start
+	align-items: center
+	flex-direction: column
+	gap: 10px
+	transition: all 0.25s ease-out
+	cursor: pointer
+
+	img
+		width: 52px
+		height: 52px
+
+	h3
+		color: $white
+
+	span
+		color: $text-main-color--darker
+		text-align: center
+
+	&:hover
+		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 15px 25px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2)
diff --git a/public/src/Card/Card.tsx b/public/src/Card/Card.tsx
@@ -0,0 +1,14 @@
+import {ScReact} from "@veglem/screact";
+import "./Card.sass"
+
+export class Card extends ScReact.Component<any, any> {
+    render() {
+        return (
+            <div className="card">
+                <img src={this.props.icon} alt=""/>
+                <h3>{this.props.title}</h3>
+                <span>{this.props.description}</span>
+            </div>
+        )
+    }
+}
diff --git a/public/src/components/Button/Button.tsx b/public/src/components/Button/Button.tsx
@@ -2,12 +2,15 @@ import {ScReact} from "@veglem/screact";
 import "./Button.sass"
 
 export class Button extends ScReact.Component<any, any>{
+
+    handleClick = (e) => {
+        e.preventDefault()
+        this.props.onClick && this.props.onClick(e);
+    }
+
     render() {
         return (
-            <button className={"button " + this.props.className} onclick={(e) => {
-                e.preventDefault()
-                this.props.onClick && this.props.onClick(e);
-            }}>
+            <button className={"button " + this.props.className} onclick={this.handleClick}>
                 {this.props.label}
             </button>
         )

diff --git a/public/src/components/Input/Input.sass b/public/src/components/Input/Input.sass
@@ -3,7 +3,6 @@
 .input-container
 	width: 100%
 	position: relative
-	user-select: none
 
 	input
 		width: 100%

diff --git a/public/src/components/Profile/Profile.sass b/public/src/components/Profile/Profile.sass
@@ -1,4 +1,5 @@
 @import "/public/src/utils/variables.sass"
+@import "/public/src/utils/breakpoints.sass"
 
 .user-profile-wrapper
 	position: relative

diff --git a/public/src/components/ShiningButton/ShinigButton.tsx b/public/src/components/ShiningButton/ShinigButton.tsx
@@ -0,0 +1,20 @@
+import {ScReact} from "@veglem/screact";
+import "./ShiningButton.sass"
+
+export class ShiningButton extends ScReact.Component<any, any> {
+    handleClick = (e) => {
+        e.preventDefault()
+        this.props.onClick && this.props.onClick(e);
+    }
+
+    render() {
+        return (
+            <div className="animated-border-box-container" onclick={this.handleClick}>
+                <div className=" animated-border-box-glow"></div>
+                <div className="animated-border-box">
+                    <h3>{this.props.label}</h3>
+                </div>
+            </div>
+        )
+    }
+}
diff --git a/public/src/components/ShiningButton/ShiningButton.sass b/public/src/components/ShiningButton/ShiningButton.sass
@@ -0,0 +1,77 @@
+@import "/public/src/utils/variables.sass"
+
+$border-radius: 35px
+$border-width: 2px
+$blur-size: 10px
+
+.animated-border-box-container
+	display: flex
+	justify-content: center
+	align-items: center
+	position: relative
+	height: 80px
+	width: 240px
+	color: #fff
+	transition: transform .5s
+	cursor: pointer
+
+	h3
+		font-size: 28px
+
+	&:hover
+		transform: scale(1.05)
+
+	.animated-border-box
+		height: 100%
+		width: 100%
+		position: absolute
+		overflow: hidden
+		z-index: 0
+		display: flex
+		justify-content: center
+		align-items: center
+
+		border-radius: $border-radius
+
+		&:after
+			content: ''
+			position: absolute
+			z-index: -1
+			left: $border-width
+			top: $border-width
+			width: calc(100% - $border-width * 2)
+			height: calc(100% - $border-width * 2)
+			background: $primary-color
+			border-radius: $border-radius
+
+	.animated-border-box-glow
+		height: 100%
+		width: 100%
+		position: absolute
+		overflow: hidden
+		top: 0
+		left: 0
+		z-index: 0
+		border-radius: $border-radius
+		filter: blur($blur-size)
+
+	.animated-border-box:before, .animated-border-box-glow:before
+		content: ''
+		z-index: -2
+		text-align: center
+		top: 50%
+		left: 50%
+		transform: translate(-50%, -50%) rotate(0deg)
+		position: absolute
+		width: 99999px
+		height: 99999px
+		background-repeat: no-repeat
+		background-position: 0 0
+		background-image: conic-gradient(rgba(0, 0, 0, 0), #fff, rgba(0, 0, 0, 0) 25%)
+		animation: rotate 4s linear infinite
+
+		@keyframes rotate
+			100%
+				transform: translate(-50%, -50%) rotate(1turn)
+
+
diff --git a/public/src/modules/router.tsx b/public/src/modules/router.tsx
@@ -1,7 +1,7 @@
 import {Component} from "@veglem/screact/dist/component";
 import {ScReact} from "@veglem/screact";
 import {VDomNode} from "@veglem/screact/dist/vdom";
-import {HomePage} from "../pages/home";
+import {HomePage} from "../pages/Home";
 import {ErrorPage} from "../pages/ErrorPage/errorPage";
 import {AuthPage} from "../pages/Auth";
 import {NotesPage} from "../pages/Notes";

diff --git a/public/src/pages/Home/index.tsx b/public/src/pages/Home/index.tsx
@@ -0,0 +1,75 @@
+import {ScReact} from "@veglem/screact";
+import {VDomNode} from "@veglem/screact/dist/vdom";
+import "./style.sass"
+import {AppRouter} from "../../modules/router";
+import {AppUserStore} from "../../modules/stores/UserStore";
+import {ShiningButton} from "../../components/ShiningButton/ShinigButton";
+import {Card} from "../../Card/Card";
+
+export class HomePage extends ScReact.Component<any, any> {
+    componentDidMount() {
+        document.title = "Главная"
+        this.createObserver()
+    }
+
+    createObserver() {
+        const observer = new IntersectionObserver(
+            function (entries, observer) {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add("animate");
+                        observer.unobserve(entry.target);
+                    }
+                });
+            });
+
+        const targetElements = document.querySelectorAll(".second .cards-container .card");
+
+        targetElements.forEach((targetElement) => {
+            observer.observe(targetElement);
+        });
+    }
+
+    handleButtonClick = () => {
+        const url = AppUserStore.state.isAuth ? "/notes" : "/login"
+        AppRouter.go(url)
+    }
+
+    render(): VDomNode {
+        return (
+            <div className="home-wrapper">
+                <section className="first">
+                    <div className="container">
+                        <h1 className="title">YouNote - современный сервис для ведения заметок</h1>
+                        <ShiningButton label="Попробовать" onClick={this.handleButtonClick}/>
+                    </div>
+                </section>
+                <section className="second">
+                    <h2>Функции и возможности</h2>
+                        <div className="cards-container">
+                            <Card
+                                icon="./src/assets/notes.png"
+                                title="Многофункциональность"
+                                description="Сервис может использоваться для любых задач: планирование досуга, ведение конспектов, организация командной работы"
+                            />
+                            <Card
+                                icon="./src/assets/accessibility.png"
+                                title="Доступность"
+                                description="Можно получить доступ к своим записям, имея под рукой любое устройство с доступом к интернет"
+                            />
+                            <Card
+                                icon="./src/assets/success.png"
+                                title="Удобство"
+                                description="Простой, минималистичный и интуитивно понятный интерфейс дает возможность комфортного ведения заметок любым пользователем"
+                            />
+                            <Card
+                                icon="./src/assets/personalization.png"
+                                title="Персонализация"
+                                description="Можно получить доступ к своим записям, имея под рукой любое устройство с доступом к интернет"
+                            />
+                        </div>
+                </section>
+            </div>
+        );
+    }
+}
diff --git a/public/src/pages/home/loader.ts → public/src/pages/Home/loader.ts b/public/src/pages/home/loader.ts → public/src/pages/Home/loader.ts