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

marcusferl.de/portfolio/ipv4-converter

Browse Source
This commit is contained in:
marcusferl@weifer.de 2022-09-01 16:12:19 +02:00
parent ab7c449295
commit d630852fd0
5 changed files with 52 additions and 30 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,3 +1,3 @@
<div class="header">
<img src="/assets/img/logo.png" class="logo">
<h1>Ipv4 Converter</h1>
</div>

9
src/app/input/input.component.scss
View File

@ -1,8 +1,9 @@
.input_field {
min-width: 150px;
max-width: 500px;
height: 58px;
width: 100%;
min-width: 300px;
max-width: 1000px;
width: auto;
margin-top: 15px;
margin-right: 12px;
margin-left: 5px;
@ -14,7 +15,7 @@
.select {
min-width: 50px;
max-width: 100px;
width: 100%;
width: auto;
margin-top: 15px;
margin-right: 12px;
}

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

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

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

@ -1,22 +1,28 @@
.card {
min-height: 40px;
max-height: 250px;
background-color: white;
width: 680px;
min-width: 300px;
max-width: auto;
width: auto;
border: 3px solid rgba(0, 0, 0, 0.30);
border-radius: 10px;
overflow: hidden;
position: relative;
padding-left: 10px;
padding-top: 5px;
padding-top: 0px;
margin-bottom: 10px;
margin-left: 5px;
}
.label {
font-size: 18px;
}
.outlabel {
margin-right: 30px;
width: 20px;
margin-right: 100px;
}

19
src/styles.scss
View File

@ -1,4 +1,3 @@
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
@ -20,13 +19,10 @@ $Ipv4_Converter-warn: mat.define-palette(mat.$red-palette);
// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$Ipv4_Converter-theme: mat.define-light-theme((
color: (
primary: $Ipv4_Converter-primary,
$Ipv4_Converter-theme: mat.define-light-theme((color: (primary: $Ipv4_Converter-primary,
accent: $Ipv4_Converter-accent,
warn: $Ipv4_Converter-warn,
)
));
)));
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
@ -34,5 +30,12 @@ $Ipv4_Converter-theme: mat.define-light-theme((
@include mat.all-component-themes($Ipv4_Converter-theme);
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}