epic/play-with-docker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add new k8s logo

Browse Source 
Signed-off-by: Marcos Lilljedahl <marcosnils@gmail.com>
This commit is contained in:
Marcos Lilljedahl
2024-05-31 17:47:56 -03:00
parent dede444497
commit 122bf5cf63
1 changed files with 178 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
handlers/www/k8s/landing.html
View File

@@ -1,50 +1,82 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en" ng-app="PWDLanding" ng-controller="LoginController"> <html lang="en" ng-app="PWDLanding" ng-controller="LoginController">
<head> <head>
<script src="https://unpkg.com/angular@1.6.6/angular.min.js"></script> <script src="https://unpkg.com/angular@1.6.6/angular.min.js"></script>
<script src="https://unpkg.com/angular-cookies@1.6.6/angular-cookies.min.js"></script> <script src="https://unpkg.com/angular-cookies@1.6.6/angular-cookies.min.js"></script>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta
<meta name="description" content=""> name="viewport"
<meta name="author" content=""> content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<title>Play with Kubernetes</title> <title>Play with Kubernetes</title>
<!-- Bootstrap core CSS --> <!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-beta/dist/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link
rel="stylesheet"
href="https://unpkg.com/bootstrap@4.0.0-beta/dist/css/bootstrap.min.css"
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous"
/>
<!-- Custom styles for this template --> <!-- Custom styles for this template -->
<link href="/assets/landing.css" rel="stylesheet"> <link href="/assets/landing.css" rel="stylesheet" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="header clearfix"> <div class="header clearfix">
<nav> <nav>
<ul class="nav nav-pills float-right"> <ul class="nav nav-pills float-right">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="https://github.com/play-with-docker/play-with-docker">Contribute</a> <a
class="nav-link"
href="https://github.com/play-with-docker/play-with-docker"
>Contribute</a
>
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </div>
<div class="jumbotron" ng-cloak> <div class="jumbotron" ng-cloak>
<img src="https://kubernetes.io/images/favicon.png" /> <img src="https://avatars.githubusercontent.com/u/13629408?v=4" />
<h1 class="display-3">Play with Kubernetes</h1> <h1 class="display-3">Play with Kubernetes</h1>
<p class="lead">A simple, interactive and fun playground to learn Kubernetes</p> <p class="lead">
A simple, interactive and fun playground to learn Kubernetes
</p>
<div ng-hide="loggedIn" class="btn-group" role="group"> <div ng-hide="loggedIn" class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button
id="btnGroupDrop1"
type="button"
class="btn btn-primary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Login Login
</button> </button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a ng-repeat="provider in providers" class="dropdown-item" ng-click="login(provider)">{{provider}}</a> <a
ng-repeat="provider in providers"
class="dropdown-item"
ng-click="login(provider)"
>{{provider}}</a
>
</div> </div>
</div> </div>
<form id="landingForm" method="POST" action="/"> <form id="landingForm" method="POST" action="/">
<p ng-show="loggedIn"><a class="btn btn-lg btn-success" href="#" ng-click="start()" role="button">Start</a></p> <p ng-show="loggedIn">
<a
class="btn btn-lg btn-success"
href="#"
ng-click="start()"
role="button"
>Start</a
>
</p>
<input id="stack" type="hidden" name="stack" value="" /> <input id="stack" type="hidden" name="stack" value="" />
<input id="stack_name" type="hidden" name="stack_name" value="" /> <input id="stack_name" type="hidden" name="stack_name" value="" />
<input id="image_name" type="hidden" name="image_name" value="" /> <input id="image_name" type="hidden" name="image_name" value="" />
@@ -53,54 +85,91 @@
<div class="row marketing"> <div class="row marketing">
<div class="col-lg-12"> <div class="col-lg-12">
<p>Play with Kubernetes is a labs site provided by <a href="https://docker.com">Docker</a> and created by Tutorius. Play with Kubernetes is a playground which allows users to run K8s clusters in a matter of seconds. It gives the experience of having a free Alpine Linux Virtual Machine in browser. Under the hood Docker-in-Docker (DinD) is used to give the effect of multiple VMs/PCs.</p> <p>
<p>If you want to learn more about Kubernetes, consider the <a href="https://training.play-with-kubernetes.com/">Play with Kubernetes Classroom</a> which provides more directed learning using an integrated Play with Kubernetes commandline.</p> Play with Kubernetes is a labs site provided by
<a href="https://docker.com">Docker</a> and created by Tutorius.
Play with Kubernetes is a playground which allows users to run K8s
clusters in a matter of seconds. It gives the experience of having a
free Alpine Linux Virtual Machine in browser. Under the hood
Docker-in-Docker (DinD) is used to give the effect of multiple
VMs/PCs.
</p>
<p>
If you want to learn more about Kubernetes, consider the
<a href="https://training.play-with-kubernetes.com/"
>Play with Kubernetes Classroom</a
>
which provides more directed learning using an integrated Play with
Kubernetes commandline.
</p>
</div> </div>
</div> </div>
<footer class="footer"> <footer class="footer">
<p>&copy; Play with Kubernetes 2017 - 2023</p> <p>&copy; Play with Kubernetes 2017 - 2023</p>
</footer> </footer>
</div> </div>
<script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script
<script crossorigin="anonymous" src="https://unpkg.com/popper.js@1.11.0/dist/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> crossorigin="anonymous"
<script crossorigin="anonymous" src="https://unpkg.com/bootstrap@4.0.0-beta/dist/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
crossorigin="anonymous"
src="https://unpkg.com/popper.js@1.11.0/dist/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"
></script>
<script
crossorigin="anonymous"
src="https://unpkg.com/bootstrap@4.0.0-beta/dist/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"
></script>
<script> <script>
angular.module('PWDLanding', []) angular.module("PWDLanding", []).controller("LoginController", [
.controller('LoginController', ['$scope', '$http', '$window', function($scope, $http, $window) { "$scope",
"$http",
"$window",
function ($scope, $http, $window) {
$scope.providers = []; $scope.providers = [];
$scope.loggedIn = false; $scope.loggedIn = false;
$scope.user = null; $scope.user = null;
function checkLoggedIn() { function checkLoggedIn() {
$http({ $http({
method: 'GET', method: "GET",
url: '/users/me' url: "/users/me",
}).then(function(response) { }).then(
function (response) {
$scope.user = response.data; $scope.user = response.data;
$scope.loggedIn = true; $scope.loggedIn = true;
}, function(response) { },
function (response) {
$scope.user = null; $scope.user = null;
$scope.loggedIn = false; $scope.loggedIn = false;
}); },
);
} }
checkLoggedIn(); checkLoggedIn();
$http({ $http({
method: 'GET', method: "GET",
url: '/oauth/providers' url: "/oauth/providers",
}).then(function(response) { }).then(
function (response) {
$scope.providers = response.data; $scope.providers = response.data;
if ($scope.providers.length == 0) { if ($scope.providers.length == 0) {
$scope.loggedIn = true; $scope.loggedIn = true;
} }
}, function(response) { },
console.log('ERROR', response); function (response) {
}); console.log("ERROR", response);
},
);
$scope.login = function (provider) { $scope.login = function (provider) {
var width = screen.width * 0.6; var width = screen.width * 0.6;
@@ -108,17 +177,27 @@
var height = 620; var height = 620;
var x = screen.width / 2 - width / 2; var x = screen.width / 2 - width / 2;
var y = screen.height / 2 - height / 2; var y = screen.height / 2 - height / 2;
$window.open('/oauth/providers/' + provider + '/login', 'PWDLogin', 'width='+width+',height='+height+',left='+x+',top='+y); $window.open(
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; "/oauth/providers/" + provider + "/login",
"PWDLogin",
"width=" + width + ",height=" + height + ",left=" + x + ",top=" + y,
);
var eventMethod = window.addEventListener
? "addEventListener"
: "attachEvent";
var eventer = window[eventMethod]; var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window // Listen to message from child window
eventer(messageEvent,function(e) { eventer(
if (e.data === 'done') { messageEvent,
function (e) {
if (e.data === "done") {
checkLoggedIn(); checkLoggedIn();
} }
}, false); },
} false,
);
};
$scope.start = function () { $scope.start = function () {
function getParameterByName(name, url) { function getParameterByName(name, url) {
@@ -127,26 +206,26 @@
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url); results = regex.exec(url);
if (!results) return null; if (!results) return null;
if (!results[2]) return ''; if (!results[2]) return "";
return decodeURIComponent(results[2].replace(/\+/g, " ")); return decodeURIComponent(results[2].replace(/\+/g, " "));
} }
var stack = getParameterByName('stack'); var stack = getParameterByName("stack");
if (stack) { if (stack) {
document.getElementById('stack').value = stack; document.getElementById("stack").value = stack;
} }
var stackName = getParameterByName('stack_name'); var stackName = getParameterByName("stack_name");
if (stackName) { if (stackName) {
document.getElementById('stack_name').value = stackName; document.getElementById("stack_name").value = stackName;
} }
var imageName = getParameterByName('image_name'); var imageName = getParameterByName("image_name");
if (imageName) { if (imageName) {
document.getElementById('image_name').value = imageName; document.getElementById("image_name").value = imageName;
} }
document.getElementById('landingForm').submit(); document.getElementById("landingForm").submit();
} };
}]); },
]);
</script> </script>
</body> </body>
</html> </html>