weifer/Ipv4_Converter_Angular
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

header

Browse Source
This commit is contained in:
marcusferl@weifer.de 2022-09-06 12:38:03 +02:00
parent 2117b9c90d
commit 01b19c43db
4 changed files with 60 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/header/header.component.html
View File

@ -1,6 +1,6 @@
<div [ngClass]="[mode]" class="header"> <div [ngClass]="[mode]" class="header">
<div> <div>
<h1>Ipv4 Converter</h1> <h1 #hover (mouseenter)="onMouseEnter(hover)" (mouseleave)="onMouseOut(hover)">Ipv4 Converter</h1>
<mat-slide-toggle class="toggle" (toggleChange)="stylemode()">{{toggleText}} </mat-slide-toggle> <mat-slide-toggle class="toggle" (toggleChange)="stylemode()">{{toggleText}} </mat-slide-toggle>
</div> </div>

9
src/app/header/header.component.ts
View File

@ -13,6 +13,15 @@ export class HeaderComponent implements OnInit {
}
onMouseEnter(hover: HTMLElement) {
hover.style.color = "red";
}
onMouseOut(hover: HTMLElement) {
hover.style.color = "black";
} }
stylemode() { stylemode() {
switch (this.toggle) { switch (this.toggle) {

106
src/app/output/output.component.html
View File

@ -1,54 +1,56 @@
<div class="card"> <div class="body">
<label class="label">Ipv4</label> <div class="card">
<div> <label class="label">Ipv4</label>
<p><label class="outlabel">Ip:</label></p> <div>
<p><label class="output">{{service.bin_dec_dict.Ipv4.dec}}</label></p> <p><label class="outlabel">Ip:</label></p>
<p><label class="outlabel">Binary:</label></p> <p><label class="output">{{service.bin_dec_dict.Ipv4.dec}}</label></p>
<p><label class="output">{{service.bin_dec_dict.Ipv4.bin}}</label></p> <p><label class="outlabel">Binary:</label></p>
</div> <p><label class="output">{{service.bin_dec_dict.Ipv4.bin}}</label></p>
</div> </div>
<div class="card"> </div>
<label class="label">Subnet Mask</label> <div class="card">
<div> <label class="label">Subnet Mask</label>
<p><label class="outlabel">Ip:</label></p> <div>
<p><label>{{service.bin_dec_dict.Subnet.dec}}</label></p> <p><label class="outlabel">Ip:</label></p>
<p><label class="outlabel">Binary:</label></p> <p><label>{{service.bin_dec_dict.Subnet.dec}}</label></p>
<p><label>{{service.bin_dec_dict.Subnet.bin}}</label></p> <p><label class="outlabel">Binary:</label></p>
</div> <p><label>{{service.bin_dec_dict.Subnet.bin}}</label></p>
</div> </div>
<div class="card"> </div>
<label class="label">Broadcast</label> <div class="card">
<div> <label class="label">Broadcast</label>
<p><label class="outlabel">Ip:</label></p> <div>
<p><label>{{service.bin_dec_dict.Broadcast.dec}}</label></p> <p><label class="outlabel">Ip:</label></p>
<p><label class="outlabel">Binary:</label></p> <p><label>{{service.bin_dec_dict.Broadcast.dec}}</label></p>
<p><label>{{service.bin_dec_dict.Broadcast.bin}}</label></p> <p><label class="outlabel">Binary:</label></p>
</div> <p><label>{{service.bin_dec_dict.Broadcast.bin}}</label></p>
</div> </div>
<div class="card"> </div>
<label class="label">NetID</label> <div class="card">
<div> <label class="label">NetID</label>
<p><label class="outlabel">Ip:</label></p> <div>
<p><label>{{service.bin_dec_dict.NetID.dec}}</label></p> <p><label class="outlabel">Ip:</label></p>
<p><label class="outlabel">Binary:</label></p> <p><label>{{service.bin_dec_dict.NetID.dec}}</label></p>
<p><label>{{service.bin_dec_dict.NetID.bin}}</label></p> <p><label class="outlabel">Binary:</label></p>
</div> <p><label>{{service.bin_dec_dict.NetID.bin}}</label></p>
</div> </div>
<div class="card"> </div>
<label class="label">First Ip</label> <div class="card">
<div> <label class="label">First Ip</label>
<p><label class="outlabel">Ip:</label></p> <div>
<p><label>{{service.bin_dec_dict.FirstIP.dec}}</label></p> <p><label class="outlabel">Ip:</label></p>
<p><label class="outlabel">Binary:</label></p> <p><label>{{service.bin_dec_dict.FirstIP.dec}}</label></p>
<p><label>{{service.bin_dec_dict.FirstIP.bin}}</label></p> <p><label class="outlabel">Binary:</label></p>
</div> <p><label>{{service.bin_dec_dict.FirstIP.bin}}</label></p>
</div> </div>
<div class="card"> </div>
<label class="label">Last Ip</label> <div class="card">
<div> <label class="label">Last Ip</label>
<p><label class="outlabel">Ip:</label></p> <div>
<p><label>{{service.bin_dec_dict.LastIP.dec}}</label></p> <p><label class="outlabel">Ip:</label></p>
<p><label class="outlabel">Binary:</label></p> <p><label>{{service.bin_dec_dict.LastIP.dec}}</label></p>
<p><label>{{service.bin_dec_dict.LastIP.bin}}</label></p> <p><label class="outlabel">Binary:</label></p>
<p><label>{{service.bin_dec_dict.LastIP.bin}}</label></p>
</div>
</div> </div>
</div> </div>

5
src/app/output/output.component.scss
View File

@ -14,6 +14,7 @@
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
} }
.label { .label {
@ -26,7 +27,3 @@
width: 20px; width: 20px;
margin-right: 100px; margin-right: 100px;
} }
body {
background-color: black;
}