hugging face update

README.md

@@ -1,13 +1 @@
----
-title: Paperstocode
-emoji: 😻
-colorFrom: indigo
-colorTo: indigo
-sdk: streamlit
-sdk_version: 1.17.0
-app_file: app.py
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# papertocode

app.py

@@ -1,14 +1,35 @@
 import streamlit as st
-from transformers import pipeline
-from PIL import Image
+from io import StringIO
+import os
 
-pipeline = pipeline(task="image-classification", model="julien-c/hotdog-not-hotdog")
+from retrieval.single_prompt import generate_code
 
-st.title("Hot Dog? Or Not?")
 
-file_name = st.file_uploader("Upload the paper you want to see code for")
+st.title("Papers with Code")
 
-with open(file_name, "r") as f:
-    text = f.read()
+uploaded_file = st.file_uploader("Choose a file")
 
-st.write(text)
+if uploaded_file is not None:
+    col1, col2 = st.columns(2)
+    # To convert to a string based IO:
+    stringio = StringIO(uploaded_file.getvalue().decode("utf-8"))
+    # st.write(stringio)
+
+    # To read file as string:
+    string_data = stringio.read()
+    # col1.header(len(string_data))
+
+    with st.expander("Show LaTeX"):
+        st.header("Paper Contents")
+        st.code(rf"""{string_data} """, language="latex")
+
+
+    bar = st.progress(0, "Generating Code")
+    code = "import torch"
+    for complete in range(5):
+        code += generate_code(string_data, model_name=os.environ["OPENAI_MODEL_NAME"], code=code)
+        bar.progress((complete + 1) * 20)
+        
+    with st.expander("Show Generated Code"):
+        st.header("Generated Code")
+        st.code(code)

code.py

@@ -1,160 +0,0 @@
-import streamlit as st
-from streamlit_embedcode import *
-
-st.set_page_config(page_title="streamlit-embedcode documentation",)
-
-choice = st.sidebar.radio(
-    "Please choose a function to see its documentation",
-    (
-        "Home",
-        "github_gist()",
-        "gitlab_snippet()",
-        "pastebin_snippet()",
-        "codepen_snippet()",
-        "ideone_snippet()",
-        "tagmycode_snippet()",
-    ),
-)
-
-if choice == "Home":
-    """
-    # streamlit-embedcode
-
-    [streamlit-embedcode](https://github.com/randyzwitch/streamlit-embedcode) is the easiest way to embed code snippets into your Streamlit app! This component supports the following code sharing services:
-
-    - [GitHub gist](https://gist.github.com/)
-    - [GitLab snippets](https://gitlab.com/explore/snippets)
-    - [Pastebin](https://pastebin.com/)
-    - [CodePen](https://codepen.io/)
-    - [Ideone](https://ideone.com/)
-    - [TagMyCode](https://tagmycode.com/)
-
-    ---
-
-    ## Installation
-
-    streamlit-embedcode is distributed via PyPI:
-
-    ```python
-    pip install streamlit-embedcode
-    ```
-    ---
-
-    ## Examples
-    To see examples for each function, please select using the radio button in the sidebar.
-    """
-
-elif choice == "github_gist()":
-    """## github_gist()"""
-
-    github_gist
-
-    "---"
-    "### Example:"
-    with st.echo():
-
-        import streamlit as st
-        from streamlit_embedcode import github_gist
-
-        t = st.text_input(
-            "Enter GitHub gist URL:",
-            "https://gist.github.com/randyzwitch/934d502e53f2adcb48eea2423fe4a47e",
-        )
-
-        w = st.slider("width", 300, 800, 710)
-        github_gist(t, width=w)
-
-elif choice == "gitlab_snippet()":
-    """## gitlab_snippet()"""
-
-    gitlab_snippet
-
-    "---"
-    "### Example:"
-    with st.echo():
-
-        import streamlit as st
-        from streamlit_embedcode import gitlab_snippet
-
-        t = st.text_input(
-            "Enter GitLab snippet URL:", "https://gitlab.com/snippets/1995463",
-        )
-
-        w = st.slider("width", 300, 800, 710)
-        gitlab_snippet(t, width=w)
-
-elif choice == "pastebin_snippet()":
-    """## pastebin_snippet()"""
-
-    pastebin_snippet
-
-    "---"
-    "### Example:"
-    with st.echo():
-
-        import streamlit as st
-        from streamlit_embedcode import pastebin_snippet
-
-        t = st.text_input(
-            "Enter Pastebin snippet URL:", "https://pastebin.com/i1YQv94Q",
-        )
-
-        w = st.slider("width", 300, 800, 710)
-        pastebin_snippet(t, width=w)
-
-elif choice == "codepen_snippet()":
-    """## codepen_snippet()"""
-
-    codepen_snippet
-
-    "---"
-    "### Example:"
-    with st.echo():
-
-        import streamlit as st
-        from streamlit_embedcode import codepen_snippet
-
-        t = st.text_input(
-            "Enter CodePen snippet URL:", "https://codepen.io/ste-vg/pen/GRooLza",
-        )
-
-        w = st.slider("width", 300, 800, 750, key="1")
-        h = st.slider("height", 500, 800, 600, key="2")
-        codepen_snippet(t, width=w, height=h)
-
-elif choice == "ideone_snippet()":
-    """## ideone_snippet()"""
-
-    ideone_snippet
-
-    "---"
-    "### Example:"
-    with st.echo():
-
-        import streamlit as st
-        from streamlit_embedcode import ideone_snippet
-
-        t = st.text_input("Enter Ideone snippet URL:", "https://ideone.com/vQ54cr",)
-
-        w = st.slider("width", 300, 800, 710, key="1")
-        ideone_snippet(t, width=w)
-
-elif choice == "tagmycode_snippet()":
-    """## tagmycode_snippet()"""
-
-    tagmycode_snippet
-
-    "---"
-    "### Example:"
-    with st.echo():
-
-        import streamlit as st
-        from streamlit_embedcode import tagmycode_snippet
-
-        t = st.text_input(
-            "Enter Ideone snippet URL:",
-            "https://tagmycode.com/snippet/5965/recursive-list-files-in-a-dir#.Xwyc43VKglU",
-        )
-
-        w = st.slider("width", 300, 800, 710, key="1")
-        tagmycode_snippet(t, width=w)

downloader.py

