Skip to content

Commit

Permalink
added css for tree-property-section-styling for usability-improvement…
Browse files Browse the repository at this point in the history 
… (--> change-button)
  • Loading branch information
@mafo3186
mafo3186 committed Nov 12, 2023
1 parent 36f7859 commit fd8b4a2
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 91 deletions.
36 changes: 29 additions & 7 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,36 @@ body{
color: #fff;
}

.form-radio{
margin-top: 0.5em;
.tree-type{ grid-area: tree-type}

.input-type{ grid-area: input-type}

.change-button{grid-area: change-button}


.grid-container {
display: grid;
grid-template-areas:
'tree-type tree-type change-button'
'input-type input-type change-button';
gap: 10px;
background-color: #98c1d5;
padding:0.5em 0.5em;
margin-top:0.5em;
margin-bottom: 0.5em;
margin-right: 0.5em;
border: 2px solid black;
border-radius: 3px;

}

.button-container {
grid-column: 2; /* Platziert die Button-Container in der zweiten Spalte */
display: flex;
align-items: center;
justify-content: center;
}

.form-animation{
display: flex;
align-items: flex-start;
Expand Down Expand Up @@ -112,11 +137,8 @@ button{
font-size: 25px;
}

#treeInputInsert {
padding:10px 15px;
background-color: #98c1d5;
border: 2px solid black;
border-radius: 3px;
#changeType {
margin-left: 0; /* Reset left margin to align with the radio groups */
}

canvas {
Expand Down
167 changes: 83 additions & 84 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,86 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>B-Baum-Animation</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main-header">
<span id="btreeInformation">
Eine Weiterentwicklung des B-Baum-Zeichners der TH Köln <br>
V.05-2022
</span>
<h1>B-Baum-Animation</h1>
</header>
<div class="form" id="firstRowInput">
<div>
<div class="form-inputs">
<button type="button" id="submitInsert">Zufälligen Wert Einfügen</button>
<button type="button" id="submitDelete">Zufälligen Wert Löschen</button>
<button type="button" id="animationPause">||</button>
<button type="button" id="submitUndo">Rückgängig</button>
<button type="button" id="submitReset">Baum löschen</button>
<button type="button" id="helpButton">Weitere Informationen</button>
<head>
<meta charset="utf-8">
<title>B-Baum-Animation</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="main-header">
<span id="btreeInformation">
Eine Weiterentwicklung des B-Baum-Zeichners der TH Köln <br>
V.05-2022
</span>
<h1>B-Baum-Animation</h1>
</header>
<div class="form" id="firstRowInput">
<div>
<div class="form-inputs">
<button type="button" id="submitInsert">Zufälligen Wert Einfügen</button>
<button type="button" id="submitDelete">Zufälligen Wert Löschen</button>
<button type="button" id="animationPause">||</button>
<button type="button" id="submitUndo">Rückgängig</button>
<button type="button" id="submitReset">Baum löschen</button>
<button type="button" id="helpButton">Weitere Informationen</button>
</div>
<form class="grid-container">
<div class="tree-type">
<label style="font-weight: bold">Typ des Baumes:</label>
<input type="radio" id="treeType1" checked="checked" value="1" name="treeType">
<label for="treeType1">1</label>
<input type="radio" id="treeType2" value="2" name="treeType">
<label for="treeType2">2</label>
<input type="radio" id="treeType3" value="3" name="treeType">
<label for="treeType3">3</label>
<input type="radio" id="treeType4" value="4" name="treeType">
<label for="treeType4">4</label>
<input type="radio" id="treeType5" value="5" name="treeType">
<label for="treeType5">5</label>
</div>
<div class="input-type">
<label style="font-weight: bold">Eingabewerte:</label>
<input type="radio" id="inputTypeNumbers" checked="checked" value="number" name="inputType">
<label for="inputTypeNumbers">Zahlen</label>
<input type="radio" id="inputTypeLetters" value="letter" name="inputType">
<label for="inputTypeLetters">Buchstaben</label>
</div>
<div class="change-button">
<button type="button" id="changeType">Ändern</button>
</div>
</form>
</div>
<div class="form-animation">
<div id="sliderDiv">
<label id="animationsgeschwindigkeit" for="animationCheckbox">Animation: an</label>
<input type="checkbox" class="checkbox" id="animationCheckbox" checked>
<label for="animationsgeschwindigkeitslider"></label>
<input class="slider" type="range" min="1" max="13" value="7" step="2" id="animationsgeschwindigkeitslider">
</div>
</div>
</div>
<form class="form-radio">
<label for="treeInputInsert"></label>
<label style="font-weight: bold">Typ des Baumes:</label>
<input type="radio" id="treeType1" checked="checked" value="1" name="treeType">
<label for="treeType1">1</label>
<input type="radio" id="treeType2" value="2" name="treeType">
<label for="treeType2">2</label>
<input type="radio" id="treeType3" value="3" name="treeType">
<label for="treeType3">3</label>
<input type="radio" id="treeType4" value="4" name="treeType">
<label for="treeType4">4</label>
<input type="radio" id="treeType5" value="5" name="treeType">
<label for="treeType5">5</label><br>
<label style="font-weight: bold">Eingabewerte:</label>
<input type="radio" id="inputTypeNumbers" checked="checked" value="number" name="inputType">
<label for="inputTypeNumbers">Zahlen</label>
<input type="radio" id="inputTypeLetters" value="letter" name="inputType">
<label for="inputTypeLetters">Buchstaben</label>
<button type="button" id="changeType" style="margin-left: 10px">Ändern</button>
</form>
</div>
<div class="form-animation">

<div id="sliderDiv">

<input type="checkbox" class="checkbox" id="animationCheckbox" checked>
<label id="animationsgeschwindigkeit" for="animationCheckbox">Animation: an</label>

<input class="slider" type="range" min="1" max="13" value="7" step="2" id="animationsgeschwindigkeitslider">
</div>

</div>

</div>

<canvas id="canvaswindow"></canvas>
<script src="js/btree.js"></script>
<script src="js/canvas.js"></script>
<table>
<tr><td>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
<img alt="Creative Commons License" style="border-width:0; height: 100px" src="logos/licence-logo.png" />
</a><br>
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
</td>
<td>
<img src="logos/EILD-Logo.png" alt="EILD-Logo"/>
</td>
<td>
<img src="logos/eBusiness-Logo.png" alt="eBusiness-Logo" />
</td>
<td>
<img src="logos/HSD-Logo.jpeg" alt="HSD-Logo"/>
</td>
<td>
<img src="logos/DH-NRW-Logos.png" alt="DH-NRW-Logo" style="float:right" />
</td>
</tr>

</table>
</body>
</html>
<canvas id="canvaswindow"></canvas>
<script src="js/btree.js"></script>
<script src="js/canvas.js"></script>
<table>
<tr><td>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
<img alt="Creative Commons License" style="border-width:0; height: 100px" src="logos/licence-logo.png" />
</a><br>
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
</td>
<td>
<img src="logos/EILD-Logo.png" alt="EILD-Logo"/>
</td>
<td>
<img src="logos/eBusiness-Logo.png" alt="eBusiness-Logo" />
</td>
<td>
<img src="logos/HSD-Logo.jpeg" alt="HSD-Logo"/>
</td>
<td>
<img src="logos/DH-NRW-Logos.png" alt="DH-NRW-Logo" style="float:right" />
</td>
</tr>
</table>
</body>
</html>

0 comments on commit fd8b4a2

Please sign in to comment.