mirror of
https://github.com/lucky-sideburn/kubeinvaders.git
synced 2026-05-06 00:36:44 +00:00
438 lines
25 KiB
HTML
438 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>KubeInvaders</title>
|
|
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="./bootstrap-5.0.0-dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
<body id="kinvBody">
|
|
<nav class="navbar navbar-expand-lg navbar-li bg-dark navbar-collapse">
|
|
<div class="container-fluid">
|
|
<span class="navbar-toggler navbar-toggler-icon" style="border-color: transparent; border-width: 1px;" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
|
</span>
|
|
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item" style="margin-top: 0.2%;">
|
|
<a class="nav-link" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<font style="color: #ffffff;">Menu</font>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-light" aria-labelledby="navbarDarkDropdownMenuLink">
|
|
<li><a class="dropdown-item" href="#" onclick="showSpecialKeys()">Show Special Keys</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="showCurrentChaosContainer()">Show Current Chaos Container for nodes</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="showSetCurrentChaosContainer()">Set Custom Chaos Container for nodes</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" onclick="switchColorMode()" id="switchColorModeLink">
|
|
<svg xmlns="http://www.w3.org/2000/svg" style="color: #ffffff;" width="16" height="16" fill="currentColor" class="bi bi-moon-fill" viewBox="0 0 16 16">
|
|
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="currentChaosContainerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<pre id="currentChaosContainerYaml"></pre>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="closeButton1" class="btn btn-light" data-dismiss="modal" onclick="closeCurrentChaosJobModal()">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal" id="kubeLinterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
|
|
<div class="modal-body">
|
|
<p id="currentKubeLinterResult"></hp>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="closeButton2" class="btn btn-light" data-dismiss="modal" onclick="closeKubeLinterModal()">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="setChaosContainerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="exampleFormControlTextarea1" style="margin-bottom: 3%;">Chaos Container Definition</label>
|
|
<textarea class="form-control" id="currentChaosContainerJsonTextArea" rows="20"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<p id="alert_placeholder2" style="color: #161616; font-family: 'Courier New', Courier, monospace; margin-top: 3%;"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="saveButton" class="btn btn-light" onclick="setChaosContainer()">Save</button>
|
|
<button type="button" id="closeButton3" class="btn btn-dark" data-dismiss="modal" onclick="closeSetChaosContainerModal()">Close</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="setLoadTestModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog modal-xl" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="form-group">
|
|
|
|
<label for="exampleFormControlTextarea1" style="margin-bottom: 1%;">Load Test Code</label><br>
|
|
|
|
<label for="presetName">Name</label>
|
|
<input type="text" id="presetName" value="foobar" readonly="true" style="margin-bottom: 1%;"><br>
|
|
|
|
<label for="presetLangText">Programming Language</label>
|
|
<input type="text" id="presetLang" value="Python3" readonly="true" style="margin-bottom: 1%;">
|
|
|
|
<textarea class="form-control" id="currentLoadTest" rows="20" style="color: #161616; font-family: 'Courier New', Courier, monospace;"></textarea>
|
|
|
|
</div>
|
|
<div class="form-group">
|
|
<p id="alert_placeholder2" style="color: #161616; font-family: 'Courier New', Courier, monospace; margin-top: 3%;"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="saveAndApplyButton" class="btn btn-light" onclick="savePreset('apply')">Save and apply</button>
|
|
<button type="button" id="savePresetButton" class="btn btn-light" onclick="savePreset('save')">Save</button>
|
|
<button type="button" id="resetToDefaultButton" class="btn btn-light-saved" onclick="resetPreset('preset')">Reset to default</button>
|
|
<button type="button" id="deleteChaosProgramButton" class="btn btn-dark" onclick="resetPreset('k-inv')">Delete</button>
|
|
<button type="button" id="closeButton4" class="btn btn-dark" data-dismiss="modal" onclick="closeSetLoadTestModal()">Close</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="prepareChaosReportModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog modal-xl" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="form-group row">
|
|
<div class="col col-xl-10">
|
|
<label for="" style="margin-bottom: 1%;" id="chaosReportHeader"></label>
|
|
<div class="row">
|
|
<div class="col col-xl-10">
|
|
<label for="chaosReportProject">Project</label>
|
|
<input type="text" id="chaosReportProject" value="" style="margin-bottom: 1%; width: 50%;">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col col-xl-10">
|
|
<label for="chaosReportAuthor">Author</label>
|
|
<input type="text" id="chaosReportAuthor" value="" style="margin-bottom: 1%; width: 50%;">
|
|
</div>
|
|
</div>
|
|
<!-- <div class="row">
|
|
<div class="col col-xl-10">
|
|
<label for="chaosReportDate">Date</label>
|
|
<input type="text" id="chaosReportDate" value="" style="margin-bottom: 1%; width: 30%;">
|
|
</div>
|
|
</div> -->
|
|
<div class="row">
|
|
<div class="col col-xl-10">
|
|
<label for="chaosReportHttpEndpointButton" style="margin-top: 1%;">add an http endpoint to be analyzed during the chaos engineering session</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col col-xl-10">
|
|
<button type="button" id="chaosReportHttpEndpointButton" class="btn btn-light-saved" style="margin-top: 1%; margin-bottom: 1%;" onclick="chaosReportHttpEndpointAdd()">Configure Site</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col col-xl-10">
|
|
<div id="addSiteAreaChaosReport"></div>
|
|
</div>
|
|
</div>
|
|
<!-- <textarea class="form-control" id="chaosReportTextArea" rows="20" style="color: #161616; font-family: 'Courier New', Courier, monospace;"></textarea> -->
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<p id="alert_placeholder2" style="color: #161616; font-family: 'Courier New', Courier, monospace; margin-top: 1%;"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="savePresetButton" class="btn btn-light" onclick="saveChaosReport()">Save</button>
|
|
<button type="button" id="closeButton4" class="btn btn-dark" data-dismiss="modal" onclick="closePrepareChaosReportModal()">Close</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="showSpecialKeysModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Special Keys
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">
|
|
h => Activate or deactivate help<br>
|
|
s => Activate or deactivate shuffle for aliens<br>
|
|
n => Change namespace<br>
|
|
p => Activate or deactivate chaos engineering against pods<br>
|
|
c => Activate or deactivate chaos engineering against nodes
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" id="closeButton5" class="btn btn-secondary" data-dismiss="modal" onclick="closeSpecialKeysModal()">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container" id="gameContainer" style="width: 50%; height: 50%;">
|
|
<!-- START FIRST ROW -->
|
|
<div class="row" style="margin-top: 2%;">
|
|
<!-- START SWITCH BUTTONS FOR MODE (GAME, PROGRAMMING)-->
|
|
<div class="row" style="margin-bottom: 2%;">
|
|
<div class="col text-center" style="margin-bottom: 2%;">
|
|
<button type="button" id="gameModeButton" class="btn btn-light btn-green" onclick="startGameMode()">Game Mode</button>
|
|
</div>
|
|
<div class="col text-center" style="margin-bottom: 0%;">
|
|
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" onclick="showPrepareChaosReportModal(this)">
|
|
<label class="form-check-label" for="flexCheckDefault">
|
|
Enable Resilience Report
|
|
</label>
|
|
</div>
|
|
<div class="col text-center" style="margin-bottom: 2%;">
|
|
<button type="button" id="programmingModeButton" class="btn btn-light btn-green" onclick="startProgrammingMode()">Programming Mode</button>
|
|
</div>
|
|
</div>
|
|
<!-- END SWITCH BUTTONS FOR MODE (GAME, PROGRAMMING)-->
|
|
|
|
<!-- START CHAOS PROGRAM BUTTONS -->
|
|
<div id="programming-mode-buttons" style="display: none;">
|
|
<div class="row">
|
|
<div class="col text-center">
|
|
</div>
|
|
<div class="col text-center">
|
|
</div>
|
|
<div class="col text-center">
|
|
</div>
|
|
</div>
|
|
<!-- END CHAOS PROGRAMM BUTTONS -->
|
|
</div>
|
|
<!-- END FIRST ROW -->
|
|
|
|
<!-- START GAME MODE BUTTONS -->
|
|
<div id="game-buttons" style="display: none;">
|
|
<div class="row container">
|
|
<div class="col text-center">
|
|
<button type="button" id="controlAutoPilotButton" class="btn btn-light" onclick="controlAutoPilot()">Start</button>
|
|
</div>
|
|
<div class="col">
|
|
<input type="range" id="randomFactorInput" name="randomFactorInput" min="0" max="100" value="50" onclick="changeRandomFactor()">
|
|
</div>
|
|
<div class="col text-center">
|
|
<label for="randomFactorInput" class="text-kinv" id="randomFactorText">Random Factor: <span id="currentRandomFactor">50</span></label>
|
|
</div>
|
|
</div>
|
|
<div class="row container" style="margin-top: 1%;">
|
|
<div class="col text-center">
|
|
<button style="margin-bottom: 2%" type="button" id="buttonShuffle" class="btn btn-light btn-sm" onclick="buttonShuffleHelper()">Disable Shuffle</button>
|
|
</div>
|
|
<div class="col text-center">
|
|
<button style="margin-bottom: 2%" type="button" id="namespacesJumpButton" class="btn btn-light btn-sm" onclick="namespacesJumpControl()">Enable Auto NS Switch</button>
|
|
</div>
|
|
<div class="col text-center">
|
|
<button style="margin-bottom: 2%" type="button" id="buttonOnlyPodName" class="btn btn-light btn-sm" onclick="showPodNameControl()">Hide Pods Name</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END GAME MODE BUTTONS -->
|
|
|
|
<!-- START METRICS ROW -->
|
|
<div class="row text-justify" align="center" id="metricsPresetsRow">
|
|
<div style="margin-top: 1%;" class="custom-btn-group text-justify" id="metricsGroup">
|
|
|
|
<span style="color: #000000;" class="text-kinv text-wrap" id="currentGameNamespaceLabel">Selected Namespace: <span id="currentGameNamespace" style="color: #3ac961;" class="text-break">NULL</span></span><br>
|
|
<span style="color: #000000;" class="text-kinv" id="deletedPodsTotalText">Deleted Pods Total: <span id="deleted_pods_total" style="color: #3ac961">0</span></span><br>
|
|
<span style="color: #000000" class="text-kinv" id="chaosJobTotalText">Chaos Jobs Total: <span id="chaos_jobs_total" style="color: #3ac961">0</span></span><br>
|
|
|
|
<span style="color: #000000" class="text-kinv" id="currentChaosPodsText">Current Chaos Pods: <span id="current_chaos_job_pod" style="color: #3ac961">0</span></span><br>
|
|
<span style="color: #000000" class="text-kinv" id="podNotRunningText">Not Running Pods: <span id="pods_not_running_on" style="color: #3ac961">0</span></span><br>
|
|
|
|
<span style="color: #000000" class="text-kinv" id="currentReplicasStateDelayText">Current Replicas State Delay: </span><span id="fewer_replicas_seconds" style="color: #3ac961">0</span><font color="#4f4f4f"> sec</font></span><br>
|
|
<span style="color: #000000" class="text-kinv" id="latestReplicasStateDelayText">Latest Replicas State Delay: <span id="latest_fewer_replicas_seconds" style="color: #3ac961">0</span><font color="#4f4f4f"> sec</font> </span><br>
|
|
<!-- <span style="color: #000000" class="text-kinv" id="podsMatchRegexText">PODs match regex: </span><span id="pods_match_regex" style="color: #3ac961">0</span><font color="#4f4f4f"> </font></span> -->
|
|
</div>
|
|
<!-- <div class="progress" style="margin-top: 1%;">
|
|
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">0%</div>
|
|
</div> -->
|
|
</div>
|
|
<!-- END METRICS ROW -->
|
|
|
|
<!-- START CHAOS PROGRAMMING MODE SCREEN -->
|
|
<div id="chaos-program-screen" style="display: none;">
|
|
<div class="">
|
|
<div class="row" style="margin-top: 2%;">
|
|
<font size="2" class="text-kinv" id="loadTestingPresetsText">Load Testing Presets & Chaos Programs</font>
|
|
</div>
|
|
<div class="row">
|
|
<div class="btn-group" id="loadButtonGroup" role="group" aria-label="Basic example" style="overflow-x: scroll; width: 100%; padding-bottom: 2%; padding-top: 2%; scrollbar-color: dark;">
|
|
<button type="button" id="loadDefault" class="btn btn-light btn-md" onclick="loadPreset('default', 'k-inv')">Default</button>
|
|
<button type="button" id="loadCassandra" class="btn btn-light btn-md" onclick="loadPreset('cassandra', 'python')">Cassandra</button>
|
|
<button type="button" id="loadConsul" class="btn btn-light btn-md" onclick="loadPreset('consul', 'python')">Consul</button>
|
|
<button type="button" id="loadElasticsearch" class="btn btn-light btn-md" onclick="loadPreset('elasticsearch', 'python')">Elasticsearch</button>
|
|
<button type="button" id="loadEtcd3" class="btn btn-light btn-md" onclick="loadPreset('etcd3', 'python')">Etcd3</button>
|
|
<button type="button" id="loadGitlab" class="btn btn-light btn-md" onclick="loadPreset('gitlab', 'python')">Gitlab</button>
|
|
<button type="button" id="loadHttp" class="btn btn-light btn-md" onclick="loadPreset('http', 'python')">Http</button>
|
|
<button type="button" id="loadJira" class="btn btn-light btn-md" onclick="loadPreset('jira', 'python')">Jira</button>
|
|
<button type="button" id="loadKafka" class="btn btn-light btn-md" onclick="loadPreset('kafka', 'python')">Kafka</button>
|
|
<button type="button" id="loadKubernetes" class="btn btn-light btn-md" onclick="loadPreset('kubernetes', 'python')">Kubernetes</button>
|
|
<button type="button" id="loadMongodb" class="btn btn-light btn-md" onclick="loadPreset('mongodb', 'python')">Mongodb</button>
|
|
<button type="button" id="loadMysql" class="btn btn-light btn-md" onclick="loadPreset('mysql', 'python')">Mysql</button>
|
|
<button type="button" id="loadNomad" class="btn btn-light btn-md" onclick="loadPreset('nomad', 'python')">Nomad</button>
|
|
<button type="button" id="loadPostgresql" class="btn btn-light btn-md" onclick="loadPreset('postgresql', 'python')">Postgresql</button>
|
|
<button type="button" id="loadPrometheus" class="btn btn-light btn-md" onclick="loadPreset('prometheus', 'python')">Prometheus</button>
|
|
<button type="button" id="loadRabbit" class="btn btn-light btn-md" onclick="loadPreset('rabbit', 'python')">Rabbit</button>
|
|
<button type="button" id="loadSSH" class="btn btn-light btn-md" onclick="loadPreset('SSH', 'python')">SSH</button>
|
|
<button type="button" id="loadVault" class="btn btn-light btn-md" onclick="loadPreset('vault', 'python')">Vault</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="btn-group" id="loadChaosProgramButtonGroup" role="group" aria-label="Basic example" style="overflow-x: scroll; width: 100%; padding-bottom: 2.0%; padding-top: 0.5%; scrollbar-color: dark;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-top: 1%;">
|
|
<div id="alert_placeholder_programming_mode" style="margin-top: 1%; margin-bottom: 1%;"></div>
|
|
<div class="col">
|
|
<div class="row" width="10px">
|
|
<div class="col text-center">
|
|
<button type="button" id="saveChaosProgramButton" class="btn btn-light" onclick="savePreset('save-chaos-program')">SAVE</button>
|
|
</div>
|
|
<div class="col text-center">
|
|
<button type="button" id="runChaosProgramButton" class="btn btn-dark" onclick="runChaosProgram()">RUN</button>
|
|
</div>
|
|
</div>
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="chaosProgramTextArea"></label>
|
|
<textarea class="form-control chaos-prog-area" id="chaosProgramTextArea" rows="50" style="min-width: 100%; font-family: Courier, monospace;">
|
|
chaos-codename: CODENAME_PLACEHOLDER
|
|
jobs:
|
|
cpu-attack-job:
|
|
additional-labels:
|
|
chaos-controller: kubeinvaders
|
|
chaos-type: stress-ng
|
|
chaos-codename: CODENAME_PLACEHOLDER
|
|
image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
|
|
command: "stress-ng"
|
|
args:
|
|
- --version
|
|
|
|
mem-attack-job:
|
|
additional-labels:
|
|
chaos-controller: kubeinvaders
|
|
chaos-type: stress-ng
|
|
chaos-codename: CODENAME_PLACEHOLDER
|
|
image: docker.io/luckysideburn/kubeinvaders-stress-ng:latest
|
|
command: "stress-ng"
|
|
args:
|
|
- --version
|
|
|
|
experiments:
|
|
- name: cpu-attack-exp
|
|
job: cpu-attack-job
|
|
loop: 5
|
|
|
|
- name: mem-attack-exp
|
|
job: mem-attack-job
|
|
loop: 5
|
|
</textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="col" style="margin-top: 4%; overflow-y: scroll; height:900px;">
|
|
<div id="chaosProgramFlow">
|
|
<div class="row"><div class="alert alert-light alert-kinv" id="exampleAlert1" role="alert" style="border-color: #000000; border-width: 1.5px;">test attack 1</div></div>
|
|
<img src="images/down-arrow.png" width="30" height="30" style="margin-bottom: 2%;">
|
|
<div class="row"><div class="alert alert-light alert-kinv" id="exampleAlert2" role="alert" style="border-color: #000000; border-width: 1.5px;">test attack 2</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END CHAOS PROGRAMMING MODE SCREEN -->
|
|
<div class="row" style="margin-top: 2%; display: none;" id="httpStatsCanvasDiv">
|
|
<p id="chaosReportProjectDiv" style="font-family: 'Courier New', Courier, monospace; font-size: large;"></p>
|
|
<p id="chaosReportAuthorDiv" style="font-family: 'Courier New', Courier, monospace; font-size: large;"></p>
|
|
<p id="chaosReportDateDiv" style="font-family: 'Courier New', Courier, monospace; font-size: large;"></p>
|
|
<p id="chaosReportSessionTimeDiv" style="font-family: 'Courier New', Courier, monospace; font-size: large;"></p>
|
|
<p id="chaosReportCheckSiteURLDiv" style="font-family: 'Courier New', Courier, monospace; font-size: large;"></p>
|
|
<!-- <label for="httpStatsCanvas" style="font-family: 'Courier New', Courier, monospace; font-size: large;">HTTP Elapsed</label>
|
|
<canvas id="httpStatsCanvas" width="720" height="100" class="http-stats-code-canvas"></canvas> -->
|
|
<div id="main" style="width: 600px;height:400px;"></div>
|
|
</div>
|
|
<!-- START GAME MODE SCREEN -->
|
|
<div id="game-screen" style="display: none;">
|
|
<div class="row" style="margin-top: 2%;">
|
|
<canvas id="myCanvas" width="720" height="480" class="game-canvas"></canvas>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-center">
|
|
</div>
|
|
<div class="col text-center">
|
|
<input type="button" id="zoomInButton" style="margin-top: 2%" class="btn btn-light" id="zoomInGameScreenInput" name="zoomInGameScreenInput" value="+" onclick="zoomIn()">
|
|
<input type="button" id="zoomOutButton" style="margin-top: 2%" class="btn btn-light" id="zoomOutGameScreenInput" name="zoomOutGameScreenInput" value="-" onclick="zoomOut()">
|
|
</div>
|
|
<div class="col text-center">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END GAME MODE SCREEN -->
|
|
|
|
<!-- HELPER ALERT -->
|
|
<div class="row">
|
|
<div id="alert_placeholder" style="margin-top: 3%;"></div>
|
|
<div id="alert_placeholder3" style="margin-top: 3%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="footer" style="margin-top: 5%;">
|
|
<div class="container text-center">
|
|
<div class="container text-center" style="margin-top: 20%;">
|
|
<div>
|
|
<img style="scale: 60%" src="images/kubeinvaders_spaceship2.png" id="spaceShip">
|
|
<p class="text-muted credit" style="color:#fff;">version: v1.9.6</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="./programming_mode.js"></script>
|
|
<script src="./utils.js"></script>
|
|
<script src="./modals.js"></script>
|
|
<script src="./mode_controls.js"></script>
|
|
<script src="./game_console.js"></script>
|
|
<script src="./bootstrap-5.0.0-dist/js/bootstrap.min.js"></script>
|
|
<script src="./js/jquery-3.6.0.min.js"></script>
|
|
<script src="./js/popper.min.js"></script>
|
|
<script src="./kubeinvaders.js"></script>
|
|
<script src="./echarts/echarts.min.js"></script>
|
|
<script src="./chaos_report.js"></script>
|
|
</body>
|
|
</html>
|