@@ -1,68 +0,0 @@
-# python 3.8.5
-"""
-Given an Arxiv url, downloads the Tex files from the e-print URL,
-opens the directory that was downloaded, and concatenatnes all the .tex files together
-"""
-import os
-import sys
-import requests
-import shutil
-import gzip
-import glob
-import subprocess
-import time
-import re
-import argparse
-import logging
-
-logging.basicConfig(level=logging.INFO)
-logger = logging.getLogger(__name__)
-
-
-def download_arxiv(url, output_dir):
-    """
-    Given an Arxiv url, downloads the Tex files from the e-print URL
-    For example, the url https://arxiv.org/abs/2206.13947
-    """
-    logger.info("Downloading %s", url)
-    # Get the arxiv id from the url
-    arxiv_id = re.search(r"arxiv\.org\/abs\/(.*)", url).group(1)
-    # Download the gz archive
-    filename = os.path.join(output_dir, f"{arxiv_id}.gz")
-    with requests.get(f"https://arxiv.org/e-print/{arxiv_id}", stream=True) as r:
-        with open(filename, "wb") as f:
-            shutil.copyfileobj(r.raw, f)
-    return filename
-
-
-def concat_tex_files_in_archive(archive_path, output_dir):
-    """
-    Given an archive path, extracts the tex files and concatenates them together
-    """
-    # Extract the gz archive
-    with gzip.open(archive_path, "rb") as f_in:
-        with open(archive_path[:-3], "wb") as f_out:
-            shutil.copyfileobj(f_in, f_out)
-    # Concatenate the tex files
-    tex_files = glob.glob(f"{archive_path[:-3]}/*.tex")
-    with open(os.path.join(output_dir, "concat.tex"), "w") as f:
-        for tex_file in tex_files:
-            with open(tex_file) as f_in:
-                f.write(f_in.read())
-    # Remove the extracted file and gz archive
-    # os.remove(archive_path[:-3])
-    # os.remove(archive_path)
-
-
-def main():
-    parser = argparse.ArgumentParser()
-    parser.add_argument("url", type=str, help="Arxiv URL")
-    parser.add_argument("--output_dir", type=str, default=".", help="Output directory")
-    args = parser.parse_args()
-
-    archive_path = download_arxiv(args.url, args.output_dir)
-    concat_tex_files_in_archive(archive_path, args.output_dir)
-
-
-if __name__ == "__main__":
-    main()

frontend/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

frontend/.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

frontend/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

frontend/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

frontend/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

frontend/README.md

@@ -0,0 +1,27 @@
+# Frontend
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.2.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

frontend/angular.json

@@ -0,0 +1,104 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "frontend": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/frontend",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "frontend:build:production"
+            },
+            "development": {
+              "browserTarget": "frontend:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "frontend:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "frontend",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^15.0.0",
+    "@angular/common": "^15.0.0",
+    "@angular/compiler": "^15.0.0",
+    "@angular/core": "^15.0.0",
+    "@angular/forms": "^15.0.0",
+    "@angular/platform-browser": "^15.0.0",
+    "@angular/platform-browser-dynamic": "^15.0.0",
+    "@angular/router": "^15.0.0",
+    "inter-ui": "^3.19.3",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.12.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^15.0.2",
+    "@angular/cli": "~15.0.2",
+    "@angular/compiler-cli": "^15.0.0",
+    "@types/jasmine": "~4.3.0",
+    "jasmine-core": "~4.5.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "typescript": "~4.8.2"
+  }
+}

frontend/src/app/app-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

frontend/src/app/app.component.html

@@ -0,0 +1,314 @@
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
+<!-- * * * * * * * to get started with your project! * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+<style>
+  :host {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 14px;
+    color: #333;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .spacer {
+    flex: 1;
+  }
+
+  .toolbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    background-color: #1976d2;
+    color: white;
+    font-weight: 600;
+  }
+
+  .toolbar img {
+    margin: 0 16px;
+  }
+
+  .toolbar #twitter-logo {
+    height: 40px;
+    margin: 0 8px;
+  }
+
+  .toolbar #youtube-logo {
+    height: 40px;
+    margin: 0 16px;
+  }
+
+  .toolbar #twitter-logo:hover,
+  .toolbar #youtube-logo:hover {
+    opacity: 0.8;
+  }
+
+  .content {
+    display: flex;
+    margin: 82px auto 32px;
+    padding: 0 16px;
+    max-width: 960px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  svg.material-icons {
+    height: 24px;
+    width: auto;
+  }
+
+  svg.material-icons:not(:last-child) {
+    margin-right: 8px;
+  }
+
+  .card svg.material-icons path {
+    fill: #888;
+  }
+
+  .card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 16px;
+  }
+
+  .card {
+    all: unset;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    background-color: #fafafa;
+    height: 40px;
+    width: 200px;
+    margin: 0 8px 16px;
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s ease-in-out;
+    line-height: 24px;
+  }
+
+  .card-container .card:not(:last-child) {
+    margin-right: 0;
+  }
+
+  .card.card-small {
+    height: 16px;
+    width: 168px;
+  }
+
+  .card-container .card:not(.highlight-card) {
+    cursor: pointer;
+  }
+
+  .card-container .card:not(.highlight-card):hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
+  }
+
+  .card-container .card:not(.highlight-card):hover .material-icons path {
+    fill: rgb(105, 103, 103);
+  }
+
+  .card.highlight-card {
+    background-color: #1976d2;
+    color: white;
+    font-weight: 600;
+    border: none;
+    width: auto;
+    min-width: 30%;
+    position: relative;
+  }
+
+  .card.card.highlight-card span {
+    margin-left: 60px;
+  }
+
+  svg#rocket {
+    width: 80px;
+    position: absolute;
+    left: -10px;
+    top: -24px;
+  }
+
+  svg#rocket-smoke {
+    height: calc(100vh - 95px);
+    position: absolute;
+    top: 10px;
+    right: 180px;
+    z-index: -10;
+  }
+
+  a,
+  a:visited,
+  a:hover {
+    color: #1976d2;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: #125699;
+  }
+
+  .terminal {
+    position: relative;
+    width: 80%;
+    max-width: 600px;
+    border-radius: 6px;
+    padding-top: 45px;
+    margin-top: 8px;
+    overflow: hidden;
+    background-color: rgb(15, 15, 16);
+  }
+
+  .terminal::before {
+    content: "\2022 \2022 \2022";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 4px;
+    background: rgb(58, 58, 58);
+    color: #c2c3c4;
+    width: 100%;
+    font-size: 2rem;
+    line-height: 0;
+    padding: 14px 0;
+    text-indent: 4px;
+  }
+
+  .terminal pre {
+    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+    color: white;
+    padding: 0 1rem 1rem;
+    margin: 0;
+  }
+
+  .circle-link {
+    height: 40px;
+    width: 40px;
+    border-radius: 40px;
+    margin: 8px;
+    background-color: white;
+    border: 1px solid #eeeeee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: 1s ease-out;
+  }
+
+  .circle-link:hover {
+    transform: translateY(-0.25rem);
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+  }
+
+  footer {
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    line-height: 20px;
+  }
+
+  footer a {
+    display: flex;
+    align-items: center;
+  }
+
+  .github-star-badge {
+    color: #24292e;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    padding: 3px 10px;
+    border: 1px solid rgba(27,31,35,.2);
+    border-radius: 3px;
+    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
+    margin-left: 4px;
+    font-weight: 600;
+  }
+
+  .github-star-badge:hover {
+    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
+    border-color: rgba(27,31,35,.35);
+    background-position: -.5em;
+  }
+
+  .github-star-badge .material-icons {
+    height: 16px;
+    width: 16px;
+    margin-right: 4px;
+  }
+
+  svg#clouds {
+    position: fixed;
+    bottom: -160px;
+    left: -230px;
+    z-index: -10;
+    width: 1920px;
+  }
+
+  /* Responsive Styles */
+  @media screen and (max-width: 767px) {
+    .card-container > *:not(.circle-link) ,
+    .terminal {
+      width: 100%;
+    }
+
+    .card:not(.highlight-card) {
+      height: 16px;
+      margin: 8px 0;
+    }
+
+    .card.highlight-card span {
+      margin-left: 72px;
+    }
+
+    svg#rocket-smoke {
+      right: 120px;
+      transform: rotate(-5deg);
+    }
+  }
+
+  @media screen and (max-width: 575px) {
+    svg#rocket-smoke {
+      display: none;
+      visibility: hidden;
+    }
+  }
+</style>
+<UploaderComponent></UploaderComponent>
+
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+<router-outlet></router-outlet>

