--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/.hgignore Mon May 28 20:17:21 2012 +0200
@@ -0,0 +1,3 @@
+
+syntax: regexp
+^\.project$
\ No newline at end of file
Binary file crea/integration/css/Rabbit_On_The_Moon.ttf has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/integration/css/musitag.css Mon May 28 20:17:21 2012 +0200
@@ -0,0 +1,517 @@
+@font-face
+{
+ font-family: "Rabbit"; src: url(Rabbit_On_The_Moon.ttf);
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+
+a {
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+a img {
+ border: none;
+}
+
+ul, li {
+ list-style: none;
+}
+
+body {
+ font-family: "Rabbit";
+ background: url(../img/wood-background.jpg);
+}
+
+.big-container {
+ width: 980px; margin: 0 auto;
+}
+
+.home-header {
+ background: url(../img/home-header.png);
+ width: 960px; height: 150px; padding: 5px 10px;
+ color: #ffffff;
+}
+
+.home-header h1 {
+ float: left; margin-left: 10px; height: 120px; padding-top: 15px; padding-left: 140px; font-size: 60px;
+ background: url(../img/logo-home.png) left no-repeat;
+}
+
+.home-header h2 {
+ float: right; width: 480px; margin-top: 20px; font-size: 30px; text-align: center;
+}
+
+.home-media {
+ float: left; width: 440px; height: 130px; padding: 25px; background: url(../img/home-media-box.png);
+}
+
+.home-media-image {
+ float: left; margin-top: 5px; width: 135px; height: 120px;
+}
+
+.home-media h3 {
+ font-size: 28px; margin-left: 145px;
+}
+
+.home-media h3 a {
+ color: #000000;
+}
+
+.home-media h4 {
+ font-size: 24px; margin-left: 145px;
+}
+
+.home-media h4 a {
+ color: #000080;
+}
+
+.home-dataviz {
+ width: 140px; margin-left: 10px; float: left;
+}
+
+.home-dataviz li {
+ float: left;
+}
+
+.tag-container-50 {
+ position:relative; width:50px; height:50px; cursor: pointer;
+}
+
+.tag-shadow, .tag-color, .tag-emoticon {
+ position: absolute;
+}
+
+.tag-container-50 .tag-shadow, .tag-container-50 .tag-color, .tag-container-50 .tag-emoticon {
+ width:50px; height:50px; background: url(../img/tags50.png) no-repeat;
+}
+
+.tag-container-50 .tag-shadow {
+ left: 2px; top: 2px; background-position: -200px -50px;
+}
+
+.tag-container-50:hover .tag-shadow {
+ left: 0; top: 0;
+}
+
+.tag-container-50:hover .tag-color, .tag-container-50:hover .tag-emoticon {
+ left: 2px; top: 2px;
+}
+
+.tag-container-50 .tag-yellow {
+ background-position: -50px 0;
+}
+
+.tag-container-50 .tag-green {
+ background-position: -100px 0;
+}
+
+.tag-container-50 .tag-red {
+ background-position: -150px 0;
+}
+
+.tag-container-50 .tag-blue {
+ background-position: -200px 0;
+}
+
+.tag-container-50 .tag-happy {
+ background-position: 0 -50px;
+}
+
+.tag-container-50 .tag-unhappy {
+ background-position: -50px -50px;
+}
+
+.tag-container-50 .tag-laughing {
+ background-position: -100px -50px;
+}
+
+.tag-container-50 .tag-surprised {
+ background-position: -150px -50px;
+}
+
+.tag-container-80 {
+ position:relative; width:80px; height:80px; cursor: pointer;
+}
+
+.tag-container-80 .tag-shadow, .tag-container-80 .tag-color, .tag-container-80 .tag-emoticon {
+ width:80px; height:80px; background: url(../img/tags80.png) no-repeat;
+}
+
+.tag-container-80 .tag-shadow {
+ left: 4px; top: 4px; background-position: -320px -80px;
+}
+
+.tag-container-80:hover .tag-shadow {
+ left: 0; top: 0;
+}
+
+.tag-container-80:hover .tag-color, .tag-container-80:hover .tag-emoticon {
+ left: 4px; top: 4px;
+}
+
+.tag-container-80 .tag-yellow {
+ background-position: -80px 0;
+}
+
+.tag-container-80 .tag-green {
+ background-position: -160px 0;
+}
+
+.tag-container-80 .tag-red {
+ background-position: -240px 0;
+}
+
+.tag-container-80 .tag-blue {
+ background-position: -320px 0;
+}
+
+.tag-container-80 .tag-happy {
+ background-position: 0 -80px;
+}
+
+.tag-container-80 .tag-unhappy {
+ background-position: -80px -80px;
+}
+
+.tag-container-80 .tag-laughing {
+ background-position: -160px -80px;
+}
+
+.tag-container-80 .tag-surprised {
+ background-position: -240px -80px;
+}
+
+.player-header {
+ width: 980px; height: 220px;
+}
+
+.player-topleft {
+ width: 310px; height: 200px; float: left; padding: 10px; background: url(../img/player-topleft.png);
+}
+
+.player-topleft h1 {
+ color: #ffffff; font-size: 45px; text-align: center;
+}
+
+.back-home {
+ background: url(../img/back-home.png); width: 120px; height: 90px;
+ padding: 5px 20px 5px 100px; margin: 10px auto; font-size: 30px; text-align: center;
+}
+
+.back-home a {
+ color: #ffffff;
+}
+
+.player-album {
+ width: 610px; height: 190px; padding: 15px 20px; float: left;
+ background: url(../img/player-album.png); text-align: right;
+}
+
+.player-album img {
+ float: right; margin-left: 10px;
+}
+
+.player-album h2 {
+ font-size: 40px;
+}
+
+.player-album h3 {
+ font-size: 36px; color: #000080;
+}
+
+.player-timeline {
+ width: 930px; height: 50px; padding: 15px 25px; position: relative;
+ background: url(../img/slider-bg.png); z-index: 40;
+}
+
+.player-playpause {
+ float: left; width: 45px; height: 50px; background: url(../img/playpause.png);
+}
+
+.status-play:hover {
+ background-position: 0 -50px;
+}
+
+.status-pause:hover {
+ background-position: -45px 0;
+}
+
+.status-pause:hover {
+ background-position: -45px -50px;
+}
+
+.player-slider {
+ margin: 14px 0 0 60px; border: none; height: 25px; width: 870px; background: url(../img/slider.png);
+}
+
+.player-slider .ui-slider-range {
+ background: url(../img/slider.png) left bottom;
+}
+
+.player-slider .ui-slider-handle {
+ width: 30px; height: 72px; background: url(../img/slider-handle.png);
+ border: none; top: -22px; margin-left: -14px;
+}
+
+.player-belowtl {
+ width: 870px; margin-left: 90px; position: relative;
+}
+
+.player-annotations {
+ position: absolute; top: -15px; left: 0; z-index: 5;
+}
+
+.player-annotation-column {
+ padding: 15px 0 0; margin-right: 8px; width: 50px; float: left;
+ background: url(../img/liane.png) top no-repeat;
+}
+
+.player-tag {
+ margin: 8px 0 0;
+}
+
+.player-tag:first-child {
+ z-index: 20;
+}
+
+.player-tag:nth-child(2) {
+ z-index: 19;
+}
+
+.player-tag:nth-child(3) {
+ z-index: 18;
+}
+
+.player-tag:nth-child(4) {
+ z-index: 17;
+}
+
+.player-tag:nth-child(5) {
+ z-index: 16;
+}
+
+.player-tag:nth-child(6) {
+ z-index: 15;
+}
+
+.player-tag:nth-child(7) {
+ z-index: 14;
+}
+
+.player-tag:nth-child(8) {
+ z-index: 13;
+}
+
+.player-tag:nth-child(9) {
+ z-index: 12;
+}
+
+.player-tag:nth-child(10) {
+ z-index: 11;
+}
+
+.player-tag:first-child:nth-last-child(5) ~ .player-tag {
+ margin: -3px 0 0;
+}
+
+.player-tag:first-child:nth-last-child(6) ~ .player-tag {
+ margin: -12px 0 0;
+}
+
+.player-tag:first-child:nth-last-child(7) ~ .player-tag {
+ margin: -18px 0 0;
+}
+
+.player-tag:first-child:nth-last-child(8) ~ .player-tag {
+ margin: -23px 0 0;
+}
+
+.player-tag:first-child:nth-last-child(9) ~ .player-tag {
+ margin: -26px 0 0;
+}
+
+.player-tag:first-child:nth-last-child(10) ~ .player-tag {
+ margin: -29px 0 0;
+}
+
+.position-bar {
+ width: 40px; background: url(../img/position-bar.png) bottom;
+ position: absolute; top: -10px; left: 0; margin-left: -20px;
+}
+
+.position-bar-player {
+ height: 270px; z-index: 4;
+}
+
+.position-bar-annotation {
+ height: 75px; z-index: 25;
+}
+
+
+.et-toi {
+ position: absolute; top: 250px; left: -90px; cursor: pointer;
+ width: 260px; height: 140px; background: url(../img/et-toi.png); z-index: 30;
+}
+
+.et-toi-tag {
+ margin: 60px 0 0 168px; -moz-transform: rotate(-15deg);
+}
+
+.annotate {
+ position: absolute; top: 50px; left: -90px; width: 800px; height: 280px; padding: 25px 15px;
+ z-index: 30; background: url(../img/annotate-bg.png); display: none;
+}
+
+.annotate-section {
+ float: left; width: 197px;
+}
+
+.annotate-separator {
+ float: left; width: 3px; background: url(../img/annotate-separator.png); height: 100px; margin: 120px 0 0;
+}
+
+.annotate-section h2 {
+ float: left; font-size: 60px; width: 60px; height: 60px; text-align: center;
+}
+
+.annotate-section h3 {
+ font-size: 24px; text-align: center; margin: 0 10px;
+}
+
+.tag-selector {
+ margin: 12px 8px;
+}
+
+.selector-tag {
+ float: left; margin: 5px;
+}
+
+.record {
+ width: 135px; height: 135px; background: url(../img/record.png);
+ margin: 35px 31px;
+}
+
+.record:hover {
+ background-position: 0 -135px;
+}
+
+.note-envoi {
+ width: 160px; height: 218px; background: url(../img/note-envoi.png);
+ margin: 5px 0 0 5px; position: relative;
+}
+
+.envoi-tag {
+ position: absolute; left: 102px; top: 75px; -moz-transform: rotate(-15deg);
+}
+
+/* */
+
+@-webkit-keyframes crossfade {
+ 0% {
+ opacity: 0
+ }
+ 12% {
+ opacity: 1
+ }
+ 25% {
+ opacity: 1
+ }
+ 37% {
+ opacity: 0
+ }
+ 100% {
+ opacity: 0
+ }
+}
+
+@-moz-keyframes crossfade {
+ 0% {
+ opacity: 0
+ }
+ 12% {
+ opacity: 1
+ }
+ 25% {
+ opacity: 1
+ }
+ 37% {
+ opacity: 0
+ }
+ 100% {
+ opacity: 0
+ }
+}
+
+.crossfade {
+ -webkit-animation-name: crossfade;
+ -webkit-animation-iteration-count: infinite;
+ -moz-animation-name: crossfade;
+ -moz-animation-iteration-count: infinite;
+}
+
+.tag-emoticon.crossfade {
+ opacity: 0;
+}
+
+.anim-6s {
+ -webkit-animation-duration: 6s;
+ -moz-animation-duration: 6s;
+}
+
+.anim-6s.cf-1 {
+ -webkit-animation-delay: 1.5s;
+ -moz-animation-delay: 1.5s
+}
+
+.anim-6s.cf-2 {
+ -webkit-animation-delay: 3s;
+ -moz-animation-delay: 3s
+}
+
+.anim-6s.cf-3 {
+ -webkit-animation-delay: 4.5s;
+ -moz-animation-delay: 4.5s
+}
+
+.anim-8s {
+ -webkit-animation-duration: 8s;
+ -moz-animation-duration: 8s;
+}
+
+.anim-8s.cf-1 {
+ -webkit-animation-delay: 2s;
+ -moz-animation-delay: 2s
+}
+
+.anim-8s.cf-2 {
+ -webkit-animation-delay: 4s;
+ -moz-animation-delay: 4s
+}
+
+.anim-8s.cf-3 {
+ -webkit-animation-delay: 6s;
+ -moz-animation-delay: 6s
+}
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/crea/integration/home.html Mon May 28 20:17:21 2012 +0200
@@ -0,0 +1,136 @@
+<!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="css/musitag.css" />
+ </head>
+ <body>
+ <div class="big-container">
+ <div class="home-header">
+ <h1>Musitag</h1>
+ <h2>Mets tes couleurs, tes émotions<br />et ta voix sur la musique !</h2>
+ </div>
+ <div class="home-media">
+ <a href="#">
+ <img class="home-media-image" src="media/wari-120.jpg" />
+ </a>
+ <h3>
+ <a href="#">Au Clair de la Lune</a>
+ </h3>
+ <h4>
+ <a href="#">Steve Waring</a>
+ </h4>
+ <ul class="home-dataviz home-dataviz-colors">
+ <li>
+ <div class="tag-container-50">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-green"></div>
+ </div>
+ </li>
+ <li style="width: 40px">
+ <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.8); -moz-transform-origin: bottom left; -moz-transform: scale(.8);">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-yellow"></div>
+ </div>
+ </li>
+ <li style="width: 25px">
+ <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.5); -moz-transform-origin: bottom left; -moz-transform: scale(.5);">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-red"></div>
+ </div>
+ </li>
+ <li style="width: 10px">
+ <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.2); -moz-transform-origin: bottom left; -moz-transform: scale(.2);">
+ <div class="tag-shadow"></div>
+ <div class="tag-color tag-blue"></div>
+ </div>
+ </li>
+ </ul>
+ <ul class="home-dataviz home-dataviz-emoticon">
+ <li>
+ <div class="tag-container-50">
+ <div class="tag-shadow"></div>
+ <div class="tag-color"></div>
+ <div class="tag-emoticon tag-laughing"></div>
+ </div>
+ </li>
+ <li style="width: 40px">
+ <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.8); -moz-transform-origin: bottom left; -moz-transform: scale(.8);">
+ <div class="tag-color"></div>
+ <div class="tag-emoticon tag-happy"></div>
+ </div>
+ </li>
+ <li style="width: 25px">
+ <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.5); -moz-transform-origin: bottom left; -moz-transform: scale(.5);">
+ <div class="tag-color"></div>
+ <div class="tag-emoticon tag-surprised"></div>
+ </div>
+ </li>
+ <li style="width: 10px">
+ <div class="tag-container-50" style="-webkit-transform-origin: bottom left; -webkit-transform: scale(.2); -moz-transform-origin: bottom left; -moz-transform: scale(.2);">
+ <div class="tag-color"></div>
+ <div class="tag-emoticon tag-unhappy"></div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ <div class="home-media">
+ <a href="#">
+ <img class="home-media-image" src="media/wari-120.jpg" />
+ </a>
+ <h3>
+ <a href="#">Au Clair de la Lune</a>
+ </h3>
+ <h4>
+ <a href="#">Steve Waring</a>
+ </h4>
+ </div>
+ <div class="home-media">
+ <a href="#">
+ <img class="home-media-image" src="media/wari-120.jpg" />
+ </a>
+ <h3>
+ <a href="#">Au Clair de la Lune</a>
+ </h3>
+ <h4>
+ <a href="#">Steve Waring</a>
+ </h4>
+ </div>
+ <div class="home-media">
+ <a href="#">
+ <img class="home-media-image" src="media/wari-120.jpg" />
+ </a>
+ <h3>
+ <a href="#">Au Clair de la Lune</a>
+ </h3>
+ <h4>
+ <a href="#">Steve Waring</a>
+ </h4>
+ </div>
+ <div class="home-media">
+ <a href="#">
+ <img class="home-media-image" src="media/wari-120.jpg" />
+ </a>
+ <h3>
+ <a href="#">Au Clair de la Lune</a>
+ </h3>
+ <h4>
+ <a href="#">Steve Waring</a>
+ </h4>
+ </div>
+ <div class="home-media">
+ <a href="#">
+ <img class="home-media-image" src="media/wari-120.jpg" />
+ </a>
+ <h3>
+ <a href="#">Au Clair de la Lune</a>
+ </h3>
+ <h4>
+ <a href="#">Steve Waring</a>
+ </h4>
+ </div>
+ </div>
+ </body>
+</html>
Binary file crea/integration/img/annotate-bg.png has changed
Binary file crea/integration/img/annotate-separator.png has changed
Binary file crea/integration/img/back-home.png has changed
Binary file crea/integration/img/et-toi.png has changed
Binary file crea/integration/img/home-header.png has changed
Binary file crea/integration/img/home-media-box.png has changed
Binary file crea/integration/img/liane.png has changed
Binary file crea/integration/img/logo-home.png has changed
Binary file crea/integration/img/note-envoi.png has changed
Binary file crea/integration/img/player-album.png has changed
Binary file crea/integration/img/player-topleft.png has changed
Binary file crea/integration/img/playpause.png has changed
Binary file crea/integration/img/position-bar.png has changed
Binary file crea/integration/img/record.png has changed
Binary file crea/integration/img/slider-bg.png has changed
Binary file crea/integration/img/slider-handle.png has changed
Binary file crea/integration/img/slider.png has changed
Binary file crea/integration/img/tags50.png has changed
Binary file crea/integration/img/tags80.png has changed
Binary file crea/integration/img/wood-background.jpg has changed
Binary file crea/integration/media/hdes-120.jpg has changed
Binary file crea/integration/media/jcde-120.jpg has changed
Binary file crea/integration/media/wari-120.jpg has changed
Binary file crea/integration/media/wari-190.jpg has changed
--- /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>
