Add Vanilla Login

assets/css/styles.css

@@ -2,6 +2,7 @@ html, body {
     margin: 0;
     height: 100%;
     overflow: hidden;
+    
 }
 
 @font-face{
@@ -10,6 +11,7 @@ html, body {
 }
 
 #background {
+    background-color: #000;
     position: fixed;
     right: 0;
     bottom: 0;
@@ -102,6 +104,7 @@ html, body {
     outline: none;
     display: inline-block;
     transform: scale(0.8);
+    filter: drop-shadow(0px 0px 8px #000);
     z-index: 2;
 }
 
@@ -163,12 +166,16 @@ html, body {
     background-color: transparent;
     transform: scale(0.8);
     transition: 0.2s;
+    filter: drop-shadow(0px 0px 6px #000);
+
 }
 
 .xPacButton:hover {
     transform: scale(0.81);
+    filter: drop-shadow(0px 0px 10px #000);
 }
 
 .xPacButton:active {
     transform: scale(0.79);
+    filter: drop-shadow(0px 0px 0px #000);
 }

assets/img/bg/Vanilla.webm.xmp

@@ -0,0 +1,151 @@
+<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c137 79.159768, 2016/08/11-13:24:42        " rdfhash="AFB21A8DFF3A913384A0664F17528A6C" merged="0">
+ <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+  <rdf:Description rdf:about=""
+    xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/"
+    xmlns:stEvt="http://ns.adobe.com/xap/1.0/sType/ResourceEvent#"
+    xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#"
+    xmlns:xmp="http://ns.adobe.com/xap/1.0/"
+    xmlns:xmpDM="http://ns.adobe.com/xmp/1.0/DynamicMedia/"
+    xmlns:creatorAtom="http://ns.adobe.com/creatorAtom/1.0/"
+    xmlns:stDim="http://ns.adobe.com/xap/1.0/sType/Dimensions#"
+    xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmpMM:InstanceID="xmp.iid:40288d0a-4a37-2640-9de0-c28de6e0cbfa"
+   xmpMM:DocumentID="d3884aab-db06-aef6-e198-5b6400000043"
+   xmpMM:OriginalDocumentID="xmp.did:cdc0d33c-ccf9-404e-b689-1cfd565458bc"
+   xmp:MetadataDate="2020-10-03T00:47:22-04:00"
+   xmp:ModifyDate="2020-10-03T00:47:22-04:00"
+   xmp:CreatorTool="Adobe Premiere Pro CC 2017.0 (Windows)"
+   xmp:CreateDate="2020-10-03T00:46:18-04:00"
+   xmpDM:videoFrameRate="24.000000"
+   xmpDM:videoFieldOrder="Progressive"
+   xmpDM:videoPixelAspectRatio="1/1"
+   xmpDM:audioSampleRate="48000"
+   xmpDM:audioSampleType="Compressed"
+   xmpDM:audioChannelType="Stereo"
+   xmpDM:startTimeScale="24"
+   xmpDM:startTimeSampleSize="1"
+   dc:format="WebM">
+   <xmpMM:History>
+    <rdf:Seq>
+     <rdf:li
+      stEvt:action="saved"
+      stEvt:instanceID="a478aefd-44bc-1622-fa69-3d0d00000070"
+      stEvt:when="2020-10-03T00:47:22-04:00"
+      stEvt:softwareAgent="Adobe Premiere Pro CC 2017.0 (Windows)"
+      stEvt:changed="/"/>
+     <rdf:li
+      stEvt:action="created"
+      stEvt:instanceID="xmp.iid:023de14e-a7d1-e14a-87b0-0c0374ecf77b"
+      stEvt:when="2020-10-03T00:46:32-04:00"
+      stEvt:softwareAgent="Adobe Premiere Pro CC 2017.0 (Windows)"/>
+     <rdf:li
+      stEvt:action="saved"
+      stEvt:instanceID="xmp.iid:3bcc8617-0885-e540-ad48-99b1bf0b7801"
+      stEvt:when="2020-10-03T00:47:22-04:00"
+      stEvt:softwareAgent="Adobe Premiere Pro CC 2017.0 (Windows)"
+      stEvt:changed="/"/>
+     <rdf:li
+      stEvt:action="saved"
+      stEvt:instanceID="xmp.iid:40288d0a-4a37-2640-9de0-c28de6e0cbfa"
+      stEvt:when="2020-10-03T00:47:22-04:00"
+      stEvt:softwareAgent="Adobe Premiere Pro CC 2017.0 (Windows)"
+      stEvt:changed="/metadata"/>
+    </rdf:Seq>
+   </xmpMM:History>
+   <xmpMM:Ingredients>
+    <rdf:Bag>
+     <rdf:li
+      stRef:instanceID="0c572ff7-197c-14b0-e735-380100000086"
+      stRef:documentID="4aa6a1c8-7c42-82c1-c3d9-35e800000059"
+      stRef:fromPart="time:5397840000000f254016000000d3463084800000f254016000000"
+      stRef:toPart="time:0d3463084800000f254016000000"
+      stRef:filePath="2020-10-03 00-38-38.mp4"
+      stRef:maskMarkers="None"/>
+     <rdf:li
+      stRef:instanceID="0c572ff7-197c-14b0-e735-380100000086"
+      stRef:documentID="4aa6a1c8-7c42-82c1-c3d9-35e800000059"
+      stRef:fromPart="time:3873744000000f254016000000d1507360493959f254016000000"
+      stRef:toPart="time:3463084800000f254016000000d1507360493959f254016000000"
+      stRef:filePath="2020-10-03 00-38-38.mp4"
+      stRef:maskMarkers="None"/>
+    </rdf:Bag>
+   </xmpMM:Ingredients>
+   <xmpMM:Pantry>
+    <rdf:Bag>
+     <rdf:li>
+      <rdf:Description
+       xmp:CreateDate="1904-01-01T00:00Z"
+       xmp:ModifyDate="2020-10-03T00:39:43-04:00"
+       xmp:MetadataDate="2020-10-03T00:39:43-04:00"
+       xmpMM:InstanceID="0c572ff7-197c-14b0-e735-380100000086"
+       xmpMM:DocumentID="4aa6a1c8-7c42-82c1-c3d9-35e800000059"
+       xmpMM:OriginalDocumentID="xmp.did:889950b0-b07f-b348-963e-ef4a532ae4c8">
+      <xmpDM:duration
+       xmpDM:value="45967"
+       xmpDM:scale="1/1000"/>
+      <xmpMM:History>
+       <rdf:Seq>
+        <rdf:li
+         stEvt:action="saved"
+         stEvt:instanceID="0c572ff7-197c-14b0-e735-380100000086"
+         stEvt:when="2020-10-03T00:39:43-04:00"
+         stEvt:softwareAgent="Adobe Premiere Pro CC 2017.0 (Windows)"
+         stEvt:changed="/"/>
+       </rdf:Seq>
+      </xmpMM:History>
+      </rdf:Description>
+     </rdf:li>
+    </rdf:Bag>
+   </xmpMM:Pantry>
+   <xmpMM:DerivedFrom
+    stRef:instanceID="xmp.iid:023de14e-a7d1-e14a-87b0-0c0374ecf77b"
+    stRef:documentID="xmp.did:023de14e-a7d1-e14a-87b0-0c0374ecf77b"
+    stRef:originalDocumentID="xmp.did:023de14e-a7d1-e14a-87b0-0c0374ecf77b"/>
+   <creatorAtom:windowsAtom
+    creatorAtom:extension=".prproj"
+    creatorAtom:invocationFlags="/L"
+    creatorAtom:uncProjectPath="\\?\F:\Projects\Premiere\Untitled.prproj"/>
+   <creatorAtom:macAtom
+    creatorAtom:applicationCode="1347449455"
+    creatorAtom:invocationAppleEvent="1129468018"/>
+   <xmpDM:projectRef
+    xmpDM:type="movie"/>
+   <xmpDM:videoFrameSize
+    stDim:w="1280"
+    stDim:h="720"
+    stDim:unit="pixel"/>
+   <xmpDM:duration
+    xmpDM:value="469"
+    xmpDM:scale="1/24"/>
+   <xmpDM:startTimecode
+    xmpDM:timeFormat="24Timecode"
+    xmpDM:timeValue="00:00:00:00"/>
+   <xmpDM:altTimecode
+    xmpDM:timeValue="00:00:00:00"
+    xmpDM:timeFormat="24Timecode"/>
+  </rdf:Description>
+ </rdf:RDF>
+</x:xmpmeta>
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                                                                                                    
+                           
+<?xpacket end="w"?>

assets/js/audiohandler.js

@@ -1,13 +1,16 @@
 var expansion = 8;
 var audioSelect = {
+    'Vanilla' : './assets/audio/Vanilla.ogg',
     'BattleForAzeroth' : './assets/audio/BattleForAzeroth.ogg',
     'Shadowlands' : './assets/audio/Shadowlands.ogg'
 }
 var videoSelect = {
+    'Vanilla' : './assets/img/bg/Vanilla.webm',
     'BattleForAzeroth' : './assets/img/bg/BattleForAzeroth.webm',
     'Shadowlands' : './assets/img/bg/Shadowlands.webm'
 }
 var logoSelect = {
+    'Vanilla' : './assets/img/ui/logos/Vanilla.png',
     'BattleForAzeroth' : './assets/img/ui/logos/BattleForAzeroth.png',
     'Shadowlands' : './assets/img/ui/logos/Shadowlands.png',
 }
@@ -34,7 +37,7 @@ function waitForInteractionToPlayAudio()
     if(!audioInitialPlayback)
     {
         buttonAudio.volume = 0.5;
-        audio.volume = 0.1;
+        audio.volume = 0.5;
         audio.loop = true;
         audio.play();
         audioInitialPlayback = true;
@@ -107,14 +110,21 @@ function switchExpansion()
     getPositionInQueue();
 
     var bg = document.getElementById('background');
-    var logo = document.getElementById('logo')
+    var logo = document.getElementById('logo');
+    var version = document.getElementById('buildVersion');
+    var date = document.getElementById('buildDate');
+    var copyright = document.getElementById('copyrightText');
     audio.pause();
     switch(expansion)
     {
         case 0:
             console.log('Vanilla');
-            expansion = 7;
+            audio.src = audioSelect.Vanilla;
-            switchExpansion();
+            bg.setAttribute('src', videoSelect.Vanilla);
+            logo.style.background = `url(${logoSelect.Vanilla})`;
+            version.innerHTML = 'Version 1.12.1 (5875) (Release)';
+            date.innerHTML = 'Sept 19 2006';
+            copyright.innerHTML = 'Copyright 2004-2006 Blizzard Entertainment. All Right Reserved.';
         break;
 
         case 1:
@@ -158,6 +168,9 @@ function switchExpansion()
             audio.src = audioSelect.BattleForAzeroth;
             bg.setAttribute('src', videoSelect.BattleForAzeroth);
             logo.style.background = `url(${logoSelect.BattleForAzeroth})`;
+            version.innerHTML = 'Version 8.3.7 (35662) (Release x64)';
+            date.innerHTML = 'Aug 24 2020';
+            copyright.innerHTML = 'Copyright 2004-2020 Blizzard Entertainment. All Right Reserved.';
         break;
 
         case 8:
@@ -165,6 +178,9 @@ function switchExpansion()
             audio.src = audioSelect.Shadowlands;
             bg.setAttribute('src', videoSelect.Shadowlands);
             logo.style.background = `url(${logoSelect.Shadowlands})`;
+            version.innerHTML = 'Version 9.0.1 (35944) (Release x64)';
+            date.innerHTML = 'Oct 13 2020';
+            copyright.innerHTML = 'Copyright 2004-2020 Blizzard Entertainment. All Right Reserved.';
         break;
     }
     audio.play();