frontend/src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'frontend'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('frontend');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('frontend app is running!');
+  });
+});

frontend/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'frontend';
+}

frontend/src/app/app.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { UploaderComponent } from './uploader/uploader.component';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    UploaderComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

frontend/src/app/uploader/uploader.component.html

@@ -0,0 +1,199 @@
+<div class="GymSetup__flexParent">
+  <div *ngIf="currStep ===1" class="GymSetup__stepOne" [ngClass]="{'GymSteup__stepHidden': stepOne !== 1}">
+    <div class="GymSetup__stepOneDescription">First Lets learn a bit about your gym</div>
+    <div class="GymSetup__stepOneadditionalInfo">The info we collect will be shown to in the app to people looking for a gym</div>
+    <div class="GymSetup__stepBox">
+      <form class="GymSetup__stepOneForm">
+        <label class="GymSetup__LabelText GymSetup__stepOneGymNameLabelSpacer">Gym Name</label>
+        <input class="GymSetup__textInput GymSetup__stepOneInputSpacer" type="text">
+        <label class="GymSetup__LabelText GymSetup__stepOneLabelSpacer">Gym Phone Number</label>
+        <input class="GymSetup__textInput GymSetup__stepOneInputSpacer" type="text" appPhoneMask>
+        <label class="GymSetup__LabelText GymSetup__stepOneLabelSpacer">Address</label>
+        <input class="GymSetup__textInput GymSetup__stepOneInputSpacer" type="text">
+        <label class="GymSetup__LabelText GymSetup__stepOneLabelSpacer">Website</label>
+        <input class="GymSetup__textInput GymSetup__stepOneInputSpacer" type="text">
+        <label class="GymSetup__LabelText GymSetup__stepOneLabelSpacer">Description: tell people a little about your gym</label>
+        <textarea class="GymSetup__textInput GymSetup__stepOneInputSpacer GymSetup__descriptionTextBox"></textarea>
+      </form>
+    </div>
+    <button class="GymSetup__StepOneButton" (click)="stepOneContinue()">Continue</button>
+
+  </div>
+
+  <div *ngIf="currStep ===2" class="GymSetup__stepOne" [ngClass]="{'GymSteup__stepHidden': stepOne !== 2}">
+    <div class="GymSetup__stepOneDescription">What are your hours of operation?</div>
+    <div class="GymSetup__stepOneadditionalInfo">Please only enter hours someone will need to be present to check people in for a workout</div>
+    <div class="GymSetup__stepTwoBox">
+      <form class="GymSetup__stepOneForm">
+
+        <div class="GymSetup__stepTwoDayOfWeek">
+          <label class="GymSetup__dayLabelText">Monday</label>
+          <div class="GymSetup__StepTwoHoursInputFlex">
+            <input class="GymSetup__hoursInput GymSetup__stepTwoInputSpacer" type="time"  name="mondayOpen"  required> <span>-</span> <input class="GymSetup__hoursInput GymSetup__stepTwoInputSpacer" type="time"  name="mondayOpen"  required>
+          </div>
+          <input class="GymSetup__closeCheckboxInput" type="checkbox"><label class="GymSetup__openClose">Closed</label>
+        </div>
+
+
+        <div class="GymSetup__stepTwoDayOfWeek">
+          <label class="GymSetup__dayLabelText">Tuesday</label>
+          <div class="GymSetup__StepTwoHoursInputFlex">
+            <input class="GymSetup__hoursInput GymSetup__stepTwoInputSpacer" type="time"  name="mondayOpen"  required> <span>-</span> <input class="GymSetup__hoursInput GymSetup__stepTwoInputSpacer" type="time"  name="mondayOpen"  required>
+          </div>
+          <input class="GymSetup__closeCheckboxInput" type="checkbox"><label class="GymSetup__openClose">Closed</label>
+        </div>
+
+
+        <div class="GymSetup__stepTwoDayOfWeek">
+          <label class="GymSetup__dayLabelText">Wednesday</label>
+          <div class="GymSetup__StepTwoHoursInputFlex">
+            <input class="GymSetup__hoursInput GymSetup__stepTwoInputSpacer" type="time"  name="mondayOpen"  required> <span>-</span> <input class="GymSetup__hoursInput GymSetup__stepTwoInputSpacer" type="time"  name="mondayOpen"  required>
+          </div>
+          <input class="GymSetup__closeCheckboxInput" type="checkbox"><label class="GymSetup__openClose">Closed</label>
+        </div>
+
+
+        <div class="GymSetup__stepTwoDayOfWeek">
+          <label class="GymSetup__dayLabelText">Thursday</label>
+          <div class="GymSetup__StepTwoHoursInputFlex">
+            <input class="GymSetup__hoursInput GymSetup__stepTwoInputSpacer" type="time"  name="mondayOpen"  required> <span>-</span> <input class="GymSetup__hoursInput GymSetup__stepTwoInputSpacer" type="time"  name="mondayOpen"  required>
+          </div>
+          <input class="GymSetup__closeCheckboxInput" type="checkbox"><label class="GymSetup__openClose">Closed</label>
+        </div>
+
+
+        <div class="GymSetup__stepTwoDayOfWeek">
+          <label class="GymSetup__dayLabelText">Friday</label>
+          <div class="GymSetup__StepTwoHoursInputFlex">
+            <input class="GymSetup__hoursInput GymSetup__stepTwoInputSpacer" type="time"  name="mondayOpen"  required> <span>-</span> <input class="GymSetup__hoursInput GymSetup__stepTwoInputSpacer" type="time"  name="mondayOpen"  required>
+          </div>
+          <input class="GymSetup__closeCheckboxInput" type="checkbox"><label class="GymSetup__openClose">Closed</label>
+        </div>
+
+
+        <div class="GymSetup__stepTwoDayOfWeek">
+          <label class="GymSetup__dayLabelText">Saturday</label>
+          <div class="GymSetup__StepTwoHoursInputFlex">
+            <input class="GymSetup__hoursInput GymSetup__stepTwoInputSpacer" type="time"  name="mondayOpen"  required> <span>-</span> <input class="GymSetup__hoursInput GymSetup__stepTwoInputSpacer" type="time"  name="mondayOpen"  required>
+          </div>
+          <input class="GymSetup__closeCheckboxInput" type="checkbox"><label class="GymSetup__openClose">Closed</label>
+        </div>
+
+
+        <div class="GymSetup__stepTwoDayOfWeek">
+          <label class="GymSetup__dayLabelText">Sunday</label>
+          <div class="GymSetup__StepTwoHoursInputFlex">
+            <input class="GymSetup__hoursInput GymSetup__stepTwoInputSpacer" type="time"  name="mondayOpen"  required> <span>-</span> <input class="GymSetup__hoursInput GymSetup__stepTwoInputSpacer" type="time"  name="mondayOpen"  required>
+          </div>
+          <input class="GymSetup__closeCheckboxInput" type="checkbox"><label class="GymSetup__openClose">Closed</label>
+        </div>
+
+
+        <label class="GymSetup__LabelText GymSetup__stepOneLabelSpacer">Holiday Schedule: Please list any holiday hours or closures. You can always update your hours later if they change.</label>
+        <textarea class="GymSetup__textInput GymSetup__stepOneInputSpacer GymSetup__descriptionTextBox"></textarea>
+      </form>
+    </div>
+    <button class="GymSetup__StepOneButton" (click)="stepOneContinue()">Continue</button>
+
+  </div>
+
+  <div *ngIf="currStep ===3" class="GymSetup__stepOne" [ngClass]="{'GymSteup__stepHidden': stepOne !== 3}">
+    <div class="GymSetup__stepOneDescription">What equipment and amenities are available?</div>
+    <div class="GymSetup__stepOneadditionalInfo">Be sure to include available services and items for purchase</div>
+    <div class="GymSetup__stepTwoBox">
+      <form class="GymSetup__amenitiesForm">
+        <div class="GymSetup__ammenitiesFlexRow">
+
+          <!-- Column #2-->
+          <div class="GymSetup__ammenitiesColumnOne">
+            <div class="GymSetup__stepThreeAmenitiesFlex">
+              <input class="GymSetup__amenitiesCheckboxInput" type="checkbox"><label class="GymSetup__amenitiesCheckboxLabel">Dumbells</label>
+            </div>
+            <div class="GymSetup__stepThreeAmenitiesFlex">
+              <input class="GymSetup__amenitiesCheckboxInput" type="checkbox"><label class="GymSetup__amenitiesCheckboxLabel">Dumbells</label>
+            </div>
+            <div class="GymSetup__stepThreeAmenitiesFlex">
+              <input class="GymSetup__amenitiesCheckboxInput" type="checkbox"><label class="GymSetup__amenitiesCheckboxLabel">Dumbells</label>
+            </div>
+            <div class="GymSetup__stepThreeAmenitiesFlex">
+              <input class="GymSetup__amenitiesCheckboxInput" type="checkbox"><label class="GymSetup__amenitiesCheckboxLabel">Dumbells</label>
+            </div>
+          </div>
+
+          <!-- Column #2-->
+          <div class="GymSetup__ammenitiesColumnTwo">
+            <div class="GymSetup__stepThreeAmenitiesFlex">
+              <input class="GymSetup__amenitiesCheckboxInput" type="checkbox"><label class="GymSetup__amenitiesCheckboxLabel">Dumbells</label>
+            </div>
+            <div class="GymSetup__stepThreeAmenitiesFlex">
+              <input class="GymSetup__amenitiesCheckboxInput" type="checkbox"><label class="GymSetup__amenitiesCheckboxLabel">Dumbells</label>
+            </div>
+            <div class="GymSetup__stepThreeAmenitiesFlex">
+              <input class="GymSetup__amenitiesCheckboxInput" type="checkbox"><label class="GymSetup__amenitiesCheckboxLabel">Dumbells</label>
+            </div>
+            <div class="GymSetup__stepThreeAmenitiesFlex">
+              <input class="GymSetup__amenitiesCheckboxInput" type="checkbox"><label class="GymSetup__amenitiesCheckboxLabel">Dumbells</label>
+            </div>
+          </div>
+
+
+
+
+
+        </div>
+        <label class="GymSetup__LabelText GymSetup__stepOneLabelSpacer">Additional Amenities</label><textarea class="GymSetup__textInput GymSetup__stepOneInputSpacer GymSetup__descriptionTextBox"></textarea>
+      </form>
+    </div>
+    <button class="GymSetup__StepOneButton" (click)="stepOneContinue()">Continue</button>
+
+  </div>
+
+  <div *ngIf="currStep ===4" class="GymSetup__stepOne" [ngClass]="{'GymSteup__stepHidden': stepOne !== 4}">
+    <div class="GymSetup__stepOneDescription">Pictures</div>
+    <div class="GymSetup__stepOneadditionalInfo">Pictures are optional but highly recommended</div>
+    <div class="GymSetup__stepTwoBox">
+      <form class="GymSetup__amenitiesForm">
+        <input type="file" data-multiple-caption="{count} files selected" multiple>
+      </form>
+    </div>
+    <button class="GymSetup__StepOneButton" (click)="stepOneContinue()">Continue</button>
+
+  </div>
+
+  <div *ngIf="currStep ===5" class="GymSetup__stepOne" [ngClass]="{'GymSteup__stepHidden': stepOne !== 5}">
+    <div class="GymSetup__stepOneDescription">Liability Waiver</div>
+    <div class="GymSetup__stepOneadditionalInfo">If you have a liability waiver which you need signed before a workout you can upload it here to have members agree before checking in. You can always update this later if required.</div>
+    <div class="GymSetup__stepTwoBox">
+      <form class="GymSetup__amenitiesForm">
+        <input type="file" data-multiple-caption="{count} files selected" multiple>
+      </form>
+    </div>
+    <button class="GymSetup__StepOneButton" (click)="stepOneContinue()">Continue</button>
+
+  </div>
+
+  <div *ngIf="currStep ===6" class="GymSetup__stepOne" [ngClass]="{'GymSteup__stepHidden': stepOne !== 6}">
+    <div class="GymSetup__stepOneDescription">Members</div>
+    <div class="GymSetup__stepOneadditionalInfo">This helps up understand the needs of your gym and grow its membership</div>
+    <div class="GymSetup__stepTwoBox">
+      <form class="GymSetup__amenitiesForm">
+        <label class="GymSetup__LabelText GymSetup__stepOneLabelSpacer">How many members does your gym have today?</label><textarea class="GymSetup__textInput GymSetup__stepOneInputSpacer GymSetup__descriptionTextBox"></textarea>
+      </form>
+    </div>
+    <button class="GymSetup__StepOneButton" (click)="stepOneContinue()">Continue</button>
+
+  </div>
+
+
+  <div class="GymSetup__stepsSectionFlexParent">
+    <div class="GymSetup__stepsHeader">Steps</div>
+    <div class="GymSetup__stepsStateFlex">
+      <span class="GymSetup__upcomingStep" [ngClass]="{'GymSetup__currentStep' : stepOne === 1}">Basic Info</span>
+      <span class="GymSetup__upcomingStep" [ngClass]="{'GymSetup__currentStep' : stepOne === 2}">Hours</span>
+      <span class="GymSetup__upcomingStep" [ngClass]="{'GymSetup__currentStep' : stepOne === 3}">Amenities</span>
+      <span class="GymSetup__upcomingStep" [ngClass]="{'GymSetup__currentStep' : stepOne === 4}">Pictures</span>
+      <span class="GymSetup__upcomingStep" [ngClass]="{'GymSetup__currentStep' : stepOne === 5}">Liability Waiver</span>
+      <span class="GymSetup__upcomingStep" [ngClass]="{'GymSetup__currentStep' : stepOne === 6 }">Members</span>
+    </div>
+  </div>
+</div>

