--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/integration/player.html Mon May 28 20:17:21 2012 +0200
@@ -0,0 +1,404 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+ <title>Musitag - Futur en Seine 2012</title>
+ <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery.ui.base.css" />
+ <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery.ui.theme.css" />
+ <link rel="stylesheet" type="text/css" href="css/musitag.css" />
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $('.player-slider').slider({
+ range: "min",
+ min: 0,
+ max: 2000,
+ change: function(_evt,_ui) {
+ var _x = $(_ui.handle).position().left;
+ $(".et-toi").css({
+ left: Math.max(-90,Math.min(640, _x - 130)) + "px"
+ });
+ $(".annotate").css({
+ left: Math.max(-90,Math.min(70, _x - 400)) + "px"
+ });
+ $(".position-bar").css({
+ left: _x
+ })
+ }
+ });
+ $('.et-toi').click(function() {
+ $('.et-toi').hide();
+ $('.annotate').show();
+ $('.position-bar').removeClass('position-bar-player').addClass('position-bar-annotation');
+ });
+ });
+ </script>
+ </head>
+ <body>
+ <div class="big-container">
+ <div class="player-header">
+ <div class="player-topleft">
+ <h1>Musitag</h1>
+ <div class="back-home">
+ <a href="home.html">Liste des chansons</a>
+ </div>
+ </div>
+ <div class="player-album">
+ <img src="media/wari-190.jpg" />
+ <h2>Au Clair de la Lune</h2>
+ <h3>Steve Waring</h3>
+ </div>
+ </div>
+
+ <div class="player-timeline">
+ <div class="player-playpause status-play"></div>
+ <div class="player-slider"></div>
+ </div>
+ <div class="player-belowtl">
+ <div class="player-annotations">
+ <div class="player-annotation-column">
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-yellow"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-green"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ </div>
+ <div class="player-annotation-column">
+ </div>
+ <div class="player-annotation-column">
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-blue"></div>
+ <div class="tag-emoticon tag-unhappy"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-green"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ </div>
+ <div class="player-annotation-column">
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-blue"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ </div>
+ <div class="player-annotation-column">
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-blue"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-blue"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-green"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ </div>
+ <div class="player-annotation-column">
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ </div>
+ <div class="player-annotation-column">
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-yellow"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-green"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ </div>
+ <div class="player-annotation-column">
+ </div>
+ <div class="player-annotation-column">
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-blue"></div>
+ <div class="tag-emoticon tag-unhappy"></div>
+ </div>
+ <div class="tag-container-50 player-tag tag-crowded">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-yellow"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ <div class="tag-container-50 player-tag tag-crowded">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ <div class="tag-container-50 player-tag tag-crowded">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-green"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ <div class="tag-container-50 player-tag tag-crowded">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ </div>
+ <div class="player-annotation-column">
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-blue"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-yellow"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-green"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ </div>
+ <div class="player-annotation-column">
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-blue"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-blue"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-green"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ </div>
+ <div class="player-annotation-column">
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-green"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ </div>
+ <div class="player-annotation-column">
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-yellow"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-green"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ </div>
+ <div class="player-annotation-column">
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-yellow"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-yellow"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-green"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-blue"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-green"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-blue"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ </div>
+ <div class="player-annotation-column">
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-blue"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ <div class="tag-container-50 player-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-yellow"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ </div>
+ </div>
+ <div class="position-bar position-bar-player"></div>
+ <div class="et-toi">
+ <div class="tag-container-50 et-toi-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-green crossfade anim-6s cf-3"></div>
+ <div class="tag-color tag-yellow crossfade anim-6s cf-2"></div>
+ <div class="tag-color tag-red crossfade anim-6s cf-1"></div>
+ <div class="tag-color tag-blue crossfade anim-6s"></div>
+ <div class="tag-emoticon tag-laughing crossfade anim-8s"></div>
+ <div class="tag-emoticon tag-happy crossfade anim-8s cf-1"></div>
+ <div class="tag-emoticon tag-unhappy crossfade anim-8s cf-2"></div>
+ <div class="tag-emoticon tag-surprised crossfade anim-8s cf-3"></div>
+ </div>
+ </div>
+ <div class="annotate">
+ <div class="annotate-section">
+ <h2>1</h2>
+ <h3>Choisis<br />une couleur</h3>
+ <div class="tag-selector">
+ <div class="tag-container-80 selector-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ </div>
+ <div class="tag-container-80 selector-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-yellow"></div>
+ </div>
+ <div class="tag-container-80 selector-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-green"></div>
+ </div>
+ <div class="tag-container-80 selector-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-blue"></div>
+ </div>
+ </div>
+ </div>
+ <div class="annotate-separator"></div>
+ <div class="annotate-section">
+ <h2>2</h2>
+ <h3>Choisis<br />une émotion</h3>
+ <div class="tag-selector">
+ <div class="tag-container-80 selector-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ <div class="tag-container-80 selector-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color"></div>
+ <div class="tag-emoticon tag-unhappy"></div>
+ </div>
+ <div class="tag-container-80 selector-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ <div class="tag-container-80 selector-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ </div>
+ </div>
+ <div class="annotate-separator"></div>
+ <div class="annotate-section">
+ <h2>3</h2>
+ <h3>Enregistre<br />ta voix</h3>
+ <div class="record"></div>
+ </div>
+ <div class="annotate-separator"></div>
+ <div class="annotate-section">
+ <h2>4</h2>
+ <h3>Envoie<br />ton Musitag</h3>
+ <div class="note-envoi">
+ <div class="tag-container-80 envoi-tag">
+ <div class="tag-shadow"></div>
+ <div class="tag-color"></div>
+ <div class="tag-emoticon"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </body>
+</html>