Skip to content

Commit b2379a0

Browse files
saharshleosaharshleo
committed
initial working
1 parent 300f2f9 commit b2379a0

File tree

12 files changed

+15983
-47
lines changed

12 files changed

+15983
-47
lines changed

‎package-lock.json

+15,480
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@material-ui/core": "^4.12.3",
67
"@testing-library/jest-dom": "^5.11.4",
78
"@testing-library/react": "^11.1.0",
89
"@testing-library/user-event": "^12.1.10",
910
"react": "^17.0.2",
11+
"react-arrows": "^1.2.0",
1012
"react-dom": "^17.0.2",
13+
"react-router-dom": "^6.0.2",
1114
"react-scripts": "4.0.3",
1215
"web-vitals": "^1.0.1"
1316
},

‎public/index.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
name="description"
1010
content="Web site created using create-react-app"
1111
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1312
<!--
1413
manifest.json provides metadata used when your web app is installed on a
1514
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +23,7 @@
2423
work correctly both with client-side routing and a non-root public URL.
2524
Learn how to configure a non-root public URL by running `npm run build`.
2625
-->
27-
<title>React App</title>
26+
<title>S-DES</title>
2827
</head>
2928
<body>
3029
<noscript>You need to enable JavaScript to run this app.</noscript>

‎public/logo192.png

-5.22 KB
Binary file not shown.

‎public/logo512.png

-9.44 KB
Binary file not shown.

‎src/App.css

+180-27
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,191 @@
1-
.App {
2-
text-align: center;
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;400;600;800&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,300&display=swap');
3+
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400;500&display=swap');
4+
5+
6+
:root {
7+
--primary-dark: #263238;
8+
--secondary-dark: #455a64;
9+
--primary-light: #cfd8dc;
10+
--secondary-light: #546e7a;
11+
--anchor-default: #1e88e5;
12+
--anchor-hover: #0d47a1;
13+
--anchor-visited: #880e4f;
14+
--black: #000;
15+
--white: #fff;
16+
}
17+
18+
19+
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;400;600;800&display=swap');
20+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,300&display=swap');
21+
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400;500&display=swap');
22+
23+
24+
:root {
25+
--primary-dark: #263238;
26+
--secondary-dark: #455a64;
27+
--primary-light: #cfd8dc;
28+
--secondary-light: #546e7a;
29+
--anchor-default: #1e88e5;
30+
--anchor-hover: #0d47a1;
31+
--anchor-visited: #880e4f;
32+
--black: #000;
33+
--white: #fff;
34+
}
35+
36+
html,
37+
body {
38+
margin: 0px;
39+
padding: 0px;
40+
padding-top: 2rem;
41+
padding-bottom: 2rem;
42+
}
43+
44+
#root {
45+
display: flex;
46+
flex-direction: column;
47+
justify-content: center;
48+
height: 100%;
49+
}
50+
51+
.spacing {
52+
padding: 2rem;
53+
}
54+
55+
/* TEXT ############################################################################################### */
56+
.text {
57+
margin: 0px;
58+
opacity: 1;
59+
/* transition: 0.1s all ease-in-out; */
60+
}
61+
62+
.text__title {
63+
font-weight: 800;
64+
font-size: 3rem;
65+
letter-spacing: 0.25rem;
66+
font-family: Roboto Slab, sans-serif;
67+
}
68+
69+
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
70+
@media screen and (max-width: 600px) {
71+
.text__title {
72+
font-size: 2rem;
73+
}
74+
}
75+
76+
.text__header {
77+
font-family: Roboto Slab, sans-serif;
78+
margin-top: 0.8em;
79+
color: var(--primary-dark);
80+
}
81+
82+
.text__header1 {
83+
font-weight: 600;
84+
font-size: 2rem;
85+
letter-spacing: 0.1rem;
386
}
487

5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
88+
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
89+
@media screen and (max-width: 600px) {
90+
.text__header1 {
91+
font-size: 1.5rem;
92+
}
893
}
994