frontend/src/app/uploader/uploader.component.scss

@@ -0,0 +1,285 @@
+.GymSetup__flexParent {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100vh;
+
+
+  font-family: 'Inter UI', Inter;
+  font-style: normal;
+  font-weight: 500;
+  color: rgb(40, 42, 48);
+  letter-spacing: -0.24px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+.GymSteup__stepHidden {
+  opacity: 0 !important;
+}
+.GymSetup__stepOne {
+  display: flex;
+  flex-direction: column;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 24px;
+  padding-right: 24px;
+  opacity: 1;
+  transition: opacity 250ms ease 0ms;
+}
+.GymSetup__stepOneDescription {
+  font-family: 'Inter UI', Inter;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 32px;
+  font-size: 24px;
+  color: rgb(40, 42, 48);
+  letter-spacing: -0.24px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  margin-bottom: 12px;
+  text-align: center;
+}
+.GymSetup__stepBox {
+  //width: 90%;
+  max-width: 564px;
+  height: 356px;
+  //background: lightgray;
+  box-shadow: rgb(0 0 0 / 15%) 0px 5px 20px;
+  border-radius: 8px;
+  margin-top: 32px;
+  display: flex;
+  flex-direction: column;
+  padding: 24px 32px;
+}
+.GymSetup__stepOneForm {
+  display: flex;
+  flex-direction: column;
+}
+.GymSetup__StepOneButton {
+  font-family: 'Inter UI', Inter;
+  height: 48px;
+  width: 336px;
+  max-width: 90vw;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 48px;
+  background-color: rgb(0,0,0, 0);
+  font-size: 15px;
+  font-style: normal;
+  color: rgb(60, 65, 73);
+  font-weight: 500;
+  border-radius: 4px;
+  line-height: normal;
+  animation: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s 1 normal both running;
+  transition-property: border, background-color, color, box-shadow, opacity;
+  transition-duration: 500ms;
+  padding: 0px 14px;
+  border: 1px solid rgb(223, 225,228)
+}
+.GymSetup__stepOneadditionalInfo {
+  margin-right: auto;
+  margin-left: auto;
+
+  color: rgb(107, 111, 118);
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 23px;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+  text-align: center;
+  max-width: 600px;
+}
+.GymSetup__LabelText {
+  font-family: 'Inter UI', Inter;
+  font-style: normal;
+  line-height: normal;
+  text-align: left;
+  color: rgb(60, 65, 73);
+  font-size: 13px;
+  font-weight: 500;
+}
+.GymSetup__stepOneGymNameLabelSpacer {
+  margin-bottom: 6px;
+}
+.GymSetup__stepTwoBox {
+  //width: 90%;
+  max-width: 564px;
+  height: 390px;
+  //background: lightgray;
+  box-shadow: rgb(0 0 0 / 15%) 0px 5px 20px;
+  border-radius: 8px;
+  margin-top: 32px;
+  display: flex;
+  flex-direction: column;
+  padding: 24px 32px;
+}
+.GymSetup__stepTwoDayOfWeek {
+  display: flex;
+  margin-bottom: 12px;
+}
+.GymSetup__dayLabelText {
+  font-family: 'Inter UI', Inter;
+  font-style: normal;
+  line-height: normal;
+  text-align: left;
+  color: rgb(60, 65, 73);
+  font-size: 14px;
+  font-weight: 500;
+  margin-top: 3px;
+  margin-right: 12px;
+  width: 80px;
+}
+
+.GymSetup__StepTwoHoursInputFlex {
+  display: flex;
+  justify-content: space-between;
+  width: 220px;
+}
+.GymSetup__closeCheckboxInput {
+  margin-left: 24px;
+}
+.GymSetup__openClose {
+  color: rgb(107, 111, 118);
+  font-size: 12.5px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 23px;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+  text-align: center;
+  margin-top: 1.5px;
+  margin-left: 2px;
+}
+.GymSetup__stepOneLabelSpacer {
+  margin-bottom: 6px;
+  margin-top: 12px;
+}
+.GymSetup__stepOneInputSpacer {
+
+}
+.GymSetup__textInput {
+  appearance: none;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(223, 225, 228);
+  border-radius: 4px;
+  font-family: 'Inter UI', Inter;
+  font-size: 0.8125rem;
+  color: rgb(40, 42, 48);
+  margin: 0px;
+  appearance: none;
+  transition: border 0.3s;
+  app-region: no-drag;
+  resize: none;
+}
+.GymSetup__textInput:focus {
+  outline: none;
+  box-shadow: none;
+  border-color: rgb(33, 96, 220)
+}
+.GymSetup__descriptionTextBox {
+  height: 60px;
+}
+.GymSetup__stepsSectionFlexParent {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  margin-top: 24px;
+}
+.GymSetup__stepsHeader {
+  text-align: center;
+}
+.GymSetup__stepsStateFlex {
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
+}
+.GymSetup__upcomingStep {
+  margin-left: 12px;
+  padding: 4px;
+  //font
+  color: rgb(107, 111, 118);
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 23px;
+  text-rendering: optimizeLegibility;
+  border: 1px solid transparent;
+  -webkit-text-size-adjust: 100%;
+  //transition: border 5s ease;
+  -webkit-transition: all .3s ease-in-out;
+  transition: all .3s ease-in-out;
+
+}
+.GymSetup__currentStep {
+  border: 1px solid rgb(223, 225, 228);
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, 0.11) 0px 5px 20px;
+  -webkit-transition: all .3s ease-in-out;
+  transition: all .3s ease-in-out;
+}
+
+.GymSetup__hoursInput {
+  appearance: none;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(223, 225, 228);
+  border-radius: 4px;
+  color: rgb(40, 42, 48);
+  margin: 0px;
+  appearance: none;
+  transition: border 0.3s;
+  //app-region: no-drag;
+  resize: none;
+  //width: 45%;
+  font-size: 10px;
+  font-family: 'Inter UI', Inter;
+}
+.GymSetup__hoursInput:focus {
+  outline: none;
+  box-shadow: none;
+  border-color: rgb(33, 96, 220)
+}
+.GymSetup__stepTwoInputSpacer {
+  display: inline;
+}
+.GymSetup__amenitiesForm {
+  display: flex;
+  flex-direction: column;
+}
+.GymSetup__ammenitiesFlexRow {
+  display: flex;
+}
+.GymSetup__ammenitiesColumnOne {
+  display: flex;
+  flex-direction: column;
+}
+.GymSetup__stepThreeAmenitiesFlex {
+  display: flex;
+  width: 150px;
+}
+.GymSetup__amenitiesCheckboxInput {
+  margin-top: 2px;
+}
+.GymSetup__amenitiesCheckboxLabel {
+  color: rgb(107, 111, 118);
+  font-size: 12.5px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 23px;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+  text-align: center;
+  margin-top: 0px;
+  margin-left: 4px;
+}

