Skip to content

Commit b309786

Browse files
vinayakguptaavinayakguptaa
committed
Merge branch 'main' of github.com:Fool-Stack/CodEd into main
2 parents 3a56660 + 4e69f96 commit b309786

File tree

13 files changed

+39585
-39053
lines changed

13 files changed

+39585
-39053
lines changed

‎package-lock.json

+39,013-38,981
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+44-43
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,46 @@
11
{
2-
"name": "coded",
3-
"version": "0.1.0",
4-
"private": true,
5-
"dependencies": {
6-
"@material-ui/core": "^4.11.3",
7-
"@material-ui/icons": "^4.11.2",
8-
"@testing-library/jest-dom": "^5.11.9",
9-
"@testing-library/react": "^11.2.5",
10-
"@testing-library/user-event": "^12.8.3",
11-
"axios": "^0.21.1",
12-
"monaco-editor-webpack-plugin": "^3.0.1",
13-
"react": "^17.0.1",
14-
"react-app-rewired": "^2.1.8",
15-
"react-dom": "^17.0.1",
16-
"react-monaco-editor": "^0.43.0",
17-
"react-router-dom": "^5.2.0",
18-
"react-scripts": "4.0.3",
19-
"web-vitals": "^1.1.1"
20-
},
21-
"scripts": {
22-
"start": "react-app-rewired start",
23-
"build": "react-app-rewired build",
24-
"test": "react-app-rewired test",
25-
"eject": "react-app-rewired eject"
26-
},
27-
"eslintConfig": {
28-
"extends": [
29-
"react-app",
30-
"react-app/jest"
31-
]
32-
},
33-
"browserslist": {
34-
"production": [
35-
">0.2%",
36-
"not dead",
37-
"not op_mini all"
38-
],
39-
"development": [
40-
"last 1 chrome version",
41-
"last 1 firefox version",
42-
"last 1 safari version"
43-
]
44-
}
2+
"name": "coded",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@material-ui/core": "^4.11.3",
7+
"@material-ui/icons": "^4.11.2",
8+
"@testing-library/jest-dom": "^5.11.9",
9+
"@testing-library/react": "^11.2.5",
10+
"@testing-library/user-event": "^12.8.3",
11+
"axios": "^0.21.1",
12+
"monaco-editor-webpack-plugin": "^3.0.1",
13+
"react": "^17.0.1",
14+
"react-app-rewired": "^2.1.8",
15+
"react-dom": "^17.0.1",
16+
"react-media-recorder": "^1.4.0",
17+
"react-monaco-editor": "^0.43.0",
18+
"react-router-dom": "^5.2.0",
19+
"react-scripts": "4.0.3",
20+
"web-vitals": "^1.1.1"
21+
},
22+
"scripts": {
23+
"start": "react-app-rewired start",
24+
"build": "react-app-rewired build",
25+
"test": "react-app-rewired test",
26+
"eject": "react-app-rewired eject"
27+
},
28+
"eslintConfig": {
29+
"extends": [
30+
"react-app",
31+
"react-app/jest"
32+
]
33+
},
34+
"browserslist": {
35+
"production": [
36+
">0.2%",
37+
"not dead",
38+
"not op_mini all"
39+
],
40+
"development": [
41+
"last 1 chrome version",
42+
"last 1 firefox version",
43+
"last 1 safari version"
44+
]
45+
}
4546
}

