--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width">
+ <title></title>
+ <link href="css/app.css" rel="stylesheet">
+</head>
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
+ <symbol id="interface-close" viewBox="0 0 512 512">
+ <path fill="currentColor"
+ d="m512 63l-66-63-190 193-193-193-63 63 193 193-193 190 63 66 193-193 190 193 66-66-193-190z"/>
+ </symbol>
+ <symbol id="icon-QZ" viewBox="0 0 36 36">
+ <path stroke="currentColor" fill="transparent" d="M23.1,9.6c5.3,0,9.5,3.8,9.5,8.5c0,4.7-4.3,8.5-9.5,8.5c-1.1,0-2.1-0.2-3-0.4c-1.1,1-1.7,1.4-3.6,2.3
+ M16.5,28.5l0-4.3c-1.8-1.5-2.9-3.7-2.9-6.1 M23.7,22.2c0,0.1,0,0.2,0,0.3 M24.5,14.4l-0.6,5.4 M12.9,13.3c0,0.1,0,0.2,0,0.3
+ M11.2,6.8c1-1.8,3.9-1.9,3.9,0.6c0,1.7-2.2,1.6-2.2,3.6 M12.9,1.1c-5.3,0-9.5,3.8-9.5,8.5c0,4.7,4.3,8.5,9.5,8.5
+ c1.1,0,2.1-0.2,3-0.4c1.1,1,1.7,1.4,3.6,2.3l0-4.3c1.8-1.5,2.9-3.7,2.9-6.1C22.4,4.9,18.1,1.1,12.9,1.1z"/>
+ </symbol>
+ <symbol id="icon-FB" viewBox="0 0 36 36">
+ <g>
+ <path stroke="currentColor" fill="transparent" d="M27.5,28.3v2.2 M27.5,26.8v-0.7c0-1.2-1-2.2-2.2-2.2H8.5c-1.2,0-2.2-1-2.2-2.2v-2.2 M30,34.9h-4.9
+ c-0.3,0-0.5-0.2-0.5-0.5v-7.1c0-0.3,0.2-0.5,0.5-0.5H30c0.3,0,0.5,0.2,0.5,0.5v7.1C30.5,34.6,30.2,34.9,30,34.9z M29.7,16.5h-7.3
+ c-1.4,0-2.4,0.4-2.9,1.5H18V5.5c0-2.4,1.4-4.4,4.4-4.4h7.3V16.5z M6.3,16.5h7.3c1.4,0,2.4,0.4,2.9,1.5H18V5.5
+ c0-2.4-1.4-4.4-4.4-4.4H6.3V16.5z M31.2,4.1h1.5v15.4H22.4l-1.5,1.5h-5.9l-1.5-1.5H3.3V4.1h1.5"/>
+ </g>
+ </symbol>
+ <symbol id="icon-IN" viewBox="0 0 36 36">
+ <path stroke="currentColor" fill="transparent" d="M7.3,18.9h7.8v-7.6H7.3V18.9z M28.1,7.5H7.3V5h20.8V7.5z M17,18.9h11.7 M17,16.4h11.7 M17,13.8h11.7 M17,11.3
+ h11.7"/>
+ <path stroke="currentColor" fill="transparent"
+ d="M33,26.6H4.6c-0.7,0-1.3-0.6-1.3-1.3V1.1h28.4v24.2C31.7,26,32.3,26.6,33,26.6"/>
+ </symbol>
+ <symbol id="icon-AN" viewBox="0 0 36 36">
+ <path stroke="currentColor" fill="transparent" d="M14.4,16.7V8.5c0-0.7,0.7-1.2,1.3-0.8l7.2,4.1c0.6,0.4,0.6,1.3,0,1.7l-7.2,4.1C15.2,17.9,14.4,17.4,14.4,16.7z
+ "/>
+ <path stroke="currentColor" fill="transparent" d="M32.2,24.1H3.8c-0.3,0-0.5-0.2-0.5-0.5V1.6c0-0.3,0.2-0.5,0.5-0.5h28.3c0.3,0,0.5,0.2,0.5,0.5v21.9
+ C32.6,23.9,32.4,24.1,32.2,24.1z"/>
+ </symbol>
+ <symbol id="icon-VI" viewBox="0 0 36 36">
+ <path stroke="currentColor" fill="transparent" d="M14.4,16.7V8.5c0-0.7,0.7-1.2,1.3-0.8l7.2,4.1c0.6,0.4,0.6,1.3,0,1.7l-7.2,4.1C15.2,17.9,14.4,17.4,14.4,16.7z
+ "/>
+ <path stroke="currentColor" fill="transparent" d="M32.2,24.1H3.8c-0.3,0-0.5-0.2-0.5-0.5V1.6c0-0.3,0.2-0.5,0.5-0.5h28.3c0.3,0,0.5,0.2,0.5,0.5v21.9
+ C32.6,23.9,32.4,24.1,32.2,24.1z"/>
+ </symbol>
+ <symbol id="icon-PC" viewBox="0 0 36 36">
+ <path stroke="currentColor" fill="transparent" d="M27.5,28.7c3.2-3.3,5.1-7.9,5.1-12.9s-2-9.6-5.1-12.9"/>
+ <path stroke="currentColor" fill="transparent"
+ d="M10.6,21.9H5.2c-1,0-1.8-0.8-1.8-1.8v-8.5c0-1,0.8-1.8,1.8-1.8h5.5l8.5-8.5v29.3L10.6,21.9z"/>
+ <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>
+ <symbol id="lock-locked" viewBox="0 0 30 30">
+ <g>
+ <path fill="currentColor" d="M5.7,8.7c0-2.5,2.1-4.6,4.6-4.6s4.6,2.1,4.6,4.6v2.7h2.2V8.7c0-3.8-3.1-6.8-6.8-6.8S3.5,5,3.5,8.7v2.7h2.2
+ V8.7z"/>
+ <path fill="currentColor" d="M11.3,20.9l0.1,2.2c0,0.4-0.5,0.8-0.9,0.8h-0.4c-0.4,0-0.9-0.3-0.9-0.8l0.1-2.2c-0.6-0.3-1-1-1-1.7
+ c0-1.1,0.9-2,2-2s2,0.9,2,2C12.3,19.9,11.9,20.6,11.3,20.9 M19.2,13.2c0-0.4-0.4-0.8-0.8-0.8H2.3c-0.5,0-0.8,0.4-0.8,0.8l-0.3,8.4
+ c0,1.5,0.6,2.9,1.7,3.8c1.9,1.5,4.5,2.6,7.5,2.6c3.1,0,5.9-1.2,7.8-2.8c0.9-0.8,1.5-2,1.4-3.3L19.2,13.2z"/>
+ </g>
+ </symbol>
+ <symbol id="lock-unlocked" viewBox="0 0 30 30">
+ <g>
+ <path fill="currentColor" d="M11.4,21l0.1,2.2c0,0.4-0.5,0.8-0.9,0.8h-0.4c-0.4,0-0.9-0.4-0.9-0.8L9.4,21c-0.6-0.3-1-1-1-1.7
+ c0-1.1,0.9-2,2-2s2,0.9,2,2C12.5,20,12,20.7,11.4,21 M19.5,13.3c0-0.4-0.4-0.8-0.8-0.8H2.2c-0.5,0-0.8,0.4-0.9,0.8l-0.3,8.4
+ c-0.1,1.5,0.6,2.9,1.8,3.8c1.9,1.5,4.6,2.6,7.6,2.6c3.2,0,6-1.2,7.9-2.8c1-0.8,1.5-2,1.4-3.3L19.5,13.3z"/>
+ <path fill="currentColor" d="M22,2c-3.8,0-6.9,3.1-6.9,6.8v2.7h2.3V8.8c0-2.5,2.1-4.6,4.7-4.6s4.7,2.1,4.7,4.6v2.7h2.3V8.8
+ C28.9,5.1,25.8,2,22,2"/>
+ </g>
+ </symbol>
+</svg>
+<div id="z">
+ <div id="wrapper">
+ <header>
+ <div id="logo"></div>
+ <div id="tile"></div>
+ <div id="contents">
+ <h1></h1>
+ <p></p>
+ </div>
+ </header>
+ <main>
+ <table>
+ <thead>
+ <tr>
+ <th></th>
+ <th class="t"></th>
+ <th class="y">Type</th>
+ <th class="c">Mandatory</th>
+ <th class="c">Completed</th>
+ <th class="c">Score</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+
+ </tbody>
+ </table>
+ </main>
+ </div>
+</div>
+
+<div id="scowin">
+ <div id="scobar">
+ <div id="scoicon"></div>
+ <h2></h2><a href="#" class="close"></a></div>
+ <iframe id="sco" frameborder="0"></iframe>
+</div>
+
+<script src="data.js"></script>
+<script src="js/app.js"></script>
+</body>
+</html>
--- /dev/null
+require('./bootstrap');
+import {SCORM} from 'pipwerks-scorm-api-wrapper';
+import gsap from "gsap";
+
+window.savedState = {};
+window.currentModule = null;
+
+
+SCORM_INITED = false;
+SCORM_START_TIME = null;
+SCORM_INTERACTION_TIMESTAMPS = [];
+SCORM_CORRECT_ANSWERS = [];
+SCORM_ID_TO_N = {};
+SCORM_WEIGHTING = 0;
+SCORM_QUESTIONS = [];
+SCORM_SUCCESS_STATUS = 'unknown';
+SCORM_SUCCESS_SCORE = 0;
+SCORM_EVENTS_INITED = false;
+SCORM_INTERACTIONS_INITED = false;
+SCORM_LOCATION_INITED = false;
+SCORM_OK = false;
+
+var _CMI12 = {
+ 'location': 'cmi.core.lesson_location',
+ 'status': "cmi.core.lesson_status",
+ 'session_time': 'cmi.core.session_time',
+ 'success_status': '',
+ 'exit': 'cmi.core.exit',
+ 'cmi.score.raw': 'cmi.core.score.raw',
+ 'cmi.score.min': 'cmi.core.score.min',
+ 'cmi.score.max': 'cmi.core.score.max',
+ 'cmi.score.scaled': '',
+};
+
+var _CMI2004 = {
+ 'location': 'cmi.location',
+ 'status': 'cmi.completion_status',
+ 'session_time': 'cmi.session_time',
+ 'success_status': 'cmi.success_status',
+ 'exit': 'cmi.exit',
+};
+
+
+$(function () {
+ $("header #logo").html(getSpriteIcon('logo'));
+ $("header #tile").html(getSpriteIcon('tile'));
+ initScorm();
+ $(window).on('resize', function () {
+ resize();
+ });
+ resize();
+});
+
+function resize() {
+ if ($(window).width() < 480) {
+ $("#z").css('transform', 'scale(' + ($(window).width()/480) + ')');
+ }else{
+ $("#z").css('transform', 'scale(1)');
+ }
+}
+
+function _cmi(key) {
+ var res = null;
+ switch (pipwerks.SCORM.version) {
+ case "1.2" :
+ res = _CMI12[key];
+ break;
+ case '2004':
+ res = _CMI2004[key];
+ break;
+ }
+ if (res == undefined || res == null) {
+ res = key;
+ }
+ return res;
+}
+
+function initScorm() {
+ if (SCORM_INITED) {
+ return;
+ }
+
+ SCORM_INITED = true;
+ try {
+ if (pipwerks.SCORM.init()) {
+ SCORM_OK = true;
+ }
+ } catch (e) {
+
+ }
+
+ try {
+ if (FORCE_SCORM) {
+ SCORM_OK = true;
+ }
+ } catch (e) {
+
+ }
+
+ if (SCORM_OK) {
+ scormExit();
+ startScormTimer();
+ initScormEvents();
+ }
+ initState();
+ setContents();
+ initEvents();
+ window.API = window.API_1484_11 = new SCORMFacade();
+ return SCORM_OK;
+}
+
+function initState() {
+
+ if (SCORM_LOCATION_INITED) {
+ return;
+ }
+ SCORM_LOCATION_INITED = true;
+
+ var currentLocation = '';
+ if (SCORM_OK) {
+ currentLocation = getScormValue('location');
+ }
+
+ if (currentLocation === undefined || currentLocation === null || currentLocation === 'null' || currentLocation === '') {
+ window.savedState = {};
+ } else {
+ window.savedState = JSON.parse(currentLocation);
+ }
+
+ console.log(currentLocation, window.savedState);
+
+
+ if (window.savedState === undefined || window.savedState === null || window.savedState === 'null') {
+ window.savedState = {};
+ }
+
+ var clone = $.extend(true, {}, window.savedState);
+ $.each(DATA.modules, function (k, v) {
+ var id = v.id.toString();
+ var defaultState = {
+ completion_status: 'incomplete',
+ success_status: 'unknown',
+ score: 0,
+ location: '',
+ cmi: {}
+ };
+ if (clone[id] === undefined || clone[id] === null) {
+ window.savedState[id] = defaultState;
+ } else {
+ window.savedState[id] = $.extend(true, defaultState, clone[id]);
+ }
+ });
+}
+
+function scormMarkAsComplete() {
+ if (!SCORM_OK) {
+ return;
+ }
+ scormExit();
+}
+
+
+function finishScorm() {
+ if (!SCORM_OK) {
+ return;
+ }
+ setSessionTime();
+ pipwerks.SCORM.save();
+ pipwerks.SCORM.quit();
+}
+
+function scormExit() {
+ if (!SCORM_OK) {
+ return;
+ }
+ var v = 'suspend';
+ setScormValue('exit', v);
+}
+
+function startScormTimer() {
+ SCORM_START_TIME = new Date();
+}
+
+function scormCompleteAndClose() {
+ scormComplete();
+ scormClose();
+}
+
+function scormClose() {
+ parent.close();
+ top.close();
+ window.close();
+}
+
+function initEvents() {
+ $(document).on('click', '[data-id]:not([data-lock="locked"])', function () {
+ openSubSCO($(this).data('id'));
+ return false;
+ });
+
+ $(document).on('click', '#scobar a.close', function () {
+ closeSubSCO();
+ return false;
+ });
+}
+
+function closeSubSCO() {
+ $("#scowin").removeClass('show');
+ $('#sco').attr('src', '');
+}
+
+function openSubSCO(id) {
+ var module = getModuleData(id);
+ currentModule = module;
+ var path = module.path;
+
+ var e = path.split('.');
+ var ext = e.pop().toLowerCase();
+
+ if (ext === 'pdf') {
+ path = 'js/libs/pdfjs/web/viewer.html?file=../../../../' + path;
+ }
+
+ $("#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'));
+ $("#sco").attr('src', path);
+
+ if (!module.scorm) {
+ setModuleState(module.id, {completion_status: 'completed', success_status: 'passed'});
+ }
+}
+
+function setModuleState(id, data) {
+ var clone = $.extend(true, {}, window.savedState[id]);
+ window.savedState[id] = $.extend(true, {}, clone, data);
+ saveStatus();
+ setContents();
+}
+
+function saveStatus() {
+ if (!SCORM_LOCATION_INITED) {
+ return;
+ }
+ setSCORMLocation(window.savedState);
+ var completed = true;
+ var globalScore = 0;
+ var globalScoreItems = 0;
+ for (var k in DATA.modules) {
+ var m = DATA.modules[k];
+ var s = window.savedState[m.id];
+ if (m.mandatory && s.completion_status !== 'completed' && s.completion_status !== 'passed') {
+ completed = false;
+ }
+ var score = calcScore(s);
+ if (!isNaN(score) && score >= 0) {
+ globalScore += score;
+ globalScoreItems++;
+ }
+ }
+ var score100 = globalScore / globalScoreItems;
+ if (isNaN(score100)) {
+ score100 = -1;
+ }
+ if (score100 > 0) {
+ setScormValue('cmi.score.raw', score100);
+ setScormValue('cmi.score.scaled', score100 / 100);
+ setScormValue('cmi.score.min', 0);
+ setScormValue('cmi.score.max', 100);
+ }
+ if (!isNaN(score100) && score100 > 0) {
+ setScormValue('success_status', 'passed');
+ } else {
+ setScormValue('success_status', 'unknown');
+ }
+ setScormValue('status', completed ? 'completed' : 'incomplete');
+}
+
+function getModuleData(id) {
+ for (var k in DATA.modules) {
+ var m = DATA.modules[k];
+ if (m.id == id) {
+ return m;
+ }
+ }
+ return null;
+}
+
+function setContents() {
+ if (!SCORM_LOCATION_INITED) {
+ return;
+ }
+ 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);
+ $('header p').text(DATA.description);
+ $('title').text(DATA.title);
+ $('tbody').html('');
+
+
+ $.each(DATA.modules, function (k, v) {
+ var s = window.savedState[v.id];
+ var lock = '';
+ var lockstatus = 'none';
+ var lockCol = '';
+ if (v.lock) {
+ console.log(v.lock);
+ lock = 'data-lock="';
+ lockstatus = 'unlocked';
+ lockCol = getSpriteIcon('lock-unlocked');
+ for (var i = 0; i < v.lock.length; i++) {
+ var ss = window.savedState[v.lock[i].toString()];
+ if (ss.completion_status !== 'completed' && ss.completion_status !== 'passed') {
+ lockstatus = 'locked';
+ lockCol = getSpriteIcon('lock-locked');
+ break;
+ }
+ }
+ lock += lockstatus + '"';
+ }
+ var score = calcScore(s);
+ var tr = $('<tr ' + lock + ' data-type="' + v.type + '" data-id="' + v.id + '"><td class="i">' + getSpriteIcon('icon-' + v.type) + '</td></tr>');
+ $('tbody').append(tr);
+
+ var mandatory = (v.mandatory ? vcheck : xcheck);
+ var validated = (s.completion_status === 'completed' ? vcheck : xcheck);
+ var scoreCol = '<div class="scoreCont">' + (score < 0 ? '-' : score + ' %') + '</div>';
+
+ tr.append('<td class="t">' + v.title + '</td>');
+ tr.append('<td class="y d">' + types[v.type] + '</td>');
+ tr.append('<td class="c d">' + mandatory + '</td>');
+ tr.append('<td class="c d">' + validated + '</td>');
+ tr.append('<td class="score c d">' + scoreCol + '</td>');
+ tr.append('<td class="l">' + lockCol + '</td>');
+ $('tbody').append('<tr ' + lock + ' data-id="' + v.id + '" class="m"><td></td><td><strong>Type</strong>' + types[v.type] + '</td><td></td></tr>');
+ $('tbody').append('<tr ' + lock + ' data-id="' + v.id + '" class="m"><td></td><td><strong>Mandatory</strong>' + mandatory + '</td><td></td></tr>');
+ $('tbody').append('<tr ' + lock + ' data-id="' + v.id + '" class="m"><td></td><td><strong>Validated</strong>' + validated + '</td><td></td></tr>');
+ $('tbody').append('<tr ' + lock + ' data-id="' + v.id + '" class="m"><td></td><td><strong>Score</strong>' + scoreCol + '</td><td></td></tr>');
+ $('tbody').append('<tr ' + lock + ' class="m"><td class="sp"></td></tr>');
+ });
+}
+
+function calcScore(s) {
+ if (s === undefined) {
+ return -1;
+ }
+ var raw = doubleQuestionMark(s.cmi['cmi.core.score.raw'], s.cmi['cmi.score.raw'], -1);
+ var max = doubleQuestionMark(s.cmi['cmi.core.score.max'], s.cmi['cmi.score.max'], 100);
+ var min = doubleQuestionMark(s.cmi['cmi.core.score.min'], s.cmi['cmi.score.min'], 0);
+
+ console.log(raw, max, min);
+ var scale = max - min;
+ var norm = raw - min;
+ if (isNaN(scale) || isNaN(norm)) {
+ return -1;
+ }
+ return 100 * (norm / scale);
+}
+
+function doubleQuestionMark() {
+ for (var i = 0; i < arguments.length; i++) {
+ if (arguments[i] === undefined || arguments[i] === null) {
+ continue;
+ }
+ return arguments[i];
+ }
+}
+
+(function (global) {
+ 'use strict';
+ if (!global.console) {
+ global.console = {};
+ }
+ var con = global.console;
+ var prop, method;
+ var dummy = function () {
+ };
+ var properties = ['memory'];
+ var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
+ 'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
+ 'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
+ while (prop = properties.pop()) if (!con[prop]) con[prop] = {};
+ while (method = methods.pop()) if (typeof con[method] !== 'function') con[method] = dummy;
+ // Using `this` for web workers & supports Browserify / Webpack.
+})(typeof window === 'undefined' ? this : window);
+
+
+function initScormEvents() {
+ if (!SCORM_OK || SCORM_EVENTS_INITED) {
+ return;
+ }
+ SCORM_EVENTS_INITED = true;
+
+ $(window).on('unload', function () {
+ finishScorm();
+ });
+
+ setInterval(function () {
+ pipwerks.SCORM.save();
+ }, 5000);
+}
+
+function setSCORMLocation(location) {
+ return setScormValue('cmi.location', JSON.stringify(location));
+}
+
+function setSCORMScore(score, max, min) {
+ if (min === undefined) {
+ min = 0;
+ }
+
+ setScormValue('cmi.core.score.raw', score);
+ setScormValue('cmi.core.score.min', min);
+ setScormValue('cmi.core.score.max', max);
+}
+
+
+function getScormValue(elementName) {
+ if (!SCORM_OK) {
+ return null;
+ }
+ var cmi = _cmi(elementName);
+ if (cmi == '') {
+ return null;
+ }
+ var result = pipwerks.SCORM.get(cmi);
+ return result;
+}
+
+function setScormValue(elementName, value) {
+ if (!SCORM_OK) {
+ return;
+ }
+ var cmi = _cmi(elementName);
+ if (cmi == '') {
+ return false;
+ }
+ var result = pipwerks.SCORM.set(cmi, value);
+ return result;
+}
+
+function getSpriteIcon(icon, attrs, dimensions) {
+ var a = [];
+ var iconSymbol = $('svg symbol[id="' + icon + '"]');
+ if (iconSymbol.length > 1) {
+ $('svg symbol[id="' + icon + '"]:not(:last)').remove();
+ iconSymbol = $('svg symbol[id="' + icon + '"]');
+ }
+
+ if (iconSymbol.length == 0) {
+ //console.warn('Unable to find sprite icon: ' + icon);
+ return ''; // Bail out because symbol doesn't exist
+ }
+
+ if (attrs == undefined) {
+ attrs = {};
+ }
+ if (attrs.viewBox == null) {
+ attrs.viewBox = iconSymbol.get(0).attributes.viewBox.value;
+ }
+ if (dimensions === true) {
+ var vb = attrs.viewBox.split(' ');
+ attrs.x = vb[0];
+ attrs.y = vb[1];
+ attrs.width = vb[2];
+ attrs.height = vb[3];
+ }
+ if (attrs.class == null) {
+ attrs.class = icon;
+ } else {
+ attrs.class += ' ' + icon;
+ }
+
+ attrs.class += ' nav-icon svg-icon'; // Common class for all icons
+
+ $.each(attrs, function (k, v) {
+ a.push(k + '="' + v + '"');
+ });
+ return '<svg ' + a.join(' ') + ' aria-hidden="true"><use xlink:href="#' + icon + '" /></svg>';
+}
+
+
+function setSessionTime() {
+ if (!SCORM_OK) {
+ return;
+ }
+ var currentTime = new Date();
+ var sessionTime;
+
+ var endTime = currentTime.getTime()
+ var calculatedTime = endTime - SCORM_START_TIME;
+
+ if (pipwerks.SCORM.version == '1.2') {
+ var totalHours = Math.floor(calculatedTime / 1000 / 60 / 60);
+ calculatedTime = calculatedTime - totalHours * 1000 * 60 * 60
+ if (totalHours < 1000 && totalHours > 99) {
+ totalHours = "0" + totalHours;
+ } else if (totalHours < 100 && totalHours > 9) {
+ totalHours = "00" + totalHours;
+ } else if (totalHours < 10) {
+ totalHours = "000" + totalHours;
+ }
+
+ var totalMinutes = Math.floor(calculatedTime / 1000 / 60);
+ calculatedTime = calculatedTime - totalMinutes * 1000 * 60;
+ if (totalMinutes < 10) {
+ totalMinutes = "0" + totalMinutes;
+ }
+
+ var totalSeconds = Math.floor(calculatedTime / 1000);
+ if (totalSeconds < 10) {
+ totalSeconds = "0" + totalSeconds;
+ }
+ sessionTime = totalHours + ":" + totalMinutes + ":" + totalSeconds;
+ setScormValue('session_time', sessionTime);
+ } else {
+ setScormValue('session_time', scormSecondsToTimeInterval(calculatedTime / 1000));
+ }
+
+}
+
+function dateToScormTime(date) {
+ var res = date.toISOString();
+ var e = res.split('.');
+ e.pop();
+ return e.join('.');
+}
+
+function getScormTimeInterval(start, end) {
+ var diff = Math.round((end.getTime() - start.getTime()) / 1000);
+ return scormSecondsToTimeInterval(diff);
+}
+
+function scormSecondsToTimeInterval(diff) {
+ var diff = Math.round(diff);
+ var h = Math.floor(diff / 3600);
+ diff = diff % 3600;
+ var m = Math.floor(diff / 60);
+ var s = diff % 60;
+ return 'PT' + h + 'H' + m + 'M' + s + 'S';
+}
+
+function SCORMFacade() {
+}
+
+SCORMFacade.prototype = {
+ LMSInitialize: function () {
+ return this.Initialize();
+ },
+ Initialize: function () {
+ this._log('Init');
+ return true;
+ },
+ LMSFinish: function () {
+ return this.Terminate();
+ },
+ Terminate: function () {
+ this._log('Terminate');
+ closeSubSCO();
+ return true;
+ },
+ LMSGetValue: function (key) {
+ return this.GetValue(key);
+ },
+ GetValue: function (key) {
+ var d = savedState[currentModule.id];
+ var res;
+ if (key === 'cmi.core.lesson_status' || key === 'cmi.completion_status') {
+ res = d.completion_status;
+ } else if (key === 'cmi.location' || key === 'cmi.core.lesson_location') {
+ if (typeof d.location === 'string' || typeof d.location === 'number') {
+ res = d.location;
+ } else {
+ res = JSON.stringify(d.location);
+ }
+ } else if (key === 'cmi.success_status') {
+ res = d.success_status;
+ } else {
+ res = d.cmi[key] === null ? '' : d.cmi[key];
+ }
+ this._log('Get value ' + key + ' :: ' + res);
+ return res;
+ },
+ LMSSetValue: function (key, value) {
+ return this.SetValue(key, value);
+ },
+ SetValue: function (key, value) {
+ this._log('Set value ' + key + ' :: ' + value);
+ var data = {cmi: {}};
+ if (key === 'cmi.core.lesson_status' || key === 'cmi.completion_status') {
+ key = 'completion_status';
+ data[key] = value;
+ } else if (key === 'cmi.location' || key === 'cmi.core.lesson_location') {
+ key = 'location';
+ data[key] = value;
+ } else if (key === 'cmi.success_status') {
+ key = 'success_status';
+ data[key] = value;
+ } else {
+ data.cmi[key] = value;
+ }
+
+ setModuleState(currentModule.id, data);
+ return true;
+ },
+ LMSCommit: function (d) {
+ return this.Commit(d);
+ },
+ Commit: function (d) {
+ return true;
+ },
+ LMSGetLastError: function () {
+ return this.GetLastError();
+ },
+ GetLastError: function () {
+ return 0;
+ },
+ LMSGetErrorString: function (code) {
+ return this.GetErrorString(code);
+ },
+ GetErrorString: function (code) {
+ return '';
+ },
+ LMSGetDiagnostic: function (code) {
+ return this.GetDiagnostic(code);
+ },
+ GetDiagnostic: function (code) {
+ return '';
+ },
+ _log: function (log) {
+ console.log('SCORM facade : ' + log);
+ },
+};
projects / fluidbook-toolbox.git / commitdiff