Skip to content

Commit 742be54

Browse files
shdinxshdinx
authored
Add files via upload
1 parent 47a84af commit 742be54

File tree

1 file changed

+363
-0
lines changed

1 file changed

+363
-0
lines changed

‎setup/setup.html‎

Lines changed: 363 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,363 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<meta name="description" content="">
9+
<meta name="author" content="">
10+
<title>Install SSJS LIB</title>
11+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
12+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
13+
<style type="text/css">
14+
@import url('https://fonts.googleapis.com/css?family=Numans');
15+
16+
html,
17+
body {
18+
background-image: url('https://www.email360.io/img/hero-bg.7075aa29.jpg');
19+
background-size: cover;
20+
background-repeat: no-repeat;
21+
height: 100%;
22+
font-family: 'Numans', sans-serif;
23+
}
24+
25+
.container {
26+
height: 90%;
27+
align-content: center;
28+
}
29+
30+
.input-group-prepend span {
31+
width: 50px;
32+
background-color: #ffc451;
33+
color: black;
34+
border: 0 !important;
35+
}
36+
37+
.inner {
38+
padding-top: 100px;
39+
}
40+
41+
input:focus {
42+
outline: 0 0 0 0 !important;
43+
box-shadow: 0 0 0 0 !important;
44+
45+
}
46+
47+
/*form styles*/
48+
#ssjs_lib {
49+
text-align: center;
50+
position: relative;
51+
margin-top: 30px;
52+
}
53+
54+
/*form styles*/
55+
#ssjs_lib div {
56+
text-align: left;
57+
font-size: 12px;
58+
}
59+
60+
#ssjs_lib div ul:before {
61+
content:attr(aria-label);
62+
font-size:120%;
63+
font-weight:bold;
64+
margin-left:-15px;
65+
}
66+
67+
#ssjs_lib div ul {
68+
list-style: none; /* Remove default bullets */
69+
}
70+
71+
#ssjs_lib div ul pre {
72+
margin-bottom: 1px;
73+
font-size: 12px;
74+
}
75+
76+
#ssjs_lib fieldset {
77+
background: white;
78+
border: 0 none;
79+
border-radius: 0px;
80+
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
81+
padding: 20px 30px;
82+
box-sizing: border-box;
83+
width: 80%;
84+
margin: 0 10%;
85+
86+
/*stacking fieldsets above each other*/
87+
position: relative;
88+
}
89+
90+
/*Hide all except first fieldset*/
91+
#ssjs_lib fieldset:not(:first-of-type) {
92+
display: none;
93+
}
94+
95+
#ssjs_lib div.settings {
96+
display:grid;
97+
grid-template-columns: max-content max-content;
98+
grid-gap:5px;
99+
}
100+
#ssjs_lib div.settings label {
101+
text-align:right;
102+
}
103+
#ssjs_lib div.settings label:after {
104+
content: ":";
105+
}
106+
107+
/*inputs*/
108+
#ssjs_lib input,
109+
#ssjs_lib textarea {
110+
padding: 15px;
111+
border: 1px solid #ccc;
112+
border-radius: 0px;
113+
margin-bottom: 10px;
114+
width: 100%;
115+
box-sizing: border-box;
116+
font-family: Numans;
117+
color: #2C3E50;
118+
font-size: 13px;
119+
}
120+
121+
#ssjs_lib input:focus,
122+
#ssjs_lib textarea:focus {
123+
-moz-box-shadow: none !important;
124+
-webkit-box-shadow: none !important;
125+
box-shadow: none !important;
126+
border: 1px solid #ffc451;
127+
outline-width: 0;
128+
transition: All 0.5s ease-in;
129+
-webkit-transition: All 0.5s ease-in;
130+
-moz-transition: All 0.5s ease-in;
131+
-o-transition: All 0.5s ease-in;
132+
}
133+
134+
/*buttons*/
135+
#ssjs_lib .action-button {
136+
width: 125px;
137+
background: #ffc451;
138+
color: #151515;
139+
border: 0 none;
140+
border-radius: 4px;
141+
cursor: pointer;
142+
padding: 10px 24px;
143+
font-weight: bold;
144+
}
145+
146+
147+
#ssjs_lib .action-button:hover,
148+
#ssjs_lib .action-button:focus {
149+
box-shadow: 0 0 0 2px white, 0 0 0 3px #ffc451;
150+
}
151+
152+
#ssjs_lib .action-button-previous {
153+
width: 100px;
154+
color: #151515;
155+
border: 0 none;
156+
border-radius: 4px;
157+
cursor: pointer;
158+
padding: 10px 24px;
159+
font-weight: bold;
160+
161+
}
162+
163+
#ssjs_lib .action-button-previous:hover,
164+
#ssjs_lib .action-button-previous:focus {
165+
box-shadow: 0 0 0 2px white, 0 0 0 3px #ffc451;
166+
}
167+
168+
/*headings*/
169+
.fs-title {
170+
font-size: 18px;
171+
text-transform: uppercase;
172+
color: #2C3E50;
173+
margin-bottom: 10px;
174+
letter-spacing: 2px;
175+
font-weight: bold;
176+
}
177+
178+
.fs-subtitle {
179+
font-weight: normal;
180+
font-size: 13px;
181+
color: #666;
182+
margin-bottom: 20px;
183+
}
184+
185+
.fs-subtitle-output {
186+
font-weight: bold;
187+
text-decoration: underline;
188+
font-size: 14px;
189+
color: #666;
190+
}
191+
192+
193+
</style>
194+
</head>
195+
196+
<body>
197+
<header class="fixed-top" style="background: rgba(0, 0, 0, 0.5);">
198+
<div class="container">
199+
<nav class="navbar navbar-dark navbar-expand-lg">
200+
<a href="https://www.email360.io" target="_blank">
201+
<img src="https://www.email360.io/img/logo.c977298e.png" alt="Email 360" width="150" class="" />
202+
</a>
203+
</nav>
204+
</div>
205+
</header>
206+
<div class="container">
207+
<div class="row">
208+
<div class="col"></div>
209+
<div class="inner col-md-10">
210+
%%[ IF @install == 1 THEN ]%%
211+
<row id="ssjs_lib">
212+
<fieldset>
213+
<center><h2 class="fs-title">Installation Results %%[ IF @dev == 1 THEN ]%%(Dev Mode)%%[ ENDIF ]%%</h2></center>
214+
%%=v(@output)=%%
215+
%%[ IF @error != 1 THEN ]%%
216+
<input type="button" name="next" class="next action-button" value="Next Steps" />
217+
%%[ ENDIF ]%%
218+
</fieldset>
219+
%%[ IF @error != 1 THEN ]%%
220+
<fieldset>
221+
<center><h2 class="fs-title">Next Steps</h2></center>
222+
%%=v(@nextSteps)=%%
223+
</fieldset>
224+
%%[ ENDIF ]%%
225+
</form>
226+
%%[ ELSE ]%%
227+
<form id="ssjs_lib" action="#" method="POST">
228+
<fieldset>
229+
<h2 class="fs-title">email360 SSJS Lib - Install Wizzard %%[ IF @dev == 1 THEN ]%%(Dev Mode)%%[ ENDIF ]%%</h2>
230+
<h3 class="fs-subtitle">General settings for the Library</h3>
231+
Welcome to install the SSJS ....
232+
<input type="button" name="next" class="next action-button" value="Start" />
233+
</fieldset>
234+
<fieldset>
235+
<h2 class="fs-title">Brand Setup (Optional)</h2>
236+
<h3 class="fs-subtitle">General settings for the Library</h3>
237+
<input type="text" name="brand" placeholder="Company name (No special charachters including ./()[]:| default: email360)" />
238+
<input type="text" name="prefix" placeholder="Prefix (default: email360)" maxlength=10 />
239+
<input type="button" name="previous" class="previous action-button-previous" value="Previous" />
240+
<input type="button" name="next" class="next action-button" value="Next" />
241+
</fieldset>
242+
<fieldset>
243+
<h2 class="fs-title">API Setup (Optional)</h2>
244+
<h3 class="fs-subtitle">Pleae use a server-2-server package and enable all permissions.<br /> This will enable the full functionality of the SSJS Library.</h3>
245+
<input type="text" name="authUrl" placeholder="Auth Base URI" />
246+
<input type="text" name="restUrl" placeholder="Rest Base URI" />
247+
<input type="text" name="clientId" placeholder="Client Id" />
248+
<input type="password" name="clientSecret" placeholder="Client Secret" />
249+
%%[ IF @dev == 1 THEN ]%%
250+
<h3 class="fs-subtitle"><br>Dev mode enabled - load from private git</h3>
251+
<input type="text" name="dev.username" placeholder="GIT name"/>
252+
<input type="text" name="dev.token" placeholder="token"/>
253+
<input type="text" name="dev.repoName" placeholder="Repo Name" />
254+
%%[ ENDIF ]%%
255+
<input type="button" name="previous" class="previous action-button-previous" value="Previous" />
256+
<input type="button" name="next" class="next action-button" value="Next" />
257+
</fieldset>
258+
<fieldset>
259+
<h2 class="fs-title">Create a Login (Optional)</h2>
260+
<h3 class="fs-subtitle">Fill in your credentials</h3>
261+
<input type="text" name="user" placeholder="Username" />
262+
<input name="password" type="password" placeholder="Enter Password">
263+
<input type="button" name="previous" class="previous action-button-previous" value="Previous" />
264+
<input type="submit" id="submit" name="submit" class="submit action-button" value="Install" />
265+
</fieldset>
266+
</form>
267+
%%[ ENDIF ]%%
268+
</div>
269+
<div class="col"></div>
270+
</div>
271+
</div>
272+
</div>
273+
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
274+
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
275+
<script type="text/javascript">
276+
$(function() {
277+
$('form[name="loginForm"]').submit(function(e) {
278+
const password = $('input[name="password"]');
279+
password.val(encodeURIComponent(password.val()));
280+
});
281+
});
282+
</script>
283+
<script type="text/javascript">
284+
var current_fs, next_fs, previous_fs; //fieldsets
285+
var left, opacity, scale; //fieldset properties which we will animate
286+
var animating; //flag to prevent quick multi-click glitches
287+
288+
$(".next").click(function() {
289+
if (animating) return false;
290+
animating = true;
291+
292+
current_fs = $(this).parent();
293+
next_fs = $(this).parent().next();
294+
295+
//activate next step on progressbar using the index of next_fs
296+
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
297+
298+
//show the next fieldset
299+
next_fs.show();
300+
//hide the current fieldset with style
301+
current_fs.animate({ opacity: 0 }, {
302+
step: function(now, mx) {
303+
//as the opacity of current_fs reduces to 0 - stored in "now"
304+
//1. scale current_fs down to 80%
305+
scale = 1 - (1 - now) * 0.2;
306+
//2. bring next_fs from the right(50%)
307+
left = (now * 50) + "%";
308+
//3. increase opacity of next_fs to 1 as it moves in
309+
opacity = 1 - now;
310+
current_fs.css({
311+
'transform': 'scale(' + scale + ')',
312+
'position': 'absolute'
313+
});
314+
next_fs.css({ 'left': left, 'opacity': opacity });
315+
},
316+
duration: 800,
317+
complete: function() {
318+
current_fs.hide();
319+
animating = false;
320+
},
321+
//this comes from the custom easing plugin
322+
easing: 'easeInOutBack'
323+
});
324+
});
325+
326+
$(".previous").click(function() {
327+
if (animating) return false;
328+
animating = true;
329+
330+
current_fs = $(this).parent();
331+
previous_fs = $(this).parent().prev();
332+
333+
//de-activate current step on progressbar
334+
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
335+
336+
//show the previous fieldset
337+
previous_fs.show();
338+
//hide the current fieldset with style
339+
current_fs.animate({ opacity: 0 }, {
340+
step: function(now, mx) {
341+
//as the opacity of current_fs reduces to 0 - stored in "now"
342+
//1. scale previous_fs from 80% to 100%
343+
scale = 0.8 + (1 - now) * 0.2;
344+
//2. take current_fs to the right(50%) - from 0%
345+
left = ((1 - now) * 50) + "%";
346+
//3. increase opacity of previous_fs to 1 as it moves in
347+
opacity = 1 - now;
348+
current_fs.css({ 'left': left });
349+
previous_fs.css({ 'transform': 'scale(' + scale + ')', 'opacity': opacity });
350+
},
351+
duration: 800,
352+
complete: function() {
353+
current_fs.hide();
354+
animating = false;
355+
},
356+
//this comes from the custom easing plugin
357+
easing: 'easeInOutBack'
358+
});
359+
});
360+
</script>
361+
</body>
362+
363+
</html>

0 commit comments

Comments
 (0)