Showing source for: https://radioeram.com/
Duration: 0.200636s
Server: cloudflare
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radio Eram - رادÛ٠ارÙ
</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css'>
<style>
@import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:300,400,500,600,700,800,900|Barlow:300,400,500,600,700,800,900&display=swap");
$font-01: "Barlow",
sans-serif;
$font-02: "Barlow Condensed",
sans-serif;
$m-01: #FB8A8A;
$m-02: #FFEDC0;
$bg-01: #695681;
$bg-02: #36184F;
$bg-03: #32243E;
$g-01: linear-gradient(90deg, #FFEDC0 0%, #FF9D87 100%);
$g-02: linear-gradient(90deg, #8077EA 13.7%, #EB73FF 94.65%);
$cubic: cubic-bezier(0.4, 0.35, 0, 1.53);
$cubic2: cubic-bezier(0.18, 0.89, 0.32, 1.15);
$circleShadow: inset 5px 20px 40px rgba($bg-02, 0.25),
inset 5px 0px 5px rgba($bg-03, 0.3),
inset 5px 5px 20px rgba($bg-03, 0.25),
2px 2px 5px rgba(white, 0.2);
@mixin sm {
@media screen and (max-width: 799px) {
@content;
}
}
@mixin height {
@media screen and (max-height:660px) {
@content;
}
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
button,
a,
i,
input,
body {
margin: 0;
padding: 0;
list-style: none;
border: 0;
-webkit-tap-highlight-color: transparent;
text-decoration: none;
color: inherit;
}
h1:focus,
h2:focus,
h3:focus,
h4:focus,
h5:focus,
h6:focus,
p:focus,
ul:focus,
li:focus,
button:focus,
a:focus,
i:focus,
input:focus,
body:focus {
outline: 0;
}
body {
margin: 0;
padding: 0;
height: auto;
font-family: "Barlow", sans-serif;
background: linear-gradient(135deg,#00C4FF,#9D1BB2);
}
/*---------------Motion---------------------*/
.wrapper {
display: grid;
grid-template-columns: 1fr;
justify-content: center;
align-items: center;
height: 100vh;
overflow-x: hidden;
}
.wrapper .container {
margin: 0 auto;
transition: all 0.4s ease;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.wrapper .container .scene {
position: absolute;
width: 100vw;
height: 100vh;
vertical-align: middle;
}
.wrapper .container .one,
.wrapper .container .two,
.wrapper .container .three,
.wrapper .container .circle,
.wrapper .container .radio {
width: 60%;
height: 60%;
top: 20% !important;
left: 20% !important;
min-width: 400px;
min-height: 400px;
}
.wrapper .container .one .content,
.wrapper .container .two .content,
.wrapper .container .three .content,
.wrapper .container .circle .content,
.wrapper .container .radio .content {
width: 600px;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: content 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;
}
@keyframes content {
0% {
width: 0;
}
}
.wrapper .container .one .content .piece,
.wrapper .container .two .content .piece,
.wrapper .container .three .content .piece,
.wrapper .container .circle .content .piece,
.wrapper .container .radio .content .piece {
width: 200px;
height: 80px;
display: flex;
position: absolute;
border-radius: 80px;
z-index: 1;
animation: pieceLeft 8s cubic-bezier(1, 0.06, 0.25, 1) infinite both;
}
@keyframes pieceLeft {
50% {
left: 80%;
width: 10%;
}
}
@keyframes pieceRight {
50% {
right: 80%;
width: 10%;
}
}
@media screen and (max-width: 799px) {
.wrapper .container .one,
.wrapper .container .two,
.wrapper .container .three,
.wrapper .container .circle,
.wrapper .container .radio {
width: 90%;
height: 90%;
top: 5% !important;
left: 5% !important;
min-width: 280px;
min-height: 280px;
}
}
@media screen and (max-height: 660px) {
.wrapper .container .one,
.wrapper .container .two,
.wrapper .container .three,
.wrapper .container .circle,
.wrapper .container .radio {
min-width: 280px;
min-height: 280px;
width: 60%;
height: 60%;
top: 20% !important;
left: 20% !important;
}
}
.wrapper .container .text {
width: 60%;
height: 40%;
min-width: 400px;
min-height: 500px;
position: absolute;
margin: 40px 0;
animation: text 0.6s 1.8s ease backwards;
}
@keyframes text {
0% {
opacity: 0;
transform: translateY(40px);
}
}
@media screen and (max-width: 799px) {
.wrapper .container .text {
min-height: 400px;
height: 80%;
}
}
.wrapper .container .text article {
width: 400px;
position: absolute;
bottom: 0;
z-index: 4;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width: 799px) {
.wrapper .container .text article {
width: 100%;
}
}
.wrapper .container .text article p {
color: white;
font-size: 18px;
letter-spacing: 0.6px;
margin-bottom: 40px;
text-shadow: 6px 6px 10px #32243E;
}
.wrapper .container .text article button {
height: 40px;
padding: 0 30px;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 15px 20px rgba(54, 24, 79, 0.5);
z-index: 3;
color: #695681;
background-color: white;
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
transition: all 0.3s ease;
}
.wrapper .container .text article button:hover {
box-shadow: 0px 10px 10px -10px rgba(54, 24, 79, 0.5);
transform: translateY(5px);
background: #FB8A8A;
color: white;
}
.wrapper .container .radio {
font-size: 150px;
font-weight: 700;
letter-spacing: 4px;
color: white;
display: flex !important;
justify-content: center;
align-items: center;
position: absolute;
z-index: 2;
animation: anime404 0.6s cubic-bezier(0.3, 0.8, 1, 1.05) both;
animation-delay: 1.2s;
}
@media screen and (max-width: 799px) {
.wrapper .container .radio {
font-size: 100px;
}
}
@keyframes anime404 {
0% {
opacity: 0;
transform: scale(10) skew(20deg, 20deg);
}
}
.wrapper .container .radio:nth-of-type(2) {
color: #36184F;
z-index: 1;
animation-delay: 1s;
filter: blur(10px);
opacity: 0.8;
}
.wrapper .container .circle {
position: absolute;
}
.wrapper .container .circle:before {
content: "";
position: absolute;
width: 800px;
height: 800px;
background-color: rgba(54, 24, 79, 0.2);
border-radius: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: inset 5px 20px 40px rgba(54, 24, 79, 0.25), inset 5px 0px 5px rgba(50, 36, 62, 0.3), inset 5px 5px 20px rgba(50, 36, 62, 0.25), 2px 2px 5px rgba(255, 255, 255, 0.2);
animation: circle 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;
}
@keyframes circle {
0% {
width: 0;
height: 0;
}
}
@media screen and (max-width: 799px) {
.wrapper .container .circle:before {
width: 400px;
height: 400px;
}
}
.wrapper .container .one .content:before {
content: "";
position: absolute;
width: 600px;
height: 600px;
background-color: rgba(54, 24, 79, 0.3);
border-radius: 100%;
box-shadow: inset 5px 20px 40px rgba(54, 24, 79, 0.25), inset 5px 0px 5px rgba(50, 36, 62, 0.3), inset 5px 5px 20px rgba(50, 36, 62, 0.25), 2px 2px 5px rgba(255, 255, 255, 0.2);
animation: circle 0.8s 0.4s cubic-bezier(1, 0.06, 0.25, 1) backwards;
}
@media screen and (max-width: 799px) {
.wrapper .container .one .content:before {
width: 300px;
height: 300px;
}
}
.wrapper .container .one .content .piece {
background: linear-gradient(90deg, #8077EA 13.7%, #EB73FF 94.65%);
}
.wrapper .container .one .content .piece:nth-child(1) {
right: 15%;
top: 18%;
height: 30px;
width: 120px;
animation-delay: 0.5s;
animation-name: pieceRight;
}
.wrapper .container .one .content .piece:nth-child(2) {
left: 15%;
top: 45%;
width: 150px;
height: 50px;
animation-delay: 1s;
animation-name: pieceLeft;
}
.wrapper .container .one .content .piece:nth-child(3) {
left: 10%;
top: 75%;
height: 20px;
width: 70px;
animation-delay: 1.5s;
animation-name: pieceLeft;
}
.wrapper .container .two .content .piece {
background: linear-gradient(90deg, #FFEDC0 0%, #FF9D87 100%);
}
.wrapper .container .two .content .piece:nth-child(1) {
left: 0%;
top: 25%;
height: 40px;
width: 120px;
animation-delay: 2s;
animation-name: pieceLeft;
}
.wrapper .container .two .content .piece:nth-child(2) {
right: 15%;
top: 35%;
width: 180px;
height: 50px;
animation-delay: 2.5s;
animation-name: pieceRight;
}
.wrapper .container .two .content .piece:nth-child(3) {
right: 10%;
top: 80%;
height: 20px;
width: 160px;
animation-delay: 3s;
animation-name: pieceRight;
}
.wrapper .container .three .content .piece {
background: #FB8A8A;
}
.wrapper .container .three .content .piece:nth-child(1) {
left: 25%;
top: 35%;
height: 20px;
width: 80px;
animation-name: pieceLeft;
animation-delay: 3.5s;
}
.wrapper .container .three .content .piece:nth-child(2) {
right: 10%;
top: 55%;
width: 140px;
height: 40px;
animation-name: pieceRight;
animation-delay: 4s;
}
.wrapper .container .three .content .piece:nth-child(3) {
left: 40%;
top: 68%;
height: 20px;
width: 80px;
animation-name: pieceLeft;
animation-delay: 4.5s;
}
/*-------------- AUDIO PLAYER --------------*/
.audio-player {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.no-flexbox .audio-player {
display: none;
}
.flex-wrap {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.flex-item {}
.jp-controls.flex-item {
flex-basis: 150px;
}
.jp-progress-container.flex-item {
flex-basis: 350px;
flex-grow: 2;
flex-shrink: 2;
}
.jp-now-playing.flex-item {
flex-basis: 145px;
}
.jp-toggles.flex-item {
flex-basis: 130px;
}
.jp-volume-controls.flex-item {
flex-basis: 155px;
}
.jp-audio,
.jp-audio-stream,
.jp-video {
background: rgba(0, 0, 0, 0.8);
padding: 15px;
position: relative;
}
/*Controls*/
.jp-playlist {
display: none;
}
.jp-interface .jp-controls button,
.jp-interface .jp-toggles button,
.jp-interface .jp-volume-controls button {
background: none;
border: none;
outline: none;
color: #7b7c8b;
line-height: 24px;
font-weight: 600;
transition-delay: 0;
-webkit-transition-property: all;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease-in-out;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition: all 0.2s linear;
font-size: 20px;
padding: 0 5px;
}
.jp-interface .jp-controls .jp-play i {
font-size: 23px;
color: #FFF;
}
.jp-interface .jp-controls .jp-play {
border: solid 3px #FFF;
border-radius: 50%;
width: 52px;
height: 52px;
margin: 0 10px;
}
.jp-interface .jp-controls .jp-play i {
padding-left: 5px;
padding-top: 5px;
}
.jp-audio.jp-state-playing .jp-play i {
padding-left: 0px;
}
.jp-audio.jp-state-playing .jp-play i:before {
content: " 04c" !important;
}
/*Progress bars*/
.jp-progress-container,
.jp-volume-bar-container {
height: 30px;
padding: 10px;
}
.jp-progress,
.jp-seek-bar,
.jp-play-bar,
.jp-volume-bar,
.jp-volume-bar-value {
height: 8px;
border-radius: 1px;
}
.jp-progress {
margin: 0 50px;
background-color: #2b2b2b;
border-radius: 5px;
}
.jp-seek-bar,
.jp-volume-bar {
cursor: pointer;
background-color: #2b2b2b;
border-radius: 5px;
}
.jp-play-bar {
float: left;
position: relative;
background-color: #00c85f;
border-radius: 5px;
overflow: visible!important;
}
.jp-volume-bar-value {
float: left;
position: relative;
background-color: #aaaaaa;
}
.jp-progress .bullet,
.jp-volume-bar .bullet {
position: absolute;
content: "";
top: -5px;
right: -7px;
height: 18px;
width: 18px;
background: #ffffff;
border-radius: 50%;
}
.jp-time-holder {
position: relative;
top: 0;
color: #979797;
font-size: 12px;
}
.jp-time-holder .jp-current-time {
position: absolute;
left: 0;
top: -3px;
}
.jp-time-holder .jp-duration {
position: absolute;
right: 0;
top: -3px;
}
/* Track & Artist */
.jp-now-playing {
padding: 0 10px;
}
.jp-track-name {
color: #c9c9c9;
font-size: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100px;
}
.jp-artist-name {
color: #6d6d6d;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 98px;
}
/* Toggles */
.jp-toggles button {
margin: 0 3px;
}
.jp-toggles button:hover {
color: #FFF;
}
.jp-state-looped .jp-toggles .jp-repeat,
.jp-state-shuffled .jp-toggles .jp-shuffle,
.jp-interface .jp-toggles .playlist-is-visible.jp-show-playlist {
color: #00c85f;
}
/* Volume Controls */
.jp-volume-controls button {
float: left;
}
.jp-volume-controls .jp-volume-bar {
margin-left: 40px;
margin-top: 8px;
}
.jp-state-muted .jp-mute i:before {
content: " 026" !important;
}
.jp-volume-bar,
.jp-volume-bar-value {
border-radius: 5px;
}
.jp-state-no-volume .jp-volume-controls {
display: none;
}
/* Playlist */
.jp-playlist {
position: absolute;
right: 65px;
bottom: 100%;
background: rgba(0, 0, 0, 0.8);
padding: 20px 25px;
width: 400px;
}
.jp-playlist ul {
padding: 0;
margin: 0;
max-height: 200px;
overflow: auto;
}
.jp-playlist li {
list-style: none;
}
.jp-playlist li a {
color: #c9c9c9;
display: block;
padding: 10px 0;
outline: none;
border-bottom: 1px solid #1F1F1F;
}
.jp-playlist li:last-child a {
border-bottom: 0;
}
.jp-playlist li a:hover,
.jp-playlist li a:focus,
.jp-playlist li a:active {
color: #00c85f;
text-decoration: none;
}
.jp-playlist li a span {
color: #6d6d6d;
}
/* ==================== Media Query ==================== */
@media (max-width:992px) {
.jp-now-playing {
display: none;
}
}
@media (max-width:767px) {
.jp-volume-bar,
.jp-volume-bar .bullet,
.jp-time-holder {
display: none!important;
}
.jp-progress-container.flex-item {
flex-basis: 140px;
padding: 12px 15px;
}
.jp-progress .bullet {
right: -10px;
}
.jp-volume-controls.flex-item {
flex-basis: 33px;
}
.jp-progress {
margin: 0;
}
.jp-interface .jp-controls .jp-play {
margin: 0 3px;
}
.jp-interface .jp-controls .jp-play i,
.jp-interface .jp-controls .jp-previous i,
.jp-interface .jp-controls .jp-next i {
font-size: 16px;
}
.jp-interface .jp-controls .jp-play {
width: 42px;
height: 42px;
}
.jp-interface .jp-controls .jp-play i {
padding-left: 3px;
padding-top: 0;
}
.jp-state-playing .jp-interface .jp-controls .jp-play i {
padding-left: 0;
}
.jp-controls.flex-item {
flex-basis: 100px;
}
}
@media (max-width:480px) {
.jp-toggles,
.jp-playlist {
display: none!important;
}
}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-G96MW2DRC9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-G96MW2DRC9');
</script>
</head>
<body>
<section class="wrapper">
<div class="container">
<div id="scene" class="scene" data-hover-only="false">
<div class="circle" data-depth="1.2"></div>
<div class="one" data-depth="0.9">
<div class="content">
<span class="piece"></span>
<span class="piece"></span>
<span class="piece"></span>
</div>
</div>
<div class="two" data-depth="0.60">
<div class="content">
<span class="piece"></span>
<span class="piece"></span>
<span class="piece"></span>
</div>
</div>
<div class="three" data-depth="0.40">
<div class="content">
<span class="piece"></span>
<span class="piece"></span>
<span class="piece"></span>
</div>
</div>
<p class="radio" data-depth="0.50">Coming soon</p>
<p class="radio" data-depth="0.10">Coming soon</p>
</div>
<div class="text">
<article>
</article>
</div>
</div>
</section>
<!-- ============= FLEXBOX AUDIO PLAYER ============== -->
<div class="audio-player">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<!-- Audio Player -->
<!-- Visual Container -->
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-playlist">
<!-- Flexbox -->
<div class="jp-gui jp-interface flex-wrap">
<!-- Play / Pause... Controls -->
<div class="jp-controls flex-item">
<button class="jp-play" role="button" tabindex="0"><i class="fa fa-play"></i></button>
</div>
<!-- End Flex Item -->
<!-- Progress bar -->
<div class="jp-progress-container flex-item">
<!-- Progress Time -->
<div class="jp-time-holder">
<span class="jp-current-time" role="timer" aria-label="time"> </span>
<span class="jp-duration" role="timer" aria-label="duration"> </span>
</div>
<!-- End Time holder -->
<!-- Progress bar -->
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar">
<div class="bullet">
</div>
</div>
</div>
</div>
<!-- End Progress bar -->
</div>
<!-- End Flex Item -->
<!-- Album & Artist Info -->
<div class="jp-now-playing flex-item">
<div class="jp-track-name"></div>
<div class="jp-artist-name"></div>
</div>
<!-- End Flex Item -->
<!-- Volume controls -->
<div class="jp-volume-controls flex-item">
<button class="jp-mute" role="button" tabindex="0"><i class="fa fa-volume-up"></i></button>
<!-- Volume Bar -->
<div class="jp-volume-bar">
<div class="jp-volume-bar-value">
<div class="bullet">
</div>
</div>
</div>
<!-- End Volume Bar -->
</div>
<!-- End Flex Item -->
</div>
<!-- End Flexbox -->
<!-- Playlist -->
<div id="playlist-wrap" class="jp-playlist">
<ul>
<li> </li>
</ul>
</div>
<!-- End Playlist -->
<!-- No Flash / No HTML5 Warning -->
<div class="jp-no-solution">
<span>Update Required</span> To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
<!-- Player Type Playlist -->
</div>
<!-- End Contaner -->
</div>
<!-- End Fixed Audio Player -->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/add-on/jplayer.playlist.min.js'></script>
<script>
$(document).ready(function() {
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [{
title: "Radio Yek",
artist: "...رادÛ٠ارÙ
...",
mp3: "https://audio.radioeram.com",
}], {
swfPath: "../../dist/jplayer",
supplied: "oga, mp3",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true
}); // end jplayer initiate
/* ======== Other Audio Player Functions ======== */
$("#jquery_jplayer_1").on(
$.jPlayer.event.ready + ' ' + $.jPlayer.event.play,
function(event) {
/* === ENABLE PLAYLIST ==== */
var current = myPlaylist.current;
var playlist = myPlaylist.playlist;
$.each(playlist, function(index, obj) {
if (index == current) {
$(".jp-now-playing").html("<div class='jp-track-name'>" + obj.title + "</div> <div class='jp-artist-name'>" + obj.artist + "</div>");
}
});
/* === VOLUME DRAGGING ==== */
$('.jp-volume-bar').mousedown(function() {
var parentOffset = $(this).offset(),
width = $(this).width();
$(window).mousemove(function(e) {
var x = e.pageX - parentOffset.left,
volume = x / width
if (volume > 1) {
$("#jquery_jplayer_1").jPlayer("volume", 1);
} else if (volume <= 0) {
$("#jquery_jplayer_1").jPlayer("mute");
} else {
$("#jquery_jplayer_1").jPlayer("volume", volume);
$("#jquery_jplayer_1").jPlayer("unmute");
}
});
return false;
})
.mouseup(function() {
$(window).unbind("mousemove");
});
/* === ENABLE DRAGGING ==== */
var timeDrag = false; /* Drag status */
$('.jp-play-bar').mousedown(function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).mouseup(function(e) {
if (timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).mousemove(function(e) {
if (timeDrag) {
updatebar(e.pageX);
}
});
//update Progress Bar control
var updatebar = function(x) {
var progress = $('.jp-progress');
//var maxduration = myPlaylist.duration; //audio duration
var position = x - progress.offset().left; //Click pos
var percentage = 100 * position / progress.width();
//Check within range
if (percentage > 100) {
percentage = 100;
}
if (percentage < 0) {
percentage = 0;
}
$("#jquery_jplayer_1").jPlayer("playHead", percentage);
//Update progress bar
$('.jp-play-bar').css('width', percentage + '%');
};
/* === Playlist Functions ==== */
$('#playlist-toggle').on('click', function() {
$('#playlist-wrap').stop().fadeToggle();
$(this).toggleClass('playlist-is-visible');
});
}); // end jplayer event ready
}); // end document ready
// Parallax Code
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
// Parallax Code
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
</body>
</html>