Streaming Dashboard

Developer
Devin
Size
5,978 Kb
Views
14,168
  1. Streaming Dashboard Previews
  2. Streaming Dashboard HTML Codes
  3. Streaming Dashboard CSS Codes

How do I make an streaming dashboard?

What is a streaming dashboard? How do you make a streaming dashboard? This script and codes were developed by Devin on 23 November 2022, Wednesday.

Streaming Dashboard Previews
IQ Test

Streaming Dashboard - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Streaming Dashboard</title> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- proof of concept of https://dribbble.com/shots/2579010-Channels-dark/attachments/512545 -->
<div class="window">	<div class="win_header">	<div class="sizer_btns">	<li class="close"></li>	<li class="minimize"></li>	<li class="expand"></li>	</div>	</div>	<div class="body_header">	<li class="square" style="background-color:rgba(60,60,60,.7);"> </li>	<li class="square" style="background-color:rgba(160,160,160,.8);"></li>	<li class="square" style="background-color:rgba(210,210,210,1);"></li>	<li class="square"></li>	<div class="navigation">	<li class="btn main_btn">Channels	<div class="border_effect"></div>	</li>	<li class="btn">Social Alerts	<div class="border_effect"></div>	</li>	</div>	<div class="user">	<i class="fa fa-chevron-down"></i>	<div class="user_image"></div>	<i class="fa fa-th-large"></i>	</div>	</div>	<div class="body">	<div class="online">	<h4>Online<span class="count">3</span><span class="paid">Paid 3/3<i class="fa fa-question-circle"></i></span>
</h4>	<li class="channel">	<div class="switch" onclick="this.classList.toggle('hover')">	<div class="toggle">	</div>	</div>	<div class="status good"></div>	<div class="platform">Youtube</div>	<i class="fa fa-eye"><span>5,211</span></i>	<div class="channel_options">	<i class="fa fa-link"></i>	<i class="fa fa-trash"></i>	<i class="fa fa-cog"></i>	</div>	</li>	<!--Status|Platform|CurrentViews|Options-->	<li class="channel">	<div class="switch" onclick="this.classList.toggle('hover')">	<div class="toggle">	</div>	</div>	<div class="status good"></div>	<div class="platform">Twitch</div>	<i class="fa fa-eye"><span>3,650</span></i>	<div class="channel_options">	<i class="fa fa-link"></i>	<i class="fa fa-trash"></i>	<i class="fa fa-cog" onclick="this.classList.toggle('show')"></i>	</div>	</li>	<li class="channel">	<div class="switch" onclick="this.classList.toggle('hover')">	<div class="toggle">	</div>	</div>	<div class="status bad"></div>	<div class="platform">Youtube</div>	<i class="fa fa-eye"><span>0</span></i>	<div class="channel_options">	<i class="fa fa-link"></i>	<i class="fa fa-trash"></i>	<i class="fa fa-cog"></i>	</div>	</li>	<p>+ Add New Channel</p>	</div>	<div class="offline">	<h4>Offline<span class="count">1</span></h4>	<li>	<div class="switch" onclick="this.classList.toggle('hover')">	<div class="toggle">	</div>	</div>	<div class="status bad"></div>	<div class="platform">Youtube</div>	</li>	<i class="fa fa-eye" style="margin-top:-50px;"><span>0</span></i>	<div class="channel_options" style="margin-top:-50px;">	<i class="fa fa-link"></i>	<i class="fa fa-trash"></i>	<i class="fa fa-cog"></i>	</div>	</div>	</div>	<div class="sidebar">	<div class="stream">	<h4>Your Stream</h4>	<div class="video"></div>	<!--<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/Xh_1pYNabc0?rel=0" frameborder="0" allowfullscreen></iframe>-->	</div>	<div class="settings">	<h4 style="margin-top:40px;">Settings <span>Setup guide</span></h4>	<hr style="width:90%;opacity:.5;">	</div>	<div class="information">	<p>Stream Key</p>	<li style="margin-bottom:10px;">	<h5 class="key">TestTestTestTestTest</h5>	<div class="refresh_btn"><i class="fa fa-refresh"></i>	</div>	</li>	<p>RTMP URL</p>	<li class="area_menu">	<h5>US West</h5><i class="fa fa-chevron-down"></i></li>	<li>	<h5 class="key">TestTestTestTestTest</h5></li>	<p>Stream Name<span> (Youtube and Twitch)</span></p>	<li class="name">	<h5 class="key">TestTestTestTestTest</h5></li>	</div>	</div>
</div>
<div class="whitespace">ddd</div>
</body>
</html>

