@cto.ai/ops
Version:
💻 CTO.ai Ops - The CLI built for Teams 🚀
227 lines (205 loc) • 6.89 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Signed up - CTO.ai</title>
<link
rel="shortcut icon"
type="image/png"
href="https://keycloak-redirects-assets.s3.amazonaws.com/img/favicon.png"
/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script type="text/javascript">
function copyCommand(idName) {
// Have to create a new text area to be able to run select on a node element for the copy to work.
var copyText = document.getElementById(idName);
var textArea = document.createElement("textarea");
textArea.value = copyText.textContent;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("Copy");
textArea.remove();
}
</script>
<style>
html, body {
height: 100%;
margin: 0;
font-family: "Avenir Next";
}
.cto-logo {
position: absolute;
left: 2.36%;
right: 88.38%;
top: 1.38%;
bottom: 96.54%;
}
.main-bg {
background: url(https://keycloak-redirects-assets.s3.amazonaws.com/img/bg-top.svg) top right / 50% 50% no-repeat, url(https://keycloak-redirects-assets.s3.amazonaws.com/img/bg-bottom.svg) bottom left / 50% 50% no-repeat
}
.header {
margin-top: 16px;
margin-left: 36px;
height: 60px;
width: 130px;
}
.main-container {
position: absolute;
width: 759px;
height: 1124px;
left: 30%;
top: 158px;
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
}
.box {
border-radius: 16px;
box-shadow: 6px 6px 10px 0 rgba(0,0,0,0.25);
background-color: #FFFFFF;
}
.p-box {
padding: 80px 3rem;
}
.cmd {
width: 300px;
border-radius: 7px;
background-color: #F7F7F7;
}
/* Utilities */
.text-gray {
color: #888888;
clear: both;
}
.text-gray-small {
color: #888888;
font-size: 14px;
}
.font-semibold {
font-weight: 600;
}
/* Dividing lines. */
.hline {
display: block;
width: 580px;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
padding: 0;
margin-top: 30px;
margin-bottom: 30px;
}
.list-headers {
font-weight: 600;
font-family: Avenir Next;
font-size: 20px;
line-height: 150.26%;
display: flex;
align-items: center;
color: #121F4E;
}
.instructions {
padding-left: 40px;
padding-top: 20px;
clear: both;
}
/* Code box with clipboard. */
.wrapbox {
clear: both;
}
.code-box {
width: 394px;
height: 62px;
background: #F7F7F7;
border-radius: 7px;
float: left;
overflow: hidden;
}
.clip {
position: relative;
float: left;
top: 17px;
left: 10px;
overflow: hidden;
}
.dollar {
font-family: SFMono;
font-size: 14px;
line-height: 28px;
color: #BC6F39;
}
.code-shift-left {
position: relative;
line-height: 28px;
right: 90px;
top: 17px;
}
.book-button {
width: 272px;
height: 45px;
background: #3FCF8E;
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
border-radius: 6px;
}
.book-text {
font-family: Avenir Next;
font-weight: 500;
font-size: 16px;
line-height: 150%;
text-align: center;
color: #FFFFFF;
}
</style>
</head>
<body class="main-bg">
<a href="https://cto.ai">
<img class="cto-logo" src="https://keycloak-redirects-assets.s3.amazonaws.com/img/cto-blue-logo.svg" alt="CTO.AI">
</a>
<div class="main-container">
<div class="box p-box text-center">
<h2>🎉 🎊 </h2>
<h2>Your account has been created.<br>Now install the CLI to get started with Ops.</h2>
<hr class="hline">
<div class="instructions text-left">
<h4 class="list-headers">1 - Check dependencies</h4>
<p class="text-gray">You'll need <a href="https://docs.docker.com/install/">Docker</a> and the latest version of <a href="https://nodejs.org/en/download/">NodeJS</a></p>
</div>
<div class="instructions text-left">
<h4 class="list-headers">2 - Install The Ops CLI</h4>
<p class="text-gray">Open the terminal app and install The Ops CLI using this command:</p>
<div class="wrapbox">
<pre class="code-box">
<code class="language-shell code-shift-left"><span class="dollar">$</span> <span id="install">npm install -g @cto.ai/ops</span></code>
</pre>
<img class="clip" src="https://keycloak-redirects-assets.s3.amazonaws.com/img/Clipboard.png" alt="Clipboard" onclick="copyCommand('install')" onmouseover="" style="cursor: pointer;">
</div>
</div>
<div class="instructions text-left">
<h4 class="list-headers">3 - Sign In</h4>
<p class="text-gray">Once installed, you must sign in to your account. Use the command:</p>
<div class="wrapbox">
<pre class="code-box">
<code class="language-shell code-shift-left"><span class="dollar">$</span> <span id="signin">ops account:signin</span></code>
</pre>
<img class="clip" src="https://keycloak-redirects-assets.s3.amazonaws.com/img/Clipboard.png" alt="Clipboard" onclick="copyCommand('signin')" onmouseover="" style="cursor: pointer;">
</div>
<p class="text-gray">After signing in you're all set to start making and running Ops.</p>
</div>
<hr class="hline">
<div class="instructions text-left">
<h4 class="list-headers">Book a 15 minute overview</h4>
<p class="text-gray">Interested in how the Ops Platform could benefit your entire team?<br>Let's schedule 15 minutes to talk.</p>
<a class="book-button book-text btn-success btn-lg btn btn-primary" href="https://meetings.hubspot.com/karim-cto-ai/platform-demo">Schedule a demo</a>
</div>
<hr class="hline">
<div class="instructions text-left">
<p class="text-gray-small">For detailed information on how to use the the Ops Platform, view the <a href="https://cto.ai/docs/overview">Overview</a> page.</p>
<p class="text-gray-small">To learn how to create your own Ops, check out our <a href="https://cto.ai/docs/getting-started">Getting Started</a> guide.</p>
</div>
</div>
</div>
</body>
</html>