Difference between revisions of "Team:Penn/Overview"

Line 62: Line 62:
 
   #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;}
 
   #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;}
 
}
 
}
−
</style>
+
@import url(http://c.boylett.uk/fonts/font-awesome/font-awesome.min.css);
 +
body { background: url(http://c.boylett.uk/images/wallpapers/006.jpg) }
 +
.music-player { position: absolute !important; top: 50%; left: 50%; margin: -207px 0 0 -207px }
  
−
<div id="parallax-world-of-ugg">
+
.music-player
−
    
+
{
−
<section>
+
   position: relative;
−
   <div class="title">
+
  width: 415px;
−
   <h1>OVERVIEW</h1>
+
   height: 415px;
−
</div>
+
   overflow: hidden;
−
   <div class="block">
+
  background: #252C36;
−
      <p>When the New York fashion community notices your brand, the world soon follows. The widespread love for UGG extended to Europe in the mid-2000's along with the stylish casual movement and demand for premium casual fashion. UGG boots and shoes were now seen walking the streets of London, Paris and Amsterdam with regularity. To meet the rising demand from new fans, UGG opened flagship stores in the UK and an additional location in Moscow. As the love spread farther East, concept stores were opened in Beijing, Shanghai and Tokyo. UGG Australia is now an international brand that is loved by all. This love is a result of a magical combination of the amazing functional benefits of sheepskin and the heightened emotional feeling you get when you slip them on your feet. In short, you just feel better all over when you wear UGG boots, slippers, and shoes.</p>
+
   border-radius: 50%;
−
    <p class="margin-top-10">In 2011, UGG will go back to its roots and focus on bringing the active men that brought the brand to life back with new styles allowing them to love the brand again as well. Partnering with Super Bowl champion and NFL MVP Tom Brady, UGG will invite even more men to feel the love the rest of the world knows so well. UGG will also step into the world of high fashion with UGG Collection. The UGG Collection fuses the timeless craft of Italian shoemaking with the reliable magic of sheepskin, bringing the luxurious feel of UGG to high end fashion. As the love for UGG continues to spread across the world, we have continued to offer new and unexpected ways to experience the brand. The UGG journey continues on and the love for UGG continues to spread.</p>
+
  box-shadow: 0 1px 13px rgba(0, 0, 0, .55);
−
   </div>
+
   user-select: none;
−
</section>
+
}
  
 +
.music-player > .album
 +
{
 +
  position: absolute;
 +
  top: -25%;
 +
  width: 100%;
 +
  height: auto;
 +
  min-height: 415px;
 +
}
  
 +
.music-player > .dash
 +
{
 +
  position: absolute;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  height: 300px;
 +
  background: url(http://c.boylett.uk/generic/image_png_00001.png) center bottom repeat-x;
 +
}
  
−
<style type="text/css">
+
.music-player > .dash > a
−
body { margin: 0;}
+
{
−
header {
+
  display: block;
−
   padding: .5vw;
+
  position: absolute;
−
   font-size: 0;
+
   top: 50px;
−
   display: -ms-flexbox;
+
   left: 12px;
−
   -ms-flex-wrap: wrap;
+
   width: 24px;
−
   -ms-flex-direction: column;
+
   height: 24px;
−
   -webkit-flex-flow: row wrap;  
+
  line-height: 24px;
−
   flex-flow: row wrap;  
+
   vertical-align: middle;
−
   display: -webkit-box;
+
   font-size: 22px;
−
   display: flex;
+
   text-decoration: none;
 +
   color: #FFF;
 +
  text-shadow: 0 1px 5px #000;
 +
   transition: all .3s;
 +
  opacity: .75;
 
}
 
}
−
header div {  
+
 
−
  -webkit-box-flex: auto;
+
.music-player > .dash > a[href="#share"] { left: auto; right: 55px; }
−
   -ms-flex: auto;
+
.music-player > .dash > a[href="#love"] { left: auto; right: 18px; }
−
   flex: auto;  
+
.music-player > .dash > a:hover { opacity: 1 }
−
   width: 200px;  
+
.music-player > .dash > a.fa-volume-off + .volume-level > em { display: none }
−
   margin: .5vw;  
+
 
 +
.music-player > .dash > .volume-level
 +
{
 +
  position: absolute;
 +
   top: 57px;
 +
  left: 45px;
 +
  width: 40px;
 +
  height: 6px;
 +
  padding: 1px;
 +
  overflow: hidden;
 +
  border: 1px solid #FFF;
 +
  border-radius: 3px;
 +
  box-shadow: 0 1px 5px #000, inset 0 1px 5px rgba(0, 0, 0, .5);
 +
   cursor: pointer;
 +
   transition: all .3s;
 +
   opacity: .75;
 
}
 
}
−
header div img {  
+
 
−
   width: 100%;  
+
.music-player > .dash > .volume-level > em
−
   height: auto;  
+
{
 +
   display: block;
 +
  height: 6px;
 +
  max-width: 100%;
 +
   background: #FFF;
 +
  box-shadow: 0 1px 5px #000;
 +
  border-radius: 1.5px;
 
}
 
}
−
@media screen and (max-width: 400px) {
+
 
−
   header div { margin: 0; }
+
.music-player > .dash > .volume-level:hover { opacity: 1 }
−
   header { padding: 0; }
+
 
−
    
+
.music-player > .dash > .seeker
 +
{
 +
  position: absolute;
 +
  bottom: 7px;
 +
  left: 50%;
 +
  width: 400px;
 +
   height: 203px;
 +
   overflow: hidden;
 +
   margin: 0 0 0 -200px;
 
}
 
}
 +
 +
.music-player > .dash > .seeker > .wheel
 +
{
 +
  position: absolute;
 +
  bottom: 0;
 +
  width: 364px;
 +
  height: 364px;
 +
  border: 18px solid #201B2B;
 +
  border-radius: 100%;
 +
}
 +
 +
.music-player > .dash > .seeker > .wheel > .progress
 +
{
 +
  position: absolute;
 +
  bottom: -14px;
 +
  left: 50%;
 +
  width: 392px;
 +
  height: 392px;
 +
  overflow: hidden;
 +
  margin: 0 0 0 -196px;
 +
  border-radius: 100%;
 +
  transform-origin: 50% 50%;
 +
  background: url(http://c.boylett.co.uk/generic/image_png_00003.png);
 +
  transform: rotate(145deg);
 +
}
 +
 +
.music-player > .dash > a[href="#seek"]
 +
{
 +
  display: block;
 +
  position: absolute;
 +
  top: -97px;
 +
  left: 50%;
 +
  width: 10px;
 +
  height: 10px;
 +
  margin: -9px 0 0 -9px;
 +
  background: #3A304D;
 +
  border: 4px solid #FFF;
 +
  border-radius: 100%;
 +
  opacity: 1;
 +
  transition: none;
 +
  transform: rotate(145deg);
 +
  transform-origin: 9px 200px;
 +
}
 +
 +
.music-player > .dash > .controls
 +
{
 +
  position: absolute;
 +
  top: 85px;
 +
  left: 50%;
 +
  width: 180px;
 +
  height: 55px;
 +
  margin: 0 0 0 -90px;
 +
  background: #201F22;
 +
  border-radius: 23px;
 +
}
 +
 +
.music-player > .dash > .controls:before
 +
{
 +
  content: "";
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  width: 124px;
 +
  height: 88px;
 +
  margin: -44px 0 0 -62px;
 +
  background: #201F22;
 +
  border-radius: 125%;
 +
}
 +
 +
.music-player > .dash > .controls > a[href="#play"]
 +
{
 +
  content: "";
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  width: 88px;
 +
  height: 58px;
 +
  line-height: 58px;
 +
  vertical-align: middle;
 +
  text-align: center;
 +
  text-decoration: none;
 +
  font-size: 32px;
 +
  color: #FFF;
 +
  margin: -29px 0 0 -44px;
 +
  background: #F5696C;
 +
  border-radius: 29px;
 +
  transition: all .3s;
 +
}
 +
 +
.music-player > .dash > .controls > a[href="#play"]:hover
 +
{
 +
  background: #ED484B;
 +
  box-shadow: 0 0 5px #F5696C;
 +
  text-shadow: 0 0 5px #FFF;
 +
}
 +
 +
.music-player > .dash > .controls > a[href="#back"], .music-player > .dash > .controls > a[href="#forward"]
 +
{
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 5px;
 +
  width: 35px;
 +
  height: 30px;
 +
  margin: -15px 0 0;
 +
  line-height: 30px;
 +
  vertical-align: middle;
 +
  text-align: center;
 +
  text-decoration: none;
 +
  font-size: 22px;
 +
  color: #BDBCBD;
 +
  transition: all .3s;
 +
}
 +
 +
.music-player > .dash > .controls > a[href="#forward"] { left: auto; right: 5px }
 +
 +
.music-player > .dash > .controls > a[href="#back"]:hover, .music-player > .dash > .controls > a[href="#forward"]:hover
 +
{
 +
  color: #FFF;
 +
  text-shadow: 0 0 5px #BDBCBD;
 +
}
 +
 +
.music-player > .dash > .info
 +
{
 +
  position: absolute;
 +
  bottom: 55px;
 +
  left: 50%;
 +
  width: 180px;
 +
  margin: 0 0 0 -90px;
 +
  text-align: center;
 +
  font-family: Segoe UI, sans-serif;
 +
  font-size: 12px;
 +
  color: #FFF;
 +
  cursor: default;
 +
}
 +
 +
.music-player > .dash > .info > i
 +
{
 +
  display: inline-block;
 +
  padding: 0 10px;
 +
  height: 20px;
 +
  line-height: 20px;
 +
  vertical-align: middle;
 +
  font-size: 13px;
 +
  font-style: normal;
 +
  background: #201F22;
 +
  border-radius: 10px;
 +
}
 +
 +
.music-player > .dash > .info > label
 +
{
 +
  display: block;
 +
  margin: 18px 0 5px;
 +
}
 +
 +
.music-player > .dash > .info > small { font-size: 10px }
 
</style>
 
</style>
−
<header>
 
−
<div><a href="https://2015.igem.org/Team:Penn/Sender"><img src="https://static.igem.org/mediawiki/2015/8/88/2015SENDERLINK.png" alt></a></div>
 
−
<div><a href="https://2015.igem.org/Team:Penn/Receiver"><img src="https://static.igem.org/mediawiki/2015/1/1f/2015RECEIVERLINK.png" alt></a></div>
 
−
<div><a href="https://2015.igem.org/Team:Penn/Communication"><img src="https://static.igem.org/mediawiki/2015/8/83/COMMEDIT.png" alt></a></div>
 
−
<div><a href="https://2015.igem.org/Team:Penn/Educational_Toolbox"><img src="https://static.igem.org/mediawiki/2015/6/63/COMMEDIhumanp.png" alt></a></div>
 
  
−
  <!-- images placed inside block elements to deal with a Firefox rendering bug affecting  scaled flexbox images -->
+
<script type="text/javascript">
−
</header>
+
var Player =
 +
{
 +
  isMuted: false,
 +
  isPlaying: false,
 
    
 
    
 +
  duration: 0,
 +
  current: 0,
 +
 
 +
  mute: function()
 +
  {
 +
    this.isMuted = this.isMuted ? false : true;
 +
    if(window.console) console.log(this.isMuted ? 'Muted' : 'Unmuted');
 +
   
 +
    return this
 +
  },
 +
 
 +
  play: function()
 +
  {
 +
    this.isPlaying = this.isPlaying ? false : true;
 +
    if(window.console) console.log(this.isPlaying ? 'Playing' : 'Paused');
 +
   
 +
    return this
 +
  },
 +
 
 +
  skip: function(d)
 +
  {
 +
    if(window.console) console.log('Skipping', d == 'l' ? 'Backwards' : 'Forwards')
 +
   
 +
    this.current = 0;
 +
   
 +
    return this
 +
  },
 +
 
 +
  vol: function(v)
 +
  {
 +
    if(window.console) console.log('Set volume to:', v, '%');
 +
   
 +
    return this
 +
  },
 +
 
 +
  setDuration: function(s)
 +
  {
 +
    this.duration = s;
 +
   
 +
    var m = 0;
 +
    while(s > 60) { m ++; s -= 60 }
 +
    while(String(s).length == 1) s = '0' + s;
 +
   
 +
    $('.music-player > .dash > .info > i > [name="duration"]').html(m + ':' + s);
 +
   
 +
    return this
 +
  },
 +
 
 +
  setCurrent: function(s)
 +
  {
 +
    this.current = s;
 +
   
 +
    var m = 0, pct = this.current / this.duration;
 +
    while(s > 60) { m ++; s -= 60 }
 +
    while(String(s).length == 1) s = '0' + s;
 +
   
 +
    $('.music-player > .dash > .info > i > [name="current"]').html(m + ':' + s);
 +
   
 +
    $('.music-player > .dash > a[href="#seek"]:not(:active)').each(function()
 +
    {
 +
      var rotate = 'rotate(-' + ((pct * 180) + 90) + 'deg)';
 +
     
 +
      $(this).add('.music-player > .dash > .seeker > .wheel > .progress').css(
 +
      {
 +
        '-webkit-transform': rotate,
 +
        '-moz-transform': rotate,
 +
        '-ms-transform': rotate,
 +
        '-o-transform': rotate,
 +
        'transform' : rotate
 +
      });
 +
    });
 +
   
 +
    return this
 +
  },
 +
 
 +
  playing: function()
 +
  {
 +
    if(!this.isPlaying)
 +
      return this;
 +
   
 +
    if(this.current > (this.duration - 1))
 +
      this.skip('r');
 +
    else
 +
      this.setCurrent(this.current + 1);
 +
   
 +
    return this
 +
  }
 +
};
 +
 +
$(function()
 +
{
 +
  setInterval(function(){ Player.playing() }, 1000);
 +
  Player.setDuration(230);
 +
  Player.setCurrent(180);
 +
 
 +
  Player.play();
 +
 
 +
  $('.music-player > .dash > a[href="#mute"]').click(function()
 +
  {
 +
    $(this).toggleClass('fa-volume-up fa-volume-off');
 +
    Player.mute();
 +
   
 +
    return !1;
 +
  });
 +
 
 +
  $('.music-player > .dash > .controls > a[href="#play"]').click(function()
 +
  {
 +
    $(this).toggleClass('fa-play fa-pause');
 +
    Player.play();
 +
   
 +
    return !1;
 +
  });
 +
 
 +
  $('.music-player > .dash > .controls > a[href="#back"]').click(function(){ Player.skip('l'); return !1 });
 +
  $('.music-player > .dash > .controls > a[href="#forward"]').click(function(){ Player.skip('r'); return !1 });
 +
 
 +
  $('.music-player > .dash > .volume-level').bind('mousemove', function(e)
 +
  {
 +
    if($(this).is(':active'))
 +
    {
 +
      $(this).find('em').css('width', e.pageX - $(this).offset().left);
 +
      var vol = $(this).find('em').width() / $(this).width() * 100;
 +
     
 +
      Player.vol(vol > 100 ? 100 : vol);
 +
    }
 +
  });
 +
 
 +
  $('.music-player').on('mousemove', function(e)
 +
  {
 +
    //http://jsfiddle.net/sandeeprajoria/x5APH/11/
 +
   
 +
    var wheel = $(this).find('.dash > .seeker > .wheel'), rotate,
 +
      x = (e.pageX - 20) - wheel.offset().left - wheel.width() / 2,
 +
      y = -1 * ((e.pageY - 20) - wheel.offset().top - wheel.height() / 2),
 +
      deg = (90 - Math.atan2(y, x) * (180 / Math.PI)), pct, nc, nm = 0;
 +
      if(deg > 270) deg = 270; else if(deg < 90) deg = 90;
 +
      rotate = 'rotate(' + deg + 'deg)';
 +
      pct = deg; pct = 270 - pct; pct = pct / 180;
 +
      nc = Math.round(Player.duration * pct);
 +
 
 +
    $(this).find('.dash > a[href="#seek"]:active').each(function()
 +
    {
 +
      Player.current = nc;
 +
      while(nc > 60) { nm ++; nc -= 60 }
 +
      while(String(nc).length == 1) nc = '0' + nc;
 +
     
 +
      $('.music-player > .dash > .info > i > [name="current"]').html(nm + ':' + nc);
 +
     
 +
      $(this).add('.music-player > .dash > .seeker > .wheel > .progress').css(
 +
      {
 +
        '-webkit-transform': rotate,
 +
        '-moz-transform': rotate,
 +
        '-ms-transform': rotate,
 +
        '-o-transform': rotate,
 +
        'transform' : rotate
 +
      });
 +
    });
 +
  });
 +
});
 +
</style>
 +
 +
<!--
 +
 +
  Hey, you! Go check out this wonderful dribbble by Sebastian Beltz!
 +
  http://dribbble.com/shots/1408634-Music-Player
 +
 +
-->
 +
 +
<div class="music-player">
 +
  <img src="http://c.boylett.uk/generic/image_png_00002.png" class="album" />
 +
  <div class="dash">
 +
    <a href="#mute" class="fa fa-volume-up"></a>
 +
    <span class="volume-level">
 +
      <em style="width: 75%"></em>
 +
    </span>
 +
    <a href="#share" class="fa fa-share"></a>
 +
    <a href="#love" class="fa fa-heart"></a>
 +
    <div class="seeker">
 +
      <div class="wheel">
 +
        <div class="progress"></div>
 +
      </div>
 +
    </div>
 +
    <a href="#seek"></a>
 +
    <div class="controls">
 +
      <a href="#back" class="fa fa-fast-backward"></a>
 +
      <a href="#play" class="fa fa-pause"></a>
 +
      <a href="#forward" class="fa fa-fast-forward"></a>
 +
    </div>
 +
    <div class="info">
 +
      <i><span name="current">0:00</span> / <span name="duration">0:00</span></i>
 +
      <label>Marteria - OMG</label>
 +
      <small>Zum Glück in die Zukunft II</small>
 +
    </div>
 +
  </div>
 
</div>
 
</div>
−
</html>
 

Revision as of 23:25, 15 September 2015