first commit
This commit is contained in:
23
html/.ipynb_checkpoints/01-checkpoint.html
Normal file
23
html/.ipynb_checkpoints/01-checkpoint.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/font.css">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<style>
|
||||
body {font-family:'Raleway', Arial, sans-serif; padding-top: 10px; padding-left: 10px; padding-right: 10px;}
|
||||
h2 {font-family:'Raleway', Arial, sans-serif; color: #E86A25;}
|
||||
h1,h3,h4,h5,h6,a {font-family:'Raleway', Arial, sans-serif; color: #38DAFF;}
|
||||
</style>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<center><h1>Welcome to our Unf*cking Kubernetes tutorial</h1></center>
|
||||
<hr>
|
||||
<h2>Select the cluster</h2>
|
||||
<p>Now that you've logged in, select the <b>Kubernetes</b> cluster on the main screen</p>
|
||||
<br>
|
||||
<img src="img/soccer-faking.gif" /><br>
|
||||
<center><i><b>don't worry if your kubernetes cluster looks like it's down:<br><hr><img src="img/kubernetes_red.png" /><hr><br>it's just kubernetes being a drama queen...</b></i><br>
|
||||
<br>
|
||||
<a href="tutorial.html" button type="button" class="btn btn-primary btn-lg btn-block">Previous</a> <a href="02.html" button type="button" class="btn btn-primary btn-lg btn-block">Next</a></center>
|
||||
</body>
|
||||
</html>
|
27
html/.ipynb_checkpoints/02-checkpoint.html
Normal file
27
html/.ipynb_checkpoints/02-checkpoint.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/font.css">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<style>
|
||||
body {font-family:'Raleway', Arial, sans-serif; padding-top: 10px; padding-left: 10px; padding-right: 10px;}
|
||||
h2 {font-family:'Raleway', Arial, sans-serif; color: #E86A25;}
|
||||
h1,h3,h4,h5,h6,a {font-family:'Raleway', Arial, sans-serif; color: #38DAFF;}
|
||||
</style>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<center><h1>Welcome to our Unf*cking Kubernetes tutorial</h1></center>
|
||||
<hr>
|
||||
<h2>Creating a Namespace</h2>
|
||||
<p>Now let's create a namespace to deploy our application:</p>
|
||||
<ul>
|
||||
<li>click on <strong>Namespaces</strong> on the left menu</li>
|
||||
<li>then the <strong>+Add namespace with form</strong> button</li>
|
||||
<li>name the namespace <strong>tutorial</strong></li>
|
||||
<li>for now you can disable <strong>Resource assignment</strong></li>
|
||||
<li>and finally click on <strong>Create namespace</strong></li>
|
||||
</ul>
|
||||
<br><br>
|
||||
<center><a href="01.html" button type="button" class="btn btn-primary btn-lg btn-block">Previous</a> <a href="03.html" button type="button" class="btn btn-primary btn-lg btn-block">Next</a></center>
|
||||
</body>
|
||||
</html>
|
31
html/.ipynb_checkpoints/03-checkpoint.html
Normal file
31
html/.ipynb_checkpoints/03-checkpoint.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/font.css">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<style>
|
||||
body {font-family:'Raleway', Arial, sans-serif; padding-top: 10px; padding-left: 10px; padding-right: 10px;}
|
||||
h2 {font-family:'Raleway', Arial, sans-serif; color: #E86A25;}
|
||||
h1,h3,h4,h5,h6,a {font-family:'Raleway', Arial, sans-serif; color: #38DAFF;}
|
||||
</style>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<center><h1>Welcome to our Unf*cking Kubernetes tutorial</h1></center>
|
||||
<hr>
|
||||
<h2>Deploying an Application - a MySQL database</h2>
|
||||
<p>Almost there! We will now deploy our application:</p>
|
||||
<ul>
|
||||
<li>click on <strong>Applications</strong> on the left menu</li>
|
||||
<li>then the <strong>+Add application with form</strong> button</li>
|
||||
<li>select the <strong>tutorial</strong> namespace that we created on the previous step</li>
|
||||
<li>let's name the application on the first field for example, <strong>mydb</strong></li>
|
||||
<li>on the <strong>Image</strong> field you can use <code>ubuntu/mysql</code></li>
|
||||
<li>on <strong>Environment variables, </strong> click on the <strong>+add environment variable</strong> button</li>
|
||||
<li>on the <strong>name</strong> field you add <code>MYSQL_ROOT_PASSWORD</code> and on the <strong>value</strong> field you can add <code>db1234</code></li>
|
||||
<li>you can enable the <strong>Enable publishing for this application </strong>, select <strong>ClusterIP</strong> and type <code>3306</code> on the <strong>container port</strong> field</li>
|
||||
<li>and now you can click on the <strong>Deploy application</strong> button</li>
|
||||
</ul>
|
||||
<br><br>
|
||||
<center><a href="02.html" button type="button" class="btn btn-primary btn-lg btn-block">Previous</a> <a href="04.html" button type="button" class="btn btn-primary btn-lg btn-block">Next</a></center>
|
||||
</body>
|
||||
</html>
|
22
html/.ipynb_checkpoints/04-checkpoint.html
Normal file
22
html/.ipynb_checkpoints/04-checkpoint.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/font.css">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<style>
|
||||
body {font-family:'Raleway', Arial, sans-serif; padding-top: 10px; padding-left: 10px; padding-right: 10px;}
|
||||
h2 {font-family:'Raleway', Arial, sans-serif; color: #E86A25;}
|
||||
h1,h3,h4,h5,h6,a {font-family:'Raleway', Arial, sans-serif; color: #38DAFF;}
|
||||
</style>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<center><h1>Unf*king Kubernetes tutorial with Portainer</h1></center>
|
||||
<hr>
|
||||
<h2>That's it!</h2>
|
||||
<center><img src="img/barack-obama-what.gif" width="100%" /></center><br>
|
||||
<p>It really is that easy to deploy an application using Portainer. For sure, more complex apps have more steps and take longer, but Portainer can handle anything you throw at it.
|
||||
<br>Click the <b>Refresh</b> <img src="img/refresh.png" /> button beside Application list to check if the application deployed successfully.</p>
|
||||
<br><br>
|
||||
<center><a href="03.html" button type="button" class="btn btn-primary btn-lg btn-block">Previous</a> <a href="05.html" button type="button" class="btn btn-primary btn-lg btn-block">Next</a></center>
|
||||
</body>
|
||||
</html>
|
21
html/.ipynb_checkpoints/05-checkpoint.html
Normal file
21
html/.ipynb_checkpoints/05-checkpoint.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/font.css">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<style>
|
||||
body {font-family:'Raleway', Arial, sans-serif; padding-top: 10px; padding-left: 10px; padding-right: 10px;}
|
||||
h2 {font-family:'Raleway', Arial, sans-serif; color: #E86A25;}
|
||||
h1,h3,h4,h5,h6,a {font-family:'Raleway', Arial, sans-serif; color: #38DAFF;}
|
||||
</style>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<center><h1>Unf*king Kubernetes tutorial with Portainer</h1></center>
|
||||
<hr>
|
||||
<h2>Prize time!</h2>
|
||||
<p>Click to claim your totally cool <b>unf*ck Kubernetes</b> t-shirt!<br></p>
|
||||
<center><img src="img/t-shirt.png" width="100%" /></center>
|
||||
<br><br>
|
||||
<center><a href="04.html" button type="button" class="btn btn-primary btn-lg btn-block">Previous</a> <a href="https://portainer.io/unfucktshirt" button type="button" class="btn btn-primary btn-lg btn-block">Prize</a></center>
|
||||
</body>
|
||||
</html>
|
20
html/.ipynb_checkpoints/06-checkpoint.html
Normal file
20
html/.ipynb_checkpoints/06-checkpoint.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/font.css">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<style>
|
||||
body {font-family:'Raleway', Arial, sans-serif; padding-top: 10px; padding-left: 10px; padding-right: 10px;}
|
||||
h2 {font-family:'Raleway', Arial, sans-serif; color: #E86A25;}
|
||||
h1,h3,h4,h5,h6,a {font-family:'Raleway', Arial, sans-serif; color: #38DAFF;}
|
||||
</style>
|
||||
<script>
|
||||
var iframes = document.getElementsByTagName('iframe');
|
||||
for (var i = 0; i < iframes.length; i++) {
|
||||
iframes[i].parentNode.removeChild(iframes[i]);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<iframe marginheight="0" src="https://portainer.io/unfucktshirt" marginwidth="0" frameborder="0" height="100%" scrolling="no" width="100%"></iframe><br>
|
||||
</body>
|
||||
<html>
|
21
html/.ipynb_checkpoints/2boot-checkpoint.html
Normal file
21
html/.ipynb_checkpoints/2boot-checkpoint.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/font.css">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<style>
|
||||
body {font-family:'Raleway', Arial, sans-serif; padding-top: 10px; padding-left: 10px; padding-right: 10px;}
|
||||
h2 {font-family:'Raleway', Arial, sans-serif; color: #E86A25;}
|
||||
h1,h3,h4,h5,h6,a {font-family:'Raleway', Arial, sans-serif; color: #38DAFF;}
|
||||
</style>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<center>
|
||||
<!--<h1>Unf*king Kubernetes with Portainer</h1>
|
||||
<hr>
|
||||
<h2>Please select below one of the options:</h2>-->
|
||||
<img src="img/morpheus.png" width="50%" /><br><br>
|
||||
<a href="./frames.html" button type="button" class="btn btn-secondary btn-lg btn-lg">Tutorial</a> <a href="https://localhost:9443" button type="button" class="btn btn-secondary btn-lg btn-lg">Portainer</a><br><br>
|
||||
</center>
|
||||
</body>
|
||||
</html>
|
0
html/.ipynb_checkpoints/anim-checkpoint.html
Normal file
0
html/.ipynb_checkpoints/anim-checkpoint.html
Normal file
2
html/.ipynb_checkpoints/frames-checkpoint.html
Normal file
2
html/.ipynb_checkpoints/frames-checkpoint.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<iframe src="https://localhost:9443" frameborder="0" scrolling="yes" style="overflow: hidden; height: 100%; width: 75%; float: left; " height="100%" width="75%" align="left"></iframe>
|
||||
<iframe src="./tutorial.html" frameborder="0" scrolling="yes" style="overflow: hidden; height: 100%; width: 25%; float: left; " height="100%" width="25%" align="left"></iframe>
|
63
html/.ipynb_checkpoints/index-checkpoint.html
Normal file
63
html/.ipynb_checkpoints/index-checkpoint.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="refresh" content="14;url=http://localhost:7777/frames.html" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="css/jquery.simpleTxtSlider.css" rel="stylesheet">
|
||||
<link stylesheet="css/font.css"/>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/jquery.simpleTxtSlider.js"></script>
|
||||
<script>
|
||||
$(function(){
|
||||
$.simpleTxtSlider($("#pakainfo-txtslider-fade-example"),{'effectType':'fade'});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div.txtslider{
|
||||
position: fixed; /* or absolute */
|
||||
top: 25%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-family: Raleway;
|
||||
font-weight: bold;
|
||||
font-size: 120px;
|
||||
color: #38DAFF;
|
||||
}
|
||||
div.txtslider ul{
|
||||
margin: auto;
|
||||
}
|
||||
#myVideo {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function(){
|
||||
$.simpleTxtSlider($("#pakainfo-txtslider-roll-example"),{
|
||||
delay : 3500, effectType : 'slide',
|
||||
speed : 1500
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<video autoplay loop id="myVideo">
|
||||
<source src="vids/blurred2.mp4" type="video/mp4">
|
||||
</video>
|
||||
<div id="pakainfo-txtslider-roll-example" class="txtslider">
|
||||
<ul>
|
||||
<li>Hello....</li>
|
||||
<li>We’re on a mission to unf*ck Kubernetes.</li>
|
||||
<li>Are you in?</li>
|
||||
<li><img src="img/Portainer-large-alt-positive.png"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
19
html/.ipynb_checkpoints/index-checkpoint.old
Normal file
19
html/.ipynb_checkpoints/index-checkpoint.old
Normal file
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="css/vid.css">
|
||||
</head>
|
||||
<body>
|
||||
<video autoplay muted id="myVideo">
|
||||
<source src="vids/un-f-ck.m4v" type="video/mp4">
|
||||
Your browser does not support HTML5 video.
|
||||
</video>
|
||||
<script>
|
||||
var video1 = document.getElementById("myVideo");
|
||||
video1.onended = function(e) {
|
||||
window.location.replace("http://localhost:7777/frames.html");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
89
html/.ipynb_checkpoints/index-checkpoint.orig
Normal file
89
html/.ipynb_checkpoints/index-checkpoint.orig
Normal file
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
#myVideo {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #f1f1f1;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#myBtn {
|
||||
width: 200px;
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#myBtn:hover {
|
||||
background: #ddd;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<video autoplay muted id="myVideo">
|
||||
<source src="vids/blurred.mp4" type="video/mp4">
|
||||
Your browser does not support HTML5 video.
|
||||
</video>
|
||||
|
||||
<!--<div class="content">
|
||||
<h1>Portainer is now Kubernetes</h1>
|
||||
<h2>We...re on a mission to unf*ck Kubernetes. Are you with us?</h2>
|
||||
<p>Portainer enables centralized configuration, management and security of Kubernetes and Docker environments, allowing you to deliver
|
||||
<p>Adopting container orchestration platforms like Kubernetes is hard. To succeed, you need to give everyone secure access to the funct
|
||||
<p>With its super-simple 'opinionated' GUI, Portainer makes it easy for everyone to get up and running quickly. It lets Platform Manage
|
||||
<p>Portainer works with Docker, Docker Swarm and Kubernetes. It can be deployed in the cloud on prem or at the edge. Portainer Business
|
||||
<button id="myBtn" onclick="myFunction()">Pause</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var video = document.getElementById("myVideo");
|
||||
var btn = document.getElementById("myBtn");
|
||||
|
||||
function myFunction() {
|
||||
if (video.paused) {
|
||||
video.play();
|
||||
btn.innerHTML = "Pause";
|
||||
} else {
|
||||
video.pause();
|
||||
btn.innerHTML = "Play";
|
||||
}
|
||||
}
|
||||
</script>-->
|
||||
|
||||
<script>
|
||||
var video1 = document.getElementById("myVideo");
|
||||
video1.onended = function(e) {
|
||||
window.location.replace("http://localhost:7777/frames.html");
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
8
html/.ipynb_checkpoints/reset-checkpoint.html
Normal file
8
html/.ipynb_checkpoints/reset-checkpoint.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="refresh" content="1;url=./01.html" />
|
||||
<iframe src="http://localhost:9000/hooks/2boot" frameborder="0" scrolling="yes" height="100%" width="25%" align="left"></iframe>
|
||||
</head>
|
||||
</html>
|
25
html/.ipynb_checkpoints/tutorial-checkpoint.html
Normal file
25
html/.ipynb_checkpoints/tutorial-checkpoint.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/font.css">
|
||||
<link rel="stylesheet" href="css/bootstrap.css">
|
||||
<style>
|
||||
body {font-family:'Raleway', Arial, sans-serif; padding-top: 10px; padding-left: 10px; padding-right: 10px;}
|
||||
h2 {font-family:'Raleway', Arial, sans-serif; color: #E86A25;}
|
||||
h1,h3,h4,h5,h6,a {font-family:'Raleway', Arial, sans-serif; color: #38DAFF;}
|
||||
</style>
|
||||
<script src="js/bootstrap.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<center><h1>Welcome to our Unf*cking Kubernetes tutorial</h1></center>
|
||||
<hr>
|
||||
<p>Thanks for downloading Portainer. This experience will take you about 2 or 3 minutes to run through. By the end, you will have deployed your first application on a Kubernetes cluster using Portainer and taken the first important step towards unf*cking Kubernetes. At the end of the experience you can claim your exclusive unf*king kubernetes t-shirt!</p>
|
||||
<h2>Login</h2>
|
||||
<p>The first step is to login to Portainer with the following credentials:</p>
|
||||
<ul>
|
||||
<li>username: <code>portainer</code></li>
|
||||
<li>password: <code>portainer1234</code></li>
|
||||
</ul>
|
||||
<br>
|
||||
<center><a href="reset.html" button type="button" class="btn btn-primary btn-lg btn-block">Next</a></center>
|
||||
</body>
|
||||
</html>
|
22
html/.ipynb_checkpoints/typewriter-checkpoint.css
Normal file
22
html/.ipynb_checkpoints/typewriter-checkpoint.css
Normal file
@@ -0,0 +1,22 @@
|
||||
.typewriter h1 {
|
||||
overflow: hidden; /* Ensures the content is not revealed until the animation */
|
||||
border-right: .15em solid orange; /* The typwriter cursor */
|
||||
white-space: nowrap; /* Keeps the content on a single line */
|
||||
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
|
||||
letter-spacing: .15em; /* Adjust as needed */
|
||||
animation:
|
||||
typing 3.5s steps(40, end),
|
||||
blink-caret .75s step-end infinite;
|
||||
}
|
||||
|
||||
/* The typing effect */
|
||||
@keyframes typing {
|
||||
from { width: 0 }
|
||||
to { width: 100% }
|
||||
}
|
||||
|
||||
/* The typewriter cursor effect */
|
||||
@keyframes blink-caret {
|
||||
from, to { border-color: transparent }
|
||||
50% { border-color: orange; }
|
||||
}
|
Reference in New Issue
Block a user