frontend/src/app/uploader/uploader.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UploaderComponent } from './uploader.component';
+
+describe('UploaderComponent', () => {
+  let component: UploaderComponent;
+  let fixture: ComponentFixture<UploaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UploaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UploaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/uploader/uploader.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+//import {RequestService} from "../services/request-service/request.service";
+import {take} from "rxjs/operators";
+import {ActivatedRoute} from "@angular/router";
+
+@Component({
+  selector: 'UploaderComponent',
+  templateUrl: './uploader.component.html',
+  styleUrls: ['./uploader.component.scss']
+})
+export class UploaderComponent implements OnInit {
+  public readonly numberOfSteps: number = 6;
+  public stepOne: number = 1;
+  public currStep: number = 1;
+
+
+  constructor(//private requestService: RequestService,
+              private activatedRoute: ActivatedRoute,
+  ) { }
+
+  public ngOnInit(): void {
+
+  }
+  public stepOneContinue() {
+    if(this.stepOne < this.numberOfSteps) {
+      this.stepOne++;
+    } else {
+      this.stepOne = 1
+    }
+    setTimeout(() => {
+      if(this.currStep < this.numberOfSteps) {
+        this.currStep++;
+      } else {
+        this.currStep = 1
+      }
+    }, 250);
+  }
+}

frontend/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Frontend</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

frontend/src/main.ts

@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

frontend/src/styles.scss

@@ -0,0 +1,26 @@
+/* You can add global styles to this file, and also import other style files */
+//https://www.npmjs.com/package/inter-ui
+@use "~inter-ui/default" with (
+  $inter-font-display: swap,
+  $inter-font-path: '~inter-ui/Inter (web)'
+);
+@use "~inter-ui/variable" with (
+  $inter-font-display: swap,
+  $inter-font-path: '~inter-ui/Inter (web)'
+);
+@include default.all;
+@include variable.all;
+
+html { font-family: "Inter", "system-ui"; }
+
+@supports (font-variation-settings: normal) {
+  html { font-family: "Inter var", "system-ui"; }
+}
+
+
+
+body {
+  margin: 0; //Apparently there is a default 8px margin... I dislike this...
+  font-family: "Inter", sans-serif;
+}
+

frontend/tsconfig.app.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

frontend/tsconfig.json

@@ -0,0 +1,33 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

frontend/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

fronty/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

fronty/.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

fronty/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

fronty/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

fronty/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

fronty/README.md

@@ -0,0 +1,27 @@
+# Fronty
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.2.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

fronty/angular.json

@@ -0,0 +1,104 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "fronty": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/fronty",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "fronty:build:production"
+            },
+            "development": {
+              "browserTarget": "fronty:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "fronty:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}

fronty/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "fronty",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^15.0.0",
+    "@angular/common": "^15.0.0",
+    "@angular/compiler": "^15.0.0",
+    "@angular/core": "^15.0.0",
+    "@angular/forms": "^15.0.0",
+    "@angular/platform-browser": "^15.0.0",
+    "@angular/platform-browser-dynamic": "^15.0.0",
+    "@angular/router": "^15.0.0",
+    "inter-ui": "^3.19.3",
+    "rxjs": "~7.5.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.12.0"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^15.0.2",
+    "@angular/cli": "~15.0.2",
+    "@angular/compiler-cli": "^15.0.0",
+    "@types/jasmine": "~4.3.0",
+    "jasmine-core": "~4.5.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "typescript": "~4.8.2"
+  }
+}

