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"> <div class="header">
<img src="/assets/img/logo.png" class="logo"> <h1>Ipv4 Converter</h1>
</div> </div>

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

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

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

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

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

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

19
src/styles.scss
View File

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