Skip to content

Commit

Permalink
feat: styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssoudan
ssoudan committed Aug 28, 2023
1 parent a0aa4e7 commit e69c843
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 43 deletions.
78 changes: 40 additions & 38 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,48 +6,50 @@

<body>

<h1>Eulerian Fluid Simulation</h1>
<div class="controls">

<div class="control_line">
<!-- scenario -->
<label for="scenario">Scenario</label>
<select name="scenario" id="scenario">
<option value="cylindrical">Cylindrical obstacle</option>
<option value="rectangular">Rectangular obstacle</option>
</select>

<!-- colormap -->
<label for="colormap">Colormap</label>
<select name="colormap" id="colormap">
<option value="jet">Jet</option>
<option value="coolwarm">Coolwarm</option>
<option value="rainbow">Rainbow</option>
<option value="grayscale">Grayscale</option>
</select>
<div class="main">
<h1>Eulerian Fluid Simulation</h1>
<div class="controls">

<div class="control_line">
<!-- scenario -->
<label for="scenario">Scenario</label>
<select name="scenario" id="scenario">
<option value="cylindrical">Cylindrical obstacle</option>
<option value="rectangular">Rectangular obstacle</option>
</select>

<!-- colormap -->
<label for="colormap">Colormap</label>
<select name="colormap" id="colormap">
<option value="jet">Jet</option>
<option value="coolwarm">Coolwarm</option>
<option value="rainbow">Rainbow</option>
<option value="grayscale">Grayscale</option>
</select>
</div>

<div class="control_line">
<!-- checkbox for pressure -->
<input type="checkbox" id="pressure" name="pressure" value="pressure" checked>
<label for="pressure">Pressure</label>

<!-- checkbox for streamlines -->
<input type="checkbox" id="streamlines" name="streamlines" value="streamlines" checked>
<label for="streamlines">Streamlines</label>

<!-- slider for streamlines_num_seg -->
<label for="streamlines_num_seg">Number of segments</label>
<input type="range" id="streamlines_num_seg" name="streamlines_num_seg" min="2" max="20" value="10" step="1">

<!-- slider for streamlines_spacing -->
<label for="streamlines_spacing">Spacing</label>
<input type="range" id="streamlines_spacing" name="streamlines_spacing" min="1" max="20" value="6" step="1">
</div>
</div>

<div class="control_line">
<!-- checkbox for pressure -->
<input type="checkbox" id="pressure" name="pressure" value="pressure" checked>
<label for="pressure">Pressure</label>

<!-- checkbox for streamlines -->
<input type="checkbox" id="streamlines" name="streamlines" value="streamlines" checked>
<label for="streamlines">Streamlines</label>
<canvas id="canvas" width="1200" height="600"></canvas>

<!-- slider for streamlines_num_seg -->
<label for="streamlines_num_seg">Number of segments</label>
<input type="range" id="streamlines_num_seg" name="streamlines_num_seg" min="2" max="20" value="10" step="1">

<!-- slider for streamlines_spacing -->
<label for="streamlines_spacing">Spacing</label>
<input type="range" id="streamlines_spacing" name="streamlines_spacing" min="1" max="20" value="6" step="1">
</div>
</div>

<div>
<canvas id="canvas" style="border:2px solid" width="1200" height="600"></canvas>
</div>

</body>
Expand Down
25 changes: 20 additions & 5 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,31 @@ body {
}

canvas {
background: #cdcdcd;
background: gray;
margin: 0 auto;
width: 100%;
}

/* class controls.control_line */
.controls.control_line {
position: absolute;
.main {
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
background: black;
}

.controls {
background: gray;
width: 100%;
margin: 0 auto;
}

.control_line {
top: 0px;
left: 0px;
width: 100%;
height: 30px;
padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
z-index: 100;
}

0 comments on commit e69c843

Please sign in to comment.