-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathInitial-setup.html
More file actions
67 lines (66 loc) · 19.4 KB
/
Copy pathInitial-setup.html
File metadata and controls
67 lines (66 loc) · 19.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Initial setup</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="anonymous"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Inter:wght@100..900&family=Lexend:wght@400;500&family=DM+Sans:ital,wght@0,400;0,500;1,500&display=swap"
/>
<style>
:root{
font-size:16px
}
body{
display:flex;
justify-content:center;
align-items:center;
padding:2rem;
font-family:'Dm Sans';
background:rgb(249 250 251);
}
.gj_hidden{
display:none
}
@media (min-width: 640px) {
.gj_sm_flex{
display:flex!important
}
}
.gj_link:hover{
opacity:.8
}
.gj_shadow{
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}
.gj_flexcenter{
display:flex;
justify-content:center;
align-items:center;
}
.gj_markdown{
white-space:pre-wrap;
overflow-wrap:anywhere;
overflow:hidden
}
@keyframes ping{
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
</style>
</head>
<body>
<div style="display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:75vw;margin-horizontal:auto;padding-top:3rem"><div style="display:flex;align-items:center;justify-content:center;width:100%;height:100%"><div class="gj_shadow gj_hidden gj_sm_flex" style="width:3rem;height:3rem;border-radius:100%;border:1px solid rgb(0,0,0,0.1);background-color:white;padding:0.5rem;flex-shrink:0;flex-grow:0;align-items:center;justify-content:center"><img src="https://www.guidejar.com/favicon.ico" alt="" style="width:1.5rem;object-fit:cover"/></div><div style="width:100%;margin-left:1rem"><h1 style="font-size:2.25rem;font-weight:bold;margin:0">Initial setup</h1><span style="font-size:.85rem;margin-top:1rem;color:rgb(0,0,0,0.6)">Add as many steps as you want below to create a step by step guide. You can upload your own screenshots (or) videos to create a more engaging guide. Once you click on 'Finish', you'll be able to view this guide as a scroll or as an interactive demo video.</span></div></div><div style="display:flex;flex-direction:column;width:100%;margin-top:3rem"><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px;background:white"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#9164f733"><b style="color:#9164f7;font-size:1rem">1</b></div><div class="gj_markdown"><p>Click on "<strong>Log in</strong>"</p></div></div><div style="position:relative;width:74.75vw;height:44.11833455076698vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/DZ7sxbjb54OCDy5aVaoa/cJtAPvkTQIdo3J7TNIM4mMlr4oD3/c5a98677-1bbf-477c-aaca-6af560f02792/1714419477780.jpeg" style="width:74.75vw;height:44.11833455076698vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform-origin:65.39287599455017vw 2.0801391916906593vw;transform:scale(undefined)" alt="Click on "**Log in**""/><div style="position:absolute;left:63.89287599455017vw;top:0.5801391916906593vw;width:3vw;height:3vw;z-index:50;border-radius:100%;border:1.5px solid #9164f7;background-color:#9164f799"><div style="width:100%;height:100%;border-radius:100%;animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;background-color:#9164f799"></div></div></div></div><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px;background:white"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#9164f733"><b style="color:#9164f7;font-size:1rem">2</b></div><div class="gj_markdown"><p>Click on "<strong>GitHub</strong>" (only supported for now)</p></div></div><div style="position:relative;width:74.75vw;height:44.30193482688391vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/DZ7sxbjb54OCDy5aVaoa/cJtAPvkTQIdo3J7TNIM4mMlr4oD3/06c7dc67-c463-4293-9618-db9f14b0422e/1714420035898.jpeg" style="width:74.75vw;height:44.30193482688391vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform-origin:15.826328876569379vw 28.878833058313955vw;transform:scale(undefined)" alt="Click on "**GitHub**" (only supported for now)"/><div style="position:absolute;left:14.326328876569379vw;top:27.378833058313955vw;width:3vw;height:3vw;z-index:50;border-radius:100%;border:1.5px solid #9164f7;background-color:#9164f799"><div style="width:100%;height:100%;border-radius:100%;animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;background-color:#9164f799"></div></div></div></div><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px;background:white"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#9164f733"><b style="color:#9164f7;font-size:1rem">3</b></div><div class="gj_markdown"><p>Login to your Github account</p></div></div><div style="position:relative;width:74.75vw;height:35.155859375vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/DZ7sxbjb54OCDy5aVaoa/cJtAPvkTQIdo3J7TNIM4mMlr4oD3/c334d53e-ebf6-471a-bb49-c0f66edf38d5/1714420120600.jpeg" style="width:74.75vw;height:35.155859375vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform:scale(undefined)" alt="Login to your Github account"/></div></div><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px;background:white"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#9164f733"><b style="color:#9164f7;font-size:1rem">4</b></div><div class="gj_markdown"><p>Click on "<strong>Authorize RubyCI</strong>" (to enable future Github login)</p></div></div><div style="position:relative;width:74.75vw;height:35.155859375vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/DZ7sxbjb54OCDy5aVaoa/cJtAPvkTQIdo3J7TNIM4mMlr4oD3/cf811c1d-417d-401a-a3b4-ad264824f521/1714420162781.jpeg" style="width:74.75vw;height:35.155859375vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform-origin:38.54506359041252vw 17.09040319149478vw;transform:scale(undefined)" alt="Click on "**Authorize RubyCI**" (to enable future Github login)"/><div style="position:absolute;left:37.04506359041252vw;top:15.59040319149478vw;width:3vw;height:3vw;z-index:50;border-radius:100%;border:1.5px solid #9164f7;background-color:#9164f799"><div style="width:100%;height:100%;border-radius:100%;animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;background-color:#9164f799"></div></div></div></div><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px;background:white"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#9164f733"><b style="color:#9164f7;font-size:1rem">5</b></div><div class="gj_markdown"><p>Click on "<strong>Grant Rubyci Privileges</strong>"</p></div></div><div style="position:relative;width:74.75vw;height:35.155859375vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/DZ7sxbjb54OCDy5aVaoa/cJtAPvkTQIdo3J7TNIM4mMlr4oD3/b81fc1aa-e118-40d3-a3f9-0a539b0ebc7d/1714420548598.jpeg" style="width:74.75vw;height:35.155859375vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform-origin:17.093897766182945vw 13.872728317860343vw;transform:scale(undefined)" alt="Click on "**Grant Rubyci Privileges**""/><div style="position:absolute;left:15.593897766182945vw;top:12.372728317860343vw;width:3vw;height:3vw;z-index:50;border-radius:100%;border:1.5px solid #9164f7;background-color:#9164f799"><div style="width:100%;height:100%;border-radius:100%;animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;background-color:#9164f799"></div></div></div></div><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px;background:white"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#9164f733"><b style="color:#9164f7;font-size:1rem">6</b></div><div class="gj_markdown"><p>Click on "<strong>Install & Authorize</strong>"</p></div></div><div style="position:relative;width:74.75vw;height:80.30663716814159vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/DZ7sxbjb54OCDy5aVaoa/cJtAPvkTQIdo3J7TNIM4mMlr4oD3/ab35d56d-a4a1-4a60-8758-dea32ec404fc/1715590492338.jpeg" style="width:74.75vw;height:80.30663716814159vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform-origin:32.06096119354313vw 64.04211688832646vw;transform:scale(undefined)" alt="Click on "**Install & Authorize**""/><div style="position:absolute;left:30.56096119354313vw;top:62.54211688832646vw;width:3vw;height:3vw;z-index:50;border-radius:100%;border:1.5px solid #9164f7;background-color:#9164f799"><div style="width:100%;height:100%;border-radius:100%;animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;background-color:#9164f799"></div></div></div></div><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px;background:white"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#9164f733"><b style="color:#9164f7;font-size:1rem">7</b></div><div class="gj_markdown"><p>Click on "<strong>Select Organization</strong>" dropdown</p></div></div><div style="position:relative;width:74.75vw;height:35.155859375vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/DZ7sxbjb54OCDy5aVaoa/cJtAPvkTQIdo3J7TNIM4mMlr4oD3/52b22e85-93ce-47d6-8b01-27a0a6711690/1714420781583.jpeg" style="width:74.75vw;height:35.155859375vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform-origin:21.871657427034076vw 13.238943873053557vw;transform:scale(undefined)" alt="Click on "**Select Organization**" dropdown"/><div style="position:absolute;left:20.371657427034076vw;top:11.738943873053557vw;width:3vw;height:3vw;z-index:50;border-radius:100%;border:1.5px solid #9164f7;background-color:#9164f799"><div style="width:100%;height:100%;border-radius:100%;animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;background-color:#9164f799"></div></div></div></div><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px;background:white"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#9164f733"><b style="color:#9164f7;font-size:1rem">8</b></div><div class="gj_markdown"><p>Select your organization, etc. <strong>Rubycii</strong></p></div></div><div style="position:relative;width:74.75vw;height:35.155859375vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/DZ7sxbjb54OCDy5aVaoa/cJtAPvkTQIdo3J7TNIM4mMlr4oD3/f32c988a-3f2e-408c-9348-632bfb3d4d89/1714420838956.jpeg" style="width:74.75vw;height:35.155859375vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform-origin:14.948781183759985vw 18.065456183505216vw;transform:scale(undefined)" alt="Select your organization, etc. **Rubycii**"/><div style="position:absolute;left:13.448781183759985vw;top:16.565456183505216vw;width:3vw;height:3vw;z-index:50;border-radius:100%;border:1.5px solid #9164f7;background-color:#9164f799"><div style="width:100%;height:100%;border-radius:100%;animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;background-color:#9164f799"></div></div></div></div><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px;background:white"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#9164f733"><b style="color:#9164f7;font-size:1rem">9</b></div><div class="gj_markdown"><p>Click on "<strong>Select Repository</strong>" dropdown</p></div></div><div style="position:relative;width:74.75vw;height:35.155859375vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/DZ7sxbjb54OCDy5aVaoa/cJtAPvkTQIdo3J7TNIM4mMlr4oD3/af062819-7c12-47a5-b050-2ef64c5b8c6b/1714420936557.jpeg" style="width:74.75vw;height:35.155859375vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform-origin:21.286625631827818vw 18.894251226714083vw;transform:scale(undefined)" alt="Click on "**Select Repository**" dropdown"/><div style="position:absolute;left:19.786625631827818vw;top:17.394251226714083vw;width:3vw;height:3vw;z-index:50;border-radius:100%;border:1.5px solid #9164f7;background-color:#9164f799"><div style="width:100%;height:100%;border-radius:100%;animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;background-color:#9164f799"></div></div></div></div><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px;background:white"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#9164f733"><b style="color:#9164f7;font-size:1rem">10</b></div><div class="gj_markdown"><p>Select repository you want to connect</p></div></div><div style="position:relative;width:74.75vw;height:35.155859375vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/DZ7sxbjb54OCDy5aVaoa/cJtAPvkTQIdo3J7TNIM4mMlr4oD3/2d4c3ba9-90d8-447b-810d-d115ade71573/1714421006479.jpeg" style="width:74.75vw;height:35.155859375vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform-origin:13.291191097342246vw 23.76951618676626vw;transform:scale(undefined)" alt="Select repository you want to connect"/><div style="position:absolute;left:11.791191097342246vw;top:22.26951618676626vw;width:3vw;height:3vw;z-index:50;border-radius:100%;border:1.5px solid #9164f7;background-color:#9164f799"><div style="width:100%;height:100%;border-radius:100%;animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;background-color:#9164f799"></div></div></div></div><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px;background:white"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#9164f733"><b style="color:#9164f7;font-size:1rem">11</b></div><div class="gj_markdown"><p>Click on "<strong>Connect</strong>"</p></div></div><div style="position:relative;width:74.75vw;height:36.323828125vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/DZ7sxbjb54OCDy5aVaoa/cJtAPvkTQIdo3J7TNIM4mMlr4oD3/bdc44030-a1be-4145-8d17-f97b2f11ae2e/1714421121057.jpeg" style="width:74.75vw;height:36.323828125vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform-origin:12.998675199739118vw 24.012232014562613vw;transform:scale(undefined)" alt="Click on "**Connect**""/><div style="position:absolute;left:11.498675199739118vw;top:22.512232014562613vw;width:3vw;height:3vw;z-index:50;border-radius:100%;border:1.5px solid #9164f7;background-color:#9164f799"><div style="width:100%;height:100%;border-radius:100%;animation:ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;background-color:#9164f799"></div></div></div></div><div class="gj_shadow" style="display:flex;flex-direction:column;justify-content:center;margin-top:30px;margin-bottom:30px;border:1px solid rgb(0,0,0,0.1);border-radius:6px;background:white"><div style="display:flex;flex-direction:row;column-gap:1rem;align-items:center;padding:1rem"><div style="display:flex;justify-content:center;align-items:center;border-radius:100%;width:2.5rem;height:2.5rem;flex-shrink:0;background-color:#9164f733"><b style="color:#9164f7;font-size:1rem">12</b></div><div class="gj_markdown"><p><strong>Done</strong> 🚀</p></div></div><div style="position:relative;width:74.75vw;height:36.323828125vw;margin:auto;overflow:hidden;border-top:1px solid rgb(0,0,0,0.1)"><img src="https://assets.guidejar.com/uploads/DZ7sxbjb54OCDy5aVaoa/cJtAPvkTQIdo3J7TNIM4mMlr4oD3/8bc4060e-8845-4581-9112-a79898ee3633/1714421247365.jpeg" style="width:74.75vw;height:36.323828125vw;border-bottom-left-radius:5px;border-bottom-right-radius:5px;max-width:none;transform:scale(undefined)" alt="**Done** 🚀"/></div></div></div></div>
</body>
</html>