Skip to content

Commit d9b72e8

Browse files
feyfey
committed
add frontend
1 parent 419dabf commit d9b72e8

19 files changed

+7050
-0
lines changed

‎frontend/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎frontend/README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# project-devops-deploy
2+
3+
## Installation
4+
5+
Install the application dependencies by running:
6+
7+
```sh
8+
npm install
9+
```
10+
11+
## Development
12+
13+
Start the application in development mode by running:
14+
15+
```sh
16+
npm run dev
17+
```
18+
19+
## Production
20+
21+
Build the application in production mode by running:
22+
23+
```sh
24+
npm run build
25+
```
26+

‎frontend/eslint.config.mjs‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import js from "@eslint/js";
2+
import { defineConfig, globalIgnores } from "eslint/config";
3+
import tseslint from "typescript-eslint";
4+
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
5+
import react from "eslint-plugin-react";
6+
import reactHooks from "eslint-plugin-react-hooks";
7+
import globals from "globals";
8+
9+
export default defineConfig([
10+
globalIgnores(["**/node_modules", "**/dist"]),
11+
{
12+
name: "eslint-js-recommended-rules",
13+
plugins: {
14+
js,
15+
},
16+
extends: ["js/recommended"],
17+
},
18+
tseslint.configs.recommended.map((conf) => ({
19+
...conf,
20+
files: ["**/*.ts", "**/*.tsx"],
21+
})),
22+
eslintPluginPrettierRecommended,
23+
{
24+
name: "react",
25+
...react.configs.flat.recommended,
26+
},
27+
reactHooks.configs["recommended-latest"],
28+
{
29+
languageOptions: {
30+
globals: {
31+
...globals.browser,
32+
...globals.node,
33+
},
34+
},
35+
rules: {
36+
"react/react-in-jsx-scope": "off",
37+
},
38+
settings: {
39+
react: {
40+
version: "detect",
41+
},
42+
},
43+
},
44+
]);

‎frontend/index.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
10+
<link rel="manifest" href="./manifest.json" />
11+
<link rel="shortcut icon" href="./favicon.ico" />
12+
<title>project-devops-deploy</title>
13+
<style>
14+
.loader-container {
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
flex-direction: column;
19+
position: absolute;
20+
top: 0;
21+
bottom: 0;
22+
left: 0;
23+
right: 0;
24+
background-color: #fafafa;
25+
}
26+
27+
/* CSS Spinner from https://projects.lukehaas.me/css-loaders/ */
28+
29+
.loader,
30+
.loader:before,
31+
.loader:after {
32+
border-radius: 50%;
33+
}
34+
35+
.loader {
36+
color: #283593;
37+
font-size: 11px;
38+
text-indent: -99999em;
39+
margin: 55px auto;
40+
position: relative;
41+
width: 10em;
42+
height: 10em;
43+
box-shadow: inset 0 0 0 1em;
44+
-webkit-transform: translateZ(0);
45+
-ms-transform: translateZ(0);
46+
transform: translateZ(0);
47+
}
48+
49+
.loader:before,
50+
.loader:after {
51+
position: absolute;
52+
content: '';
53+
}
54+
55+
.loader:before {
56+
width: 5.2em;
57+
height: 10.2em;
58+
background: #fafafa;
59+
border-radius: 10.2em 0 0 10.2em;
60+
top: -0.1em;
61+
left: -0.1em;
62+
-webkit-transform-origin: 5.2em 5.1em;
63+
transform-origin: 5.2em 5.1em;
64+
-webkit-animation: load2 2s infinite ease 1.5s;
65+
animation: load2 2s infinite ease 1.5s;
66+
}
67+
68+
.loader:after {
69+
width: 5.2em;
70+
height: 10.2em;
71+
background: #fafafa;
72+
border-radius: 0 10.2em 10.2em 0;
73+
top: -0.1em;
74+
left: 5.1em;
75+
-webkit-transform-origin: 0px 5.1em;
76+
transform-origin: 0px 5.1em;
77+
-webkit-animation: load2 2s infinite ease;
78+
animation: load2 2s infinite ease;
79+
}
80+
81+
@-webkit-keyframes load2 {
82+
0% {
83+
-webkit-transform: rotate(0deg);
84+
transform: rotate(0deg);
85+
}
86+
100% {
87+
-webkit-transform: rotate(360deg);
88+
transform: rotate(360deg);
89+
}
90+
}
91+
92+
@keyframes load2 {
93+
0% {
94+
-webkit-transform: rotate(0deg);
95+
transform: rotate(0deg);
96+
}
97+
100% {
98+
-webkit-transform: rotate(360deg);
99+
transform: rotate(360deg);
100+
}
101+
}
102+
</style>
103+
<link rel="preconnect" href="https://fonts.gstatic.com" />
104+
<link
105+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
106+
rel="stylesheet"
107+
/>
108+
</head>
109+
110+
<body>
111+
<noscript> You need to enable JavaScript to run this app. </noscript>
112+
<div id="root">
113+
<div class="loader-container">
114+
<div class="loader">Loading...</div>
115+
</div>
116+
</div>
117+
</body>
118+
<script type="module" src="/src/index.tsx"></script>
119+
</html>

0 commit comments

Comments
 (0)