You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
				
					
					
						
							287 lines
						
					
					
						
							10 KiB
						
					
					
				
			
		
		
		
			
			
			
				
					
				
				
					
				
			
		
		
	
	
							287 lines
						
					
					
						
							10 KiB
						
					
					
				
								<!DOCTYPE html>
							 | 
						|
								<html lang="en">
							 | 
						|
								  <head>
							 | 
						|
								    <meta charset="UTF-8" />
							 | 
						|
								    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
							 | 
						|
								    <title>Internship</title>
							 | 
						|
								
							 | 
						|
								    <link
							 | 
						|
								      rel="stylesheet"
							 | 
						|
								      href="node_modules/bootstrap/dist/css/bootstrap.min.css"
							 | 
						|
								    />
							 | 
						|
								    <link rel="stylesheet" href="styles/prism.css" />
							 | 
						|
								
							 | 
						|
								    <link
							 | 
						|
								      rel="stylesheet"
							 | 
						|
								      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
							 | 
						|
								    />
							 | 
						|
								    <link
							 | 
						|
								      rel="stylesheet"
							 | 
						|
								      type="text/css"
							 | 
						|
								      href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
							 | 
						|
								    />
							 | 
						|
								    <link rel="stylesheet" href="codemirror-5.65.16/lib/codemirror.css" />
							 | 
						|
								    <script src="codemirror-5.65.16/lib/codemirror.js"></script>
							 | 
						|
								    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.53.2/mode/javascript/javascript.min.js"></script>
							 | 
						|
								    <script src="node_modules/@viz-js/viz/lib/viz-standalone.js"></script>
							 | 
						|
								  </head>
							 | 
						|
								  <body>
							 | 
						|
								    <div class="container-fluid">
							 | 
						|
								      <div class="row gx-0">
							 | 
						|
								        <div class="col-6">
							 | 
						|
								          <nav class="navbar navbar-expand-lg text-bg-secondary">
							 | 
						|
								            <div class="container-fluid">
							 | 
						|
								              <a
							 | 
						|
								                class="navbar-brand active text-light"
							 | 
						|
								                style="padding-bottom: 0.8%"
							 | 
						|
								                >Tempest-online</a
							 | 
						|
								              >
							 | 
						|
								
							 | 
						|
								              <button type="button" class="btn btn-primary" id="runBtn">
							 | 
						|
								                <i class="fa fa-play pb-1" style="font-size: 15px"></i>
							 | 
						|
								              </button>
							 | 
						|
								            </div>
							 | 
						|
								          </nav>
							 | 
						|
								          <div class="form-group">
							 | 
						|
								            <div
							 | 
						|
								              class="d-flex justify-content-between align-content-center p-1"
							 | 
						|
								            >
							 | 
						|
								              <h5 class="p-0">Prism model</h5>
							 | 
						|
								              <div class="col-lg-2 col-md-3 col-sm-3 d-flex">
							 | 
						|
								                <button class="btn border" id="downloadFirstEditor">
							 | 
						|
								                  <i class="fa fa-download" aria-hidden="true"></i>
							 | 
						|
								                </button>
							 | 
						|
								                <label for="prismModelInput" class="btn border">
							 | 
						|
								                  <i class="fa fa-upload" aria-hidden="true"></i>
							 | 
						|
								                </label>
							 | 
						|
								                <input type="file" id="prismModelInput" class="hiddenInput" />
							 | 
						|
								              </div>
							 | 
						|
								            </div>
							 | 
						|
								
							 | 
						|
								            <textarea
							 | 
						|
								              id="firstInput"
							 | 
						|
								              class="form-control rounded-0"
							 | 
						|
								              name="code"
							 | 
						|
								              data-mdb-perfect-scrollbar-init
							 | 
						|
								            ></textarea>
							 | 
						|
								          </div>
							 | 
						|
								          <div class="form-group mb-2 mt-2">
							 | 
						|
								            <div
							 | 
						|
								              class="d-flex justify-content-between align-content-center p-1"
							 | 
						|
								            >
							 | 
						|
								              <h5 class="p-0">Specifications</h5>
							 | 
						|
								              <div class="col-lg-2 col-md-3 col-sm-3 d-flex">
							 | 
						|
								                <button class="btn border" id="downloadSpecifications">
							 | 
						|
								                  <i class="fa fa-download" aria-hidden="true"></i>
							 | 
						|
								                </button>
							 | 
						|
								                <label for="specificationsInput" class="btn border">
							 | 
						|
								                  <i class="fa fa-upload" aria-hidden="true"></i>
							 | 
						|
								                </label>
							 | 
						|
								                <input
							 | 
						|
								                  type="file"
							 | 
						|
								                  id="specificationsInput"
							 | 
						|
								                  class="hiddenInput"
							 | 
						|
								                />
							 | 
						|
								              </div>
							 | 
						|
								            </div>
							 | 
						|
								
							 | 
						|
								            <textarea
							 | 
						|
								              type="text"
							 | 
						|
								              class="form-control rounded-0"
							 | 
						|
								              style="height: 100%"
							 | 
						|
								              id="secondInput"
							 | 
						|
								            ></textarea>
							 | 
						|
								          </div>
							 | 
						|
								          <div class="form-group">
							 | 
						|
								            <button
							 | 
						|
								              class="btn btn-secondary btn-sm dropdown-toggle"
							 | 
						|
								              type="button"
							 | 
						|
								              data-bs-toggle="collapse"
							 | 
						|
								              data-bs-target="#collapseExample"
							 | 
						|
								              aria-expanded="false"
							 | 
						|
								              aria-controls="collapseExample"
							 | 
						|
								            >
							 | 
						|
								              Advanced
							 | 
						|
								            </button>
							 | 
						|
								            <div class="collapse" id="collapseExample">
							 | 
						|
								              <div class="card card-body mt-2 rounded-0">
							 | 
						|
								                <div class="row">
							 | 
						|
								                  <div class="col-sm-2">
							 | 
						|
								                    <div class="form-group">
							 | 
						|
								                      <div class="form-check">
							 | 
						|
								                        <input
							 | 
						|
								                          class="form-check-input"
							 | 
						|
								                          type="checkbox"
							 | 
						|
								                          value="1"
							 | 
						|
								                          id="checkbox1"
							 | 
						|
								                        />
							 | 
						|
								                        <label class="form-check-label" for="checkbox1">
							 | 
						|
								                          1
							 | 
						|
								                        </label>
							 | 
						|
								                      </div>
							 | 
						|
								                      <div class="form-check">
							 | 
						|
								                        <input
							 | 
						|
								                          class="form-check-input"
							 | 
						|
								                          type="checkbox"
							 | 
						|
								                          value="2"
							 | 
						|
								                          id="checkbox2"
							 | 
						|
								                        />
							 | 
						|
								                        <label class="form-check-label" for="checkbox2">
							 | 
						|
								                          2
							 | 
						|
								                        </label>
							 | 
						|
								                      </div>
							 | 
						|
								                      <div class="form-check">
							 | 
						|
								                        <input
							 | 
						|
								                          class="form-check-input"
							 | 
						|
								                          type="checkbox"
							 | 
						|
								                          value="3"
							 | 
						|
								                          id="checkbox3"
							 | 
						|
								                        />
							 | 
						|
								                        <label class="form-check-label" for="checkbox3">
							 | 
						|
								                          3
							 | 
						|
								                        </label>
							 | 
						|
								                      </div>
							 | 
						|
								                    </div>
							 | 
						|
								                  </div>
							 | 
						|
								                  <div class="col-sm-4">
							 | 
						|
								                    <div class="form-group">
							 | 
						|
								                      <div class="form-check">
							 | 
						|
								                        <input
							 | 
						|
								                          class="form-check-input"
							 | 
						|
								                          type="checkbox"
							 | 
						|
								                          value="4"
							 | 
						|
								                          id="checkbox4"
							 | 
						|
								                        />
							 | 
						|
								                        <label class="form-check-label" for="checkbox4">
							 | 
						|
								                          4
							 | 
						|
								                        </label>
							 | 
						|
								                      </div>
							 | 
						|
								                      <div class="form-check">
							 | 
						|
								                        <input
							 | 
						|
								                          class="form-check-input"
							 | 
						|
								                          type="checkbox"
							 | 
						|
								                          value="5"
							 | 
						|
								                          id="checkbox5"
							 | 
						|
								                        />
							 | 
						|
								                        <label class="form-check-label" for="checkbox5">
							 | 
						|
								                          5
							 | 
						|
								                        </label>
							 | 
						|
								                      </div>
							 | 
						|
								                      <div class="form-check">
							 | 
						|
								                        <input
							 | 
						|
								                          class="form-check-input"
							 | 
						|
								                          type="checkbox"
							 | 
						|
								                          value="6"
							 | 
						|
								                          id="checkbox6"
							 | 
						|
								                        />
							 | 
						|
								                        <label class="form-check-label" for="checkbox6">
							 | 
						|
								                          6
							 | 
						|
								                        </label>
							 | 
						|
								                      </div>
							 | 
						|
								                    </div>
							 | 
						|
								                  </div>
							 | 
						|
								                </div>
							 | 
						|
								              </div>
							 | 
						|
								            </div>
							 | 
						|
								          </div>
							 | 
						|
								          <div class="row">
							 | 
						|
								            <div class="col">
							 | 
						|
								              <!-- <label for="fname">File name</label>
							 | 
						|
								              <br />
							 | 
						|
								              <input type="text" id="fname" name="fname" />
							 | 
						|
								              <button id="create" type="button" class="btn btn-success">
							 | 
						|
								                Create File
							 | 
						|
								              </button>
							 | 
						|
								              <a download="info.txt" id="downloadlink" style="display: none"
							 | 
						|
								                >Download Here</a
							 | 
						|
								              > -->
							 | 
						|
								
							 | 
						|
								              <h4 class="mt-1">Upload a file</h4>
							 | 
						|
								              <div class="mb-3">
							 | 
						|
								                <input type="file" id="fileInput" class="form-control" />
							 | 
						|
								              </div>
							 | 
						|
								            </div>
							 | 
						|
								          </div>
							 | 
						|
								        </div>
							 | 
						|
								
							 | 
						|
								        <div class="col-6">
							 | 
						|
								          <nav class="navbar navbar-expand-lg text-bg-secondary">
							 | 
						|
								            <div class="container-fluid">
							 | 
						|
								              <button
							 | 
						|
								                class="navbar-toggler"
							 | 
						|
								                type="button"
							 | 
						|
								                data-bs-toggle="collapse"
							 | 
						|
								                data-bs-target="#navbarNav"
							 | 
						|
								                aria-controls="navbarNav"
							 | 
						|
								                aria-expanded="false"
							 | 
						|
								                aria-label="Toggle navigation"
							 | 
						|
								              >
							 | 
						|
								                <span class="navbar-toggler-icon"></span>
							 | 
						|
								              </button>
							 | 
						|
								              <div class="collapse navbar-collapse" id="navbarNav">
							 | 
						|
								                <ul class="navbar-nav nav-underline">
							 | 
						|
								                  <li class="nav-item">
							 | 
						|
								                    <a
							 | 
						|
								                      class="nav-link text-light active rightNav"
							 | 
						|
								                      aria-current="page"
							 | 
						|
								                      href="#"
							 | 
						|
								                      id="output"
							 | 
						|
								                      >Output</a
							 | 
						|
								                    >
							 | 
						|
								                  </li>
							 | 
						|
								                  <li class="nav-item">
							 | 
						|
								                    <a
							 | 
						|
								                      class="nav-link text-light rightNav"
							 | 
						|
								                      href="#"
							 | 
						|
								                      id="simulator"
							 | 
						|
								                      >Simulator</a
							 | 
						|
								                    >
							 | 
						|
								                  </li>
							 | 
						|
								                  <li class="nav-item">
							 | 
						|
								                    <a class="nav-link text-light rightNav" href="#" id="graph"
							 | 
						|
								                      >Graph</a
							 | 
						|
								                    >
							 | 
						|
								                  </li>
							 | 
						|
								                </ul>
							 | 
						|
								              </div>
							 | 
						|
								            </div>
							 | 
						|
								          </nav>
							 | 
						|
								
							 | 
						|
								          <div class="form-group">
							 | 
						|
								            <div
							 | 
						|
								              id="scrollableOutput"
							 | 
						|
								              class="form-control scrollable-textarea rounded-0"
							 | 
						|
								              style="
							 | 
						|
								                height: calc(100vh - 96px);
							 | 
						|
								                width: 100%;
							 | 
						|
								                overflow: auto;
							 | 
						|
								                white-space: nowrap;
							 | 
						|
								              "
							 | 
						|
								              readonly
							 | 
						|
								              placeholder="Output"
							 | 
						|
								            ></div>
							 | 
						|
								            <div class="zoom-controls">
							 | 
						|
								              <button id="zoomOutBtn" class="btn">-</button>
							 | 
						|
								              <button id="zoomInBtn" class="btn">+</button>
							 | 
						|
								              <button id="centerSvgButton" class="btn">Center</button>
							 | 
						|
								            </div>
							 | 
						|
								          </div>
							 | 
						|
								        </div>
							 | 
						|
								      </div>
							 | 
						|
								    </div>
							 | 
						|
								    <script
							 | 
						|
								      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"
							 | 
						|
								      integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/"
							 | 
						|
								      crossorigin="anonymous"
							 | 
						|
								    ></script>
							 | 
						|
								    <script
							 | 
						|
								      type="text/javascript"
							 | 
						|
								      src="https://cdn.jsdelivr.net/npm/toastify-js"
							 | 
						|
								    ></script>
							 | 
						|
								    <script src="javascript/syntax.js"></script>
							 | 
						|
								    <script src="javascript/index.js"></script>
							 | 
						|
								
							 | 
						|
								    <script src="javascript/zoom.js"></script>
							 | 
						|
								    <script src="javascript/filesHandling.js"></script>
							 | 
						|
								  </body>
							 | 
						|
								</html>
							 |