fronty/src/app/app-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

fronty/src/app/app.component.html

@@ -0,0 +1,316 @@
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
+<!-- * * * * * * * to get started with your project! * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+<style>
+  :host {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 14px;
+    color: #333;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .spacer {
+    flex: 1;
+  }
+
+  .toolbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    background-color: #1976d2;
+    color: white;
+    font-weight: 600;
+  }
+
+  .toolbar img {
+    margin: 0 16px;
+  }
+
+  .toolbar #twitter-logo {
+    height: 40px;
+    margin: 0 8px;
+  }
+
+  .toolbar #youtube-logo {
+    height: 40px;
+    margin: 0 16px;
+  }
+
+  .toolbar #twitter-logo:hover,
+  .toolbar #youtube-logo:hover {
+    opacity: 0.8;
+  }
+
+  .content {
+    display: flex;
+    margin: 82px auto 32px;
+    padding: 0 16px;
+    max-width: 960px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  svg.material-icons {
+    height: 24px;
+    width: auto;
+  }
+
+  svg.material-icons:not(:last-child) {
+    margin-right: 8px;
+  }
+
+  .card svg.material-icons path {
+    fill: #888;
+  }
+
+  .card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 16px;
+  }
+
+  .card {
+    all: unset;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    background-color: #fafafa;
+    height: 40px;
+    width: 200px;
+    margin: 0 8px 16px;
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s ease-in-out;
+    line-height: 24px;
+  }
+
+  .card-container .card:not(:last-child) {
+    margin-right: 0;
+  }
+
+  .card.card-small {
+    height: 16px;
+    width: 168px;
+  }
+
+  .card-container .card:not(.highlight-card) {
+    cursor: pointer;
+  }
+
+  .card-container .card:not(.highlight-card):hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
+  }
+
+  .card-container .card:not(.highlight-card):hover .material-icons path {
+    fill: rgb(105, 103, 103);
+  }
+
+  .card.highlight-card {
+    background-color: #1976d2;
+    color: white;
+    font-weight: 600;
+    border: none;
+    width: auto;
+    min-width: 30%;
+    position: relative;
+  }
+
+  .card.card.highlight-card span {
+    margin-left: 60px;
+  }
+
+  svg#rocket {
+    width: 80px;
+    position: absolute;
+    left: -10px;
+    top: -24px;
+  }
+
+  svg#rocket-smoke {
+    height: calc(100vh - 95px);
+    position: absolute;
+    top: 10px;
+    right: 180px;
+    z-index: -10;
+  }
+
+  a,
+  a:visited,
+  a:hover {
+    color: #1976d2;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: #125699;
+  }
+
+  .terminal {
+    position: relative;
+    width: 80%;
+    max-width: 600px;
+    border-radius: 6px;
+    padding-top: 45px;
+    margin-top: 8px;
+    overflow: hidden;
+    background-color: rgb(15, 15, 16);
+  }
+
+  .terminal::before {
+    content: "\2022 \2022 \2022";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 4px;
+    background: rgb(58, 58, 58);
+    color: #c2c3c4;
+    width: 100%;
+    font-size: 2rem;
+    line-height: 0;
+    padding: 14px 0;
+    text-indent: 4px;
+  }
+
+  .terminal pre {
+    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+    color: white;
+    padding: 0 1rem 1rem;
+    margin: 0;
+  }
+
+  .circle-link {
+    height: 40px;
+    width: 40px;
+    border-radius: 40px;
+    margin: 8px;
+    background-color: white;
+    border: 1px solid #eeeeee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: 1s ease-out;
+  }
+
+  .circle-link:hover {
+    transform: translateY(-0.25rem);
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+  }
+
+  footer {
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    line-height: 20px;
+  }
+
+  footer a {
+    display: flex;
+    align-items: center;
+  }
+
+  .github-star-badge {
+    color: #24292e;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    padding: 3px 10px;
+    border: 1px solid rgba(27,31,35,.2);
+    border-radius: 3px;
+    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
+    margin-left: 4px;
+    font-weight: 600;
+  }
+
+  .github-star-badge:hover {
+    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
+    border-color: rgba(27,31,35,.35);
+    background-position: -.5em;
+  }
+
+  .github-star-badge .material-icons {
+    height: 16px;
+    width: 16px;
+    margin-right: 4px;
+  }
+
+  svg#clouds {
+    position: fixed;
+    bottom: -160px;
+    left: -230px;
+    z-index: -10;
+    width: 1920px;
+  }
+
+  /* Responsive Styles */
+  @media screen and (max-width: 767px) {
+    .card-container > *:not(.circle-link) ,
+    .terminal {
+      width: 100%;
+    }
+
+    .card:not(.highlight-card) {
+      height: 16px;
+      margin: 8px 0;
+    }
+
+    .card.highlight-card span {
+      margin-left: 72px;
+    }
+
+    svg#rocket-smoke {
+      right: 120px;
+      transform: rotate(-5deg);
+    }
+  }
+
+  @media screen and (max-width: 575px) {
+    svg#rocket-smoke {
+      display: none;
+      visibility: hidden;
+    }
+  }
+</style>
+
+<!-- Toolbar -->
+<uploader></uploader>
+
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+<router-outlet></router-outlet>

