first commit

This commit is contained in:
Adolfo Delorenzo
2021-10-05 22:48:34 -06:00
parent 636ca549ae
commit 5926fbd130
71 changed files with 18285 additions and 0 deletions

View 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>&nbsp;<a href="02.html" button type="button" class="btn btn-primary btn-lg btn-block">Next</a></center>
</body>
</html>

View 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>&nbsp;<a href="03.html" button type="button" class="btn btn-primary btn-lg btn-block">Next</a></center>
</body>
</html>

View 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>&nbsp;<a href="04.html" button type="button" class="btn btn-primary btn-lg btn-block">Next</a></center>
</body>
</html>

View 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>&nbsp;<a href="05.html" button type="button" class="btn btn-primary btn-lg btn-block">Next</a></center>
</body>
</html>

View 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>&nbsp;<a href="https://portainer.io/unfucktshirt" button type="button" class="btn btn-primary btn-lg btn-block">Prize</a></center>
</body>
</html>

View 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>

View 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>&nbsp;<a href="https://localhost:9443" button type="button" class="btn btn-secondary btn-lg btn-lg">Portainer</a><br><br>
</center>
</body>
</html>

View 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>

View 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>Were 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>

View 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>

View 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>

View 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>

View 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>

View 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; }
}