wip #4907 @1.5

diff --git a/index.html b/index.html
index 4c9c6313e859d26a304d5b2aae9d18e48b0d21d0..b81cbd286c70e308687e5e3456da38f730b1fed0 100644 (file)
--- a/index.html
+++ b/index.html
@@ -47,30 +47,127 @@
                <path stroke="currentColor" fill="transparent" d="M25.2,25.2c2.3-2.4,3.8-5.8,3.8-9.4c0-3.7-1.5-7-3.8-9.4 M23,21.8c1.5-1.5,2.4-3.7,2.4-6c0-2.3-0.9-4.5-2.4-6"
                />
        </symbol>
+       <symbol id="check-ok" viewBox="0 0 32 32">
+               <g>
+                       <path d="M17,3.9C9.8,3.9,3.9,9.8,3.9,17S9.8,30.1,17,30.1S30.1,24.2,30.1,17S24.2,3.9,17,3.9 M17,31C9.3,31,3,24.7,3,17
+                       S9.3,3,17,3s14,6.3,14,14S24.7,31,17,31"/>
+               </g>
+               <polygon points="14.5,22.6 9.3,17.3 9.9,16.7 14.5,21.3 24.1,11.8 24.7,12.4      "/>
+       </symbol>
+       <symbol id="check-nok" viewBox="0 0 32 32">
+               <g>
+                       <path d="M17,3.9C9.8,3.9,3.9,9.8,3.9,17S9.8,30.1,17,30.1c7.2,0,13.1-5.9,13.1-13.1S24.2,3.9,17,3.9 M17,31C9.3,31,3,24.7,3,17
+                       S9.3,3,17,3c7.7,0,14,6.3,14,14S24.7,31,17,31"/>
+               </g>
+               <polygon points="23.2,11.4 22.6,10.8 17,16.4 11.4,10.8 10.8,11.4 16.4,17 10.8,22.6 11.4,23.2 17,17.6 22.6,23.2 23.2,22.6
+               17.6,17"/>
+       </symbol>
+       <symbol id="tile" viewBox="0 0 400.9 279.4">
+               <g>
+                       <path fill="currentColor" d="M41.2,246.9l254.4,24.5
+               c12,1.2,23.7-5.4,30.4-16.9l50.9-96.2c10.2-17.6,5.5-41-10.3-51.3l-166-81c-4.8-2.3-8.6-3.6-13.1-4c-9.7-0.9-19.6,3.1-26.7,11.6
+               l-139.3,152C2.7,207.9,14.4,244.3,41.2,246.9"/>
+               </g>
+       </symbol>
+       <symbol id="logo" viewBox="0 0 1121 291">
+               <g>
+                       <g>
+                               <path stroke="currentColor" d="M206.7,141.8c0,0.1,0,0.1,0,0.2c0,0,0.1,0.1,0.2,0.1h36.9c0.1,0,0.2-0.1,0.2-0.2v-3.6
+                               c0-9.6-6.5-16.3-15.9-16.3C216.8,121.9,208.6,129.5,206.7,141.8 M191.1,153.8c0-22.6,15.7-39.7,36.6-39.7
+                               c18.4,0,31.3,12.3,31.3,29.8v5.6c0,0.2-0.2,0.4-0.4,0.4h-52.4c-0.1,0-0.2,0.1-0.2,0.2v0.4c0,19.9,10.5,33.2,26.3,33.2
+                               c6.2,0,13.2-2.3,20.2-6.7c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0.1,0.3,0.2l2.9,5.8c0.1,0.2,0,0.4-0.1,0.5
+                               c-8.6,6.2-16.9,8.9-27.9,8.9C206.6,192.5,191.1,176.2,191.1,153.8"/>
+                               <path stroke="currentColor" d="M331.9,128.7c7.3-7.5,15.5-14.4,26.8-14.4c15.2,0,24.3,9.8,24.3,26.1v50.1c0,0.2-0.2,0.4-0.4,0.4h-12.2
+                               c-0.2,0-0.4-0.2-0.4-0.4v-50.5c0-5.7-1.4-10-4.2-12.8c-2.3-2.3-5.6-3.5-9.8-3.5c-8.1,0-16.9,7.7-22,15.3c0,0,0,0.1,0,0.1l0,51.4
+                               c0,0.2-0.2,0.4-0.4,0.4h-13.2c-0.2,0-0.4-0.2-0.4-0.4v-50.5c0-7.4-2.4-16.3-13.9-16.3c-8.1,0-16.9,7.7-22,15.2c0,0,0,0.1,0,0.1
+                               l0,51.4c0,0.2-0.2,0.4-0.4,0.4h-13.1c-0.2,0-0.4-0.2-0.4-0.4v-53.9c0-12-2.6-16.8-10.7-19.7c-0.2-0.1-0.3-0.2-0.3-0.4l0-0.2
+                               c0-0.2,0.2-0.4,0.4-0.4h24.2c0.2,0,0.4,0.2,0.4,0.4v10.3c0,0.1,0,0.2,0.1,0.2c0.1,0,0.2,0,0.2-0.1c5.8-5.9,13.8-12.6,24.9-12.6
+                               C323.9,114.3,329.7,123.3,331.9,128.7C331.8,128.7,331.9,128.8,331.9,128.7c0.1,0.1,0.2,0.1,0.3,0"/>
+                               <path stroke="currentColor" d="M421.5,184.8c9.2,0,15.4-4.3,15.4-10.7c0-5.2-3.4-9.4-20.6-15.9c-15.3-5.8-21.6-12.3-21.6-22.3
+                               c0-12.7,11.1-21.7,26.9-21.7c12.8,0,21.1,5,24.8,8c0.1,0.1,0.1,0.2,0.2,0.3c0,0.1,0,0.2-0.1,0.3l-7.7,8.3
+                               c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.2,0-0.3-0.1c-3-3.4-9.1-9-17.1-9c-8.8,0-14.1,3.8-14.1,10.2c0,6.2,3.5,8.9,19.6,15.1
+                               c16.3,6.3,22.1,12.3,22.1,22.7c0,13-11.5,22.5-27.3,22.5c-11,0-20.3-2.7-27.7-8c-0.1-0.1-0.2-0.2-0.2-0.3c0-0.1,0-0.2,0.1-0.3
+                               l7.7-8.4c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0,0.3,0.1C408.2,182.1,414.1,184.8,421.5,184.8"/>
+                               <path stroke="currentColor" d="M460,191l0-99.3c0-11.6-2.6-16.2-10.7-19c-0.2-0.1-0.3-0.2-0.3-0.4v-1.9c0-0.2,0.2-0.4,0.4-0.4h24.2l0.3,0.1
+                               l0.1,0.3l0,120.2c0,0.2-0.2,0.4-0.4,0.4h-13.2c0,0-0.4,0-0.4-0.4"/>
+                               <path stroke="currentColor" d="M499.7,141.8c0,0.1,0,0.1,0.1,0.2c0,0,0.1,0.1,0.2,0.1h36.9c0.1,0,0.2-0.1,0.2-0.2v-3.6
+                               c0-9.6-6.5-16.3-15.9-16.3C509.8,121.9,501.6,129.5,499.7,141.8 M484.1,153.8c0-22.6,15.7-39.7,36.6-39.7
+                               c18.4,0,31.3,12.3,31.3,29.8v5.6c0,0.2-0.2,0.4-0.4,0.4h-52.4c-0.1,0-0.2,0.1-0.2,0.2v0.4c0,19.9,10.5,33.2,26.2,33.2
+                               c6.2,0,13.2-2.3,20.2-6.7c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0.1,0.3,0.2l3,5.8c0.1,0.2,0,0.4-0.1,0.5
+                               c-8.6,6.2-16.9,8.9-27.9,8.9C499.6,192.5,484.1,176.2,484.1,153.8"/>
+                               <path stroke="currentColor" d="M891.7,141.8c0,0.1,0,0.1,0,0.2c0,0,0.1,0.1,0.2,0.1h36.9c0.1,0,0.2-0.1,0.2-0.2v-3.6
+                               c0-9.6-6.5-16.3-15.9-16.3C901.8,121.9,893.6,129.5,891.7,141.8 M876.1,153.8c0-22.6,15.7-39.7,36.6-39.7
+                               c18.4,0,31.3,12.3,31.3,29.8v5.6c0,0.2-0.2,0.4-0.4,0.4h-52.4c-0.1,0-0.2,0.1-0.2,0.2v0.4c0,19.9,10.6,33.2,26.3,33.2
+                               c6.2,0,13.2-2.3,20.2-6.7c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0.1,0.3,0.2l3,5.8c0.1,0.2,0,0.4-0.1,0.5
+                               c-8.6,6.2-16.9,8.9-27.9,8.9C891.6,192.5,876.1,176.2,876.1,153.8"/>
+                               <path stroke="currentColor" d="M630,123v-6.6c0-0.2,0.2-0.4,0.4-0.4h12.4c0.1,0,0.2-0.1,0.2-0.2v-15.3c0-17.4,12.4-29.5,30.1-29.5
+                               c9.8,0,16.7,3.3,21.7,6.2c0.1,0,0.2,0.2,0.2,0.3c0,0.1,0,0.2-0.1,0.3l-7.7,9.5c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0-0.2,0-0.3-0.1
+                               l-0.4-0.4c-5.7-4.9-9.5-8.1-16-8.1c-8.2,0-13.2,9.6-13.2,25.2l0,11.8c0,0,0,0.1,0.1,0.1c0,0,0.1,0.1,0.2,0.1h18.4
+                               c0.2,0,0.4,0.2,0.4,0.4v7.2c0,0.2-0.2,0.4-0.4,0.4h-18.4c-0.1,0-0.2,0.1-0.2,0.2l0,67.4c0,0.2-0.2,0.4-0.4,0.4h-13.1l-0.3-0.1
+                               l-0.1-0.3l0-67.4c0-0.1,0-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1h-12.2c-0.2,0-0.4-0.2-0.4-0.4"/>
+                               <path stroke="currentColor" d="M708.4,128.1c8.9-9.4,14-13.8,21.8-13.8c5,0,7.7,3,9.1,4.6l0.3,0.4c0.1,0.2,0.1,0.4,0,0.5l-9.3,10.8
+                               c-0.1,0.2-0.4,0.2-0.6,0.1c-2.4-1.9-4.1-2.5-6.9-2.5c-4.5,0-10.6,5.9-14.8,10.3c0,0,0,0.1,0,0.1v51.9c0,0.2-0.2,0.4-0.4,0.4
+                               h-13.2c-0.2,0-0.4-0.2-0.4-0.4v-53.9c0-12-2.6-16.8-10.7-19.7c-0.2-0.1-0.3-0.2-0.3-0.4v-0.2c0-0.2,0.2-0.4,0.4-0.4h24.2
+                               c0.2,0,0.4,0.2,0.4,0.4V128c0,0.1,0,0.2,0.1,0.2C708.2,128.2,708.3,128.2,708.4,128.1"/>
+                               <path stroke="currentColor" d="M970.4,128.1c8.9-9.4,14-13.8,21.8-13.8c5,0,7.7,3,9.1,4.6l0.3,0.4c0.1,0.2,0.1,0.4,0,0.5l-9.3,10.8
+                               c-0.1,0.2-0.4,0.2-0.6,0.1c-2.4-1.9-4.1-2.5-6.9-2.5c-4.5,0-10.6,5.9-14.8,10.3c-0.1,0-0.1,0.1-0.1,0.1v51.9
+                               c0,0.2-0.2,0.4-0.4,0.4h-13.2c-0.2,0-0.4-0.2-0.4-0.4v-53.9c0-12-2.6-16.8-10.7-19.7c-0.2-0.1-0.3-0.2-0.3-0.4v-0.2
+                               c0-0.2,0.2-0.4,0.4-0.4h24.2c0.2,0,0.4,0.2,0.4,0.4V128c0,0.1,0.1,0.2,0.1,0.2C970.2,128.2,970.3,128.2,970.4,128.1"/>
+                               <path stroke="currentColor" d="M785.7,153.5l-15.4,3.5c-9.4,2.2-14.3,7.3-14.3,14.7c0,6.3,5.3,11,12.5,11c5.5,0,13-3.7,17.4-8.6
+                               c0,0,0-0.1,0-0.1v-20.3c0-0.1,0-0.1-0.1-0.2C785.9,153.5,785.8,153.5,785.7,153.5 M747,136.7c-1.1-1.8-1.5-3.5-1.5-5.7
+                               c0-9.6,11.5-16.7,27.4-16.7c18.2,0,27.1,8.1,27.1,24.8v31.1c0,11.6,2.6,16.2,10.7,19c0.2,0.1,0.3,0.2,0.3,0.4v0.9
+                               c0,0.2-0.2,0.4-0.4,0.4h-20.3c-0.2,0-0.3-0.1-0.4-0.3l-2.3-8c0-0.1-0.1-0.1-0.1-0.1c-0.1,0-0.1,0-0.2,0.1
+                               c-5.7,6-15.2,9.7-24.7,9.7c-12.3,0-20.6-7.6-20.6-18.9c0-13,7.7-20.7,24.2-24.2l19.7-4.1c0.1,0,0.2-0.1,0.2-0.2v-8.8
+                               c0-9.1-5.1-13.9-14.7-13.9c-8.5,0-11.5,4-11.5,7.5c0,0.5,0.1,1.6,0.6,3.1c0,0.1,0,0.2,0,0.3c-0.1,0.1-0.2,0.2-0.3,0.2l-12.9,3.5
+                               c-0.2,0.1-0.4,0-0.5-0.2"/>
+                               <path stroke="currentColor" d="M857.3,174.1c0-5.2-3.4-9.4-20.6-15.9c-15.3-5.8-21.6-12.3-21.6-22.3c0-12.7,11.1-21.7,27-21.7
+                               c12.8,0,21.1,5,24.8,8c0.1,0.1,0.2,0.2,0.2,0.3c0,0.1,0,0.2-0.1,0.3l-7.7,8.3c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.2,0-0.3-0.1
+                               c-3-3.4-9.1-9-17.1-9c-8.8,0-14.1,3.8-14.1,10.2c0,6.2,3.5,8.9,19.6,15.1c16.3,6.3,22.1,12.3,22.1,22.7c0,13-11.5,22.5-27.3,22.5
+                               c-11,0-20.3-2.7-27.8-8c-0.1-0.1-0.2-0.2-0.2-0.3c0-0.1,0-0.2,0.1-0.3l7.6-8.4c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0,0.3,0.1
+                               c6.2,6.3,12.1,9.1,19.6,9.1C851.1,184.8,857.3,180.5,857.3,174.1"/>
+                               <path stroke="currentColor" d="M609.9,127.3C609.9,127.2,609.9,127.2,609.9,127.3l0.2-2c0-1.7-0.4-3.2-1.3-4.5c-1.2-1.6-3-2.7-5.4-3.1
+                               c-0.2,0-0.4-0.2-0.4-0.4v-0.9c0-0.2,0.2-0.4,0.4-0.4h5.6l0,0h14.2c0.1,0,0.3,0.1,0.3,0.2c0.1,0.1,0.1,0.3,0,0.4
+                               C592.9,189,592.8,189,592.8,189l-17.3,38.7c-0.1,0.2-0.2,0.2-0.4,0.2l-15.1,0c-0.2,0-0.3-0.1-0.4-0.3l0-0.1
+                               c0-0.1,0.1-0.2,0.1-0.3c9.4-8.6,22.8-36.3,24.3-39.4c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1l-30.2-71.1l0-0.2l0.1-0.2
+                               c0.1-0.1,0.2-0.2,0.3-0.2h14.5c0.2,0,0.3,0.1,0.4,0.3l22.5,54.1c0,0.1,0.1,0.1,0.2,0.1c0.1,0,0.2,0,0.2-0.1l9.2-22.3
+                               c8.1-19.8,8.1-19.8,8.1-19.8c0,0,0.2-0.7,0.2-0.7"/>
+                               <path stroke="currentColor" d="M115,191V93.2c0-11.8-2.8-16.5-11.7-19.4c-0.2-0.1-0.3-0.2-0.3-0.4v-1c0-0.2,0.2-0.4,0.4-0.4h25.2
+                               c0.2,0,0.4,0.2,0.4,0.4v54.9c0,0.1,0.1,0.2,0.1,0.2c0.1,0,0.2,0,0.2,0c6.1-5.8,14.5-12.4,26.2-12.4c16,0,25.5,9.6,25.5,25.8v49.7
+                               c0,0.2-0.2,0.4-0.4,0.4h-13.2c-0.2,0-0.4-0.2-0.4-0.4v-49.9c0-7.3-2.5-16.1-14.3-16.1c-8.3,0-17.4,7.6-22.6,15.1c0,0,0,0.1,0,0.1
+                               l0,50.8c0,0.2-0.2,0.4-0.4,0.4h-13.9c-0.2,0-0.4-0.2-0.4-0.4"/>
+                       </g>
+               </g>
+       </symbol>
 </svg>