fronty/src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'fronty'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('fronty');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('fronty app is running!');
+  });
+});

fronty/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'fronty';
+}

fronty/src/app/app.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import {UploadComponent} from "./gym-setup/upload.component";
+import {ReactiveFormsModule} from "@angular/forms";
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    UploadComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    ReactiveFormsModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

fronty/src/app/gym-setup/upload.component.html

@@ -0,0 +1,16 @@
+<div class="GymSetup__flexParent">
+  <div *ngIf="currStep ===1" class="GymSetup__stepOne" [ngClass]="{'GymSteup__stepHidden': stepOne !== 1}">
+    <div class="GymSetup__stepOneDescription">Paper to Code</div>
+    <div class="GymSetup__stepOneadditionalInfo">We will generate the code for this paper</div>
+    <div class="GymSetup__stepBox">
+      <form class="OpLogin__form" [formGroup]="form" (ngSubmit)="stepOneContinue()">
+      <div class="inputFlexbox"><label class="GymSetup__LabelText GymSetup__stepOneGymNameLabelSpacer">Paper</label>
+      <input class="GymSetup__textInput GymSetup__stepOneInputSpacer GymSetup__descriptionTextBox" id="paper" name="paper" type="text" required formControlName="paper">
+      </div>
+      </form>
+    </div>
+    <button class="GymSetup__StepOneButton" (click)="stepOneContinue()">Continue</button>
+
+  </div>
+
+</div>

fronty/src/app/gym-setup/upload.component.scss