‎src/App.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;700;900&display=swap');
23
.App {
34
background-color: #2D076A;
45
font-family: "Noto Sans JP", sans-serif;

‎src/components/CodeResult/CodeResult.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.window-pane {
2+
height: 60%;
3+
background-color: white;
4+
border-bottom-left-radius: 3px;
5+
border-bottom-right-radius: 3px;
6+
padding: 3%;
7+
color: black;
8+
font-family: "Inconsolata", monospace;
9+
font-size: 1.5rem;
10+
position: relative;
11+
}
12+
13+
.code-run-div {
14+
position: absolute;
15+
bottom: 0;
16+
margin-left: auto;
17+
margin-right: auto;
18+
}

‎src/components/CodeResult/CodeResult.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from "react";
2+
import WindowBar from "../WindowBar/WindowBar";
3+
import "./CodeResult.css";
4+
5+
const CodeResult = ({ codeOutput }) => {
6+
return (
7+
<>
8+
<WindowBar title="Result" />
9+
<div className="window-pane">
10+
1<br />
11+
2<br />
12+
</div>
13+
</>
14+
);
15+
};
16+
17+
export default CodeResult;

‎src/components/HTMLPreview/HTMLPreview.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from "react";
2+
import WindowBar from "../WindowBar/WindowBar";
3+
4+
const HTMLPreview = ({ srcDoc }) => {
5+
return (
6+
<>
7+
<WindowBar title="Preview" />
8+
<iframe
9+
srcDoc={srcDoc}
10+
title="Preview"
11+
width="100%"
12+
height="60%"
13+
style={{ background: "white" }}
14+
/>
15+
</>
16+
);
17+
};
18+
19+
export default HTMLPreview;

‎src/components/WindowBar/WindowBar.css

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.outer {
2+
background: #273138;
3+
padding: 10px;
4+
border-radius: 7px 7px 0px 0px;
5+
}
6+
7+
.outer.light {
8+
background: #f6f6f6;
9+
/* Old browsers */
10+
background: -moz-linear-gradient(top, #f6f6f6 0%, #dadada 100%);
11+
/* FF3.6+ */
12+
background: -webkit-gradient(
13+
linear,
14+
left top,
15+
left bottom,
16+
color-stop(0%, #f6f6f6),
17+
color-stop(100%, #dadada)
18+
);
19+
/* Chrome,Safari4+ */
20+
background: -webkit-linear-gradient(top, #f6f6f6 0%, #dadada 100%);
21+
/* Chrome10+,Safari5.1+ */
22+
background: -o-linear-gradient(top, #f6f6f6 0%, #dadada 100%);
23+
/* Opera 11.10+ */
24+
background: -ms-linear-gradient(top, #f6f6f6 0%, #dadada 100%);
25+
/* IE10+ */
26+
background: linear-gradient(to bottom, #f6f6f6 0%, #dadada 100%);
27+
/* W3C */
28+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#dadada', GradientType=0);
29+
/* IE6-9 */
30+
border: 1px solid #d8d8d8;
31+
border-bottom: 1px solid #b4b4b4;
32+
}
33+
34+
.dot {
35+
display: inline-block;
36+
width: 10px;
37+
height: 10px;
38+
background: #f9f9f9;
39+
border-radius: 50%;
40+
margin: 0 4px 0 0;
41+
}
42+
43+
.dot.red {
44+
background: #ff6057;
45+
border: 1px solid #e14640;
46+
}
47+
48+
.dot.amber {
49+
background: #ffbd2e;
50+
border: 1px solid #dfa123;
51+
}
52+
53+
.dot.green {
54+
background: #27c93f;
55+
border: 1px solid #1dad2b;
56+
}
57+
58+
.titlebar {
59+
width: calc(100% - 50px);
60+
display: inline-block;
61+
text-align: center;
62+
font-weight: 600;
63+
color: #fff;
64+
margin-left: -18px;
65+
}
66+
67+
.light .titlebar {
68+
color: #333;
69+
}

‎src/components/WindowBar/WindowBar.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from "react";
2+
import "./WindowBar.css";
3+
4+
const WindowBar = ({ light, title }) => {
5+
return (
6+
<div className={`outer ${light ? "light" : "dark"}`}>
7+
<div className="dot red"></div>
8+
<div className="dot amber"></div>
9+
<div className="dot green"></div>
10+
<div className="titlebar">{title}</div>
11+
</div>
12+
);
13+
};
14+
15+
export default WindowBar;

‎src/pages/Recording/Recording.css

+58-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,58 @@
1-
/* .recording-editor-section {
2-
min-height: 100vh;
3-
} */
1+
.recording-editor-section {
2+
height: 100vh;
3+
display: flex;
4+
flex-direction: column;
5+
/* justify-content: center; */
6+
align-items: center;
7+
}
8+
9+
.recording-editor-section .nav {
10+
width: 100%;
11+
/* background-color: 2D076A !important; */
12+
}
13+
14+
.editor-header {
15+
/* width: 88%; */
16+
background-color: black;
17+
padding: 1% 1%;
18+
padding-left: 10px;
19+
}
20+
21+
.editor-header span {
22+
font-size: 0.8rem;
23+
}
24+
25+
.recording-editor-section iframe {
26+
border: none;
27+
border-bottom-left-radius: 3px;
28+
border-bottom-right-radius: 3px;
29+
}
30+
31+
.action-bar {
32+
margin-top: 10%;
33+
display: flex;
34+
justify-content: space-between;
35+
align-items: center;
36+
width: 100%;
37+
background-color: #21054d;
38+
padding: 3%;
39+
border-radius: 5px;
40+
}
41+
42+
.action-bar h1 {
43+
margin: 0;
44+
}
45+
46+
.middle-row {
47+
display: flex;
48+
justify-content: center;
49+
align-items: center;
50+
}
51+
52+
.recording-btn {
53+
background-color: red !important;
54+
}
55+
56+
.play-btn {
57+
background-color: white !important;
58+
}

0 commit comments

Comments
 (0)