-<header>
-       <h1></h1>
-</header>
-<main>
-       <table>
-               <thead>
-               <tr>
-                       <th></th>
-                       <th></th>
-                       <th>Type</th>
-                       <th>Mandatory</th>
-                       <th>Validated</th>
-                       <th>Score</th>
-               </tr>
-               </thead>
-               <tbody>
+<div id="wrapper">
+       <header>
+               <div id="logo"></div>
+               <div id="tile"></div>
+               <h1></h1>
+       </header>
+       <main>
+               <table>
+                       <thead>
+                       <tr>
+                               <th></th>
+                               <th class="t"></th>
+                               <th class="y">Type</th>
+                               <th class="c">Mandatory</th>
+                               <th class="c">Validated</th>
+                               <th class="c">Score</th>
+                       </tr>
+                       </thead>
+                       <tbody>
 
-               </tbody>
-       </table>
-</main>
+                       </tbody>
+               </table>
+       </main>
+</div>
 
 <div id="scowin">
-       <div id="scobar"><div id="scoicon"></div><h2></h2><a href="#" class="close"></a></div>
+       <div id="scobar">
+               <div id="scoicon"></div>
+               <h2></h2><a href="#" class="close"></a></div>
        <iframe id="sco" frameborder="0"></iframe>
 </div>
 

