Skip to content

Instantly share code, notes, and snippets.

@maikenmadsen92

maikenmadsen92/index.html

Created August 21, 2015 12:06
Show Gist options
  • Save maikenmadsen92/996a37555b1e7394c583 to your computer and use it in GitHub Desktop.
Save maikenmadsen92/996a37555b1e7394c583 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylecheat.css">
</head>
<body>
<div class="main">
<div class="topmenu">
<!-- couldent find the file -->
<!-- <img src="http://play.mobo.php5.test.tv2.dk/css/gfx/common/logo.png" alt="PLAY"> -->
</div>
<div class="play-widget-player">
<!--<div class="cast-intro-screen">
<div class="cast-button-focus-container">
<div class="cast-button-focus-overlay">
<div class="cast-button-focus-inner"></div>
<div class="cast-button-focus-gradient"></div>
</div>
</div>
</div> -->
<div class="player-container">
<!-- overlay, etc. -->
<!-- <div class="play-in-videojs"> -->
<!-- <div class="intro-play-in-videojs"> -->
<div id="deletediv"></div>
<div class="videojs-focus-overlay">
<p id= "ptext" >Vil du prøve vores nye player?</p>
<button id="btnContinue">Fortsæt som før</button>
<button id="btnTryNew">Prøv den nye </button>
</div>
<!-- </div> -->
<!-- </div> -->
</div>
<div class="controls-container">
<!-- different buttons. -->
</div>
</div>
</div>
<script src="myscript.js"></script>
</body>
</html>
Raw
myscript.js
window.onload = function() {
var buttonno = document.getElementById("btnContinue");
var buttontry = document.getElementById("btnTryNew");
var ptext = document.getElementById("ptext");
ptext.style.color = "white";
var deleteimage = new Image();
var imageholder = document.getElementById("deletediv");
deleteimage.src = "deleteicon.png";
buttonno.addEventListener("click", function(){
buttonno.style.display = "none";
buttontry.style.display = "none";
ptext.style.display = "none";
});
buttontry.addEventListener("click", function(){
var newtext = "Du kan altid gå tilbage til den gamle player under din profil";
ptext.innerHTML = newtext;
buttontry.style.display = "none";
buttonno.style.display = "none";
//
imageholder.style.position = "fixed";
imageholder.style.marginRight = "100px";
imageholder.style.marginLeft = "950px";
deleteimage.style.width = "50px";
deleteimage.style.height = "50px";
imageholder.appendChild(deleteimage);
});
imageholder.addEventListener("click", function(){
ptext.style.display = "none";
imageholder.style.display = "none";
});
};
Raw
stylecheat.css
/* General styling */
html, body {
height: 100%;
width: 100%;
margin: 0; padding: 0;
background: #000000;
font-family: proxima-nova, arial, sans-serif;
font-weight: 100;
font-size: 100%;
text-decoration: none;
letter-spacing: 0.5px;
line-height: 20px;
}
.main {
height: 1000px;
width: 999px;
margin-left: auto;
margin-right: auto;
background: #1E1E1E;
margin-top: 50px;
}
.topmenu {
height: 80px;
width: 999px;
margin-bottom: 2px;
background: #282828;
}
/* Player */
.play-widget-player {
position: relative;
height: 639px;
width: 999px;
background: red;
z-index: 1;
}
.player-container {
position: relative;
height: 562px;
width: 999px;
background: white;
background: url("http://i2-images2.tv2net.dk/s/04/41332404-f9aa0f1d0c8a6d2473a38cee612973e6.jpeg");
}
.controls-container {
height: 77px;
width: 999px;
background: white;
background: url("http://morten.broesby.dk/files/control-bar.png");
cursor: pointer;
}
/* Cast */
.cast-button-focus-container {
/*position: absolute;*/
/*right: 0;*/
/*bottom: 0;*/
/*left: 0;*/
/*top: 0;*/
overflow: hidden;
width: 100%;
height: 100%;
/*pointer-events: none;*/
}
.cast-button-focus-inner {
/*position: absolute;*/
width: 56px;
height: 56px;
background: none;
border: 3px solid #2AB9E4;
margin: -3px 0 0 -3px;
border-radius: 50%;
/*pointer-events: none;*/
-webkit-box-shadow: #2AB9E4 0 0 50px;
}
.cast-button-focus-gradient {
/*position: absolute;*/
width: 100px;
height: 100px;
background: none;
margin: -25px 0 0 -25px;
border-radius: 50%;
-webkit-box-shadow: #2AB9E4 0 0 100px;
border: 4px solid transparent;
text-decoration: none;
text-shadow: #000000 5px 5px 15px;
}
/* Upnext */
.upnext_screen {
/*position: relative; */
height: 562px;
width: 999px;
background: none;
}
.upnext_screen .overlay_container {
/*position: absolute;*/
height: 225px;
width: 999px;
background-color: rgba(0, 0, 0, 0.9);
/*bottom: 0;*/
/*left: 0;*/
}
.upnext_screen .overlay_container .image_container {
/*position: absolute;*/
height: 225px;
width: 400px;
background: none;
/*bottom: 0;*/
/*left: 0;*/
}
.upnext_screen .overlay_container .image_container img {
width: 400px;
height: auto;
opacity: 0.7;
}
.upnext_screen .overlay_container .image_container .image_overlay {
/*position: absolute;*/
height: 50px;
width: 400px;
background-color: rgba(0, 0, 0, 0.85);
/*bottom: 0;*/
/*left: 0;*/
}
.upnext_screen .information {
/*position: absolute;*/
height: 225px;
width: 599px;
float: left;
background: none;
/*bottom: 0;*/
/*right: 0;*/
}
.upnext_screen .information .info_inner {
height: 190px;
width: 560px;
margin: 20px;
background: none;
}
.upnext_screen .information .info_inner h2,
.upnext_screen .information .info_inner h3,
.upnext_screen .information .info_inner p {
color: #FFFFFF;
font-weight: 100;
}
.upnext_screen .overlay_container .image_container .image_overlay p {
color: #FFFFFF;
text-align: center;
}
.upnext_screen .overlay_container .image_container .image_overlay span {
color: #1AACD6;
}
.play-blue-button {
padding: 10px 20px;
background-color: #1aacd6;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
border: medium none;
color: #FFFFFF;
text-align: center;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.play-blue-button:hover {
cursor: pointer;
background-color: #179ABF;
transition: all 0.2s ease-out 0s;
-webkit-transition: background-color 100ms linear;
-moz-transition: background-color 100ms linear;
-o-transition: background-color 100ms linear;
-ms-transition: background-color 100ms linear;
transition: background-color 100ms linear;
}
/* videojs able-disable */
.intro-play-in-videojs {
/*position: absolute;*/
background: none;
height: 100%;
width: 100%;
/*z-index: 100; */
/*pointer-events: none;*/
}
.videojs-focus-overlay{
/*position: absolute;*/
/*right: 0;*/
/*bottom: 0;*/
width: 240px;
height: 150px;
background: none;
/*border: 1300px solid rgba(0,0,0,0.9); */
/*border-radius: 50%;*/
/*border: 1300px solid rgba(0,0,0,0.9); */
margin-right: -900px;
margin-bottom: -900px;
margin: auto;
/*padding: 150px;*/
/*pointer-events: none;*/
}
.ptext {
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment