wow winxp part two

assets/css/oof.css

@@ -50,6 +50,17 @@ body {
     text-shadow: 4px 0px var(--teal);
 }
 
+#sbody {
+  font-size: 15px;
+    margin-left: 5px;
+    margin-right: 5px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    font-weight: bold;
+    font-family: 'Comic Neue', cursive;
+    font-style: normal;
+}
+
 #ws:link {
   text-decoration: none;
   color: inherit;

assets/img/spek.icon.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0"  width="500" height="500" viewBox="0 0 75 75">
+<path d="M39.389,13.769 L22.235,28.606 L6,28.606 L6,47.699 L21.989,47.699 L39.389,62.75 L39.389,13.769z"
+style="stroke:#111;stroke-width:5;stroke-linejoin:round;fill:#111;"
+/>
+<path d="M48,27.6a19.5,19.5 0 0 1 0,21.4M55.1,20.5a30,30 0 0 1 0,35.6M61.6,14a38.8,38.8 0 0 1 0,48.6" style="fill:none;stroke:#111;stroke-width:5;stroke-linecap:round"/>
+</svg>

assets/js/site.js

@@ -10,7 +10,7 @@ jQuery(function($) {
       },
       },
       layoutTemplate: "{entries}",
-      entryTemplate:"<table class=\"entry\" style=\"overflow:hidden;word-wrap:break-word;border-width:2; border-style:solid; max-width: 100%; width: 100%; border-color: transparent;\"cellpadding=\"3\"><tr><td class=\"entry\"style=\"background-color: #0FF404; color: #0FF00; \"><b><a href=\"{enclosure}\" onclick=\"play('{enclosure}',`{title}`,'{date}'); return false;\" style=\"color: #0FF00;\" target=\"_blank\">{title}</a></b></td></tr>\n<tr><td class=\"entry\"style=\"width:100%; overflow: hidden; word-wrap: break-word;background-color: transparent; color: #ffffff; padding-top: 10px;\"><i><b>{date}</b></i><br><p>{bodyPlain}</p></td></tr><tr>",
+      entryTemplate:"<table class=\"entry\" style=\"overflow:hidden;word-wrap:break-word;border-width:2; border-style:solid; max-width: 100%; width: 100%; border-color: transparent;\"cellpadding=\"3\"><tr><td class=\"entry\"style=\"background-color: #0FF404; color: #0FF00; \"><b><a href=\"{enclosure}\" onclick=\"play('{enclosure}',`{title}`,'{date}', `{shortBodyPlain}`); return false;\" style=\"color: #0FF00;\" target=\"_blank\">{title}</a></b></td></tr>\n<tr><td class=\"entry\"style=\"width:100%; overflow: hidden; word-wrap: break-word;background-color: transparent; color: #ffffff; padding-top: 10px;\"><i><b>{date}</b></i><br><p>{bodyPlain}</p></td></tr><tr>",
       dateFormat: 'DD/MM/YYYY',
       dateLocale: 'fr-ca',
     });
@@ -25,7 +25,7 @@ jQuery(function($) {
       },
       },
       layoutTemplate: "{entries}",
-      entryTemplate:"<table class=\"entry\" style=\"overflow:hidden;word-wrap:break-word;border-width:2; border-style:solid; max-width: 100%; width: 100%; border-color: transparent;\"cellpadding=\"3\"><tr><td class=\"entry\"style=\"background-color: #0FF404; color: #0FF00; \"><b><a href=\"{enclosure}\" onclick=\"play('{enclosure}',`{title}`,'{date}'); switchTab(); return false;\" style=\"color: #0FF00;\" target=\"_blank\">{title}</a></b></td></tr>\n<tr><td class=\"entry\"style=\"width:100%; overflow: hidden; word-wrap: break-word;background-color: transparent; color: #ffffff; padding-top: 10px;\"><i><b>{date}</b></i><br><p>{bodyPlain}</p></td></tr><tr>",
+      entryTemplate:"<table class=\"entry\" style=\"overflow:hidden;word-wrap:break-word;border-width:2; border-style:solid; max-width: 100%; width: 100%; border-color: transparent;\"cellpadding=\"3\"><tr><td class=\"entry\"style=\"background-color: #0FF404; color: #0FF00; \"><b><a href=\"{enclosure}\" onclick=\"play('{enclosure}',`{title}`,'{date}', `{shortBodyPlain}`); switchTab(); return false;\" style=\"color: #0FF00;\" target=\"_blank\">{title}</a></b></td></tr>\n<tr><td class=\"entry\"style=\"width:100%; overflow: hidden; word-wrap: break-word;background-color: transparent; color: #ffffff; padding-top: 10px;\"><i><b>{date}</b></i><br><p>{bodyPlain}</p></td></tr><tr>",
       dateFormat: 'DD/MM/YYYY',
       dateLocale: 'fr-ca',
     });
@@ -33,13 +33,14 @@ jQuery(function($) {
     
   });
 
-  function play(src, title, date) {
+  function play(src, title, date, body) {
       console.log(src);
       console.log(title);
       console.log(linkdec)
       var linkenc = src.substring(src.lastIndexOf('/')+1);
       var linkdec = decodeURIComponent(linkenc);
       document.getElementById("lienep").innerHTML= title;
+      document.getElementById("sbody").innerHTML= body + "....";
       document.getElementById("lienep").href= linkdec;
       document.getElementById("player").pause();
       document.getElementById("player").setAttribute('src', linkdec);
@@ -51,6 +52,11 @@ jQuery(function($) {
       $('[href="#ep"]').tab('show');
   }
 
+  function topFunction() {
+    document.body.scrollTop = 0; // safari
+    document.documentElement.scrollTop = 0; // webkit
+  }
+
   $( function() {
     $( "#draggable" ).draggable();
     $("#draggable").data({
@@ -62,6 +68,7 @@ jQuery(function($) {
           'left': $("#draggable").data('originalLeft'),
         'top': $("#draggable").data('origionalTop')
           });
+        topFunction();
       });
   } );
 

index.html

@@ -125,8 +125,9 @@
                                 </div>
                             </div>
                             <div class="window-body" style="font-size: medium;">
-                                <div id="nomep" style="font-weight: bold; padding-bottom: 15px;"><a id="lienep" target="_blank">Pas
+                                <div id="nomep" style="font-weight: bold;"><a id="lienep" target="_blank">Pas
                                     d'épisode en cours</a></div>
+                                <div id="sbody"></div>
                                 <audio style="width: 90%;" controls id="player">
                                 <source src="" type="audio/mpeg">
                                 :)