@@ -0,0 +1,289 @@
+.GymSetup__flexParent {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100vh;
+
+
+  font-family: 'Inter UI', Inter;
+  font-style: normal;
+  font-weight: 500;
+  color: rgb(40, 42, 48);
+  letter-spacing: -0.24px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+.inputFlexbox {
+  display: flex;
+  flex-direction: column;
+}
+.GymSteup__stepHidden {
+  opacity: 0 !important;
+}
+.GymSetup__stepOne {
+  display: flex;
+  flex-direction: column;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 24px;
+  padding-right: 24px;
+  opacity: 1;
+  transition: opacity 250ms ease 0ms;
+}
+.GymSetup__stepOneDescription {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 32px;
+  font-size: 24px;
+  color: rgb(40, 42, 48);
+  letter-spacing: -0.24px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  margin-bottom: 12px;
+  text-align: center;
+}
+.GymSetup__stepBox {
+  //width: 90%;
+  max-width: 564px;
+  height: 356px;
+  //background: lightgray;
+  box-shadow: rgb(0 0 0 / 15%) 0px 5px 20px;
+  border-radius: 8px;
+  margin-top: 32px;
+  display: flex;
+  flex-direction: column;
+  padding: 24px 32px;
+}
+.GymSetup__stepOneForm {
+  display: flex;
+  flex-direction: column;
+}
+.GymSetup__StepOneButton {
+  font-family: 'Inter UI', Inter;
+  height: 48px;
+  width: 336px;
+  max-width: 90vw;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 48px;
+  background-color: rgb(0,0,0, 0);
+  font-size: 15px;
+  font-style: normal;
+  color: rgb(60, 65, 73);
+  font-weight: 500;
+  border-radius: 4px;
+  line-height: normal;
+  animation: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s 1 normal both running;
+  transition-property: border, background-color, color, box-shadow, opacity;
+  transition-duration: 500ms;
+  padding: 0px 14px;
+  border: 1px solid rgb(223, 225,228)
+}
+.GymSetup__stepOneadditionalInfo {
+  margin-right: auto;
+  margin-left: auto;
+
+  color: rgb(107, 111, 118);
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 23px;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+  text-align: center;
+  max-width: 600px;
+}
+.GymSetup__LabelText {
+  font-family: 'Inter UI', Inter;
+  font-style: normal;
+  line-height: normal;
+  text-align: left;
+  color: rgb(60, 65, 73);
+  font-size: 13px;
+  font-weight: 500;
+}
+.GymSetup__stepOneGymNameLabelSpacer {
+  margin-bottom: 6px;
+}
+.GymSetup__stepTwoBox {
+  //width: 90%;
+  max-width: 564px;
+  height: 390px;
+  //background: lightgray;
+  box-shadow: rgb(0 0 0 / 15%) 0px 5px 20px;
+  border-radius: 8px;
+  margin-top: 32px;
+  display: flex;
+  flex-direction: column;
+  padding: 24px 32px;
+}
+.GymSetup__stepTwoDayOfWeek {
+  display: flex;
+  margin-bottom: 12px;
+}
+.GymSetup__dayLabelText {
+  font-family: 'Inter UI', Inter;
+  font-style: normal;
+  line-height: normal;
+  text-align: left;
+  color: rgb(60, 65, 73);
+  font-size: 14px;
+  font-weight: 500;
+  margin-top: 3px;
+  margin-right: 12px;
+  width: 80px;
+}
+
+.GymSetup__StepTwoHoursInputFlex {
+  display: flex;
+  justify-content: space-between;
+  width: 220px;
+}
+.GymSetup__closeCheckboxInput {
+  margin-left: 24px;
+}
+.GymSetup__openClose {
+  color: rgb(107, 111, 118);
+  font-size: 12.5px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 23px;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+  text-align: center;
+  margin-top: 1.5px;
+  margin-left: 2px;
+}
+.GymSetup__stepOneLabelSpacer {
+  margin-bottom: 6px;
+  margin-top: 12px;
+}
+.GymSetup__stepOneInputSpacer {
+
+}
+.GymSetup__textInput {
+  appearance: none;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(223, 225, 228);
+  border-radius: 4px;
+  font-family: 'Inter UI', Inter;
+  font-size: 0.8125rem;
+  color: rgb(40, 42, 48);
+  margin: 0px;
+  appearance: none;
+  transition: border 0.3s;
+  app-region: no-drag;
+  resize: none;
+}
+.GymSetup__textInput:focus {
+  outline: none;
+  box-shadow: none;
+  border-color: rgb(33, 96, 220)
+}
+.GymSetup__descriptionTextBox {
+  height: 60px;
+}
+.GymSetup__stepsSectionFlexParent {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  margin-top: 24px;
+}
+.GymSetup__stepsHeader {
+  text-align: center;
+}
+.GymSetup__stepsStateFlex {
+  display: flex;
+  justify-content: center;
+  margin-top: 12px;
+}
+.GymSetup__upcomingStep {
+  margin-left: 12px;
+  padding: 4px;
+//font
+  color: rgb(107, 111, 118);
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 23px;
+  text-rendering: optimizeLegibility;
+  border: 1px solid transparent;
+  -webkit-text-size-adjust: 100%;
+  //transition: border 5s ease;
+  -webkit-transition: all .3s ease-in-out;
+  transition: all .3s ease-in-out;
+
+}
+.GymSetup__currentStep {
+  border: 1px solid rgb(223, 225, 228);
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, 0.11) 0px 5px 20px;
+  -webkit-transition: all .3s ease-in-out;
+  transition: all .3s ease-in-out;
+}
+
+.GymSetup__hoursInput {
+  appearance: none;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(223, 225, 228);
+  border-radius: 4px;
+  color: rgb(40, 42, 48);
+  margin: 0px;
+  appearance: none;
+  transition: border 0.3s;
+  //app-region: no-drag;
+  resize: none;
+  //width: 45%;
+  font-size: 10px;
+  font-family: 'Inter UI', Inter;
+}
+.GymSetup__hoursInput:focus {
+  outline: none;
+  box-shadow: none;
+  border-color: rgb(33, 96, 220)
+}
+.GymSetup__stepTwoInputSpacer {
+  display: inline;
+}
+.GymSetup__amenitiesForm {
+  display: flex;
+  flex-direction: column;
+}
+.GymSetup__ammenitiesFlexRow {
+  display: flex;
+}
+.GymSetup__ammenitiesColumnOne {
+  display: flex;
+  flex-direction: column;
+}
+.GymSetup__stepThreeAmenitiesFlex {
+  display: flex;
+  width: 150px;
+}
+.GymSetup__amenitiesCheckboxInput {
+  margin-top: 2px;
+}
+.GymSetup__amenitiesCheckboxLabel {
+  color: rgb(107, 111, 118);
+  font-size: 12.5px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 23px;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+  text-align: center;
+  margin-top: 0px;
+  margin-left: 4px;
+}