whoops
This commit is contained in:
parent
938d0e75a2
commit
f02b4785ac
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue