Skip to content

Commit

Permalink
working on the tables and the material section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Foadsf
Foadsf committed Feb 28, 2021
1 parent 3cac9e7 commit aa2d3b6
Showing 1 changed file with 183 additions and 39 deletions.
222 changes: 183 additions & 39 deletions OpenHertz.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,60 +12,204 @@

<body>

<h1>OpenHertz 0.0.4</h1>
<h1>OpenHertz</h1>
<p>
Welcome to OpenHertz v 0.0.4 a Free Hertzian contact calculator.
Welcome to OpenHertz v 0.0.5 a Free Hertzian contact calculator.
If there are any issues please report them on <a href="https://github.com/Foadsf/OpenHertz">the GitHub
repository</a>.
</p>
<form>
<fieldset>
<legend>Geometry</legend>
<p>
<label>Contact type</label>
<!-- <select id="contactTypeList" onchange="document.getElementById('contactType').src = this.value"> -->
<select id="contactTypeList" onchange="contactTypeFun(this.value)">
<!-- <option value="pics/SpherePlane.PNG">Sphere - Plane</option>
<option value="pics/SphereSphere.PNG">Sphere - Sphere</option>
<option value="pics/CylinderPlane.PNG">Cylinder - Plane</option> -->
<option value="1">Sphere - Plane</option>
<option value="2">Sphere - Sphere</option>
<option value="3">Cylinder - Plane</option>
<option value="4">Cylinder - Cylinder</option>
</select>
</p>
<p id="orientationList" style="display: none">
<label>Orientation</label>
<!-- <select onchange="document.getElementById('contactType').src = this.value"> -->
<select id="OrientationSelector" onchange="orientationFun(this.value)">
<!-- <option value="pics/CylinderCylinderPerpendicular.PNG">Perpendicular</option>
<option value="pics/CylinderCylinderParallel.PNG">Parallel</option> -->
<option value="1">Perpendicular</option>
<option value="2">Parallel</option>
<!-- <option value="pics/CylinderPlane.PNG">Angled</option> -->
</select>
</p>
<p style="text-align:center;">
<!-- <img src="pics/SpherePlane.PNG" alt="Contact type" height="200"> -->
<img id="contactType" src="pics/SpherePlane.PNG" alt="Contact type" height="200">
</p>
<p>
<label>First radius (mm)</label>
<input title="Please enter a positive number" type="number" step="0.001" min="0">
</p>
<p id="secondRadius" style="display: none">
<label>Second radius (mm)</label>
<input title="Please enter a positive number" type="number" step="0.001" min="0">
</p>


<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
}

.tg td {
border-color: black;
border-style: solid;
border-width: 1px;
font-family: Arial, sans-serif;
font-size: 14px;
overflow: hidden;
padding: 10px 5px;
word-break: normal;
}

.tg th {
border-color: black;
border-style: solid;
border-width: 1px;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
overflow: hidden;
padding: 10px 5px;
word-break: normal;
}

.tg .tg-zv4m {
border-color: #ffffff;
text-align: left;
vertical-align: top
}

.tg .tg-8jgo {
border-color: #ffffff;
text-align: center;
vertical-align: top
}
</style>
<table class="tg" style="width:100%">
<thead>
<tr>
<th class="tg-zv4m">
<p>
<label>Contact type</label>
<!-- <select id="contactTypeList" onchange="document.getElementById('contactType').src = this.value"> -->
<select id="contactTypeList" onchange="contactTypeFun(this.value)">
<!-- <option value="pics/SpherePlane.PNG">Sphere - Plane</option>
<option value="pics/SphereSphere.PNG">Sphere - Sphere</option>
<option value="pics/CylinderPlane.PNG">Cylinder - Plane</option> -->
<option value="1">Sphere - Plane</option>
<option value="2">Sphere - Sphere</option>
<option value="3">Cylinder - Plane</option>
<option value="4">Cylinder - Cylinder</option>
</select>
</p>
<p id="orientationList" style="display: none">
<label>Orientation</label>
<!-- <select onchange="document.getElementById('contactType').src = this.value"> -->
<select id="OrientationSelector" onchange="orientationFun(this.value)">
<!-- <option value="pics/CylinderCylinderPerpendicular.PNG">Perpendicular</option>
<option value="pics/CylinderCylinderParallel.PNG">Parallel</option> -->
<option value="1">Perpendicular</option>
<option value="2">Parallel</option>
<!-- <option value="pics/CylinderPlane.PNG">Angled</option> -->
</select>
</p>
</th>
<th class="tg-8jgo" rowspan="2">
<p style="text-align:center;">
<!-- <img src="pics/SpherePlane.PNG" alt="Contact type" height="200"> -->
<img id="contactType" src="pics/SpherePlane.PNG" alt="Contact type" height="200">
</p>
</th>
</tr>
<tr>
<td class="tg-zv4m">
<p>
<label>First radius (mm)</label>
<input title="Please enter a positive number" type="number" step="0.001" min="0">
</p>
<p id="secondRadius" style="display: none">
<label>Second radius (mm)</label>
<input title="Please enter a positive number" type="number" step="0.001" min="0">
</p>
</td>
</tr>
</thead>
</table>



</fieldset>
<fieldset>
<legend>Material</legend>
<p>
<!-- <p>
<label>Same materials</label>
<select id="myList">
<option value="1">yes</option>
<option value="2">no</option>
</select>
</p> -->

<p>
<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
}

.tg td {
border-color: black;
border-style: solid;
border-width: 1px;
font-family: Arial, sans-serif;
font-size: 14px;
overflow: hidden;
padding: 10px 5px;
word-break: normal;
}

.tg th {
border-color: black;
border-style: solid;
border-width: 1px;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
overflow: hidden;
padding: 10px 5px;
word-break: normal;
}

.tg .tg-baqh {
text-align: center;
vertical-align: top
}

.tg .tg-73oq {
border-color: #000000;
text-align: left;
vertical-align: top;
/* min-width: 20px; */
width: 200px;
/* max-width: 200px; */
}

.tg .tg-6qw1 {
background-color: #c0c0c0;
text-align: center;
vertical-align: top
}

.tg .tg-y6fn {
background-color: #c0c0c0;
text-align: left;
vertical-align: top
}
</style>
<table class="tg" style="width:100%">
<thead>
<tr>
<th class="tg-73oq"></th>
<th class="tg-6qw1">First material</th>
<th class="tg-6qw1">Second Material</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-y6fn">Young's modulus E (GPa)</td>
<td class="tg-baqh"></td>
<td class="tg-baqh"></td>
</tr>
<tr>
<td class="tg-y6fn">Poisson's ratio 𝜈</td>
<td class="tg-baqh"></td>
<td class="tg-baqh"></td>
</tr>
<tr>
<td class="tg-y6fn">Yield strength</td>
<td class="tg-baqh"></td>
<td class="tg-baqh"></td>
</tr>
</tbody>
</table>
</p>
</fieldset>
</form>
Expand Down

0 comments on commit aa2d3b6

Please sign in to comment.