diff --git a/js/scormpackage.js b/js/scormpackage.js
index 86515d8b3960312941e56b9f09c8243a3ea02c3e..0e93cecfcc3f9a2aae5c9bf0a8ffee9a10f7bea5 100644 (file)
--- a/js/scormpackage.js
+++ b/js/scormpackage.js
@@ -1,10 +1,12 @@
-var status = {};
+window.savedState = {};
+console.log(window.savedState);
+
 
 (function (global) {
     $(function () {
-        initEvents();
-        setContents();
-
+        $("header #logo").html(getSpriteIcon('logo'));
+        $("header #tile").html(getSpriteIcon('tile'));
+        initScorm();
     });
 
 })(typeof window === 'undefined' ? this : window);
@@ -38,7 +40,7 @@ function openSubSCO(id) {
         path = 'js/libs/pdfjs/web/viewer.html?file=../../../../' + path;
     }
 
-    $("#scowin").addClass('show');
+    $("#scowin").addClass('show').attr('data-type', module.type);
     $("#scowin h2").text(module.title);
     $("#scobar #scoicon").html(getSpriteIcon('icon-' + module.type));
     $("#scobar .close").html(getSpriteIcon('interface-close'));
@@ -54,12 +56,13 @@ function setModuleState(id, completion_status, success_status, score, location)
         location = {};
     }
     var s = {completion_status: completion_status, success_status: success_status, score: score, location: location};
