= (props) => {
35 | const { log, handleSendFullContentLog, className } = props;
36 |
37 | const {
38 | isAutoScrollEnabled,
39 | setIsAutoScrollEnabled,
40 | textAreaRef,
41 | doAutoScroll,
42 | } = useAutoScroll();
43 |
44 | React.useEffect(() => {
45 | handleSetSessionContent(log);
46 | doAutoScroll();
47 | }, [log]);
48 |
49 | return (
50 |
94 | );
95 | };
96 |
--------------------------------------------------------------------------------
/front/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "code-paster",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "run-p -l type-check:watch start:dev",
8 | "start:dev": "webpack serve --config ./config/webpack/dev.js",
9 | "build": "run-p -l type-check build:prod",
10 | "build:prod": "npm run clean && webpack --config ./config/webpack/prod.js",
11 | "analyze": "npm run clean && npm run type-check && webpack --config ./config/webpack/analyze.js",
12 | "type-check": "tsc --noEmit",
13 | "type-check:watch": "npm run type-check -- --watch",
14 | "test": "jest -c ./config/test/jest.js --verbose",
15 | "test:watch": "npm run test -- --watchAll -i --no-cache",
16 | "clean": "rimraf dist",
17 | "prettier": "prettier {config,src}/**/*{.js,.jsx,.ts,.tsx}",
18 | "prettier:fix": "npm run prettier -- --fix"
19 | },
20 | "repository": {
21 | "type": "git"
22 | },
23 | "author": "Lemoncode",
24 | "license": "MIT",
25 | "homepage": "",
26 | "dependencies": {
27 | "@emotion/css": "^11.10.5",
28 | "@emotion/react": "^11.10.5",
29 | "@emotion/styled": "^11.10.5",
30 | "@mui/icons-material": "^5.11.0",
31 | "@mui/material": "^5.11.8",
32 | "axios": "^1.3.2",
33 | "lodash.merge": "^4.6.2",
34 | "react": "^18.2.0",
35 | "react-dom": "^18.2.0",
36 | "react-router-dom": "^6.8.1",
37 | "regenerator-runtime": "^0.13.11",
38 | "socket.io": "^2.5.0"
39 | },
40 | "devDependencies": {
41 | "@babel/cli": "^7.20.7",
42 | "@babel/core": "^7.20.12",
43 | "@babel/preset-env": "^7.20.2",
44 | "@babel/preset-react": "^7.18.6",
45 | "@babel/preset-typescript": "^7.18.6",
46 | "@emotion/babel-plugin": "^11.10.5",
47 | "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
48 | "@svgr/webpack": "^6.5.1",
49 | "@testing-library/dom": "^8.20.0",
50 | "@testing-library/jest-dom": "^5.16.5",
51 | "@testing-library/react": "^13.4.0",
52 | "@testing-library/user-event": "^14.4.3",
53 | "@types/jest": "^29.4.0",
54 | "@types/react": "^18.0.28",
55 | "@types/react-dom": "^18.0.10",
56 | "@types/socket.io": "^2.1.13",
57 | "@typescript-eslint/eslint-plugin": "^5.51.0",
58 | "@typescript-eslint/parser": "^5.51.0",
59 | "babel-loader": "^9.1.2",
60 | "copy-webpack-plugin": "^11.0.0",
61 | "css-loader": "^6.7.3",
62 | "dotenv-webpack": "^8.0.1",
63 | "eslint": "^8.34.0",
64 | "eslint-config-prettier": "^8.6.0",
65 | "eslint-plugin-prettier": "^4.2.1",
66 | "eslint-plugin-react": "^7.32.2",
67 | "file-loader": "^6.2.0",
68 | "html-webpack-plugin": "^5.5.0",
69 | "jest": "^29.4.2",
70 | "jest-environment-jsdom": "^29.4.2",
71 | "lint-staged": "^13.1.1",
72 | "mini-css-extract-plugin": "^2.7.2",
73 | "npm-run-all": "^4.1.5",
74 | "prettier": "^2.8.4",
75 | "pretty-quick": "^3.1.3",
76 | "react-test-renderer": "^18.2.0",
77 | "rimraf": "^4.1.2",
78 | "style-loader": "^3.3.1",
79 | "ts-jest": "^29.0.5",
80 | "typescript": "^4.9.5",
81 | "url-loader": "^4.1.1",
82 | "webpack": "^5.75.0",
83 | "webpack-bundle-analyzer": "^4.8.0",
84 | "webpack-cli": "^5.0.1",
85 | "webpack-dev-server": "^4.11.1",
86 | "webpack-merge": "^5.8.0"
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/front/src/pods/trainer/components/session.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/css';
2 | import { theme } from 'core/theme';
3 |
4 | const { palette, spacing, typography, breakpoints } = theme;
5 | const color = palette.customPalette;
6 |
7 | export const root = css`
8 | display: grid;
9 | grid-row-gap: 1rem;
10 | grid-column-gap: 1rem;
11 | grid-template-columns: auto 1fr;
12 | grid-template-areas:
13 | 'label label'
14 | 'textarea textarea'
15 | 'undo send';
16 | `;
17 |
18 | export const label = css`
19 | grid-area: label;
20 | display: block;
21 | font-size: 1.125rem;
22 | font-family: ${typography.fontFamily};
23 | `;
24 |
25 | export const textarea = css`
26 | grid-area: textarea;
27 | box-sizing: border-box;
28 | font-family: ${typography.fontFamily};
29 | font-size: 1rem;
30 | background-color: ${color.background};
31 | border: 2px solid ${color.secondary};
32 | white-space: pre-wrap;
33 | resize: none;
34 | &:focus {
35 | outline: none;
36 | }
37 | `;
38 |
39 | export const sendButton = css`
40 | grid-area: send;
41 | display: flex;
42 | align-items: center;
43 | padding: ${spacing(1.25)} ${spacing(1.875)};
44 | flex: 1;
45 | font-size: 1.188rem;
46 | font-weight: 400;
47 | text-transform: capitalize;
48 | border-radius: 0;
49 | color: ${color.successLight};
50 | background-color: white;
51 | border: 2px solid ${color.successLight};
52 | transition: all 0.2s;
53 | &:hover,
54 | &:active {
55 | color: white;
56 | background-color: ${color.successLight};
57 | border: 2px solid ${color.successLight};
58 | outline: none;
59 | }
60 | @media (max-width: ${breakpoints.values.xs}px) {
61 | color: white;
62 | background-color: ${color.successLight};
63 | border: none;
64 | &:hover,
65 | &:active {
66 | background-color: ${color.successDark};
67 | border: none;
68 | }
69 | }
70 | `;
71 |
72 | export const sendIcon = css`
73 | margin-left: ${spacing(1.25)};
74 | font-size: 1.25rem;
75 | display: none;
76 | @media (min-width: ${breakpoints.values.xs}px) {
77 | display: initial;
78 | }
79 | `;
80 |
81 | export const undoButton = css`
82 | grid-area: undo;
83 | display: flex;
84 | align-items: center;
85 | padding: ${spacing(1.25)} ${spacing(1.875)};
86 | font-size: 1.188rem;
87 | font-weight: 400;
88 | text-transform: capitalize;
89 | color: ${color.alertLight};
90 | background-color: white;
91 | border-radius: 0;
92 | border: 2px solid ${color.alertLight};
93 | transition: all 0.2s;
94 | &:hover,
95 | &:active {
96 | color: white;
97 | background-color: ${color.alertLight};
98 | border: 2px solid ${color.alertLight};
99 | outline: none;
100 | }
101 | @media (max-width: ${breakpoints.values.xs}px) {
102 | color: white;
103 | background-color: ${color.alertLight};
104 | border: none;
105 | &:hover,
106 | &:active {
107 | background-color: ${color.alertDark};
108 | border: none;
109 | }
110 | }
111 | `;
112 |
113 | export const undoIcon = css`
114 | margin-right: ${spacing(1.25)};
115 | font-size: 1.25rem;
116 | display: none;
117 | @media (min-width: ${breakpoints.values.xs}px) {
118 | display: initial;
119 | }
120 | `;
121 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 | [![Contributors][contributors-shield]][contributors-url]
11 | [![Forks][forks-shield]][forks-url]
12 | [![Stargazers][stars-shield]][stars-url]
13 | [![Issues][issues-shield]][issues-url]
14 | [![MIT License][license-shield]][license-url]
15 |
16 |
17 |
19 |
20 |
22 |
23 | Code Paster is a Teacher-to-Student communication tool for online programming lessons. Create a new session and easily share your code with all students connected so they can follow along with your examples.
24 |
25 |
26 | Click here to navigate to Codepaster
27 |
28 |
29 |
7 |
8 | Created by potrace 1.11, written by Peter Selinger 2001-2013
9 |
10 |
12 |
65 |
66 |
--------------------------------------------------------------------------------
/back/src/pods/messages/processors/input-processor.ts:
--------------------------------------------------------------------------------
1 | import { sessionRepository, roomRepository, RoomInfo } from 'dals';
2 | import { InputMessageTypes, OutputMessageTypes } from '../messages.consts';
3 | import {
4 | Action,
5 | InputEstablishConnectionTrainer,
6 | SocketInfo,
7 | } from '../messages.model';
8 |
9 | export const processInputMessage = async (
10 | socketInfo: SocketInfo,
11 | action: Action
12 | ): Promise => {
13 | let outputActionCollection: Action[] = [];
14 | switch (action.type) {
15 | case InputMessageTypes.ESTABLISH_CONNECTION_TRAINER:
16 | const payloadECT: InputEstablishConnectionTrainer = action.payload;
17 | outputActionCollection = await handleEstablishConnectionTrainer(
18 | socketInfo,
19 | payloadECT.room,
20 | payloadECT.trainertoken
21 | );
22 | break;
23 | case InputMessageTypes.ESTABLISH_CONNECTION_STUDENT:
24 | const payloadECS: InputEstablishConnectionTrainer = action.payload;
25 | outputActionCollection = await handleEstablishConnectionStudent(
26 | socketInfo,
27 | payloadECS.room
28 | );
29 | break;
30 | case InputMessageTypes.TRAINER_APPEND_TEXT:
31 | outputActionCollection = await handleTrainerSendText(
32 | socketInfo,
33 | action.payload,
34 | InputMessageTypes.TRAINER_APPEND_TEXT
35 | );
36 | break;
37 | case InputMessageTypes.TRAINER_SET_FULL_TEXT:
38 | outputActionCollection = await handleTrainerSendText(
39 | socketInfo,
40 | action.payload,
41 | InputMessageTypes.TRAINER_SET_FULL_TEXT
42 | );
43 | break;
44 | default:
45 | break;
46 | }
47 |
48 | return outputActionCollection;
49 | };
50 |
51 | const handleEstablishConnectionTrainer = async (
52 | socketInfo: SocketInfo,
53 | room: string,
54 | trainerToken: string
55 | ): Promise => {
56 | if (!trainerToken || !room) {
57 | // Ignore
58 | return [];
59 | }
60 |
61 | const roomAvailable: boolean = await roomRepository.isRoomAvailable(room);
62 |
63 | if (roomAvailable) {
64 | roomRepository.saveRoomInfo({ room, content: '' }, false);
65 | }
66 |
67 | if (
68 | roomAvailable ||
69 | !(await sessionRepository.isExistingConnection(socketInfo.connectionId))
70 | ) {
71 | await sessionRepository.addNewUser({
72 | connectionId: socketInfo.connectionId,
73 | room,
74 | trainerToken,
75 | isTrainer: !!trainerToken,
76 | });
77 | socketInfo.socket.join(room);
78 | }
79 | return [{ type: OutputMessageTypes.CONNECTION_ESTABLISHED_TRAINER }];
80 | };
81 |
82 | const handleEstablishConnectionStudent = async (
83 | socketInfo: SocketInfo,
84 | room: string
85 | ): Promise => {
86 | if (!room) {
87 | // Ignore
88 | return [];
89 | }
90 |
91 | const roomAvailable: boolean = await roomRepository.isRoomAvailable(room);
92 |
93 | if (
94 | roomAvailable ||
95 | !(await sessionRepository.isExistingConnection(socketInfo.connectionId))
96 | ) {
97 | await sessionRepository.addNewUser({
98 | connectionId: socketInfo.connectionId,
99 | room,
100 | trainerToken: '',
101 | isTrainer: false,
102 | });
103 | socketInfo.socket.join(room);
104 | }
105 | return [{ type: OutputMessageTypes.CONNECTION_ESTABLISHED_STUDENT }];
106 | };
107 |
108 | const handleTrainerSendText = async (
109 | socketInfo: SocketInfo,
110 | text: string,
111 | action: string
112 | ): Promise => {
113 | if (!sessionRepository.isTrainerUser(socketInfo.connectionId)) {
114 | return [];
115 | }
116 | const room = await sessionRepository.getRoomFromConnectionId(
117 | socketInfo.connectionId
118 | );
119 | const roomInfo: RoomInfo = { room, content: text };
120 |
121 | switch (action) {
122 | case InputMessageTypes.TRAINER_APPEND_TEXT:
123 | await roomRepository.saveRoomInfo(roomInfo, false);
124 | return [{ type: OutputMessageTypes.APPEND_TEXT, payload: text }];
125 | case InputMessageTypes.TRAINER_SET_FULL_TEXT:
126 | await roomRepository.saveRoomInfo(roomInfo, true);
127 | return [{ type: OutputMessageTypes.UPDATE_FULL_CONTENT }];
128 | default:
129 | return [];
130 | }
131 | };
132 |
--------------------------------------------------------------------------------
/front/src/core/use-log.hook.spec.ts:
--------------------------------------------------------------------------------
1 | import { renderHook, act } from '@testing-library/react';
2 | import { useLog } from './use-log.hook';
3 |
4 | describe('use-log hook spec', () => {
5 | it('"log" state should be an empty string by default', () => {
6 | // Arrange
7 |
8 | // Act
9 | const { result } = renderHook(() => useLog());
10 |
11 | // Assert
12 | expect(result.current.log).toEqual('');
13 | });
14 |
15 | it('"logRef.current" should be an empty string by default', () => {
16 | // Arrange
17 |
18 | // Act
19 | const { result } = renderHook(() => useLog());
20 |
21 | // Assert
22 | expect(result.current.logRef.current).toEqual('');
23 | });
24 |
25 | it('"appendToLog" & "setLog" should be functions by default', () => {
26 | // Arrange
27 |
28 | // Act
29 | const { result } = renderHook(() => useLog());
30 |
31 | // Assert
32 | expect(result.current.appendToLog).toEqual(expect.any(Function));
33 | expect(result.current.setLog).toEqual(expect.any(Function));
34 | });
35 |
36 | it('"log" & "logRef.current" should return new content when calling "setLog"', () => {
37 | // Arrange
38 | const expectedResult: string = 'new-value';
39 |
40 | // Act
41 | const { result } = renderHook(() => useLog());
42 | act(() => {
43 | result.current.setLog('new-value');
44 | });
45 |
46 | // Assert
47 | expect(result.current.log).toEqual(expectedResult);
48 | expect(result.current.logRef.current).toEqual(expectedResult);
49 | });
50 |
51 | it('"log" & "logRef.current" should return old value when feed "setLog" with "undefined" parameter', () => {
52 | // Arrange
53 | const expectedResult: string = 'old-value';
54 |
55 | // Act
56 | const { result } = renderHook(() => useLog());
57 |
58 | act(() => {
59 | result.current.setLog('old-value');
60 | });
61 |
62 | act(() => {
63 | result.current.setLog(undefined);
64 | });
65 |
66 | // Assert
67 | expect(result.current.log).toEqual(expectedResult);
68 | expect(result.current.logRef.current).toEqual(expectedResult);
69 | });
70 |
71 | it('"log" & "logRef.current" should return old value when feed "setLog" with "null" parameter', () => {
72 | // Arrange
73 | const expectedResult: string = 'old-value';
74 |
75 | // Act
76 | const { result } = renderHook(() => useLog());
77 |
78 | act(() => {
79 | result.current.setLog('old-value');
80 | });
81 |
82 | act(() => {
83 | result.current.setLog(null);
84 | });
85 |
86 | // Assert
87 | expect(result.current.log).toEqual(expectedResult);
88 | expect(result.current.logRef.current).toEqual(expectedResult);
89 | });
90 |
91 | it('"log" & "logRef.current" should return new value with one space when calling "appendToLog" for the first time', () => {
92 | // Arrange
93 | const expectedResult: string = `new-value `;
94 |
95 | // Act
96 | const { result } = renderHook(() => useLog());
97 |
98 | act(() => {
99 | result.current.appendToLog('new-value');
100 | });
101 |
102 | // Assert
103 | expect(result.current.log).toEqual(expectedResult);
104 | expect(result.current.logRef.current).toEqual(expectedResult);
105 | });
106 |
107 | it('"log" & "logRef.current" should return log value with one space and new value with one space in a new line when calling "appendToLog" after first time', () => {
108 | // Arrange
109 | const expectedResult: string = `old-value \nnew-value `;
110 |
111 | // Act
112 | const { result } = renderHook(() => useLog());
113 |
114 | act(() => {
115 | result.current.appendToLog('old-value');
116 | });
117 |
118 | act(() => {
119 | result.current.appendToLog('new-value');
120 | });
121 |
122 | // Assert
123 | expect(result.current.log).toEqual(expectedResult);
124 | expect(result.current.logRef.current).toEqual(expectedResult);
125 | });
126 |
127 | it('"log" & "logRef.current" should return the same text after calling "setLog" with that text', () => {
128 | // Arrange
129 | const sessionLog: string = `first line
130 |
131 | *********************************
132 |
133 | second line
134 |
135 | *********************************
136 |
137 | third line
138 |
139 | *********************************`;
140 |
141 | // Act
142 | const { result } = renderHook(() => useLog());
143 |
144 | act(() => {
145 | result.current.setLog(sessionLog);
146 | });
147 |
148 | // Assert
149 | expect(result.current.log).toEqual(sessionLog);
150 | expect(result.current.logRef.current).toEqual(sessionLog);
151 | });
152 | });
153 |
--------------------------------------------------------------------------------
/back/src/pods/room/baseTrainerTokens.ts:
--------------------------------------------------------------------------------
1 | export const baseTrainerTokens = [
2 | 'son_goku',
3 | 'vegeta',
4 | 'bardock',
5 | 'king_vegeta',
6 | 'nappa',
7 | 'toma',
8 | 'selypar',
9 | 'gine',
10 | 'bulma',
11 | 'piccolo',
12 | 'krilin',
13 | 'freezer',
14 | 'aika',
15 | 'aiko',
16 | 'aimi',
17 | 'aina',
18 | 'aini',
19 | 'airi',
20 | 'akane',
21 | 'akemi',
22 | 'aki',
23 | 'akihiro',
24 | 'akio',
25 | 'akira',
26 | 'amaterasu',
27 | 'ami',
28 | 'aoi',
29 | 'arata',
30 | 'asami',
31 | 'asuka',
32 | 'atsuko',
33 | 'aya',
34 | 'ayaka',
35 | 'ayako',
36 | 'ayame',
37 | 'ayane',
38 | 'ayano',
39 | 'ayumu',
40 | 'chie',
41 | 'chieko',
42 | 'chiharu',
43 | 'chika',
44 | 'chikako',
45 | 'chinatsu',
46 | 'chiyo',
47 | 'chiyoko',
48 | 'cho',
49 | 'chouko',
50 | 'dai',
51 | 'daichi',
52 | 'daiki',
53 | 'daisuke',
54 | 'eiji',
55 | 'eiko',
56 | 'emi',
57 | 'emiko',
58 | 'eri',
59 | 'etsuko',
60 | 'fumiko',
61 | 'fumio',
62 | 'gajeel',
63 | 'goro',
64 | 'hachiro',
65 | 'hajime',
66 | 'hana',
67 | 'hanako',
68 | 'haru',
69 | 'haruka',
70 | 'haruki',
71 | 'haruko',
72 | 'harumi',
73 | 'haruna',
74 | 'haruo',
75 | 'haruto',
76 | 'hayate',
77 | 'hayato',
78 | 'hibiki',
79 | 'hideaki',
80 | 'hideki',
81 | 'hideo',
82 | 'hikari',
83 | 'hikaru',
84 | 'hina',
85 | 'hinata',
86 | 'hiraku',
87 | 'hiro',
88 | 'hiroaki',
89 | 'hiroki',
90 | 'hiroko',
91 | 'hiromi',
92 | 'hironori',
93 | 'hiroshi',
94 | 'hiroto',
95 | 'hiroyuki',
96 | 'hisako',
97 | 'hisao',
98 | 'hisashi',
99 | 'hisoka',
100 | 'hitomi',
101 | 'hitoshi',
102 | 'honoka',
103 | 'hoshi',
104 | 'hoshiko',
105 | 'hotaka',
106 | 'hotaru',
107 | 'ichiro',
108 | 'isamu',
109 | 'isao',
110 | 'itsuki',
111 | 'izumi',
112 | 'jiro',
113 | 'jun',
114 | 'junichijunko',
115 | 'juro',
116 | 'kaede',
117 | 'kaito',
118 | 'kamiko',
119 | 'kanako',
120 | 'kanon',
121 | 'kaori',
122 | 'kaoru',
123 | 'kasumi',
124 | 'katashi',
125 | 'katsu',
126 | 'katsumi',
127 | 'katashi',
128 | 'katsu',
129 | 'katsumi',
130 | 'katsuo',
131 | 'katsuro',
132 | 'kazue',
133 | 'kazuhiko',
134 | 'kazuhiro',
135 | 'kazuki',
136 | 'kazuko',
137 | 'kazumi',
138 | 'kazuo',
139 | 'kei',
140 | 'keiko',
141 | 'ken',
142 | 'kenichi',
143 | 'kenta',
144 | 'kichiro',
145 | 'kiko',
146 | 'kiku',
147 | 'kimi',
148 | 'kimiko',
149 | 'kin',
150 | 'kiyoko',
151 | 'kiyomi',
152 | 'kiyoshi',
153 | 'kohaku',
154 | 'kokoro',
155 | 'kotone',
156 | 'kouki',
157 | 'kouta',
158 | 'kumiko',
159 | 'kunio',
160 | 'kuro',
161 | 'kyo',
162 | 'kyoko',
163 | 'madoka',
164 | 'mai',
165 | 'maiko',
166 | 'maki',
167 | 'makoto',
168 | 'mami',
169 | 'mamoru',
170 | 'mana',
171 | 'manabu',
172 | 'manami',
173 | 'mao',
174 | 'mariko',
175 | 'masa',
176 | 'masaaki',
177 | 'masahiko',
178 | 'masahiro',
179 | 'masaki',
180 | 'masami',
181 | 'masanori',
182 | 'masao',
183 | 'masaru',
184 | 'masashi',
185 | 'masato',
186 | 'masayoshi',
187 | 'masayuki',
188 | 'masumi',
189 | 'masuyo',
190 | 'mayu',
191 | 'mayumi',
192 | 'megumi',
193 | 'mei',
194 | 'mi',
195 | 'michi',
196 | 'michiko',
197 | 'michio',
198 | 'midori',
199 | 'mieko',
200 | 'miho',
201 | 'mika',
202 | 'miki',
203 | 'mikio',
204 | 'miku',
205 | 'minako',
206 | 'mio',
207 | 'misaki',
208 | 'mitsuko',
209 | 'mitsuo',
210 | 'mitsuru',
211 | 'miu',
212 | 'miwa',
213 | 'miyako',
214 | 'miyu',
215 | 'miyuki',
216 | 'mizuki',
217 | 'moe',
218 | 'momoe',
219 | 'momoka',
220 | 'momoko',
221 | 'moriko',
222 | 'nana',
223 | 'nanami',
224 | 'nao',
225 | 'naoki',
226 | 'naoko',
227 | 'naomi',
228 | 'natsu',
229 | 'natsuki',
230 | 'natsuko',
231 | 'natsumi',
232 | 'noa',
233 | 'noboru',
234 | 'nobu',
235 | 'nobuko',
236 | 'nobuo',
237 | 'noburu',
238 | 'nori',
239 | 'noriko',
240 | 'norio',
241 | 'osamu',
242 | 'ran',
243 | 'rei',
244 | 'reiko',
245 | 'ren',
246 | 'rie',
247 | 'rika',
248 | 'riko',
249 | 'riku',
250 | 'rikuto',
251 | 'rin',
252 | 'rina',
253 | 'rio',
254 | 'rokuro',
255 | 'ryo',
256 | 'ryoichi',
257 | 'ryoko',
258 | 'ryota',
259 | 'ryuu',
260 | 'ryuunosuke',
261 | 'saburo',
262 | 'sachiko',
263 | 'sadao',
264 | 'saki',
265 | 'sakura',
266 | 'sakurako',
267 | 'satoko',
268 | 'satomi',
269 | 'satuoru',
270 | 'satashi',
271 | 'sayuri',
272 | 'seiichi',
273 | 'seiji',
274 | 'setsuko',
275 | 'shichiro',
276 | 'shigeko',
277 | 'shika',
278 | 'shin',
279 | 'shinichi',
280 | 'shinobu',
281 | 'shiro',
282 | 'shizuka',
283 | 'shizuko',
284 | 'sho',
285 | 'shoichi',
286 | 'shoji',
287 | 'shouta',
288 | 'shuichi',
289 | 'shuji',
290 | 'shun',
291 | 'sora',
292 | 'souta',
293 | 'sumiko',
294 | 'susumu',
295 | 'suzu',
296 | 'suzume',
297 | 'tadao',
298 | 'tadashi',
299 | 'taiki',
300 | 'takao',
301 | 'takara',
302 | 'taro',
303 | 'tomiko',
304 | 'tomio',
305 | 'toru',
306 | 'tsubame',
307 | 'ume',
308 | 'umeko',
309 | 'usagi',
310 | 'wakana',
311 | 'wendy',
312 | 'yamoto',
313 | 'yasu',
314 | 'yoko',
315 | 'yori',
316 | 'yua',
317 | 'yui',
318 | 'yukio',
319 | 'yumi',
320 | 'yuri',
321 | 'yuu',
322 | 'yuuki',
323 | 'yuuto',
324 | 'yuzuki',
325 | ];
326 |
--------------------------------------------------------------------------------
/back/src/pods/room/baseNames.ts:
--------------------------------------------------------------------------------
1 | export const baseNames = [
2 | 'fistro',
3 | 'pecador',
4 | 'pradera',
5 | 'nopuedor',
6 | 'jarl',
7 | 'react',
8 | 'curry',
9 | 'hooks',
10 | 'ketchup',
11 | 'turing',
12 | 'alan',
13 | 'chuck',
14 | 'norris',
15 | 'delaware',
16 | 'malaga',
17 | 'palo',
18 | 'valley',
19 | 'lemon',
20 | 'ada',
21 | 'lovelace',
22 | 'allene',
23 | 'virgen',
24 | 'dominque',
25 | 'lesa',
26 | 'brandon',
27 | 'wesley',
28 | 'randee',
29 | 'josue',
30 | 'aisha',
31 | 'marlo',
32 | 'junko',
33 | 'aurea',
34 | 'carroll',
35 | 'melynda',
36 | 'corina',
37 | 'damion',
38 | 'lavonda',
39 | 'susy',
40 | 'vasiliki',
41 | 'malena',
42 | 'carlota',
43 | 'alena',
44 | 'kristal',
45 | 'fe',
46 | 'eartha',
47 | 'raye',
48 | 'maryland',
49 | 'marisela',
50 | 'xuan',
51 | 'yasmin',
52 | 'adena',
53 | 'my',
54 | 'velia',
55 | 'ira',
56 | 'weston',
57 | 'zulma',
58 | 'graham',
59 | 'afton',
60 | 'ashlie',
61 | 'cori',
62 | 'marc',
63 | 'bell',
64 | 'felicitas',
65 | 'shantel',
66 | 'lina',
67 | 'jacob',
68 | 'nikhil',
69 | 'london',
70 | 'damaris',
71 | 'brice',
72 | 'devin',
73 | 'johnathan',
74 | 'grace',
75 | 'alicia',
76 | 'isabelle',
77 | 'glenn',
78 | 'mackenzie',
79 | 'kylie',
80 | 'kathryn',
81 | 'demarcus',
82 | 'luca',
83 | 'miya',
84 | 'adan',
85 | 'martha',
86 | 'maximillian',
87 | 'paityn',
88 | 'jamal',
89 | 'brenda',
90 | 'mariana',
91 | 'kieran',
92 | 'anya',
93 | 'stanley',
94 | 'jordon',
95 | 'leandro',
96 | 'priscilla',
97 | 'terrence',
98 | 'larissa',
99 | 'rhianna',
100 | 'jaime',
101 | 'edward',
102 | 'mckenna',
103 | 'carly',
104 | 'kale',
105 | 'jax',
106 | 'teresa',
107 | 'angela',
108 | 'sophie',
109 | 'ruth',
110 | 'eileen',
111 | 'sidney',
112 | 'belinda',
113 | 'willow',
114 | 'zaniyah',
115 | 'avah',
116 | 'nevaeh',
117 | 'micah',
118 | 'presley',
119 | 'sasha',
120 | 'veronica',
121 | 'brylee',
122 | 'dominic',
123 | 'greyson',
124 | 'ben',
125 | 'luke',
126 | 'phoenix',
127 | 'case',
128 | 'aaliyah',
129 | 'ross',
130 | 'agustin',
131 | 'kailee',
132 | 'janae',
133 | 'frida',
134 | 'isaias',
135 | 'kasey',
136 | 'johan',
137 | 'jordan',
138 | 'colt',
139 | 'dixie',
140 | 'sammy',
141 | 'frankie',
142 | 'mekhi',
143 | 'cassie',
144 | 'kadence',
145 | 'jamiya',
146 | 'vance',
147 | 'colton',
148 | 'aaliyah',
149 | 'ryker',
150 | 'dereon',
151 | 'jabari',
152 | 'jennifer',
153 | 'jayleen',
154 | 'terrence',
155 | 'jaiden',
156 | 'brycen',
157 | 'taliyah',
158 | 'matthew',
159 | 'santos',
160 | 'maximus',
161 | 'luz',
162 | 'melanie',
163 | 'chana',
164 | 'rudy',
165 | 'keith',
166 | 'carlos',
167 | 'jasmine',
168 | 'heidi',
169 | 'cordell',
170 | 'kyan',
171 | 'caitlin',
172 | 'dahlia',
173 | 'reilly',
174 | 'quincy',
175 | 'denise',
176 | 'jackson',
177 | 'luciano',
178 | 'kali',
179 | 'cornelius',
180 | 'jaslyn',
181 | 'timothy',
182 | 'leonidas',
183 | 'ricky',
184 | 'kathryn',
185 | 'landyn',
186 | 'ismael',
187 | 'terry',
188 | 'haven',
189 | 'destinee',
190 | 'landyn',
191 | 'sage',
192 | 'hudson',
193 | 'jadiel',
194 | 'logan',
195 | 'kamora',
196 | 'rene',
197 | 'maya',
198 | 'reid',
199 | 'breanna',
200 | 'keyon',
201 | 'tyrone',
202 | 'dane',
203 | 'carissa',
204 | 'emiliano',
205 | 'gunnar',
206 | 'cortez',
207 | 'lilah',
208 | 'anton',
209 | 'dulce',
210 | 'kaiya',
211 | 'shyann',
212 | 'kamila',
213 | 'tori',
214 | 'tucker',
215 | 'cierra',
216 | 'pierce',
217 | 'king',
218 | 'rachael',
219 | 'maxim',
220 | 'bobby',
221 | 'bryant',
222 | 'kale',
223 | 'jameson',
224 | 'danika',
225 | 'litzy',
226 | 'dillon',
227 | 'tyrese',
228 | 'ezra',
229 | 'duncan',
230 | 'harley',
231 | 'penelope',
232 | 'andrea',
233 | 'charlotte',
234 | 'clara',
235 | 'izabelle',
236 | 'zariah',
237 | 'kristian',
238 | 'sidney',
239 | 'darien',
240 | 'cailyn',
241 | 'yareli',
242 | 'grace',
243 | 'samson',
244 | 'janiyah',
245 | 'mylee',
246 | 'alena',
247 | 'arianna',
248 | 'amy',
249 | 'demetrius',
250 | 'leslie',
251 | 'paulina',
252 | 'hope',
253 | 'delilah',
254 | 'caiden',
255 | 'rodolfo',
256 | 'izayah',
257 | 'jaylin',
258 | 'august',
259 | 'gunnar',
260 | 'kameron',
261 | 'logan',
262 | 'roberto',
263 | 'jazlyn',
264 | 'josh',
265 | 'jason',
266 | 'zavier',
267 | 'freddy',
268 | 'hayley',
269 | 'martha',
270 | 'todd',
271 | 'yazmin',
272 | 'lyla',
273 | 'alani',
274 | 'joe',
275 | 'gillian',
276 | 'boston',
277 | 'jaidyn',
278 | 'erin',
279 | 'skyla',
280 | 'nicholas',
281 | 'albert',
282 | 'juliet',
283 | 'kate',
284 | 'susan',
285 | 'preston',
286 | 'alvaro',
287 | 'kymani',
288 | 'leandro',
289 | 'eliezer',
290 | 'aleah',
291 | 'dayton',
292 | 'marilyn',
293 | 'jax',
294 | 'jonah',
295 | 'ada',
296 | 'karma',
297 | 'maliyah',
298 | 'isaac',
299 | 'jessie',
300 | 'elijah',
301 | 'jaxson',
302 | 'kristian',
303 | 'vance',
304 | 'jaquan',
305 | 'lyric',
306 | 'clarissa',
307 | 'kianna',
308 | 'matteo',
309 | 'marina',
310 | 'alisa',
311 | 'caitlin',
312 | 'tiffany',
313 | 'cristal',
314 | 'vincent',
315 | 'jayvon',
316 | 'greta',
317 | 'neveah',
318 | 'kamron',
319 | 'marely',
320 | 'titus',
321 | 'hugo',
322 | 'kayla',
323 | 'quincy',
324 | 'elijah',
325 | 'ezra',
326 | 'brody',
327 | 'fabian',
328 | 'agustin',
329 | 'lilian',
330 | 'alfredo',
331 | 'jaidyn',
332 | 'olive',
333 | 'kellen',
334 | 'caroline',
335 | 'ramiro',
336 | 'kael',
337 | 'aspen',
338 | 'stephanie',
339 | 'nyasia',
340 | 'jessie',
341 | 'lilyana',
342 | 'rowan',
343 | 'angelina',
344 | 'laci',
345 | 'greta',
346 | 'steven',
347 | 'kody',
348 | 'leon',
349 | 'jimena',
350 | 'tyler',
351 | 'livia',
352 | 'elias',
353 | 'zayne',
354 | 'maren',
355 | 'todd',
356 | 'julianna',
357 | 'sydnee',
358 | 'adriel',
359 | 'gerald',
360 | 'niko',
361 | 'rory',
362 | 'isabell',
363 | 'violet',
364 | 'logan',
365 | 'daisy',
366 | ];
367 |
--------------------------------------------------------------------------------
/front/src/assets/lemoncode-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
15 |
16 |
32 |
33 |
50 |
77 |
78 |
--------------------------------------------------------------------------------
/front/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | code-paster-logo
2 |
3 | codepaster-logo
4 |
7 | lemoncode-logo
8 |
13 |
14 | github-icon
15 |
16 |
18 |
19 | website-icon
20 |
23 |
27 |
28 | mail-icon
29 |
32 |
33 | arrow-icon
34 |
37 |
--------------------------------------------------------------------------------
/front/static/styles.css:
--------------------------------------------------------------------------------
1 | /* - - - basic - - - */
2 | *,
3 | *::before,
4 | *::after {
5 | margin: 0;
6 | padding: 0;
7 | box-sizing: inherit;
8 | }
9 |
10 | html {
11 | /* custom properties */
12 | --font-default: 'Roboto', sans-serif;
13 | --color-bg: #ffffff;
14 | --color-light: #ffffff;
15 | --color-dark: #2e2800;
16 | --color-grey-light: #eee;
17 | --color-grey-medium: #ccc;
18 | --color-primary-main: #d9d900;
19 | --color-alert: rgb(255, 87, 51);
20 |
21 | box-sizing: border-box;
22 | font-size: 62.4%;
23 | font-family: var(--font-default);
24 | }
25 |
26 | body {
27 | position: absolute;
28 | font-size: 1.6rem;
29 | background-color: var(--color-bg);
30 | color: var(--color-dark);
31 | min-height: 100vh;
32 | }
33 |
34 | img {
35 | max-width: 100%;
36 | }
37 |
38 | a {
39 | text-decoration: none;
40 | }
41 |
42 | ul {
43 | list-style: none;
44 | }
45 |
46 | /* - - - common - - - */
47 | .box-content {
48 | display: flex;
49 | justify-content: center;
50 | height: max-content;
51 | padding: 12rem 0;
52 | align-items: center;
53 | }
54 |
55 | .border-bottom {
56 | border-bottom: 1px solid var(--color-grey-medium);
57 | }
58 |
59 | .heading {
60 | width: max-content;
61 | text-align: center;
62 | font-weight: 300;
63 | font-size: 3rem;
64 | margin: 0 auto 4rem auto;
65 | text-transform: uppercase;
66 | border-bottom: 2px solid var(--color-primary-main);
67 | }
68 |
69 | .container {
70 | width: 70%;
71 | margin: 0 auto 8rem auto;
72 | padding: 3rem;
73 | background-color: var(--color-grey-light);
74 | }
75 |
76 | @media only screen and (max-width: 770px) {
77 | .container {
78 | width: 100%;
79 | }
80 | }
81 |
82 | .container p,
83 | .container h3 {
84 | margin-bottom: 1.5rem;
85 | }
86 |
87 | /* - - - - - navbar - - - - - */
88 | .navbar {
89 | position: fixed;
90 | display: flex;
91 | align-items: center;
92 | width: 100%;
93 | height: 8.6rem;
94 | z-index: 1000;
95 | border-bottom: 2px solid var(--color-dark);
96 | background-image: linear-gradient(
97 | 60deg,
98 | var(--color-light) 25rem,
99 | var(--color-primary-main) 25rem,
100 | var(--color-light) 90%
101 | );
102 | }
103 |
104 | .navbar__logo {
105 | min-height: 6rem;
106 | max-width: 17.5rem;
107 | margin-top: 0.6rem;
108 | margin-left: 3.8rem;
109 | fill: var(--color-dark);
110 | }
111 |
112 | .navbar__list {
113 | display: flex;
114 | margin-left: auto;
115 | margin-right: none;
116 | justify-content: space-between;
117 | align-items: center;
118 | }
119 |
120 | .navbar__list-container {
121 | display: flex;
122 | margin-left: auto;
123 | }
124 |
125 | .navbar__list__item {
126 | margin-right: 2.5rem;
127 | }
128 |
129 | .navbar__cta-button {
130 | display: flex;
131 | align-items: center;
132 | padding: 1rem 1.5rem;
133 | margin-right: 3rem;
134 | font-size: 1.7rem;
135 | font-weight: 300;
136 | text-transform: capitalize;
137 | letter-spacing: 1px;
138 | color: var(--color-alert);
139 | background-color: transparent;
140 | border: 2px solid var(--color-alert);
141 | transition: all 0.4s;
142 | -webkit-transition: all 0.4s;
143 | }
144 |
145 | .navbar__cta-button:hover,
146 | .navbar__cta-button:active {
147 | cursor: pointer;
148 | color: var(--color-light);
149 | background-color: var(--color-alert);
150 | outline: none;
151 | }
152 |
153 | .navbar__cta-button__icon {
154 | width: 2.5rem;
155 | height: 2.5rem;
156 | margin-left: 1rem;
157 | fill: var(--color-alert);
158 | transition: all 0.4s;
159 | -webkit-transition: all 0.4s;
160 | }
161 |
162 | .navbar__cta-button:hover .navbar__cta-button__icon,
163 | .navbar__cta-button:active .navbar__cta-button__icon {
164 | fill: var(--color-light);
165 | }
166 |
167 | .navbar__list__item a {
168 | position: relative;
169 | display: inline-block;
170 | margin-top: 0.5rem;
171 | padding-bottom: 0.5rem;
172 | font-size: 1.7rem;
173 | text-decoration: none;
174 | color: var(--color-dark);
175 | border-bottom: 2px solid transparent;
176 | transition: all 0.3s ease;
177 | -webkit-transition: all 0.3s ease;
178 | }
179 |
180 | .navbar__list__item a:hover {
181 | border-bottom: 2px solid var(--color-alert);
182 | color: var(--color-alert);
183 | }
184 |
185 | .navbar__list__item:last-of-type a {
186 | margin-right: 1.8rem;
187 | }
188 |
189 | @media only screen and (max-width: 770px) {
190 | .navbar {
191 | background-image: none;
192 | background-color: var(--color-light);
193 | }
194 | }
195 |
196 | @media only screen and (max-width: 728px) {
197 | .navbar {
198 | flex-direction: column;
199 | align-items: center;
200 | justify-content: center;
201 | align-content: center;
202 | height: auto;
203 | }
204 |
205 | .navbar__logo {
206 | height: 3rem;
207 | margin-left: 0;
208 | margin-top: 2rem;
209 | margin-bottom: 2rem;
210 | }
211 |
212 | .navbar__list-container {
213 | margin-left: 0;
214 | margin-bottom: 2rem;
215 | }
216 |
217 | .navbar__list {
218 | margin-right: auto;
219 | }
220 |
221 | .navbar__cta-button {
222 | display: inline-block;
223 | display: flex;
224 | justify-content: center;
225 | align-items: center;
226 | padding: 0.8rem 1.2rem;
227 | color: var(--color-light);
228 | background-color: var(--color-alert);
229 | border: none;
230 | }
231 |
232 | .navbar__cta-button:hover,
233 | .navbar__cta-button:active {
234 | background-color: var(--color-dark);
235 | }
236 |
237 | .navbar__cta-button__icon {
238 | fill: var(--color-light);
239 | }
240 |
241 | .navbar__list__item:last-of-type {
242 | margin-right: 0;
243 | }
244 |
245 | .navbar__list__item:last-of-type a {
246 | margin-right: 0;
247 | }
248 | }
249 |
250 | @media only screen and (max-width: 480px) {
251 | .navbar__list-container {
252 | flex-direction: column-reverse;
253 | }
254 |
255 | .navbar__list {
256 | margin-bottom: 2rem;
257 | }
258 |
259 | .navbar__cta-button {
260 | margin-right: 0;
261 | width: 17rem;
262 | margin: 0 auto;
263 | }
264 | }
265 |
266 | /* - - - - - top - - - - - */
267 | .top-container {
268 | display: flex;
269 | align-items: center;
270 | min-height: calc(100vh - 8.7rem);
271 | margin-top: 8.8rem;
272 | }
273 |
274 | @media only screen and (max-width: 1250px) {
275 | .top-container {
276 | height: max-content;
277 | margin-top: 14rem;
278 | padding-bottom: 12rem;
279 | }
280 | }
281 |
282 | @media only screen and (max-width: 728px) {
283 | .top-container {
284 | margin-top: 6rem;
285 | padding-bottom: 0rem;
286 | }
287 | }
288 |
289 | /* - - - - - top - main button - - - - -*/
290 | .cta-button-container {
291 | display: flex;
292 | justify-content: center;
293 | align-self: center;
294 | }
295 |
296 | .cta-button {
297 | display: flex;
298 | align-items: center;
299 | padding: 2.5rem 3.5rem;
300 | font-size: 2.2rem;
301 | font-weight: 300;
302 | text-transform: capitalize;
303 | letter-spacing: 1px;
304 | color: var(--color-alert);
305 | border: 2px solid var(--color-alert);
306 | background-color: transparent;
307 | transition: all 0.4s;
308 | -webkit-transition: all 0.4s;
309 | }
310 |
311 | .cta-button:hover,
312 | .cta-button:active {
313 | cursor: pointer;
314 | color: var(--color-light);
315 | background-color: var(--color-alert);
316 | outline: none;
317 | }
318 |
319 | .cta-button__icon {
320 | width: 3rem;
321 | height: 3rem;
322 | margin-left: 1rem;
323 | fill: var(--color-alert);
324 | transition: all 0.4s;
325 | -webkit-transition: all 0.4s;
326 | }
327 |
328 | .cta-button:hover .cta-button__icon,
329 | .cta-button:active .cta-button__icon {
330 | fill: var(--color-light);
331 | }
332 |
333 | @media only screen and (max-width: 1250px) {
334 | .cta-button-container {
335 | display: none;
336 | }
337 | .cta-button {
338 | display: none;
339 | }
340 | }
341 |
342 | /* - - - - - top - instructions - - - - - */
343 | .instructions-container {
344 | display: flex;
345 | justify-content: space-between;
346 | width: 70%;
347 | margin: 0 auto;
348 | }
349 |
350 | .instructions {
351 | width: 65%;
352 | margin-left: auto;
353 | display: block;
354 | padding: 3rem;
355 | border: 2px solid var(--color-grey-medium);
356 | }
357 |
358 | .instructions__title {
359 | color: var(--color-dark);
360 | }
361 |
362 | .instructions__subtitle {
363 | margin-top: 2rem;
364 | margin-bottom: 1rem;
365 | }
366 |
367 | .instructions__list {
368 | padding-left: 2rem;
369 | }
370 |
371 | .instructions__text {
372 | margin-bottom: 1rem;
373 | }
374 |
375 | .video-container {
376 | display: inline-flex;
377 | justify-content: center;
378 | align-content: center;
379 | width: 100%;
380 | margin-top: 4%;
381 | padding: 0;
382 | }
383 |
384 | .video {
385 | width: 95%;
386 | max-height: 220px;
387 | padding: 0;
388 | background-color: #151611;
389 | border-radius: 5px;
390 | }
391 |
392 | @media (min-width: 1024px) {
393 | .video {
394 | max-width: 400px;
395 |
396 | max-height: 300px;
397 | }
398 | }
399 |
400 | @media only screen and (max-width: 1250px) {
401 | .instructions-container {
402 | width: 70%;
403 | flex-direction: column;
404 | justify-content: center;
405 | align-items: center;
406 | align-content: center;
407 | }
408 | .instructions {
409 | width: 100%;
410 | margin-right: 0;
411 | margin-top: 4rem;
412 | }
413 | }
414 |
415 | @media only screen and (max-width: 900px) {
416 | .instructions-container {
417 | width: 80%;
418 | }
419 | }
420 |
421 | @media only screen and (max-width: 770px) {
422 | .instructions-container {
423 | width: 100%;
424 | }
425 |
426 | .instructions {
427 | border: none;
428 | border-top: 2px solid var(--color-grey-medium);
429 | border-bottom: 2px solid var(--color-grey-medium);
430 | }
431 | }
432 |
433 | @media only screen and (max-width: 728px) {
434 | .instructions {
435 | border: none;
436 | }
437 | }
438 |
439 | @media only screen and (max-width: 578px) {
440 | .instructions-container {
441 | padding-top: 8rem;
442 | }
443 | }
444 |
445 | @media only screen and (max-width: 480px) {
446 | .instructions-container {
447 | padding-top: 12rem;
448 | }
449 | }
450 |
451 | /* - - - - - credits - - - - - */
452 | .card {
453 | display: flex;
454 | align-items: center;
455 | justify-content: space-between;
456 | margin-bottom: 2rem;
457 | }
458 |
459 | .card:last-of-type {
460 | margin-bottom: 0;
461 | }
462 |
463 | .card__img {
464 | width: 10rem;
465 | height: 10rem;
466 | overflow: hidden;
467 | display: flex;
468 | justify-content: center;
469 | align-content: center;
470 | }
471 | .avatar {
472 | border-radius: 50%;
473 | border: 2px solid var(--color-dark);
474 | max-width: 100%;
475 | max-height: 100%;
476 | }
477 |
478 | .card__text {
479 | flex: 1;
480 | margin-left: 2.5rem;
481 | }
482 |
483 | .divider {
484 | display: block;
485 | height: 1px;
486 | margin-bottom: 3.5rem;
487 | padding: 0;
488 | border: 0;
489 | border-top: 1px solid var(--color-dark);
490 | }
491 |
492 | @media only screen and (max-width: 578px) {
493 | .card {
494 | flex-direction: column;
495 | }
496 |
497 | .card__img {
498 | margin-bottom: 2rem;
499 | }
500 |
501 | .card__text {
502 | margin-left: 0;
503 | }
504 |
505 | .card__text h3 {
506 | text-align: center;
507 | }
508 | }
509 |
510 | /* - - - - - contact - - - - - */
511 | .contact-container {
512 | width: 100%;
513 | }
514 | .input-field {
515 | display: flex;
516 | flex-direction: column;
517 | width: 100%;
518 | }
519 |
520 | .input-field label {
521 | margin-bottom: 1rem;
522 | font-size: 1.8rem;
523 | }
524 |
525 | .input-field input {
526 | margin-bottom: 3rem;
527 | padding: 1rem;
528 | font-size: 1.6rem;
529 | font-family: var(--font-default);
530 | outline: none;
531 | border: none;
532 | }
533 |
534 | form textarea {
535 | width: 100%;
536 | margin-bottom: 3rem;
537 | padding: 1rem;
538 | font-size: 1.6rem;
539 | font-family: var(--font-default);
540 | outline: none;
541 | resize: none;
542 | border: none;
543 | }
544 |
545 | .btn-submit {
546 | width: 100%;
547 | padding: 2rem 0;
548 | font-size: 1.8rem;
549 | font-weight: 300;
550 | text-transform: capitalize;
551 | letter-spacing: 1px;
552 | opacity: 1;
553 | color: var(--color-light);
554 | background-color: var(--color-dark);
555 | outline: none;
556 | border: none;
557 | transition: all 0.4;
558 | -webkit-transition: all 0.4;
559 | }
560 |
561 | .btn-submit:hover,
562 | .btn-submit:active {
563 | cursor: pointer;
564 | opacity: 0.8;
565 | }
566 |
567 | /* - - - footer - - - */
568 | .footer {
569 | display: flex;
570 | flex-direction: column;
571 | justify-content: space-between;
572 | height: 30rem;
573 | padding: 2rem 10rem;
574 | background-color: var(--color-dark);
575 | }
576 |
577 | @media only screen and (max-width: 728px) {
578 | .footer {
579 | padding: 2rem 4rem 3rem 4rem;
580 | }
581 | }
582 |
583 | @media only screen and (max-width: 380px) {
584 | .footer {
585 | height: 35rem;
586 | }
587 | }
588 |
589 | .footer__top-container {
590 | padding: 0 2rem;
591 | display: flex;
592 | justify-content: space-between;
593 | height: 19.5rem;
594 | align-items: center;
595 | }
596 |
597 | @media only screen and (max-width: 380px) {
598 | .footer__top-container {
599 | flex-direction: column-reverse;
600 | align-items: center;
601 | justify-content: center;
602 | height: 22rem;
603 | }
604 | }
605 |
606 | .footer__logo {
607 | height: 10rem;
608 | width: 11.2rem;
609 | }
610 |
611 | .footer__list {
612 | padding: 0;
613 | margin: 0;
614 | list-style: none;
615 | }
616 |
617 | @media only screen and (max-width: 380px) {
618 | .footer__list {
619 | text-align: center;
620 | margin-top: 2.4rem;
621 | }
622 | }
623 |
624 | .footer__list__item {
625 | margin-top: 0.5rem;
626 | }
627 |
628 | .footer__list__item a {
629 | font-size: 1.7rem;
630 | color: var(--color-grey-light);
631 | text-decoration: none;
632 | font-weight: 300;
633 | }
634 |
635 | .footer__list__item a:hover {
636 | color: var(--color-primary-main);
637 | }
638 |
639 | .footer__bottom-container {
640 | display: flex;
641 | justify-content: space-between;
642 | align-items: center;
643 | border-top: 1px solid #d9d900;
644 | padding-top: 1rem;
645 | }
646 |
647 | @media only screen and (max-width: 380px) {
648 | .footer__bottom-container {
649 | flex-direction: column;
650 | align-items: center;
651 | }
652 | }
653 |
654 | .footer--logo-lemon-container:hover .footer--logo-lemon {
655 | fill: var(--color-secondary-main);
656 | }
657 |
658 | .footer--logo-lemon {
659 | position: absolute;
660 | top: 0.8rem;
661 | right: 1.6rem;
662 | fill: var(--color-light);
663 | height: 10rem;
664 | width: 10rem;
665 | }
666 |
667 | .footer__icon-list {
668 | display: flex;
669 | align-items: center;
670 | padding: 0;
671 | margin: 0;
672 | list-style: none;
673 | }
674 |
675 | .footer__icon-list-item {
676 | margin-right: 1.2rem;
677 | }
678 | .footer__icon-list-item:last-of-type {
679 | margin-right: 0;
680 | }
681 |
682 | .footer__icon {
683 | height: 2.4rem;
684 | width: 2.4rem;
685 | fill: var(--color-grey-light);
686 | }
687 |
688 | .footer__icon:hover {
689 | fill: var(--color-primary-main);
690 | }
691 |
692 | .footer__icon-twitter {
693 | height: 3.5rem;
694 | width: 3.5rem;
695 | margin-top: 0.2rem;
696 | margin-right: -0.6rem;
697 | margin-left: -0.6rem;
698 | fill: var(--color-grey-light);
699 | }
700 |
701 | .footer__icon-twitter:hover {
702 | fill: var(--color-primary-main);
703 | }
704 |
705 | .footer__copyright {
706 | color: var(--color-grey-light);
707 | font-weight: 300;
708 | font-size: 1.4rem;
709 | }
710 |
711 | @media only screen and (max-width: 578px) {
712 | .footer__copyright {
713 | margin-top: 0.4rem;
714 | }
715 | }
716 |
--------------------------------------------------------------------------------
21 |
22 |