10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
95+
.text__header2 {
96+
font-weight: 600;
97+
font-size: 1.5rem;
98+
letter-spacing: 0.1rem;
1499
}
15100

16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
101+
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
102+
@media screen and (max-width: 600px) {
103+
.text__header2 {
104+
font-size: 1rem;
105+
}
25106
}
26107

27-
.App-link {
28-
color: #61dafb;
108+
.text__header3 {
109+
font-weight: 600;
110+
font-size: 1.25rem;
111+
letter-spacing: 0.1rem;
29112
}
30113

31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
114+
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
115+
@media screen and (max-width: 600px) {
116+
.text__header3 {
117+
font-size: 0.9rem;
118+
}
38119
}
120+
121+
.text__body {
122+
margin-top: 12px;
123+
font-weight: 400;
124+
font-size: 0.9rem;
125+
font-family: Roboto Slab, sans-serif;
126+
color: var(--black);
127+
}
128+
129+
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
130+
@media screen and (max-width: 600px) {
131+
.text__body {
132+
font-size: 0.7rem;
133+
}
134+
}
135+
136+
.text__light {
137+
font-weight: 200;
138+
font-size: 1rem;
139+
font-family: Roboto Slab, sans-serif;
140+
color: var(--secondary-light);
141+
}
142+
143+
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
144+
@media screen and (max-width: 600px) {
145+
.text__light {
146+
font-size: 0.7rem;
147+
}
148+
}
149+
150+
.text__ultra_light {
151+
font-weight: 100;
152+
font-size: 1rem;
153+
font-family: Roboto Slab, sans-serif;
154+
color: var(--secondary-light);
155+
}
156+
157+
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
158+
@media screen and (max-width: 600px) {
159+
.text__ultra_light {
160+
font-size: 0.7rem;
161+
}
162+
}
163+
164+
.card__header {
165+
word-break: break-all;
166+
}
167+
168+
.card_description {
169+
font-size: 0.85rem;
170+
}
171+
172+
.repo_card_truncate_overflow {
173+
overflow: hidden;
174+
text-overflow: ellipsis;
175+
display: -webkit-box;
176+
-webkit-line-clamp: 2;
177+
-webkit-box-orient: vertical;
178+
}
179+
180+
::selection {
181+
color: var(--white);
182+
background-color: var(--secondary-dark);
183+
}
184+
185+
186+
/* IMAGE ###############################################################################################
187+
.image__profile {
188+
display: flex;
189+
align-items: center;
190+
justify-content: center;
191+
} */

‎src/App.js

+17-17
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
import logo from './logo.svg';
21
import './App.css';
32

3+
import NavBar from './Components/NavBar/NavBar';
4+
import KeyGeneration from './Components/KeyGeneration/KeyGeneration';
5+
6+
import { Container } from '@material-ui/core';
7+
48
function App() {
59
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
21-
</div>
10+
<>
11+
<NavBar />
12+
13+
<Container className="container">
14+
<div className="text__header">
15+
16+
<h1>Key Generation</h1>
17+
<KeyGeneration />
18+
</div>
19+
20+
</Container>
21+
</>
2222
);
2323
}
2424

‎src/Components/KeyGeneration/KeyGeneration.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.arrow {
2+
pointer-events: none;
3+
}
4+
5+
.arrow__path {
6+
stroke: #880e4f;
7+
fill: transparent;
8+
/* stroke-dasharray: 4; */
9+
10+
stroke-dasharray: 1000;
11+
stroke-dashoffset: 1000;
12+
animation: dash 4s infinite forwards;
13+
stroke-width: 0.2rem;
14+
}
15+
16+
.arrow__head line {
17+
stroke: #ff0088;
18+
stroke-width: 0px;
19+
}
20+
21+
@keyframes dash {
22+
to {
23+
stroke-dashoffset: 0;
24+
}
25+
}

0 commit comments

Comments
 (0)