Streaming Dashboard - Script Codes CSS Codes

body { margin: 100px; overflow-x: hidden; padding-bottom: 40px; background: url("https://static.pexels.com/photos/1852/dawn-landscape-mountains-nature.jpg"); background-position: center;
}
.window { position: absolute; top: 100px; width: 90%; height: 850px; left: 50%; margin-left: -45%; margin-bottom: 100px; background-color: #505050; border-radius: 8px; overflow: hidden; bottom: 200px; font-family: roboto, sans-serif;
}
.win_header { background-color: #d2d2d2; height: 30px; width: 100%; border-radius: 7px 7px 0px 0px;
}
.win_header .sizer_btns { padding-left: 10px;
}
.win_header .sizer_btns li { height: 15px; width: 15px; background-color: #bebebe; display: inline-block; border-radius: 100%; margin-top: 8px; margin-left: 2px;
}
.win_header .sizer_btns .close { -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer;
}
.win_header .sizer_btns .close:hover { background-color: #be5a5a;
}
.win_header .sizer_btns .minimize { -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer;
}
.win_header .sizer_btns .minimize:hover { background-color: #bebe5a;
}
.win_header .sizer_btns .expand { -webkit-transition: all 0.3s; transition: all 0.3s; cursor: pointer;
}
.win_header .sizer_btns .expand:hover { background-color: #5abe5a;
}
.body_header { height: 70px; background-color: #2a2828; padding-left: 40px; z-index: 99; position: relative;
}
.body_header li { display: inline-block;
}
.body_header .square { height: 30px; width: 30px; background-color: #5a5a5a; margin-right: -4px; margin-top: 20px;
}
.body_header .navigation { margin-top: -30px; margin-left: 150px; display: block;
}
.body_header .btn { padding-right: 15px; padding-left: 15px; color: white; cursor: pointer; opacity: .8; font-size: 18px; font-weight: 600; letter-spacing: .2px;
}
.body_header .btn .border_effect { width: 0px; border-bottom: 2px solid #aa463c;
}
.body_header .btn:hover .border_effect { -webkit-transition: all 0.3s; transition: all 0.3s; width: 100%; border-bottom: 2px solid #aa463c;
}
.body_header .user { float: right; margin-right: 40px; margin-top: -25px;
}
.body_header .user .fa { float: right; font-size: 30px; padding-right: 0px; color: #5a5a5a; cursor: pointer;
}
.body_header .user .user_image { height: 40px; width: 40px; border-radius: 100%; background-size: cover; background-position: center; float: right; margin-left: 30px; margin-top: -8px; margin-right: 20px; border: 2px solid #bebebe;
}
.body_header .user .fa-chevron-down { font-size: 10px; left: 40px; margin-top: 10px; margin-left: -10px;
}
.body { padding: 3%; position: absolute; width: 62%;
}
.online, .offline { margin-bottom: 60px;
}
.online h4, .offline h4 { color: #d2d2d2; font-size: 25px; font-weight: 500; letter-spacing: 1.1px; margin-top: -10px;
}
.online li, .offline li { width: 100%; height: 60px; background-color: #646464; margin-bottom: 10px; border: 2px solid #828282; border-radius: 2px; list-style: none; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.online p, .offline p { -webkit-transition: all 0.3s; transition: all 0.3s; color: gainsboro; font-size: 14px; cursor: pointer; font-weight: 700; margin-top: 40px;
}
.online p:hover, .offline p:hover { color: #fafafa;
}
.online .count, .offline .count { color: #6e6e6e; font-size: 14px; margin-left: 5px; margin-top: 14px;
}
.online .paid, .offline .paid { float: right; font-size: 14px; color: #6e6e6e;
}
.online .paid i, .offline .paid i { color: #8c8c8c; margin-left: 10px; font-size: 16px;
}
.offline li { opacity: .5;
}
.sidebar { width: 32%; background-color: #6e6e6e; height: 100%; float: right; z-index: 1; position: relative;
}
.sidebar .stream { width: 100%;
}
.sidebar .stream h4 { color: gainsboro; margin-left: 18px; margin-top: 35px;
}
.sidebar .stream .video { width: 90%; height: 200px; background-color: black; margin: 0 auto; width: 90%; margin-left: 5%; margin-top: 35px;
}
.settings h4 { color: gainsboro; margin-left: 30px; margin-top: 65px;
}
.settings span { float: right; margin-right: 40px; color: rgba(250, 150, 0, 0.7); margin-top: 5px; font-size: 12px; cursor: pointer;
}
.settings hr { height: 4px; margin-top: -10px;
}
.information { margin-top: 20px;
}
.information p { color: rgba(220, 220, 220, 0.5); margin-left: 30px; margin-top: 5px; font-size: 14px; font-weight: bold; margin-top: 25px;
}
.information li { list-style: none; height: 40px; margin-top: -5px; margin-bottom: 15px; width: 83%; background-color: #5a5a5a; margin-left: 30px; border-radius: 2px;
}
.information span { font-style: italic; font-size: 12px; color: #a0a0a0;
}
.information .refresh_btn { background-color: #aaaaaa; height: 40px; width: 40px; float: right; cursor: pointer; border-radius: 0px 4px 4px 0px; margin-top: -49px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.information .refresh_btn:hover .fa-refresh { transform: rotate(360deg);
}
.information .fa-refresh { -webkit-transition: all 0.3s; transition: all 0.3s; margin-top: 10px; font-size: 20px; color: #f0f0f0; margin-left: 10px;
}
.information .key { margin-top: 10px; padding-top: 12px; margin-left: 20px; color: rgba(240, 240, 240, 0.5); font-weight: 400;
}
.information .area_menu { background-color: #aaaaaa; box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); color: #f0f0f0;
}
.information .area_menu h5 { font-weight: 500; font-size: 15px; margin-top: 5px; padding-top: 10px; margin-left: 20px;
}
.information .area_menu i { float: right; margin-top: -40px; margin-right: 13px; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.information .area_menu i:hover { margin-top: -38px;
}
.information .name { background-color: #464646;
}
.information .name h5 { color: rgba(240, 240, 240, 0.7);
}
.switch { height: 20px; width: 50px; border-radius: 80px; background-color: #464646; margin-top: 20px; margin-left: 15px; padding-top: 2.5px; cursor: pointer;
}
.switch .toggle { -webkit-transition: all 0.3s; transition: all 0.3s; height: 15px; width: 15px; border-radius: 100%; margin-top: 1.5px; margin-left: 4px; background-color: #b4b4b4;
}
.switch.hover .toggle { margin-left: 30px;
}
.status { height: 17px; width: 17px; margin-top: -19px; margin-left: 100px; border-radius: 100%;
}
.platform { margin-left: 150px; margin-top: -17px; color: #f0f0f0;
}
.good { background-color: #3cf046;
}
.bad { background-color: #f05046;
}
.fa-eye { float: left; margin-left: 60%; color: #aaaaaa; margin-top: -17px;
}
.fa-eye span { margin-left: 10px; font-size: 15px;
}
.channel_options { float: right; margin-top: -20px; font-size: 20px; margin-right: 5px;
}
.channel_options i { padding-right: 15px; color: #aaaaaa; cursor: pointer;
}
.whitespace { height: 800px; width: 100%; bottom: 0;
}
Streaming Dashboard - Script Codes
Streaming Dashboard - Script Codes
Home Page Home
Developer Devin
Username edwin0258
Uploaded November 23, 2022
Rating 3
Size 5,978 Kb
Views 14,168
Do you need developer help for Streaming Dashboard?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Devin (edwin0258) Script Codes
Name
A Pen by Devin
React Composer Widget
Portfolio Zipline
Twitch Zipline
Simple Svg Loading Bar
Pomodoro Clock
Dungeon Crawler
Country Generator
Descriptive Tags
Daily UI 011 - Flash Message
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!