-    status[id] = s;
+    window.savedState[id] = s;
     saveStatus();
+    setContents();
 }
 
 function saveStatus() {
-
+    setSCORMLocation(window.savedState);
 }
 
 function getModuleData(id) {
@@ -73,19 +76,23 @@ function getModuleData(id) {
 }
 
 function setContents() {
-    var vcheck = '';
-    var xcheck = '';
+    var vcheck = getSpriteIcon('check-ok');
+    var xcheck = getSpriteIcon('check-nok');
     var types = {IN: 'Infographic PDF', AN: 'Animation', VI: 'Video', FB: 'Fluidbook', PC: 'Podcast HTML', QZ: 'Quiz'};
     $('header h1').text(DATA.title);
     $('title').text(DATA.title);
+    $('tbody').html('');
     $.each(DATA.modules, function (k, v) {
-        var tr = $('<tr data-type="' + v.type + '" data-id="' + v.id + '"><td></td></tr>');
+        var s = (status[v.id] === undefined) ? {complete_status: 'incomplete', success_status: 'unknown', score: 0, location: {}} : status[v.id];
+        console.log(s);
+        var tr = $('<tr data-type="' + v.type + '" data-id="' + v.id + '"><td class="i">' + getSpriteIcon('icon-' + v.type) + '</td></tr>');
         $('tbody').append(tr);
-        tr.append('<td>' + v.title + '</td>');
-        tr.append('<td>' + types[v.type] + '</td>');
-        tr.append('<td>' + (v.mandatory ? vcheck : xcheck) + '</td>');
-        tr.append('<td>' + '</td>');
-        tr.append('<td class="score">' + '</td>');
+        tr.append('<td class="t">' + v.title + '</td>');
+        tr.append('<td class="y">' + types[v.type] + '</td>');
+        tr.append('<td class="c">' + (v.mandatory ? vcheck : xcheck) + '</td>');
+        tr.append('<td class="c">' + (s.complete_status === 'completed' ? vcheck : xcheck) + '</td>');
+        tr.append('<td class="score c" data-score="' + s.score + '"><div>' + s.score + ' %</div></td>');
+
     });
 }
 
@@ -107,42 +114,36 @@ function setContents() {
     // Using `this` for web workers & supports Browserify / Webpack.
 })(typeof window === 'undefined' ? this : window);
 
