Last active
October 21, 2019 19:09
-
-
Save jplew/6dc3c03c15a090122276a2cd06c374a9 to your computer and use it in GitHub Desktop.
Updated Welcome Page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment