uploaded site and api data

site/control_utils.css

@@ -0,0 +1,339 @@
+.control-panel-shell {
+    position: absolute;
+    display: none;
+    margin-left: 20px;
+    margin-top: 20px;
+    left: 0;
+    transition: 150ms
+}
+
+.control-panel {
+    color: #fff;
+    z-index: 100
+}
+
+.control-panel.hide {
+    opacity: 0
+}
+
+.control-panel-expander {
+    position: relative;
+    top: 30px;
+    height: 14px;
+    background-color: #5e5757;
+    padding: 2px;
+    border-radius: 0 3px 3px 0;
+    cursor: pointer
+}
+
+.hamburger-menu {
+    width: 12px;
+    height: 2px;
+    background-color: #111;
+    margin: 2px
+}
+
+.control-panel-entry {
+    width: 250px;
+    background-color: #222;
+    border-radius: 0;
+    box-sizing: content-box;
+    color: #fff;
+    cursor: pointer;
+    display: block;
+    font-family: "Google Sans", "Titillium Web", sans-serif;
+    font-size: 15px;
+    line-height: 25px;
+    padding: 12px 16px;
+    position: relative;
+    z-index: 100;
+    border: none;
+    border-bottom: 1px solid #333
+}
+
+.control-panel-entry:first-child {
+    border-radius: 28px 28px 0 0
+}
+
+.control-panel-entry:last-child {
+    border-radius: 0 0 28px 28px;
+    border: none
+}
+
+.control-panel-text {
+    cursor: default;
+    font-size: 20px;
+    font-weight: 600;
+    text-align: center
+}
+
+.control-panel-toggle .label {
+    position: relative
+}
+
+.control-panel-toggle .value {
+    position: absolute;
+    top: 8px;
+    right: 15px;
+    width: 80px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 40px;
+    background: #000
+}
+
+.control-panel-toggle.yes .value {
+    background-color: #309f93;
+    color: #a3faa3
+}
+
+.control-panel-toggle.no .value {
+    background-color: #d32f50;
+    color: #f19e9e
+}
+
+.control-panel-slider .value {
+    position: relative;
+    width: 100%
+}
+
+.control-panel-slider .callout {
+    position: absolute;
+    right: 25px
+}
+
+.control-panel-fps {
+    display: flex;
+    justify-content: center;
+    align-items: center
+}
+
+.control-panel-fps canvas {
+    height: 50px;
+    width: 100%;
+    background-color: #222;
+    margin: 5px 0;
+    z-index: 0
+}
+
+.control-panel-fps .fps-text {
+    position: absolute;
+    font-size: 20px;
+    font-weight: 600;
+    text-align: center;
+    backface-visibility: hidden
+}
+
+.control-panel-source-picker {
+    display: flex;
+    flex-direction: column;
+    align-items: center
+}
+
+.control-panel-source-picker .inputs {
+    display: none
+}
+
+.control-panel-source-picker .file-selection div {
+    display: flex;
+    align-items: center;
+    justify-items: center
+}
+
+.control-panel-source-picker .file-selection div img {
+    margin-left: 8px
+}
+
+.source-selection {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%
+}
+
+.video-controls {
+    width: 100%;
+    display: none;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin: 12px 0 4px
+}
+
+.video-controls * {
+    display: inline-block
+}
+
+.video-controls img {
+    margin: 0 8px 0 -6px
+}
+
+.pause-button {
+    height: 100%
+}
+
+.video-track {
+    height: 5px;
+    width: 100%;
+    background-color: #fff;
+    flex-grow: 1;
+    margin-right: 10px
+}
+
+.video-slider-ball {
+    height: 10px;
+    width: 10px;
+    background-color: #fff;
+    position: absolute;
+    display: none;
+    border-radius: 50%
+}
+
+.video-time {
+    padding-left: .1rem
+}
+
+.dropdown-wrapper {
+    position: relative;
+    user-select: none;
+    width: calc(100% - 28px)
+}
+
+.dropdown {
+    position: relative;
+    display: flex;
+    flex-direction: column
+}
+
+.dropdown-trigger {
+    position: relative;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    justify-content: space-between;
+    padding: 0 10px;
+    font-size: 16px;
+    font-weight: 300;
+    height: 30px;
+    line-height: 30px;
+    background: #333;
+    color: #fff;
+    cursor: pointer
+}
+
+.dropdown-trigger span {
+    max-width: calc(100% - 30px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
+}
+
+.dropdown-options {
+    position: absolute;
+    display: block;
+    top: 100%;
+    left: 0;
+    right: 0;
+    color: #fff;
+    background: #333;
+    transition: all .5s;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    z-index: 2
+}
+
+.dropdown.open .dropdown-options {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: all
+}
+
+.dropdown-option {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    padding: 0 5px;
+    font-size: 16px;
+    font-weight: 300;
+    line-height: 30px;
+    cursor: pointer;
+    transition: all .5s;
+    color: #fff
+}
+
+.dropdown-option * {
+    padding-right: .5rem
+}
+
+.dropdown-option:hover {
+    cursor: pointer;
+    background-color: #b2b2b2
+}
+
+.dropdown-option.selected {
+    color: #fff;
+    background-color: #305c91
+}
+
+.arrow {
+    position: relative;
+    height: 15px;
+    width: 10.6066017178px;
+    margin-left: 10.6066017178px;
+    transform: scale(0.8)
+}
+
+.arrow::before,
+.arrow::after {
+    content: "";
+    position: absolute;
+    bottom: 0px;
+    width: .15rem;
+    height: 100%;
+    transition: all .5s;
+    backface-visibility: hidden
+}
+
+.arrow::before {
+    left: -5px;
+    transform: rotate(135deg);
+    background-color: #fff
+}
+
+.arrow::after {
+    left: 5px;
+    transform: rotate(-135deg);
+    background-color: #fff
+}
+
+.open .arrow::before {
+    left: -5px;
+    transform: rotate(45deg)
+}
+
+.open .arrow::after {
+    left: 5px;
+    transform: rotate(-45deg);
+    backface-visibility: hidden
+}
+
+.fps-30 {
+    position: absolute;
+    font-size: 8px;
+    top: 45%;
+    left: 10px
+}
+
+.fps-60 {
+    position: absolute;
+    font-size: 8px;
+    top: 15%;
+    left: 10px
+}