-SCORM = true;
-
-function initScormEvents() {
+function initScorm() {
     SCORM = doLMSInitialize();
-    var defaultState = {q: 1};
-    if (!SCORM) {
-        // No SCORM, we init at question 1
-        $(document).trigger('quizinit', defaultState);
-        return false;
-    }
+
     $(window).on('unload', function () {
         doLMSFinish();
     });
 
-    var currentStatus = getScormValue('cmi.core.lesson_status');
-    if (currentStatus != 'passed' || currentStatus != 'completed') {
-        setScormValue('cmi.core.lesson_status', 'incomplete');
-    }
-
-    var savedState = getScormValue('cmi.core.lesson_location');
     try {
-        if (savedState == '') {
-            savedState = defaultState;
+        var l = getScormValue('cmi.location');
+        if (l === null || l === 'null') {
+            window.savedState = {};
         } else {
-            savedState = JSON.parse(savedState);
+            window.savedState = JSON.parse(l);
         }
-        $(document).trigger('quizinit', savedState);
-    } catch (err) {
-        console.error(err);
+    } catch (e) {
+
     }
 
+    if (window.savedState === undefined || window.savedState === null || window.savedState === 'null') {
+        window.savedState = {};
+    }
+
+    initEvents();
+    setContents();
+
     return true;
 }
 
 function setSCORMLocation(location) {
-    return setScormValue('cmi.core.lesson_location', JSON.stringify(location));
+    return setScormValue('cmi.location', JSON.stringify(location));
 }
 
 function setSCORMScore(score, max, min) {

diff --git a/style/style.css b/style/style.css
index fe2334cead3f927cac56197b9705d8f23ebdb869..520dc597aabcb0d4234d0f73aaaae69cc8f849c4 100644 (file)
--- a/style/style.css
+++ b/style/style.css
@@ -13,6 +13,34 @@ body, html {
   cursor: pointer;
 }
 
+header {
+  position: relative;
+  height: 200px;
+}
+header #logo {
+  position: absolute;
+  top: 20px;
+  right: 0;
+  color: #f0f0f0;
+}
+header #logo svg {
+  height: 50px;
+}
+header #tile {
+  position: absolute;
+  top: -5px;
+  left: -100px;
+}
+header #tile svg {
+  height: 200px;
+  color: #f0f0f0;
+}
+header h1 {
+  position: absolute;
+  top: 110px;
+  left: 40px;
+}
+
 #scowin {
   position: fixed;
   top: 0;
