<!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">
<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>