Initial commit

1 files changed, 211 insertions, 0 deletions

diff --git a/frontend/index.css b/frontend/index.css
new file mode 100644
index 0000000..9139963
--- /dev/null
+++ b/frontend/index.css
@@ -0,0 +1,211 @@
+body {
+    font-size: 16px;
+    font-family: "Open Sans", sans-serif;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0rem;
+    padding: 0rem;
+}
+
+header {
+    padding-top: 1rem;
+    width: 1260px;
+    flex: 0 1 auto;
+    text-align: center;
+}
+
+header > h1 {
+    margin: 0rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
+main {
+    color: #1a1a1a;
+    width: 1260px;
+    background-color: white;
+    flex: 1 1 100%;
+    height: 100%;
+    margin-bottom: 1rem;
+    overflow-y: auto;
+}
+
+nav {
+    width: 1260px;
+    text-align: left;
+    font-size: 1rem;
+    border-bottom: 1px solid #404040;
+}
+
+nav > a {
+    color: #404040;
+    text-decoration: none;
+    display: inline-block;
+    min-width: 196px;
+    padding: 0.25rem;
+}
+
+nav > a:hover {
+    color: #1a1a1a;
+    cursor: pointer;
+}
+
+.nav-selected {
+    color: black;
+    font-weight: bold;
+}
+
+section {
+    padding: 1rem;
+}
+
+hr {
+    width: 90%;
+}
+
+.spin-loader {
+    border: 5px solid #f3f3f3;
+    border-top: 5px solid #555;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+section > p {
+    padding-left: 2rem;
+    padding-right: 2rem;
+}
+
+/*
+    Helpful inputs
+*/
+.vec2_input_group {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-evenly;
+    padding: 0.25rem;
+}
+
+.vec2_input_group > input {
+    width: 45%;
+}
+
+/*
+    WebGL container styling from here on.
+*/
+section .opengl_canvas_container {
+    position: relative;
+    width: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+section .opengl_canvas_container .play_button {
+    all: unset;
+    font-size: 2rem;
+    width: 128px;
+    height: 128px;
+    position: absolute;
+    top: calc(50% - 56px);
+    left: calc(50% - 220px);
+    border: 1px solid white;
+    color: white;
+    background-color: transparent;
+    border-radius: 50%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+section .opengl_canvas_container .play_button:hover {
+    cursor: pointer;
+}
+
+section .opengl_canvas_container .stop_button {
+    all: unset;
+    font-size: 1rem;
+    background-color: red;
+    color: white;
+    position: absolute;
+    width: 128px;
+    height: 2rem;
+    border-radius: 2px;
+    top: 0.5rem;
+    left: 612px;
+    display: none;
+}
+
+section .opengl_canvas_container .stop_button:hover {
+    cursor: pointer;
+}
+
+section pre {
+    width: 90%;
+    overflow-x: auto;
+    padding-left: 2rem;
+}
+
+.opengl_canvas_sidebar {
+    width: 312px;
+    height: 480px;
+    border: 1px solid #1a1a1a;
+    border-left: none;
+
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    justify-content: space-between;
+}
+
+.opengl_canvas_sidebar .opengl_value_tracker {
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.opengl_canvas_sidebar .opengl_value_tracker > li {
+    padding-bottom: 0.5rem;
+}
+
+.opengl_canvas_sidebar .opengl_value_tracker > li > b {
+    display: inline-block;
+    width: 128px;
+}
+
+.opengl_canvas_sidebar .opengl_value_tracker > li > span {
+    display: inline-block;
+}
+
+/*
+    Code styles
+*/
+.code_keyword {
+    color: blue;
+    font-weight: bold;
+}
+
+.code_constant {
+    font-weight: bold;
+}
+
+.code_str {
+    color: orange;
+}
+
+.code_comment {
+    color: green;
+}
\ No newline at end of file