Commit with new pic and videos

DataAndTools/YouTubePopUp.css

@@ -0,0 +1,153 @@
+@charset "UTF-8";
+
+/*
+    Name: YouTubePopUp
+    Description: jQuery plugin to display YouTube video in PopUp, responsive and retina, easy to use.
+    Version: 1.0.0
+    Plugin URL: http://wp-time.com/youtube-popup-jquery-plugin/
+    Written By: Qassim Hassan
+    Twitter: @QQQHZ
+    Websites: wp-time.com | qass.im | wp-plugins.in
+    Dual licensed under the MIT and GPL licenses:
+        http://www.opensource.org/licenses/mit-license.php
+        http://www.gnu.org/licenses/gpl.html
+    Copyright (c) 2016 - Qassim Hassan
+*/
+
+.YouTubePopUp-Wrap{
+    position:fixed;
+    width:100%;
+    height:100%;
+    background-color:#000;
+    background-color:rgba(0,0,0,0.8);
+    top:0;
+    left:0;
+    opacity: 0;
+    z-index:9999999999999;
+    -webkit-animation-duration: 0.5s;
+    animation-duration: 0.5s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation-name: YouTubePopUp;
+    animation-name: YouTubePopUp;
+}
+
+@-webkit-keyframes YouTubePopUp {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes YouTubePopUp {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+body.logged-in .YouTubePopUp-Wrap{ /* For WordPress */
+    top:32px;
+    z-index:99998;
+}
+
+.YouTubePopUp-Content{
+    max-width:800px;
+    display:block;
+    margin:0 auto;
+    height:100%;
+    position:relative;
+}
+
+.YouTubePopUp-Content iframe{
+    max-width:100% !important;
+    width:100% !important;
+    display:block !important;
+    height:480px !important;
+    border:none !important;
+    position:absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+}
+
+.YouTubePopUp-Hide{
+    -webkit-animation-duration: 0.5s;
+    animation-duration: 0.5s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation-name: YouTubePopUpHide;
+    animation-name: YouTubePopUpHide;
+}
+
+@-webkit-keyframes YouTubePopUpHide {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes YouTubePopUpHide {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.YouTubePopUp-Close{
+    position:absolute;
+    top:0;
+    cursor:pointer;
+    bottom:528px;
+    right:0px;
+    margin:auto 0;
+    width:24px;
+    height:24px;
+    background:url(close.png) no-repeat;
+    background-size:24px 24px;
+    -webkit-background-size:24px 24px;
+    -moz-background-size:24px 24px;
+    -o-background-size:24px 24px;
+}
+
+.YouTubePopUp-Close:hover{
+    opacity:0.5;
+}
+
+@media all and (max-width: 768px) and (min-width: 10px){
+    .YouTubePopUp-Content{
+        max-width:90%;
+    }
+}
+
+@media all and (max-width: 600px) and (min-width: 10px){
+    .YouTubePopUp-Content iframe{
+        height:320px !important;
+    }
+
+    .YouTubePopUp-Close{
+        bottom:362px;
+    }
+}
+
+@media all and (max-width: 480px) and (min-width: 10px){
+    .YouTubePopUp-Content iframe{
+        height:220px !important;
+    }
+
+    .YouTubePopUp-Close{
+        bottom:262px;
+    }
+}

DataAndTools/YouTubePopUp.jquery.js

@@ -0,0 +1,75 @@
+/*
+	Name: YouTubePopUp
+	Description: jQuery plugin to display YouTube or Vimeo video in PopUp, responsive and retina, easy to use.
+	Version: 1.0.0
+    Plugin URL: http://wp-time.com/youtube-popup-jquery-plugin/
+	Written By: Qassim Hassan
+	Twitter: @QQQHZ
+	Websites: wp-time.com | qass.im | wp-plugins.in
+	Dual licensed under the MIT and GPL licenses:
+		http://www.opensource.org/licenses/mit-license.php
+		http://www.gnu.org/licenses/gpl.html
+	Copyright (c) 2016 - Qassim Hassan
+*/
+
+(function ( $ ) {
+
+    $.fn.YouTubePopUp = function(options) {
+
+        var YouTubePopUpOptions = $.extend({
+                autoplay: 1
+        }, options );
+
+        $(this).on('click', function (e) {
+
+            var youtubeLink = $(this).attr("href");
+
+            if( youtubeLink.match(/(youtube.com)/) ){
+                var split_c = "v=";
+                var split_n = 1;
+            }
+
+            if( youtubeLink.match(/(youtu.be)/) || youtubeLink.match(/(vimeo.com\/)+[0-9]/) ){
+                var split_c = "/";
+                var split_n = 3;
+            }
+
+            if( youtubeLink.match(/(vimeo.com\/)+[a-zA-Z]/) ){
+                var split_c = "/";
+                var split_n = 5;
+            }
+
+            var getYouTubeVideoID = youtubeLink.split(split_c)[split_n];
+
+            var cleanVideoID = getYouTubeVideoID.replace(/(&)+(.*)/, "");
+
+            if( youtubeLink.match(/(youtu.be)/) || youtubeLink.match(/(youtube.com)/) ){
+                var videoEmbedLink = "https://www.youtube.com/embed/"+cleanVideoID+"?autoplay="+YouTubePopUpOptions.autoplay+"";
+            }
+
+            if( youtubeLink.match(/(vimeo.com\/)+[0-9]/) || youtubeLink.match(/(vimeo.com\/)+[a-zA-Z]/) ){
+                var videoEmbedLink = "https://player.vimeo.com/video/"+cleanVideoID+"?autoplay="+YouTubePopUpOptions.autoplay+"";
+            }
+
+            $("body").append('<div class="YouTubePopUp-Wrap"><div class="YouTubePopUp-Content"><span class="YouTubePopUp-Close"></span><iframe src="'+videoEmbedLink+'" allowfullscreen></iframe></div></div>');
+
+
+            $(".YouTubePopUp-Wrap, .YouTubePopUp-Close").click(function(){
+                $(".YouTubePopUp-Wrap").addClass("YouTubePopUp-Hide").delay(515).queue(function() { $(this).remove(); });
+            });
+
+            e.preventDefault();
+
+        });
+
+        $(document).keyup(function(e) {
+
+            if ( e.keyCode == 27 ){
+                $('.YouTubePopUp-Wrap, .YouTubePopUp-Close').click();
+            }
+
+        });
+
+    };
+
+}( jQuery ));

DataAndTools/repository.php

@@ -51,7 +51,7 @@
 
 <div style="width:100%; text-align: center; padding: 0.0cm 1.0cm 2.0cm 1.0cm; float:left; clear:both;">
   <a href="../extendedanalysis/datasets.php">    <img typeof="foaf:Image" src="/atlas-opendata/DataAndTools/pictures/handmade_downloads.png" style="width:33%"></a>
-  <a href="../extendedanalysis/software.php">    <img typeof="foaf:Image" src="/atlas-opendata/DataAndTools/pictures/handmade_toolbox.png"   style="width:33%"></a>
+  <a href="../extendedanalysis/software.php">    <img typeof="foaf:Image" src="/atlas-opendata/DataAndTools/pictures/handmade_software.png"  style="width:33%"></a>
   <a href="../extendedanalysis/vm-toolbox.php">  <img typeof="foaf:Image" src="/atlas-opendata/DataAndTools/pictures/handmade_vm.png"        style="width:33%"></a>
 </div>
 

community.php

@@ -26,9 +26,13 @@
       </ul>
     </p>
   </td>
+
   <td style="width:50%; padding: 0.1cm 0.2cm;">
     <div class="hovereffect">
-      <img class="img-responsive" src="/atlas-opendata/DataAndTools/pictures/handmade_community.png" alt="Community" style="width:100%">
+      <a class="video-1" href="https://www.youtube.com/watch?v=s-JnyFUsPB0"><img class="img-responsive" src="/atlas-opendata/DataAndTools/pictures/handmade_community.png" alt="Community" style="width:100%"></a>
+      <div class="overlay" style="background-color: rgba(0,0,0,0); padding: 25% 1% 10% 40%;">
+        <a class="video-1" href="https://www.youtube.com/watch?v=s-JnyFUsPB0"><img src="/atlas-opendata/DataAndTools/pictures/youtube_icon.png" style="width:35%"></a>
+      </div>
     </div>
   </td>
 </tr>

community/contact.php

@@ -44,6 +44,7 @@
 
   <div style="float:left; clear:both; padding: 0.5cm 0.5cm 0.5cm 0.5cm; text-align: center; width:100%; margin:0px auto;">
     <h1><b>Contact</b></h1>
+    <p><b><a href="mailto:atlas.outreach.data.tools@cern.ch">atlas.outreach.data.tools@cern.ch</a></b></p>
   </div>
 
   <div style="float:left; clear:both; padding: 0.5cm 0.5cm 0.5cm 0.5cm; text-align: center; width:100%; margin:0px auto;">

extendedanalysis/datasets.php

@@ -19,7 +19,7 @@
           </p>
         </td>
         <td style="width:50%; text-align: left; padding: 1cm 10% 1cm 1%">
-          <img src="/atlas-opendata/DataAndTools/pictures/handmade_downloads.png" alt="Data & Tools - VMs" style="width:100%">
+          <img src="/atlas-opendata/DataAndTools/pictures/handmade_downloads.png" alt="Data & Tools - datasets" style="width:100%">
         </td>
       </tr>
     </table>