@@ -25,6 +53,24 @@ body, html {
   transition: 500ms opacity;
   background-color: #fff;
 }
+#scowin[data-type=IN] #scobar {
+  background-color: #47484e;
+}
+#scowin[data-type=VI] #scobar {
+  background-color: #d0167c;
+}
+#scowin[data-type=AN] #scobar {
+  background-color: #84156f;
+}
+#scowin[data-type=FB] #scobar {
+  background-color: #f8971d;
+}
+#scowin[data-type=PC] #scobar {
+  background-color: #00a0af;
+}
+#scowin[data-type=QZ] #scobar {
+  background-color: #00abeb;
+}
 #scowin.show {
   opacity: 1;
   display: block;
@@ -36,7 +82,6 @@ body, html {
   left: 0;
   width: 100%;
   height: 30px;
-  background: #8b276d;
   color: #fff;
 }
 #scowin #scobar a.close {
@@ -71,6 +116,91 @@ body, html {
   background-color: #000;
 }
 
+#wrapper {
+  width: 1024px;
+  margin: 0 auto;
+}
+#wrapper main table {
+  border-collapse: collapse;
+  width: 1024px;
+}
+#wrapper main table th, #wrapper main table td {
+  padding: 5px 10px;
+  text-align: left;
+}
+#wrapper main table th.t, #wrapper main table td.t {
+  border-bottom: 1px solid #f0f0f0;
+}
+#wrapper main table th.y, #wrapper main table td.y {
+  padding-left: 30px;
+}
+#wrapper main table th.c, #wrapper main table td.c {
+  text-align: center;
+}
+#wrapper main table tbody tr[data-type=IN] td.t {
+  border-left-color: #47484e;
+}
+#wrapper main table tbody tr[data-type=IN] td.i svg {
+  color: #47484e;
+}
+#wrapper main table tbody tr[data-type=VI] td.t {
+  border-left-color: #d0167c;
+}
+#wrapper main table tbody tr[data-type=VI] td.i svg {
+  color: #d0167c;
+}
+#wrapper main table tbody tr[data-type=AN] td.t {
+  border-left-color: #84156f;
+}
+#wrapper main table tbody tr[data-type=AN] td.i svg {
+  color: #84156f;
+}
+#wrapper main table tbody tr[data-type=FB] td.t {
+  border-left-color: #f8971d;
+}
+#wrapper main table tbody tr[data-type=FB] td.i svg {
+  color: #f8971d;
+}
+#wrapper main table tbody tr[data-type=PC] td.t {
+  border-left-color: #00a0af;
+}
+#wrapper main table tbody tr[data-type=PC] td.i svg {
+  color: #00a0af;
+}
+#wrapper main table tbody tr[data-type=QZ] td.t {
+  border-left-color: #00abeb;
+}
+#wrapper main table tbody tr[data-type=QZ] td.i svg {
+  color: #00abeb;
+}
+#wrapper main table tbody tr:hover td.t {
+  background-color: #e6e6e6;
+}
+#wrapper main table tbody td.i svg {
+  position: relative;
+  left: 10px;
+  top: 4px;
+}
+#wrapper main table tbody td.t {
+  text-align: center;
+  font-weight: 600;
+  font-size: 125%;
+  padding-left: 50px;
+  padding-right: 50px;
+  border-bottom: 1px solid #f0f0f0;
+  border-left: 10px solid #000000;
+}
+#wrapper main table tbody td.score div {
+  width: 50px;
+  padding: 5px;
+  margin: 0 auto;
+  background-color: #e4ff19;
+  font-weight: 600;
+}
+#wrapper main table tbody td svg {
+  height: 30px;
+}
+
 /* open-sans-300 - latin */
 @font-face {
   font-family: "Open Sans";

diff --git a/style/style.css.map b/style/style.css.map
index 3e219a119121058858497fbf606a39c0fc158e88..1abca19ad52a05d4f0d2b6ca4cf0e618095f1e5d 100644 (file)
--- a/style/style.css.map
+++ b/style/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEJ;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["style.sass"],"names":[],"mappings":"AAEA;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEJ;EACE;EACA;EACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAII;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAsDF;EACE,kBAvDA;;AAyDN;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;AAGE;EACE;EACA;;AAEA;EACE;EACA;;AACA;EACE;;AAEF;EACE;;AAEF;EACE;;AAMI;EACE,mBAjIR;;AAmIQ;EACE,OApIV;;AAgIM;EACE,mBAjIR;;AAmIQ;EACE,OApIV;;AAgIM;EACE,mBAjIR;;AAmIQ;EACE,OApIV;;AAgIM;EACE,mBAjIR;;AAmIQ;EACE,OApIV;;AAgIM;EACE,mBAjIR;;AAmIQ;EACE,OApIV;;AAgIM;EACE,mBAjIR;;AAmIQ;EACE,OApIV;;AAuII;EACE;;AAGF;EACE;EACA;EACA;;AACJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAEJ;EACE;;;AAEZ;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA;;AAGF;AACA;EACE;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file

diff --git a/style/style.sass b/style/style.sass
index adacb1c9e6026384160bca5d1e8c071c3a22c5f7..f123354ea2bf17eb1b416e9c8c68f48a3a48aa8a 100644 (file)
--- a/style/style.sass
+++ b/style/style.sass
@@ -1,3 +1,5 @@
+$colors:(IN: #47484e, VI: #d0167c , AN: #84156f, FB: #f8971d, PC: #00a0af, QZ: #00abeb)
+
 body, html
   min-height: 100%
 
@@ -11,6 +13,31 @@ body, html
 [data-id]
   cursor: pointer
 
+header
+  position: relative
+  height: 200px
+  #logo
+    position: absolute
+    top: 20px
+    right: 0
+    color: #f0f0f0
+    svg
+      height: 50px
+
+  #tile
+    position: absolute
+    top: -5px
+    left: -100px
+
+    svg
+      height: 200px
+      color: #f0f0f0
+
+  h1
+    position: absolute
+    top: 110px
+    left: 40px
+
 #scowin
   position: fixed
   top: 0
@@ -22,6 +49,12 @@ body, html
   opacity: 0
   transition: 500ms opacity
   background-color: #fff
+
+  @each $type, $color in $colors
+    &[data-type=#{$type}]
+      #scobar
+        background-color: $color
+
   &.show
     opacity: 1
     display: block
@@ -34,13 +67,13 @@ body, html
     left: 0
     width: 100%
     height: 30px
-    background: #8b276d
     color: #fff
 
     a.close
       position: absolute
       top: 5px
       right: 5px
+
       svg
         width: 20px
         height: 20px
@@ -68,6 +101,66 @@ body, html
     left: 0
     background-color: #000
 
+#wrapper
+  width: 1024px
+  margin: 0 auto
+
+  main
+    table
+      border-collapse: collapse
+      width: 1024px
+
+      th, td
+        padding: 5px 10px
+        text-align: left
+        &.t
+          border-bottom: 1px solid #f0f0f0
+
+        &.y
+          padding-left: 30px
+
+        &.c
+          text-align: center
+
+      tbody
+        tr
+          @each $type, $color in $colors
+            &[data-type=#{$type}]
+              td.t
+                border-left-color: $color
+              td.i
+                svg
+                  color: $color
+
+          &:hover
+            td.t
+              background-color: #e6e6e6
+        td
+          &.i
+            svg
+              position: relative
+              left: 10px
+              top: 4px
+          &.t
+            text-align: center
+            font-weight: 600
+            font-size: 125%
+            padding-left: 50px
+            padding-right: 50px
+            border-bottom: 1px solid #f0f0f0
+            border-left: 10px solid #000000
+
+          &.score
+            div
+              width: 50px
+              padding: 5px
+              margin: 0 auto
+              background-color: #e4ff19
+              font-weight: 600
+
+          svg
+            height: 30px
+
 /* open-sans-300 - latin */
 @font-face
   font-family: 'Open Sans'