whoops
This commit is contained in:
kjeld Schouten-Lebbing
parent
938d0e75a2
commit
f02b4785ac
|
|
@ -6,15 +6,7 @@
|
|||
}
|
||||
|
||||
|
||||
body {
|
||||
align-items: center;
|
||||
background-color: #000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.form {
|
||||
.form-form {
|
||||
background-color: #15172b;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -23,7 +15,7 @@ body {
|
|||
width: 320px;
|
||||
}
|
||||
|
||||
.title {
|
||||
.form-form-title {
|
||||
color: #eee;
|
||||
font-family: sans-serif;
|
||||
font-size: 36px;
|
||||
|
|
@ -31,7 +23,7 @@ body {
|
|||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
.form-form-subtitle {
|
||||
color: #eee;
|
||||
font-family: sans-serif;
|
||||
font-size: 16px;
|
||||
|
|
@ -39,21 +31,21 @@ body {
|
|||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
.form-form-input-container {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ic1 {
|
||||
.form-ic1 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.ic2 {
|
||||
.form-ic2 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.input {
|
||||
.form-input {
|
||||
background-color: #303245;
|
||||
border-radius: 12px;
|
||||
border: 0;
|
||||
|
|
@ -66,7 +58,7 @@ body {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.cut {
|
||||
.form-cut {
|
||||
background-color: #15172b;
|
||||
border-radius: 10px;
|
||||
height: 20px;
|
||||
|
|
@ -78,16 +70,16 @@ body {
|
|||
width: 76px;
|
||||
}
|
||||
|
||||
.cut-short {
|
||||
.form-cut-short {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.input:focus ~ .cut,
|
||||
.input:not(:placeholder-shown) ~ .cut {
|
||||
.form-input:focus ~ .cut,
|
||||
.form-input:not(:placeholder-shown) ~ .cut {
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
.form-placeholder {
|
||||
color: #65657b;
|
||||
font-family: sans-serif;
|
||||
left: 20px;
|
||||
|
|
@ -99,20 +91,20 @@ body {
|
|||
top: 20px;
|
||||
}
|
||||
|
||||
.input:focus ~ .placeholder,
|
||||
.input:not(:placeholder-shown) ~ .placeholder {
|
||||
.form-input:focus ~ .placeholder,
|
||||
.form-input:not(:placeholder-shown) ~ .placeholder {
|
||||
transform: translateY(-30px) translateX(10px) scale(0.75);
|
||||
}
|
||||
|
||||
.input:not(:placeholder-shown) ~ .placeholder {
|
||||
.form-input:not(:placeholder-shown) ~ .placeholder {
|
||||
color: #808097;
|
||||
}
|
||||
|
||||
.input:focus ~ .placeholder {
|
||||
.form-input:focus ~ .placeholder {
|
||||
color: #dc2f55;
|
||||
}
|
||||
|
||||
.submit {
|
||||
.form-submit {
|
||||
background-color: #08d;
|
||||
border-radius: 12px;
|
||||
border: 0;
|
||||
|
|
@ -127,6 +119,6 @@ body {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.submit:active {
|
||||
.form-submit:active {
|
||||
background-color: #06b;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,31 +42,32 @@ function process (form) {
|
|||
|
||||
|
||||
function generatesvc(name, app, service) {
|
||||
let svcdns = name + app + service;
|
||||
let svcname = name + "-" + app ;
|
||||
let svcdns = svcname + "." + "ix-" + name + ".svc.cluster.local" ;
|
||||
return svcdns;
|
||||
};
|
||||
|
||||
</SCRIPT>
|
||||
|
||||
<FORM NAME="frameform" ACTION="" METHOD="GET"><BR>
|
||||
<div class="form">
|
||||
<div class="subtitle">Generate Internal DNS Name:</div>
|
||||
<div class="input-container ic1">
|
||||
<input id="name" class="input" type="text" placeholder=" " />
|
||||
<div class="cut"></div>
|
||||
<label for="name" class="placeholder">Name:</label>
|
||||
<div class="form-form">
|
||||
<div class="form-subtitle">Generate Internal DNS Name:</div>
|
||||
<div class="form-input-container ic1">
|
||||
<input id="name" class="form-input" type="text" placeholder=" " />
|
||||
<div class="form-cut"></div>
|
||||
<label for="name" class="form-placeholder">Name:</label>
|
||||
</div>
|
||||
<div class="input-container ic2">
|
||||
<input id="app" class="input" type="text" placeholder=" " />
|
||||
<div class="cut"></div>
|
||||
<label for="app" class="placeholder">App</label>
|
||||
<div class="form-input-container ic2">
|
||||
<input id="app" class="form-input" type="text" placeholder=" " />
|
||||
<div class="form-cut"></div>
|
||||
<label for="app" class="form-placeholder">App</label>
|
||||
</div>
|
||||
<div class="input-container ic2">
|
||||
<input id="service" class="input" type="text" placeholder=" " />
|
||||
<div class="cut cut-short"></div>
|
||||
<label for="service" class="placeholder">Service</>
|
||||
<div class="form-input-container ic2">
|
||||
<input id="service" class="form-input" type="text" placeholder=" " />
|
||||
<div class="form-cut cut-short"></div>
|
||||
<label for="service" class="form-placeholder">Service</>
|
||||
</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>
|
||||
</FORM>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue