Skip to content

Instantly share code, notes, and snippets.

@justuseapen

justuseapen/compiled.html

Last active March 31, 2016 19:29
Show Gist options
  • Save justuseapen/8800dff9147ebf4442e2 to your computer and use it in GitHub Desktop.
Save justuseapen/8800dff9147ebf4442e2 to your computer and use it in GitHub Desktop.
Download ZIP
Player
Raw
compiled.html
<head>
<title>...</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<link href="/assets/auth.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/courses.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/home.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/lessons.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/auth.js?body=1"></script>
<script src="/assets/courses.js?body=1"></script>
<script src="/assets/home.js?body=1"></script>
<script src="/assets/lessons.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="...+lmqrghjrnKE0=" name="csrf-token" />
</head>
<body>
<p class="notice"></p>
<p class="alert"></p>
<div class="current_lesson">
<div class="lesson_title">
<a class="backButton" href="/courses/1">Back</a>
<h2 class="lesson_name">Lesson 5</h2>
</div>
<div class="player">
<audio id="lecture" preload="auto" src="/assets/lesson-5.mp3"></audio>
<div class="play_border" id="button_border")>
<div class="play_button" id="playPauseIcon">
</div>
</div>
<p><span class="progress_timer"></span></p>
<div class="audio_player_progress_bar">
<progress id="seekbar" value="0" max="1" style="width:100%;"></progress>
</div>
<div class="controls">
<div class="restart"> </div>
<div class="seekForward"> </div>
<div class="seekForward"> </div>
</div>
</div>
<footer>
<div class="bwd button">
<a data-method="post" href="/lessons/backward" rel="nofollow">Previous Lesson</a>
</div>
<div class="fwd button">
<a data-method="post" href="/lessons/forward" rel="nofollow">Next Lesson</a>
</div>
</footer>
</body>
</html>
Raw
player.css
/*
Place all the styles related to the matching controller here.
They will automatically be included in application.css.
*/
footer{
position: fixed;
bottom:0;
width:100%;
height:7%;
}
a{
color: black;
}
.backButton{
float:left;
margin-left: 21px;
}
div.bwd{
margin:0;
float: left;
width: 50%;
padding: 0;
padding-top: 11px;
height: 100%;
vertical-align: middle;
background-color: #f9d55a;
border: none;
}
div.fwd{
margin:0;
float: right;
width: 50%;
padding: 0;
padding-top: 11px;
height: 100%;
vertical-align: middle;
background-color: #f9d55a;
border: none;
}
.lesson_name{
position: absolute;
left: 0;
right: 0;
margin: auto;
display: block;
}
.current_lesson{
height: 100%;
width: 100%;
text-align: center;
position: absolute;
margin: 0;
background-color:white;
}
.lesson_title{
position: fixed;
margin: auto;
top: 0;
font-size: 1em;
width: 100%;
background-color: #f9d55a;
padding-top: 23px;
padding-bottom: 23px;
color:black;
}
.player{
height: 80%;
margin-top: auto;
margin-bottom: auto;
}
#seekbar{
height: 23px;
color:rgb(26, 149, 26);
}
.play_border {
position: relative;
margin:auto;
top: 25%;
border: 2px solid rgba(255, 215, 87, 0.7);
background-color: #dcaa32;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
width: 175px;
height: 175px;
-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
cursor: pointer;
}
.pause_border {
position: relative;
margin:auto;
top: 25%;
border: 2px solid rgba(255, 215, 87, 0.7);
background-color: #dcaa32;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
width: 175px;
height: 175px;
-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
cursor: pointer;
}
.play_button {
position: relative;
top: 33%;
left: 34%;
width: 0;
height: 0;
border-top: 33px solid transparent;
border-bottom: 38px solid transparent;
border-left: 73px solid rgba(0,0,0,0.8);
}
.pause_button{
position: relative;
background-color: rgba(0,0,0,0.8);
width: 28px;
height: 77px;
box-shadow: 42px 0px 0px 0px rgba(0,0,0,0.8);
vertical-align: middle;
margin-left: 53px;
margin-top: 50px;
}
.bottom_bar{
position: absolute;
bottom: 0;
width: 100%;
height:49px;
text-align: center;
background-color: #F9F984;
border-top: solid 1px #e7d518;
}
.bottom_bar_content{
font-size: 12px;
color:black;
height: 100%;
}
.seekForward{
position: relative;
top: 27%;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 20px solid rgba(0,0,0,0.8);
float: right;
}
.restart{
position: relative;
top: 27%;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 20px solid rgba(0,0,0,0.8);
-webkit-transform: rotate(180deg);
box-shadow: 6px 0px 0px 0px rgba(0,0,0,0.8);
float: left;
}
.controls{
position: relative;
width: auto;
top: 33%;
padding-left: 14%;
padding-right: 14%;
}
.player{
position: absolute;
width: 100%;
}
Raw
player.html.erb
<div class="current_lesson">
<div class="lesson_title">
<%= link_to 'Back',course_path(@course), class:'backButton' %>
<h2 class="lesson_name"><%= @current_lesson.title %></h2>
</div>
<div class="player">
<%= audio_tag(@current_lesson.url.gsub('assets/',''), id:"lecture", preload:"auto") %>
<div class="play_border" id="button_border")>
<div class="play_button" id="playPauseIcon">
</div>
</div>
<p><span class="progress_timer"></span></p>
<div class="audio_player_progress_bar">
<progress id="seekbar" value="0" max="1" style="width:100%;"></progress>
</div>
<div class="controls">
<div class="restart"> </div>
<div class="seekForward"> </div>
<div class="seekForward"> </div>
</div>
</div>
<footer>
<div class="bwd button">
<%=link_to "Previous Lesson",backward_path, method: :post%>
</div>
<div class="fwd button">
<%=link_to "Next Lesson",forward_path, method: :post %>
</div>
</footer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment