1629 lines
47 KiB
HTML
1629 lines
47 KiB
HTML
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
<!-- Primary Meta Tags -->
|
|
<title>Dashboard</title>
|
|
<link rel="icon" href="/static/icon/main_free.png"
|
|
type="image/png" />
|
|
<meta name="title" content="CyberRange">
|
|
<meta name="description" content="Teach and Test you employee about cyber attacks">
|
|
|
|
<!-- <meta http-equiv="refresh" content="3"> -->
|
|
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");
|
|
|
|
* {
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
box-sizing: border-box;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
:root {
|
|
--body-font: "Inter", sans-serif;
|
|
--theme-bg: #1f1d2b;
|
|
--body-color: #808191;
|
|
--button-bg: #353340;
|
|
--border-color: rgb(128 129 145 / 24%);
|
|
--video-bg: #252936;
|
|
--delay: 0s;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--body-font);
|
|
color: var(--body-color);
|
|
/* background-image: url("https://wallpaperstock.net/planet-stars-mountains-field-wallpapers_44750_1920x1200.jpg?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1951&q=80"); */
|
|
/* background-image: url(https://wallpaperstock.net/planet-stars-mountains-field-wallpapers_44750_1920x1200.jpg?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1950&q=80); */
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-blend-mode: color-dodge;
|
|
background-color: rgba(18, 21, 39, 0.86);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding: 1em 2em;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body:before {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(163deg, #1f1d2b 21%, rgba(31, 29, 43, 0.3113620448) 64%);
|
|
opacity: 0.4;
|
|
content: "";
|
|
}
|
|
|
|
.container {
|
|
background-color: var(--theme-bg);
|
|
max-width: 1240px;
|
|
max-height: 900px;
|
|
height: 95vh;
|
|
display: flex;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
|
|
position: relative;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 220px;
|
|
height: 100%;
|
|
padding: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
transition-duration: 0.2s;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.sidebar .logo {
|
|
display: none;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: #22b07d;
|
|
flex-shrink: 0;
|
|
color: #fff;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sidebar .logo-expand {
|
|
text-decoration: none;
|
|
color: #fff;
|
|
font-size: 19px;
|
|
font-weight: 600;
|
|
line-height: 34px;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.sidebar .logo-expand:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -30px;
|
|
left: 0;
|
|
background: var(--theme-bg);
|
|
width: 200px;
|
|
height: 70px;
|
|
z-index: -1;
|
|
}
|
|
|
|
.sidebar-link:hover,
|
|
.sidebar-link.is-active {
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar-link:hover:nth-child(2n+1) svg,
|
|
.sidebar-link.is-active:nth-child(2n+1) svg {
|
|
background: #cb51ff;
|
|
}
|
|
|
|
.sidebar-link:hover:nth-child(2n) svg,
|
|
.sidebar-link.is-active:nth-child(2n) svg {
|
|
background: #cb51ff;
|
|
}
|
|
|
|
.sidebar-link:hover:nth-child(2n+3) svg,
|
|
.sidebar-link.is-active:nth-child(2n+3) svg {
|
|
background: #cb51ff;
|
|
}
|
|
|
|
.sidebar.collapse {
|
|
width: 90px;
|
|
border-right: 1px solid var(--border-color);
|
|
}
|
|
|
|
.sidebar.collapse .logo-expand,
|
|
.sidebar.collapse .side-title {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar.collapse .logo {
|
|
display: flex;
|
|
}
|
|
|
|
.sidebar.collapse .side-wrapper {
|
|
width: 30px;
|
|
}
|
|
|
|
.sidebar.collapse .side-menu svg {
|
|
margin-right: 30px;
|
|
}
|
|
|
|
@-webkit-keyframes bottom {
|
|
0% {
|
|
transform: translateY(100px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@keyframes bottom {
|
|
0% {
|
|
transform: translateY(100px);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.side-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.side-menu a {
|
|
display: flex;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
color: var(--body-color);
|
|
}
|
|
|
|
.side-menu a+a {
|
|
margin-top: 26px;
|
|
}
|
|
|
|
.side-menu svg {
|
|
width: 30px;
|
|
padding: 8px;
|
|
border-radius: 10px;
|
|
background-color: var(--button-bg);
|
|
flex-shrink: 0;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.side-menu svg:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.side-title {
|
|
font-size: 12px;
|
|
letter-spacing: 0.07em;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.side-wrapper {
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 36px 0;
|
|
width: 145px;
|
|
}
|
|
|
|
.side-wrapper+.side-wrapper {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
padding: 30px;
|
|
}
|
|
|
|
.search-bar {
|
|
height: 34px;
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 450px;
|
|
}
|
|
|
|
.search-bar input {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background-color: var(--button-bg);
|
|
border-radius: 8px;
|
|
font-family: var(--body-font);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
padding: 0 40px 0 16px;
|
|
box-shadow: 0 0 0 2px rgba(134, 140, 160, 0.02);
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23717790c7'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
|
|
background-size: 14px;
|
|
background-repeat: no-repeat;
|
|
background-position: 96%;
|
|
color: #fff;
|
|
}
|
|
|
|
.user-settings {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 20px;
|
|
flex-shrink: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.user-settings svg {
|
|
width: 10px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 575px) {
|
|
.user-settings svg {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.user-settings .notify {
|
|
position: relative;
|
|
}
|
|
|
|
.user-settings .notify svg {
|
|
width: 20px;
|
|
margin-left: 24px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.user-settings .notify .notification {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: #ec5252;
|
|
position: absolute;
|
|
right: 1px;
|
|
border: 1px solid var(--theme-bg);
|
|
top: -2px;
|
|
}
|
|
|
|
@media screen and (max-width: 575px) {
|
|
.user-settings .notify .notification {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.user-img {
|
|
width: 30px;
|
|
height: 30px;
|
|
flex-shrink: 0;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.user-name {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
margin: 0 6px 0 12px;
|
|
}
|
|
|
|
@media screen and (max-width: 575px) {
|
|
.user-name {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.main-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 30px 30px;
|
|
flex-grow: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* .anim {
|
|
-webkit-animation: bottom 0.8s var(--delay) both;
|
|
animation: bottom 0.8s var(--delay) both;
|
|
} */
|
|
|
|
.main-header {
|
|
font-size: 30px;
|
|
color: #fff;
|
|
font-weight: 700;
|
|
padding-bottom: 20px;
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
background: linear-gradient(to bottom, #1f1d2b 0%, #1f1d2b 78%, rgba(31, 29, 43, 0) 100%);
|
|
z-index: 11;
|
|
}
|
|
|
|
.small-header {
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
margin: 30px 0 20px;
|
|
}
|
|
|
|
.main-blogs {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.main-blog__author {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.main-blog__author.tips {
|
|
flex-direction: column-reverse;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.main-blog__title {
|
|
font-size: 25px;
|
|
max-width: 12ch;
|
|
font-weight: 600;
|
|
letter-spacing: 1px;
|
|
color: #fff;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.main-blog {
|
|
background-image: url("https://i.pinimg.com/736x/6f/6d/bb/6f6dbb6b0253dcf0e1aa8e4eb468363a.jpg");
|
|
background-size: 100%;
|
|
background-color: #31abbd;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 65%;
|
|
padding: 30px;
|
|
border-radius: 20px;
|
|
align-self: stretch;
|
|
overflow: hidden;
|
|
position: relative;
|
|
transition: background 0.3s;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.main-blog+.main-blog {
|
|
margin-left: 20px;
|
|
width: 35%;
|
|
background-image: url(https://iphoneswallpapers.com/wp-content/uploads/2020/08/Space-Planet-Art-Wallpaper.jpg);
|
|
background-color: unset;
|
|
background-position-x: 0;
|
|
background-size: 139%;
|
|
filter: saturate(1.4);
|
|
}
|
|
|
|
.main-blog+.main-blog .author-img {
|
|
border-color: rgba(255, 255, 255, 0.75);
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.main-blog+.main-blog .author-img__wrapper svg {
|
|
border-color: #ffe6b2;
|
|
color: #e7bb7d;
|
|
}
|
|
|
|
.main-blog+.main-blog .author-detail {
|
|
margin-left: 0;
|
|
}
|
|
|
|
@media screen and (max-width: 905px) {
|
|
|
|
.main-blog,
|
|
.main-blog+.main-blog {
|
|
width: 50%;
|
|
padding: 30px;
|
|
}
|
|
|
|
.main-blog {
|
|
background-size: cover;
|
|
background-position-x: center;
|
|
background-blend-mode: overlay;
|
|
}
|
|
}
|
|
|
|
.main-blog__time {
|
|
background: rgba(21, 13, 13, 0.44);
|
|
color: #fff;
|
|
padding: 3px 8px;
|
|
font-size: 12px;
|
|
border-radius: 6px;
|
|
position: absolute;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
}
|
|
|
|
.author-img {
|
|
width: 52px;
|
|
height: 52px;
|
|
border: 1px solid rgba(255, 255, 255, 0.75);
|
|
padding: 4px;
|
|
border-radius: 50%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.author-img__wrapper {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.author-img__wrapper svg {
|
|
width: 16px;
|
|
padding: 2px;
|
|
background-color: #fff;
|
|
color: #0daabc;
|
|
border-radius: 50%;
|
|
border: 2px solid #0daabc;
|
|
position: absolute;
|
|
bottom: 5px;
|
|
right: 0;
|
|
}
|
|
|
|
.author-name {
|
|
font-size: 15px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.author-info {
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
}
|
|
|
|
.author-detail {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.seperate {
|
|
width: 3px;
|
|
height: 3px;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
margin: 0 6px;
|
|
}
|
|
|
|
.seperate.video-seperate {
|
|
background-color: var(--body-color);
|
|
}
|
|
|
|
.videos {
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-column-gap: 20px;
|
|
grid-row-gap: 20px;
|
|
}
|
|
|
|
@media screen and (max-width: 980px) {
|
|
.videos {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
.video {
|
|
position: relative;
|
|
background-color: var(--video-bg);
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.video-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.video-name {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
line-height: 1.4em;
|
|
padding: 12px 20px 0;
|
|
overflow: hidden;
|
|
background-color: var(--video-bg);
|
|
z-index: 9;
|
|
position: relative;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.video-view {
|
|
font-size: 12px;
|
|
padding: 12px 20px 20px;
|
|
background-color: var(--video-bg);
|
|
position: relative;
|
|
}
|
|
|
|
.video-by {
|
|
transition: 0.3s;
|
|
padding: 20px 20px 0px;
|
|
display: inline-flex;
|
|
position: relative;
|
|
}
|
|
|
|
.video-by:before {
|
|
content: "";
|
|
background-color: #22b07d;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 26px;
|
|
right: 5px;
|
|
}
|
|
|
|
.video-by.offline:before {
|
|
background-color: #ff7551;
|
|
}
|
|
|
|
.video-time {
|
|
position: absolute;
|
|
background: rgba(21, 13, 13, 0.44);
|
|
color: rgba(255, 255, 255, 0.85);
|
|
padding: 3px 8px;
|
|
font-size: 12px;
|
|
border-radius: 6px;
|
|
top: 10px;
|
|
z-index: 1;
|
|
right: 8px;
|
|
}
|
|
|
|
.video:hover video {
|
|
transform: scale(1.6);
|
|
transform-origin: center;
|
|
}
|
|
|
|
|
|
.video:hover .video-author {
|
|
bottom: -65px;
|
|
transform: scale(0.6);
|
|
right: -3px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.video-author {
|
|
position: absolute;
|
|
right: 10px;
|
|
transition: 0.4s;
|
|
bottom: -25px;
|
|
}
|
|
|
|
.video-author svg {
|
|
background-color: #0aa0f7;
|
|
color: #fff;
|
|
border-color: var(--video-bg);
|
|
}
|
|
|
|
video {
|
|
max-width: 100%;
|
|
width: 100%;
|
|
border-radius: 20px 20px 0 0;
|
|
display: block;
|
|
cursor: pointer;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.stream-area {
|
|
display: none;
|
|
}
|
|
|
|
@media screen and (max-width: 940px) {
|
|
.stream-area {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.stream-area .video-stream {
|
|
width: 100%;
|
|
}
|
|
|
|
.stream-area .chat-stream {
|
|
margin-left: 0;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.stream-area .video-js.vjs-fluid {
|
|
min-height: 250px;
|
|
}
|
|
|
|
.stream-area .msg__content {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.show .stream-area {
|
|
display: flex;
|
|
}
|
|
|
|
.show .main-header,
|
|
.show .main-blogs,
|
|
.show .small-header,
|
|
.show .videos {
|
|
display: none;
|
|
}
|
|
|
|
.video-stream {
|
|
width: 65%;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.video-stream:hover .video-js .vjs-big-play-button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.video-p {
|
|
margin-right: 12px;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.video-p .author-img {
|
|
border: 0;
|
|
}
|
|
|
|
.video-p-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.video-p-wrapper .author-img {
|
|
border: 0;
|
|
}
|
|
|
|
.video-p-wrapper svg {
|
|
width: 20px;
|
|
padding: 4px;
|
|
}
|
|
|
|
@media screen and (max-width: 650px) {
|
|
.video-p-wrapper {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.video-p-wrapper .button-wrapper {
|
|
margin: 20px auto 0;
|
|
}
|
|
|
|
.video-p-wrapper .video-p-detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.video-p-wrapper .video-p {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.video-p-sub {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.video-p-title {
|
|
font-size: 24px;
|
|
color: #fff;
|
|
line-height: 1.4em;
|
|
margin: 16px 0 20px;
|
|
}
|
|
|
|
.video-p-subtitle {
|
|
font-size: 14px;
|
|
line-height: 1.5em;
|
|
max-width: 60ch;
|
|
}
|
|
|
|
.video-p-subtitle+.video-p-subtitle {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.video-p-name {
|
|
margin-bottom: 8px;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.video-p-name:after {
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: #22b07d;
|
|
border-radius: 50%;
|
|
margin-left: 8px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.video-p-name.offline:after {
|
|
background-color: #ff7551;
|
|
}
|
|
|
|
.video-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.button-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.like {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: var(--button-bg);
|
|
color: #fff;
|
|
border: 0;
|
|
font-family: var(--body-font);
|
|
border-radius: 8px;
|
|
padding: 10px 16px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.like.red {
|
|
background-color: #ea5f5f;
|
|
}
|
|
|
|
.like svg {
|
|
width: 18px;
|
|
flex-shrink: 0;
|
|
margin-right: 10px;
|
|
padding: 0;
|
|
}
|
|
|
|
.like+.like {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.video-stats {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.video-detail {
|
|
display: flex;
|
|
margin-top: 30px;
|
|
width: 100%;
|
|
}
|
|
|
|
.chat-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20px 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: #252836;
|
|
left: 0;
|
|
z-index: 1;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.chat-header svg {
|
|
width: 15px;
|
|
margin-right: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.chat-header span {
|
|
margin-left: auto;
|
|
color: var(--body-color);
|
|
font-size: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.chat-stream {
|
|
flex-grow: 1;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.chat {
|
|
background-color: #252836;
|
|
border-radius: 20px;
|
|
padding: 0 20px;
|
|
max-height: 414px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.chat-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
position: sticky;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: calc(100% + 20px);
|
|
padding-bottom: 12px;
|
|
background-color: #252836;
|
|
}
|
|
|
|
.chat-footer input {
|
|
width: 100%;
|
|
border: 0;
|
|
background-color: #2d303e;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
color: #fff;
|
|
margin-left: -10px;
|
|
padding: 12px 40px;
|
|
font-weight: 500;
|
|
font-family: var(--body-font);
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 12C2 6.48 6.47 2 12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10C6.47 22 2 17.52 2 12zm5.52 1.2c-.66 0-1.2-.54-1.2-1.2 0-.66.54-1.2 1.2-1.2.66 0 1.19.54 1.19 1.2 0 .66-.53 1.2-1.19 1.2zM10.8 12c0 .66.54 1.2 1.2 1.2.66 0 1.19-.54 1.19-1.2a1.194 1.194 0 10-2.39 0zm4.48 0a1.195 1.195 0 102.39 0 1.194 1.194 0 10-2.39 0z' fill='%236c6e78'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-size: 24px;
|
|
background-position: 8px;
|
|
}
|
|
|
|
.chat-footer input::-moz-placeholder {
|
|
color: #6c6e78;
|
|
}
|
|
|
|
.chat-footer input:-ms-input-placeholder {
|
|
color: #6c6e78;
|
|
}
|
|
|
|
.chat-footer input::placeholder {
|
|
color: #6c6e78;
|
|
}
|
|
|
|
.chat-footer:before {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M21.435 2.582a1.933 1.933 0 00-1.93-.503L3.408 6.759a1.92 1.92 0 00-1.384 1.522c-.142.75.355 1.704 1.003 2.102l5.033 3.094a1.304 1.304 0 001.61-.194l5.763-5.799a.734.734 0 011.06 0c.29.292.29.765 0 1.067l-5.773 5.8c-.428.43-.508 1.1-.193 1.62l3.075 5.083c.36.604.98.946 1.66.946.08 0 .17 0 .251-.01.78-.1 1.4-.634 1.63-1.39l4.773-16.075c.21-.685.02-1.43-.48-1.943z'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-size: 14px;
|
|
background-position: center;
|
|
width: 18px;
|
|
height: 18px;
|
|
background-color: #6c5ecf;
|
|
padding: 4px;
|
|
border-radius: 50%;
|
|
right: 16px;
|
|
}
|
|
|
|
.chat-vid__title {
|
|
color: #fff;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.chat-vid__container {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.chat-vid__wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 26px;
|
|
}
|
|
|
|
.chat-vid__name {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
line-height: 1.3em;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.chat-vid__img {
|
|
width: 100px;
|
|
height: 80px;
|
|
border-radius: 10px;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
-o-object-position: right;
|
|
object-position: right;
|
|
margin-right: 16px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.chat-vid__img:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.chat-vid__content {
|
|
max-width: 20ch;
|
|
}
|
|
|
|
.chat-vid__by,
|
|
.chat-vid__info {
|
|
color: var(--body-color);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.chat-vid__by {
|
|
margin: 6px 0;
|
|
}
|
|
|
|
.chat-vid__button {
|
|
background-color: #6c5ecf;
|
|
border: 0;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
margin-top: 26px;
|
|
display: flex;
|
|
padding: 0 10px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.chat-vid__button:hover {
|
|
background-color: #5847d0;
|
|
}
|
|
|
|
.message {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.message:last-child {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.message-container .author-img__wrapper svg {
|
|
width: 15px;
|
|
}
|
|
|
|
.msg__name {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.msg__content {
|
|
line-height: 1.4em;
|
|
max-width: 26ch;
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.video-js .vjs-control-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.vjs-poster {
|
|
background-size: 150%;
|
|
}
|
|
|
|
.video-js .vjs-control-bar {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 14px;
|
|
padding-left: 36px;
|
|
left: 14px;
|
|
width: calc(100% - 28px);
|
|
right: 0;
|
|
border-radius: 10px;
|
|
height: 4em;
|
|
background-color: #2b333f;
|
|
background-color: rgba(43, 51, 63, 0.7);
|
|
}
|
|
|
|
@media screen and (max-width: 625px) {
|
|
.video-js .vjs-control-bar {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
.video-js:hover .vjs-big-play-button {
|
|
background-color: rgba(43, 51, 63, 0.5);
|
|
}
|
|
|
|
.video-js .vjs-big-play-button {
|
|
transition: 0.3s;
|
|
opacity: 0;
|
|
border: 0;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.video-js .vjs-big-play-button:hover {
|
|
background-color: rgba(43, 51, 63, 0.7);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.vjs-play-control:after {
|
|
content: "LIVE";
|
|
position: absolute;
|
|
left: -66px;
|
|
top: 7px;
|
|
background-color: #8941e3;
|
|
height: 24px;
|
|
font-family: var(--body-font);
|
|
font-size: 10px;
|
|
padding: 0 12px 0 26px;
|
|
display: flex;
|
|
font-weight: 700;
|
|
letter-spacing: 0.03em;
|
|
align-items: center;
|
|
border-radius: 6px;
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-circle'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-size: 6px;
|
|
background-position: 12px;
|
|
}
|
|
|
|
@media screen and (max-width: 625px) {
|
|
.vjs-play-control:after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.vjs-menu-button-inline .vjs-menu {
|
|
top: 4px;
|
|
}
|
|
|
|
.video-js .vjs-control:before,
|
|
.video-js .vjs-time-control {
|
|
line-height: 40px;
|
|
}
|
|
|
|
.video-js .vjs-tech {
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
}
|
|
|
|
button.vjs-play-control.vjs-control.vjs-button {
|
|
margin-left: 40px;
|
|
}
|
|
|
|
@media screen and (max-width: 625px) {
|
|
button.vjs-play-control.vjs-control.vjs-button {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.vjs-icon-fullscreen-enter:before,
|
|
.video-js .vjs-fullscreen-control:before {
|
|
content: "";
|
|
position: absolute;
|
|
display: block;
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.54 0h3.38c1.41 0 2.54 1.15 2.54 2.561V5.97c0 1.42-1.13 2.56-2.54 2.56H2.54C1.14 8.53 0 7.39 0 5.97V2.561C0 1.15 1.14 0 2.54 0zm0 11.47h3.38c1.41 0 2.54 1.14 2.54 2.56v3.41c0 1.41-1.13 2.56-2.54 2.56H2.54C1.14 20 0 18.85 0 17.44v-3.41c0-1.42 1.14-2.56 2.54-2.56zM17.46 0h-3.38c-1.41 0-2.54 1.15-2.54 2.561V5.97c0 1.42 1.13 2.56 2.54 2.56h3.38c1.4 0 2.54-1.14 2.54-2.56V2.561C20 1.15 18.86 0 17.46 0zm-3.38 11.47h3.38c1.4 0 2.54 1.14 2.54 2.56v3.41c0 1.41-1.14 2.56-2.54 2.56h-3.38c-1.41 0-2.54-1.15-2.54-2.56v-3.41c0-1.42 1.13-2.56 2.54-2.56z' fill='%23fff'/%3e%3c/svg%3e");
|
|
background-size: 11px;
|
|
background-position: center;
|
|
background-position-y: 14px;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.vjs-playback-rate .vjs-playback-rate-value {
|
|
font-size: 1.1em;
|
|
line-height: 3.5em;
|
|
opacity: 0.6;
|
|
font-weight: 700;
|
|
font-family: var(--body-font);
|
|
}
|
|
|
|
.video-js .vjs-playback-rate {
|
|
width: 2.2em;
|
|
}
|
|
|
|
.video-js.vjs-fluid {
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
min-height: 414px;
|
|
}
|
|
|
|
@media screen and (max-width: 735px) {
|
|
.main-blogs {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.main-blog,
|
|
.main-blog+.main-blog {
|
|
width: 100%;
|
|
}
|
|
|
|
.videos {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.main-blog+.main-blog {
|
|
margin-left: 0;
|
|
margin-top: 20px;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 475px) {
|
|
.main-blog__title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.author-name {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.main-blog__author {
|
|
flex-direction: column-reverse;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.author-detail {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.main-blog .author-img {
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.main-container {
|
|
padding: 0 20px 20px;
|
|
}
|
|
|
|
.header {
|
|
padding: 20px;
|
|
}
|
|
|
|
.sidebar.collapse {
|
|
width: 40px;
|
|
}
|
|
|
|
.sidebar {
|
|
align-items: center;
|
|
}
|
|
|
|
body {
|
|
padding: 0;
|
|
}
|
|
|
|
.container {
|
|
height: 100vh;
|
|
border-radius: 0;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: rgba(21, 20, 26, 0.63);
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="sidebar">
|
|
{% autoescape false %}
|
|
{{ sidebar_html_insert }}
|
|
{% endautoescape %}
|
|
</div>
|
|
<div class="wrapper">
|
|
<div class="header">
|
|
|
|
<div class="user-settings">
|
|
<img class="user-img" src="{{ profile_picture }}?auto=format&fit=crop&w=943&q=80" alt="">
|
|
<a href="#" >
|
|
<div class="user-name">{{ profile_username }}</div>
|
|
</a>
|
|
<a href="/logout" >
|
|
<div class="notify">
|
|
<svg width="20px" height="20px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" style="color: white;">
|
|
<polygon fill="var(--ci-primary-color, currentColor)" points="77.155 272.034 351.75 272.034 351.75 272.033 351.75 240.034 351.75 240.033 77.155 240.033 152.208 164.98 152.208 164.98 152.208 164.979 129.58 142.353 15.899 256.033 15.9 256.034 15.899 256.034 129.58 369.715 152.208 347.088 152.208 347.087 152.208 347.087 77.155 272.034" class="ci-primary"/>
|
|
<polygon fill="var(--ci-primary-color, currentColor)" points="160 16 160 48 464 48 464 464 160 464 160 496 496 496 496 16 160 16" class="ci-primary"/>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.padding_stat_n {
|
|
padding-bottom: 18px;
|
|
}
|
|
|
|
.settings_icon_thing {
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
|
|
.settings_icon_thing:hover {
|
|
color: rgb(227, 226, 226);
|
|
}
|
|
|
|
.fancy_safe_btn {
|
|
color: white;
|
|
background-color: #41434300;
|
|
border-width: 0;
|
|
font-size: 19px;
|
|
}
|
|
|
|
.fancy_inp_n {
|
|
color: white;
|
|
background-color: #ffffff28;
|
|
border-width: 0;
|
|
font-size: 19px;
|
|
width: 140px;
|
|
}
|
|
</style>
|
|
<div class="main-container">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<div class="main-header anim" style="--delay: 0.4s">General</div>
|
|
<div class="videos">
|
|
<div class="video anim" style="--delay: .4s">
|
|
<a href="#" style="text-decoration: none;color: #ff66d9;">
|
|
<div class="video-by" title="Time elapsed since the Attack started">Time elapsed since start of attack</div>
|
|
{% autoescape false %}
|
|
<div class="video-name padding_stat_n" id="attackstart" data-start="{{ attack_start_timestamp }}">0</div>
|
|
{% endautoescape %}
|
|
</a>
|
|
</div>
|
|
<div class="video anim" style="--delay: .45s">
|
|
<a href="#" style="text-decoration: none;color: #ff66d9;">
|
|
<div class="video-by" title="Time since the sim started">Time elapsed since start of simulation</div>
|
|
{% autoescape false %}
|
|
<div class="video-name padding_stat_n" id="simstart" data-start="{{ sim_start_timestamp }}">0</div>
|
|
{% endautoescape %}
|
|
</a>
|
|
</div>
|
|
<div class="video anim" style="--delay: .5s">
|
|
<a id="start_toggle" href="/d1/startsim" style="text-decoration: none;color: #ff66d9;">
|
|
<div class="video-by" title="Start or Stop the Simulation" id="start_stop_sim_btn">Start Simulation</div>
|
|
<div class="video-name padding_stat_n">Click here</div>
|
|
</a>
|
|
</div>
|
|
<div class="video anim" style="--delay: .55s">
|
|
<a href="#" style="text-decoration: none;color: #ff66d9;">
|
|
<div class="video-by" title="xxx">Blue team status</div>
|
|
<div class="video-name padding_stat_n">👍</div>
|
|
</a>
|
|
</div>
|
|
</div><br><br><br>
|
|
|
|
|
|
|
|
<div class="main-header anim" style="--delay: 0.6s">Logs</div>
|
|
|
|
<!-- timeline css -->
|
|
<style>
|
|
/* The actual timeline (the vertical ruler) */
|
|
.timeline {
|
|
position: relative;
|
|
max-width: 950px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* The actual timeline (the vertical ruler) */
|
|
.timeline::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 6px;
|
|
background-color: #252936;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
margin-left: -3px;
|
|
}
|
|
|
|
/* Container around content */
|
|
.container_time {
|
|
padding: 10px 40px;
|
|
position: relative;
|
|
background-color: inherit;
|
|
width: 50%;
|
|
}
|
|
|
|
/* The circles on the timeline */
|
|
.container_time::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 25px;
|
|
height: 25px;
|
|
right: -17px;
|
|
background-color: #252936;
|
|
border: 4px solid #fd3737;
|
|
top: 15px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.container_time_right {
|
|
padding: 10px 40px;
|
|
position: relative;
|
|
background-color: inherit;
|
|
width: 50%;
|
|
}
|
|
|
|
/* The circles on the timeline */
|
|
.container_time_right::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 25px;
|
|
height: 25px;
|
|
right: -17px;
|
|
background-color: #252936;
|
|
border: 4px solid #5590ff;
|
|
top: 15px;
|
|
border-radius: 50%;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Place the container to the left */
|
|
.left {
|
|
left: 0;
|
|
}
|
|
|
|
/* Place the container to the right */
|
|
.right {
|
|
left: 50%;
|
|
}
|
|
|
|
/* Add arrows to the left container (pointing right) */
|
|
.left::before {
|
|
content: " ";
|
|
height: 0;
|
|
position: absolute;
|
|
top: 22px;
|
|
width: 0;
|
|
z-index: 1;
|
|
right: 30px;
|
|
border: medium solid #252936;
|
|
border-width: 10px 0 10px 10px;
|
|
border-color: transparent transparent transparent #252936;
|
|
}
|
|
|
|
/* Add arrows to the right container (pointing left) */
|
|
.right::before {
|
|
content: " ";
|
|
height: 0;
|
|
position: absolute;
|
|
top: 22px;
|
|
width: 0;
|
|
z-index: 1;
|
|
left: 30px;
|
|
border: medium solid #252936;
|
|
border-width: 10px 10px 10px 0;
|
|
border-color: transparent #252936 transparent transparent;
|
|
}
|
|
|
|
/* Fix the circle for containers on the right side */
|
|
.right::after {
|
|
left: -16px;
|
|
}
|
|
|
|
/* The actual content */
|
|
.content_time {
|
|
padding: 1px 15px;
|
|
background-color: #252936;
|
|
position: relative;
|
|
word-break: break-all;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Media queries - Responsive timeline on screens less than 600px wide */
|
|
@media screen and (max-width: 600px) {
|
|
/* Place the timelime to the left */
|
|
.timeline::after {
|
|
left: 31px;
|
|
}
|
|
|
|
/* Full-width containers */
|
|
.container_time {
|
|
width: 100%;
|
|
padding-left: 70px;
|
|
padding-right: 25px;
|
|
}
|
|
|
|
/* Make sure that all arrows are pointing leftwards */
|
|
.container_time::before {
|
|
left: 60px;
|
|
border: medium solid #252936;
|
|
border-width: 2px 2px 2px 0;
|
|
border-color: transparent #252936 transparent transparent;
|
|
}
|
|
|
|
.container_time_right {
|
|
width: 100%;
|
|
padding-left: 70px;
|
|
padding-right: 25px;
|
|
}
|
|
|
|
/* Make sure that all arrows are pointing leftwards */
|
|
.container_time_right::before {
|
|
left: 60px;
|
|
border: medium solid #252936;
|
|
border-width: 10px 10px 10px 0;
|
|
border-color: transparent #252936 transparent transparent;
|
|
}
|
|
|
|
/* Make sure all circles are at the same spot */
|
|
.left::after, .right::after {
|
|
left: 15px;
|
|
}
|
|
|
|
/* Make all right containers behave like the left ones */
|
|
.right {
|
|
left: 0%;
|
|
}
|
|
}
|
|
</style>
|
|
<div>
|
|
<div id="timeline" class="timeline">
|
|
<!--
|
|
{% for log_entry in total_logs_list %}
|
|
<div class='{{ log_entry["timeline_class"] }} {{ log_entry["timeline_side"] }}' style="box-sizing: border-box;">
|
|
<div class="content_time" style="box-sizing: border-box;">
|
|
{% autoescape false %}
|
|
<h2>{{ log_entry["timestamp"] }}</h2>
|
|
<p>{{ log_entry["data"] }}</p>
|
|
{% endautoescape %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
-->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script>
|
|
function to_min_s(txt_timestamp_start, txt_timestamp_end) {
|
|
let delta = parseInt(txt_timestamp_end) - parseInt(txt_timestamp_start);
|
|
let quotient = Math.floor(delta / 60);
|
|
let remainder = delta % 60;
|
|
return `${quotient}m ${remainder}s`;
|
|
}
|
|
|
|
function timestamp_sort(x, y) {
|
|
if (parseInt(x.timestamp) < parseInt(y.timestamp)) {
|
|
return -1;
|
|
}
|
|
if (parseInt(x.timestamp) > parseInt(y.timestamp)) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
function flatten_dict(data) {
|
|
let res = [];
|
|
data.red.forEach(data_entry => {
|
|
res.push({
|
|
team: 'red',
|
|
data: data_entry.data,
|
|
timestamp: data_entry.timestamp
|
|
});
|
|
});
|
|
data.blue.forEach(data_entry => {
|
|
res.push({
|
|
team: 'blue',
|
|
data: data_entry.data,
|
|
timestamp: data_entry.timestamp
|
|
});
|
|
});
|
|
return res;
|
|
|
|
}
|
|
function populateTimeline(data) {
|
|
data = flatten_dict(data);
|
|
data.sort(timestamp_sort);
|
|
let tl = document.getElementById('timeline');
|
|
tl.innerHTML = '';
|
|
data.forEach(data_entry => {
|
|
entry_div = document.createElement('div');
|
|
container = document.createElement('div');
|
|
timestamp_h2 = document.createElement('h2');
|
|
data_tag = document.createElement('p');
|
|
timestamp_txt = document.createTextNode(to_min_s(document.getElementById('simstart').getAttribute('data-start'), data_entry.timestamp));
|
|
data_txt = document.createTextNode(data_entry.data);
|
|
data_tag.appendChild(data_txt);
|
|
timestamp_h2.appendChild(timestamp_txt);
|
|
container.appendChild(timestamp_h2);
|
|
container.appendChild(data_tag);
|
|
container.classList.add("content_time");
|
|
container.setAttribute("style", 'box-sizing: border-box;');
|
|
entry_div.appendChild(container);
|
|
if (data_entry.team === 'red') {
|
|
entry_div.classList.add("container_time");
|
|
} else {
|
|
entry_div.classList.add("container_time_right");
|
|
}
|
|
if (data_entry.team === 'red') {
|
|
entry_div.classList.add("left");
|
|
} else {
|
|
entry_div.classList.add("right");
|
|
}
|
|
entry_div.setAttribute("style", 'box-sizing: border-box;');
|
|
tl.appendChild(entry_div);
|
|
});
|
|
}
|
|
</script>
|
|
<script>
|
|
if("{{ sim_running }}" == "True"){
|
|
console.log("1")
|
|
document.getElementById("start_stop_sim_btn").innerHTML = "Stop Simulation"
|
|
} else {
|
|
console.log("2")
|
|
document.getElementById("start_stop_sim_btn").innerHTML = "Start Simulation"
|
|
}
|
|
|
|
const iid = setInterval(() => {
|
|
let start = parseInt(document.getElementById("simstart").getAttribute("data-start"));
|
|
let end = ~~(Date.now()/1e3);
|
|
if (start === -1 || document.getElementById('start_stop_sim_btn').innerHTML === 'Start Simulation' || document.getElementById("attackstart").getAttribute("data-start") === "-1") {
|
|
document.getElementById("simstart").innerHTML = "0";
|
|
} else {
|
|
document.getElementById("simstart").innerHTML = end - start;
|
|
if (document.getElementById('start_stop_sim_btn').innerHTML === 'Start Simulation')
|
|
{
|
|
document.getElementById("simstart").setAttribute("data-start", "-1");
|
|
document.getElementById("simstart").innerHTML = "0";
|
|
}
|
|
}
|
|
|
|
start = parseInt(document.getElementById("attackstart").getAttribute("data-start"));
|
|
end = ~~(Date.now()/1e3);
|
|
if (start === -1 || document.getElementById('start_stop_sim_btn').innerHTML === 'Start Simulation') {
|
|
document.getElementById("attackstart").innerHTML = "0";
|
|
} else {
|
|
document.getElementById("attackstart").innerHTML = end - start;
|
|
}
|
|
|
|
fetch('/api/logs')
|
|
.then(resp => resp.json())
|
|
.then(populateTimeline);
|
|
}, 1000);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</body>
|