This commit is contained in:
kjeld Schouten-Lebbing 2021-08-15 13:14:19 +02:00
parent 938d0e75a2
commit f02b4785ac
No known key found for this signature in database
GPG Key ID: 4CDAD4A532BC1EDB
2 changed files with 35 additions and 42 deletions

View File

@ -6,15 +6,7 @@
} }
body { .form-form {
align-items: center;
background-color: #000;
display: flex;
justify-content: center;
height: 100vh;
}
.form {
background-color: #15172b; background-color: #15172b;
border-radius: 20px; border-radius: 20px;
box-sizing: border-box; box-sizing: border-box;
@ -23,7 +15,7 @@ body {
width: 320px; width: 320px;
} }
.title { .form-form-title {
color: #eee; color: #eee;
font-family: sans-serif; font-family: sans-serif;
font-size: 36px; font-size: 36px;
@ -31,7 +23,7 @@ body {
margin-top: 30px; margin-top: 30px;
} }
.subtitle { .form-form-subtitle {
color: #eee; color: #eee;
font-family: sans-serif; font-family: sans-serif;
font-size: 16px; font-size: 16px;
@ -39,21 +31,21 @@ body {
margin-top: 10px; margin-top: 10px;
} }
.input-container { .form-form-input-container {
height: 50px; height: 50px;
position: relative; position: relative;
width: 100%; width: 100%;
} }
.ic1 { .form-ic1 {
margin-top: 40px; margin-top: 40px;
} }
.ic2 { .form-ic2 {
margin-top: 30px; margin-top: 30px;
} }
.input { .form-input {
background-color: #303245; background-color: #303245;
border-radius: 12px; border-radius: 12px;
border: 0; border: 0;
@ -66,7 +58,7 @@ body {
width: 100%; width: 100%;
} }
.cut { .form-cut {
background-color: #15172b; background-color: #15172b;
border-radius: 10px; border-radius: 10px;
height: 20px; height: 20px;
@ -78,16 +70,16 @@ body {
width: 76px; width: 76px;
} }
.cut-short { .form-cut-short {
width: 50px; width: 50px;
} }
.input:focus ~ .cut, .form-input:focus ~ .cut,
.input:not(:placeholder-shown) ~ .cut { .form-input:not(:placeholder-shown) ~ .cut {
transform: translateY(8px); transform: translateY(8px);
} }
.placeholder { .form-placeholder {
color: #65657b; color: #65657b;
font-family: sans-serif; font-family: sans-serif;
left: 20px; left: 20px;
@ -99,20 +91,20 @@ body {
top: 20px; top: 20px;
} }
.input:focus ~ .placeholder, .form-input:focus ~ .placeholder,
.input:not(:placeholder-shown) ~ .placeholder { .form-input:not(:placeholder-shown) ~ .placeholder {
transform: translateY(-30px) translateX(10px) scale(0.75); transform: translateY(-30px) translateX(10px) scale(0.75);
} }
.input:not(:placeholder-shown) ~ .placeholder { .form-input:not(:placeholder-shown) ~ .placeholder {
color: #808097; color: #808097;
} }
.input:focus ~ .placeholder { .form-input:focus ~ .placeholder {
color: #dc2f55; color: #dc2f55;
} }
.submit { .form-submit {
background-color: #08d; background-color: #08d;
border-radius: 12px; border-radius: 12px;
border: 0; border: 0;
@ -127,6 +119,6 @@ body {
width: 100%; width: 100%;
} }
.submit:active { .form-submit:active {
background-color: #06b; background-color: #06b;
} }

View File

@ -42,31 +42,32 @@ function process (form) {
function generatesvc(name, app, service) { function generatesvc(name, app, service) {
let svcdns = name + app + service; let svcname = name + "-" + app ;
let svcdns = svcname + "." + "ix-" + name + ".svc.cluster.local" ;
return svcdns; return svcdns;
}; };
</SCRIPT> </SCRIPT>
<FORM NAME="frameform" ACTION="" METHOD="GET"><BR> <FORM NAME="frameform" ACTION="" METHOD="GET"><BR>
<div class="form"> <div class="form-form">
<div class="subtitle">Generate Internal DNS Name:</div> <div class="form-subtitle">Generate Internal DNS Name:</div>
<div class="input-container ic1"> <div class="form-input-container ic1">
<input id="name" class="input" type="text" placeholder=" " /> <input id="name" class="form-input" type="text" placeholder=" " />
<div class="cut"></div> <div class="form-cut"></div>
<label for="name" class="placeholder">Name:</label> <label for="name" class="form-placeholder">Name:</label>
</div> </div>
<div class="input-container ic2"> <div class="form-input-container ic2">
<input id="app" class="input" type="text" placeholder=" " /> <input id="app" class="form-input" type="text" placeholder=" " />
<div class="cut"></div> <div class="form-cut"></div>
<label for="app" class="placeholder">App</label> <label for="app" class="form-placeholder">App</label>
</div> </div>
<div class="input-container ic2"> <div class="form-input-container ic2">
<input id="service" class="input" type="text" placeholder=" " /> <input id="service" class="form-input" type="text" placeholder=" " />
<div class="cut cut-short"></div> <div class="form-cut cut-short"></div>
<label for="service" class="placeholder">Service</> <label for="service" class="form-placeholder">Service</>
</div> </div>
<INPUT TYPE="button" class="submit" NAME="button" Value="Generate" onClick="process(this.form)"> <INPUT TYPE="button" class="form-submit" NAME="button" Value="Generate" onClick="process(this.form)">
</div> </div>
</FORM> </FORM>