- Improved Login Header (support for *.webp images + 4k resolution)

- Minor bug fixes

app/Controller/AppController.php

@@ -68,10 +68,8 @@ class AppController extends Controller {
         $resource = Resource::instance();
         $resource->register('script', 'app/login');
         $resource->register('script', 'app/mappage', 'prefetch');
-        $resource->register('image', 'pf-bg.jpg');
-        $resource->register('image', 'pf-header-bg.jpg');
-        $resource->register('image', 'landing/eve_sso_login_buttons_large_black.png');
-        $resource->register('image', 'landing/eve_sso_login_buttons_large_black_hover.png');
+        $resource->register('image', 'sso/signature.png');
+        $resource->register('image', 'sso/gameplay.png');
     }
 
 }

app/Controller/Controllerr.php

@@ -177,7 +177,7 @@ class Controller {
             'script'    => sprintf('/%sjs/%s',      $f3->get('UI'), Config::getPathfinderData('version')),
             'font'      => sprintf('/%sfonts',      $f3->get('UI')),
             'document'  => sprintf('/%stemplates',  $f3->get('UI')),
-            'image'     => sprintf('/%simg',        $f3->get('UI')),
+            'image'     => sprintf('/%simg/%s',     $f3->get('UI'), Config::getPathfinderData('version')),
             'favicon'   => $f3->get('FAVICON')
         ], true);
 

gulpfile.js

@@ -1,6 +1,7 @@
 /* GULP itself */
 'use strict';
 
+let util                = require('util');
 let fs                  = require('fs');
 let ini                 = require('ini');
 
@@ -18,6 +19,10 @@ let composer            = require('gulp-uglify/composer');
 let sass                = require('gulp-sass');
 let autoprefixer        = require('gulp-autoprefixer');
 let cleanCSS            = require('gulp-clean-css');
+let imageResize         = require('gulp-image-resize');
+let imagemin            = require('gulp-imagemin');
+let imageminWebp        = require('imagemin-webp');
+let rename              = require('gulp-rename');
 let bytediff            = require('gulp-bytediff');
 let debug               = require('gulp-debug');
 let notifier            = require('node-notifier');
@@ -38,24 +43,32 @@ let del                 = require('promised-del');
 
 let minify = composer(uglifyjs, console);
 
+sass.compiler           = require('node-sass');
+
 // == Settings ========================================================================================================
 
 // build/src directories
 let PATH = {
     JS_HINT: {
-        CONF:       '/.jshintrc'
+        CONF:           '/.jshintrc'
     },
     ASSETS: {
-        DIST:       './public'
+        DEST:           './public'
     },
     JS: {
-        SRC:        'js/**/*.js',
-        SRC_LIBS:   './js/lib/**/*',
-        DIST:       'public/js',
-        DIST_BUILD: './public/js/vX.X.X'
+        SRC:            'js/**/*.js',
+        SRC_LIBS:       './js/lib/**/*',
+        DEST:           'public/js',
+        DEST_BUILD:     './public/js/vX.X.X'
     },
     CSS: {
-        SRC: 'sass/**/*.scss',
+        SRC:            'sass/**/*.scss',
+    },
+    IMG: {
+        SRC:            'img/**/*.{jpg,png,svg}',
+        SRC_HEADER:     'img/header/*.{jpg,png}',
+        SRC_GALLERY:    'img/gallery/**/*.{jpg,png}',
+        SRC_SVG:        'img/svg/*.svg'
     }
 };
 
@@ -112,17 +125,13 @@ let uglifyJsOptions = {
  * @param example
  */
 let printError = (title, example) => {
-    let cliLineLength = (cliBoxLength - 8);
-
     log('');
-    log(colors.red( '= ERROR ' + '=' . repeat(cliLineLength)));
-    log(colors.red(title));
+    log(colors.danger.divider('error'));
+    log(colors.iconDanger(title));
     if(example){
-        log(`
-             ${colors.gray(example)}
-        `);
+        log(`     ${colors.gray(example)}`);
     }
-    log(colors.red('='.repeat(cliBoxLength)));
+    log(colors.danger.divider(' '));
     log('');
 };
 
@@ -169,6 +178,9 @@ let CONF = {
         GZIP: options.hasOwnProperty('cssGzip') ? options.cssGzip === 'true': undefined,
         BROTLI: options.hasOwnProperty('cssBrotli') ? options.cssBrotli === 'true': undefined
     },
+    IMG: {
+        ACTIVE: options.hasOwnProperty('imgActive') ? options.imgActive === 'true': undefined,
+    },
     DEBUG: false
 };
 
@@ -192,7 +204,7 @@ let gZipOptions = {
     append: false,                      // disables default append ext .gz
     extension: 'gz',                    // use "custom" ext: .gz
     threshold: '1kb',                   // min size required to compress a file
-    deleteMode: PATH.JS.DIST_BUILD,     // replace *.gz files if size < 'threshold'
+    deleteMode: PATH.JS.DEST_BUILD,     // replace *.gz files if size < 'threshold'
     gzipOptions: {
         level: 9                        // zlib.Gzip compression level [0-9]
     },
@@ -210,6 +222,64 @@ let brotliOptions = {
 
 let compressionExt = [gZipOptions.extension, brotliOptions.extension];
 
+let imageminWebpOptions = {quality: 80};
+
+let imgResizeOptions = {
+    crop : true,
+    upscale : false,
+    noProfile: true
+};
+
+colors.theme({
+    primary: colors.cyan,
+    success: colors.green,
+    info: colors.blue,
+    warning: colors.yellow,
+    danger: colors.red,
+
+    disabled:       (...args) => colors.dim.gray(util.format(...args)),
+    comment:        (...args) => colors.disabled.italic(util.format(...args)),
+
+    //badgeSuccess:   (...args) => `${colors.success.bold(`[OK]`)} ${colors.success(util.format(...args))}`,
+    //badgeError:     (...args) => `${colors.danger.bold(`[ERROR]`)} ${colors.danger.italic(util.format(...args))}`,
+
+    iconSuccess:    text => ` ${colors.success(`✔`)} ${colors.success(text)}`,
+    iconDanger:     text => ` ${colors.danger(`✘`)} ${colors.danger(text)}`,
+
+    divider:        text => colors.disabled(`${(text || '').trim().length ? `═ ${(text || '').trim().toUpperCase()} ═` : ''}`.padEnd(cliBoxLength, '═'))
+});
+
+log(colors.primary('primary'));
+log(colors.success('success'));
+log(colors.info('info'));
+log(colors.warning('warning'));
+log(colors.danger('danger'));
+
+log(colors.disabled('disabled'));
+log(colors.comment('comment'));
+
+//log(colors.badgeSuccess(`Success`));
+//log(colors.badgeError('Error!'));
+
+log(colors.iconSuccess('success'));
+log(colors.iconDanger('danger'));
+
+log(colors.bold('bold'));
+log(colors.italic('italic'));
+log(colors.underline('underline'));
+log('');
+log(colors.magenta('magenta'));
+log(colors.magentaBright('magentaBright'));
+log(colors.cyan('cyan'));
+log(colors.cyanBright('cyanBright'));
+log(colors.blue('blue'));
+log(colors.blueBright('blueBright'));
+log(colors.yellow('yellow'));
+log(colors.yellowBright('yellowBright'));
+
+log('');
+log('');
+
 // == Helper methods ==================================================================================================
 
 /**
@@ -284,35 +354,32 @@ let mergeConf = (confUser, confDefault) => {
  * print help information for all Gulp tasks
  */
 let printHelp = () => {
-    let cliLineLength = (cliBoxLength - 7);
-    log('');
-    log(colors.cyan( '= HELP ' + '='.repeat(cliLineLength)));
     log(`
-        ${colors.cyan('documentation:')}        ${colors.gray('https://github.com/exodus4d/pathfinder/wiki/GulpJs')}
-         
-        ${colors.cyan('usage:')}                ${colors.gray('$ npm run gulp [task] -- [--options] ...')}
-         
-        ${colors.cyan('tasks:')}
-            ${colors.gray('help')}              This view
-            ${colors.gray('default')}           Development environment. Working with row src files and file watcher, default:
-            ${colors.gray('')}                      ${colors.gray('--jsUglify=false --jsSourcemaps=false --cssSourcemaps=false --jsGzip=false --cssGzip=false --jsBrotli=false --cssBrotli=false')}
-            ${colors.gray('production')}        Production build. Concat and uglify static resources, default:
-            ${colors.gray('')}                      ${colors.gray('--jsUglify=true --jsSourcemaps=true --cssSourcemaps=true --jsGzip=true --cssGzip=true --jsBrotli=true --cssBrotli=true')}
-         
-        ${colors.cyan('options:')}
-            ${colors.gray('--tag')}             Set build version.                  ${colors.gray('default: --tag="v1.2.4" -> dest path: public/js/v1.2.4')}
-            ${colors.gray('--jsUglify')}        Set js uglification.                ${colors.gray('(true || false)')}
-            ${colors.gray('--jsSourcemaps')}    Set js sourcemaps generation.       ${colors.gray('(true || false)')}
-            ${colors.gray('--jsGzip')}          Set js "gzip" compression mode.     ${colors.gray('(true || false)')}
-            ${colors.gray('--jsBrotli')}        Set js "brotli" compression mode.   ${colors.gray('(true || false)')}
-             
-            ${colors.gray('--cssSourcemaps')}   Set CSS sourcemaps generation.      ${colors.gray('(true || false)')}
-            ${colors.gray('--cssGzip')}         Set CSS "gzip" compression mode.    ${colors.gray('(true || false)')}
-            ${colors.gray('--cssBrotli')}       Set CSS "brotli" compression mode.  ${colors.gray('(true || false)')}
-            ${colors.gray('--debug')}           Set debug mode (more output).       ${colors.gray('(true || false)')}
+            ${colors.divider('help')}
+                ${colors.bold('docs:')}                 ${colors.info('https://github.com/exodus4d/pathfinder/wiki/GulpJs')}
+                ${colors.bold('command:')}              ${colors.magenta('$ npm run gulp')} ${colors.primary.italic('[task]')} ${colors.yellow.italic('-- [--options] …')}
+                ${colors.bold('tasks:')}
+                    ${colors.primary('help')}              This view
+                    ${colors.primary('default')}           Development environment. Working with row src files and file watcher, default:
+                    ${colors.primary('')}                      ${colors.gray('--jsUglify=false --jsSourcemaps=false --cssSourcemaps=false --jsGzip=false --cssGzip=false --jsBrotli=false --cssBrotli=false')}
+                    ${colors.primary('production')}        Production build. Concat and uglify static resources, default:
+                    ${colors.primary('')}                      ${colors.gray('--jsUglify=true --jsSourcemaps=true --cssSourcemaps=true --jsGzip=true --cssGzip=true --jsBrotli=true --cssBrotli=true')}
+                ${colors.bold('helper tasks:')}
+                    ${colors.primary('images')}            Build images. Convert src *.png images to *.webp and *.jpg. Crop & resize tasks
+
+                ${colors.bold('options:')}
+                    ${colors.yellow('--tag')}             Set build version.                  ${colors.gray(`default: --tag="${tagVersion}" -> dest path: public/js/${tagVersion}`)}
+                    ${colors.yellow('--jsUglify')}        Set js uglification.                ${colors.gray('(true || false)')}
+                    ${colors.yellow('--jsSourcemaps')}    Set js sourcemaps generation.       ${colors.gray('(true || false)')}
+                    ${colors.yellow('--jsGzip')}          Set js "gzip" compression mode.     ${colors.gray('(true || false)')}
+                    ${colors.yellow('--jsBrotli')}        Set js "brotli" compression mode.   ${colors.gray('(true || false)')}
+                    ${colors.yellow('--cssSourcemaps')}   Set CSS sourcemaps generation.      ${colors.gray('(true || false)')}
+                    ${colors.yellow('--cssGzip')}         Set CSS "gzip" compression mode.    ${colors.gray('(true || false)')}
+                    ${colors.yellow('--cssBrotli')}       Set CSS "brotli" compression mode.  ${colors.gray('(true || false)')}
+                    ${colors.yellow('--imgActive')}       Disables all IMG tasks.             ${colors.gray('(true || false)')}
+                    ${colors.yellow('--debug')}           Set debug mode (more output).       ${colors.gray('(true || false)')}
+            ${colors.divider(' ')}
     `);
-    log(colors.cyan('='.repeat(cliBoxLength)));
-    log('');
 };
 
 /**
@@ -500,18 +567,24 @@ let printJsSummary = () => {
 // == clean up tasks ==================================================================================================
 
 /**
- * clean temp JS build dir
+ * clean temp JS dest dir
  */
-gulp.task('task:cleanJsBuild', () => del([PATH.JS.DIST_BUILD]));
-/**
- * clean CSS build dir
- */
-gulp.task('task:cleanCssBuild', () => del([PATH.ASSETS.DIST + '/css/' + CONF.TAG]));
+gulp.task('task:cleanJsDestBuild', () => del([PATH.JS.DEST_BUILD]));
 
 /**
- * clean JS destination (final) dir
+ * clean JS dest dir
  */
-gulp.task('task:cleanJsDest', () => del([PATH.JS.DIST + '/' + CONF.TAG]));
+gulp.task('task:cleanJsDest', () => del([PATH.JS.DEST + '/' + CONF.TAG]));
+
+/**
+ * clean CSS dest dir
+ */
+gulp.task('task:cleanCssDest', () => del([PATH.ASSETS.DEST + '/css/' + CONF.TAG]));
+
+/**
+ * clean IMG dest dir
+ */
+gulp.task('task:cleanImgDest', () => del([PATH.ASSETS.DEST + '/img/' + CONF.TAG]));
 
 // == Dev tasks (code analyses) =======================================================================================
 gulp.task('task:hintJS', () => {
@@ -563,7 +636,7 @@ gulp.task('task:concatJS', () => {
             trackFile(data, {src: 'startSize', src_percent: 'percent', uglify: 'endSize'});
             return colors.green('Build concat file "' + data.fileName + '"');
         }))
-        .pipe(gulp.dest(PATH.JS.DIST_BUILD));
+        .pipe(gulp.dest(PATH.JS.DEST_BUILD));
 });
 
 /**
@@ -581,9 +654,9 @@ gulp.task('task:diffJS', () => {
         .pipe(gulpif(CONF.JS.SOURCEMAPS, sourcemaps.write('.', {includeContent: false, sourceRoot: '/js'})))
         .pipe(bytediff.stop(data => {
             trackFile(data, {src: 'startSize', src_percent: 'percent', uglify: 'endSize'});
-            return colors.green('Build file "' + data.fileName + '"');
+            return colors.iconSuccess(`build → ${colors.magenta(data.fileName)}`);
         }))
-        .pipe(gulp.dest(PATH.JS.DIST_BUILD, {overwrite: false}));
+        .pipe(gulp.dest(PATH.JS.DEST_BUILD, {overwrite: false}));
 });
 
 /**
@@ -595,8 +668,8 @@ gulp.task('task:diffJS', () => {
 let getAssetFilterOptions = (compression, fileExt) => {
     return {
         srcModules: [
-            PATH.ASSETS.DIST +'/**/*.' + fileExt,
-            '!' + PATH.ASSETS.DIST + '/js/' + CONF.TAG + '{,/**/*}'
+            PATH.ASSETS.DEST +'/**/*.' + fileExt,
+            '!' + PATH.ASSETS.DEST + '/js/' + CONF.TAG + '{,/**/*}'
         ],
         fileFilter: filter(file => CONF[fileExt.toUpperCase()][compression.toUpperCase()])
     };
@@ -622,7 +695,7 @@ let gzipAssets = (config, taskName) => {
                 return colors.gray('Gzip skip "' + data.fileName + '". Size < ' + gZipOptions.threshold + ' (threehold)');
             }
         }))
-        .pipe(gulp.dest(PATH.ASSETS.DIST));
+        .pipe(gulp.dest(PATH.ASSETS.DEST));
 };
 
 /**
@@ -645,7 +718,7 @@ let brotliAssets = (config, taskName) => {
                 return colors.gray('Brotli skip "' + data.fileName + '"');
             }
         }))
-        .pipe(gulp.dest(PATH.ASSETS.DIST));
+        .pipe(gulp.dest(PATH.ASSETS.DEST));
 };
 
 gulp.task('task:gzipJsAssets', () => {
@@ -665,16 +738,18 @@ gulp.task('task:brotliCssAssets', () => {
 });
 
 /**
- * rename "temp" build JS folder to final dist folder
+ * rename "temp" build JS folder to final dest folder
  * (keep "old" build data as long as possible in case of build failure)
  */
 gulp.task('task:renameJsDest', () => {
     let fileExt = ['js', 'map'].concat(compressionExt);
-    return gulp.src( PATH.JS.DIST_BUILD + '/**/*.{' + fileExt.join(',') + '}', {base: PATH.JS.DIST_BUILD, since: gulp.lastRun('task:renameJsDest')})
+    return gulp.src( PATH.JS.DEST_BUILD + '/**/*.{' + fileExt.join(',') + '}', {base: PATH.JS.DEST_BUILD, since: gulp.lastRun('task:renameJsDest')})
         .pipe(debug({title: 'Rename JS dest: ', showFiles: false}))
-        .pipe(gulp.dest(PATH.JS.DIST_BUILD + '/../' + CONF.TAG));
+        .pipe(gulp.dest(PATH.JS.DEST_BUILD + '/../' + CONF.TAG));
 });
 
+// == CSS build tasks =================================================================================================
+
 /**
  * build CSS rom SASS files
  * -> 1. node-sass
@@ -687,10 +762,10 @@ gulp.task('task:sass', () => {
         .pipe(bytediff.start())
         .pipe(bytediff.stop(data => {
             trackFile(data, {src: 'startSize', src_percent: 'percent', uglify: 'endSize'});
-            return colors.green('Build CSS file "' + data.fileName + '"');
+            return colors.iconSuccess(`build → ${colors.magenta(data.fileName)}`);
         }))
         .pipe(gulpif(CONF.CSS.SOURCEMAPS, sourcemaps.write('.', {includeContent: false, sourceRoot: '../../../sass'})))
-        .pipe(gulp.dest(PATH.ASSETS.DIST + '/css/' + CONF.TAG))
+        .pipe(gulp.dest(PATH.ASSETS.DEST + '/css/' + CONF.TAG))
 
         .pipe(filter(['!*.map']))
         .pipe(gulpif(CONF.CSS.SOURCEMAPS, sourcemaps.init({loadMaps: true})))
@@ -701,7 +776,7 @@ gulp.task('task:sass', () => {
             return colors.green('Autoprefix CSS file "' + data.fileName + '"');
         }))
         .pipe(gulpif(CONF.CSS.SOURCEMAPS, sourcemaps.write('.', {includeContent: false})))
-        .pipe(gulp.dest(PATH.ASSETS.DIST + '/css/' + CONF.TAG));
+        .pipe(gulp.dest(PATH.ASSETS.DEST + '/css/' + CONF.TAG));
 });
 
 /**
@@ -712,7 +787,86 @@ gulp.task('task:cleanCss', () => {
         .pipe(gulpif(CONF.CSS.SOURCEMAPS, sourcemaps.init({loadMaps: true})))
         .pipe(cleanCSS(cleanCssOptions))
         .pipe(gulpif(CONF.CSS.SOURCEMAPS, sourcemaps.write('.', {includeContent: false})))
-        .pipe(gulp.dest('./public/css/' + CONF.TAG));
+        .pipe(gulp.dest(PATH.ASSETS.DEST + '/css/' + CONF.TAG));
+});
+
+// == Image build tasks ===============================================================================================
+
+let imgWebpHandler = (config, taskName) => {
+    return gulp.src(config.src, {base: config.base, since: gulp.lastRun(taskName)})
+        .pipe(imagemin([imageminWebp(config.options)], {verbose: true}))
+        .pipe(rename({extname: '.webp'}))
+        .pipe(gulp.dest(PATH.ASSETS.DEST + '/img/' + CONF.TAG));
+};
+
+gulp.task('task:imgHeadToWEBP', () => {
+    return imgWebpHandler({
+        src: PATH.ASSETS.DEST + '/img/' + CONF.TAG + '/header/**/*.png',
+        base: PATH.ASSETS.DEST + '/img/' + CONF.TAG,
+        options: imageminWebpOptions
+    }, 'task:imgHeadToWEBP');
+});
+
+gulp.task('task:imgGalleryToWEBP', () => {
+    return imgWebpHandler({
+        src: PATH.ASSETS.DEST + '/img/' + CONF.TAG + '/gallery/**/*.jpg',
+        base: PATH.ASSETS.DEST + '/img/' + CONF.TAG,
+        options: Object.assign({}, imageminWebpOptions, {quality: 90}) // unfortunately src jpg´s are already high compressed
+    }, 'task:imgGalleryToWEBP');
+});
+
+let imgResizeHandler = (config, taskName) => {
+    return gulp.src(config.src, {base: 'img', since: gulp.lastRun(taskName)})
+        .pipe(imageResize(config.options))
+        .pipe(gulpif(config.rename, rename(config.rename)))
+        .pipe(gulp.dest(PATH.ASSETS.DEST + '/img/' + CONF.TAG));
+};
+
+let imgResizeHeaderTasks = [];
+[480, 780, 1200, 1600, 3840].forEach(size => {
+    ['png', 'jpg'].forEach(format => {
+        let taskName = `task:imgHead${size}${format}`;
+        gulp.task(taskName, () => {
+            return imgResizeHandler({
+                src: PATH.IMG.SRC_HEADER,
+                options: Object.assign({}, imgResizeOptions, {format: format, width: size}),
+                rename: {suffix: `-${size}`}
+            }, taskName);
+        });
+        imgResizeHeaderTasks.push(taskName);
+    });
+});
+
+gulp.task('task:imgHeadResize', gulp.series(
+    gulp.parallel(...imgResizeHeaderTasks),
+    'task:imgHeadToWEBP'
+));
+
+gulp.task('task:imgGalleryCopy', () => {
+    return gulp.src(PATH.IMG.SRC_GALLERY, {base: 'img', since: gulp.lastRun('task:imgGalleryCopy')})
+        .pipe(gulp.dest(PATH.ASSETS.DEST + '/img/' + CONF.TAG));
+});
+
+gulp.task('task:imgGallery', gulp.series(
+    'task:imgGalleryCopy',
+    'task:imgGalleryToWEBP'
+));
+
+gulp.task('task:imgRest', () => {
+    return gulp.src([
+        PATH.IMG.SRC,
+        `!${PATH.IMG.SRC_HEADER}`,
+        `!${PATH.IMG.SRC_GALLERY}`,
+        `!${PATH.IMG.SRC_SVG}`
+    ], {base: 'img', since: gulp.lastRun('task:imgRest')})
+        .pipe(debug({title: 'Copy img "rest" dest: ', showFiles: false}))
+        .pipe(gulp.dest(PATH.ASSETS.DEST + '/img/' + CONF.TAG));
+});
+
+gulp.task('task:imgSVG', () => {
+    return gulp.src(PATH.IMG.SRC_SVG, {base: 'img', since: gulp.lastRun('task:imgSVG')})
+        .pipe(debug({title: 'Copy img SVG dest: ', showFiles: false}))
+        .pipe(gulp.dest(PATH.ASSETS.DEST + '/img/' + CONF.TAG));
 });
 
 // == Helper tasks ====================================================================================================
@@ -737,18 +891,19 @@ gulp.task('task:printJsSummary', done => {
  * print task configuration (e.g. CLI parameters)
  */
 gulp.task('task:printConfig', done => {
-    let error = colors.red;
-    let success = colors.green;
-
+    let error = colors.danger;
     let columnLength = Math.round(cliBoxLength / 2);
-    let cliLineLength = cliBoxLength - 9;
 
-    log(colors.gray( '= CONFIG ' + '='.repeat(cliLineLength)));
+    log(colors.divider('config'));
 
     let configFlat = flatten(CONF);
     for (let key in configFlat) {
         if (configFlat.hasOwnProperty(key)){
             let value = configFlat[key];
+            let success = colors.success;
+            switch(key){
+                case 'TASK': success = colors.primary; break;
+            }
             // format value
             value = padEnd((typeof value === 'undefined') ? 'undefined': value, columnLength);
             log(
@@ -757,7 +912,7 @@ gulp.task('task:printConfig', done => {
             );
         }
     }
-    log(colors.gray('='.repeat(cliBoxLength)));
+    log(colors.divider(' '));
     done();
 });
 
@@ -766,9 +921,7 @@ gulp.task('task:printConfig', done => {
  */
 gulp.task('task:checkConfig', done => {
     if(!CONF.TAG){
-        printError(
-            'Missing TAG version. Add param ' + colors.cyan('--tag'),
-            '$ npm run gulp default -- --tag="v1.2.4"');
+        printError(`Missing TAG version. Add param: ${colors.yellow('--tag')}`, `$ npm run gulp default -- --tag="${tagVersion}"`);
         process.exit(0);
     }
     done();
@@ -791,6 +944,9 @@ gulp.task('task:configDevelop',
                     SOURCEMAPS: true,
                     GZIP: false,
                     BROTLI: false
+                },
+                IMG: {
+                    ACTIVE: true
                 }
             };
 
@@ -818,6 +974,9 @@ gulp.task('task:configProduction',
                     SOURCEMAPS: true,
                     GZIP: true,
                     BROTLI: true
+                },
+                IMG: {
+                    ACTIVE: true
                 }
             };
 
@@ -838,29 +997,36 @@ gulp.task('task:updateJsDest', gulp.series(
         'task:brotliJsAssets'
     ),
     'task:renameJsDest',
-   // 'task:printJsSummary',
-    'task:cleanJsBuild'
-    )
-);
+    // 'task:printJsSummary',
+    'task:cleanJsDestBuild'
+));
 
 /**
- * build JS source files (concat, uglify, sourcemaps)
+ * build JS dest files (concat, uglify, sourcemaps)
  */
 gulp.task('task:buildJs', gulp.series(
     'task:concatJS',
     'task:diffJS',
     'task:cleanJsDest',
     'task:updateJsDest'
-    )
-);
+));
 
 /**
- * build SCSS source files
+ * build SCSS dest files
  */
 gulp.task('task:buildCss', gulp.series(
     'task:sass'
-    )
-);
+));
+
+/**
+ * build IMG dest files
+ */
+gulp.task('task:buildImg', gulp.parallel(
+    'task:imgHeadResize',
+    'task:imgGallery',
+    'task:imgRest',
+    'task:imgSVG'
+));
 
 // == Notification tasks ==============================================================================================
 
@@ -868,29 +1034,27 @@ gulp.task('task:buildCss', gulp.series(
  * JS Build done notification
  */
 gulp.task('task:notifyJsDone', done => {
-        notifier.notify({
-            title: 'Done JS build',
-            message: 'JS build task finished',
-            icon: PATH.ASSETS.DIST + '/img/logo.png',
-            wait: false
-        });
-        done();
-    }
-);
+    notifier.notify({
+        title: 'Done JS build',
+        message: 'JS build task finished',
+        icon: PATH.ASSETS.DEST + '/img/logo.png',
+        wait: false
+    });
+    done();
+});
 
 /**
  * CSS Build done notification
  */
 gulp.task('task:notifyCssDone', done => {
-        notifier.notify({
-            title: 'Done CSS build',
-            message: 'CSS build task finished',
-            icon: PATH.ASSETS.DIST + '/img/logo.png',
-            wait: false
-        });
-        done();
-    }
-);
+    notifier.notify({
+        title: 'Done CSS build',
+        message: 'CSS build task finished',
+        icon: PATH.ASSETS.DEST + '/img/logo.png',
+        wait: false
+    });
+    done();
+});
 
 // == Watcher tasks ===================================================================================================
 
@@ -914,32 +1078,36 @@ gulp.task(
     'task:watchCss',
     gulp.series(
         'task:buildCss',
-       // 'task:cleanCss',
+        // 'task:cleanCss',
         gulp.parallel(
             'task:gzipCssAssets',
             'task:brotliCssAssets'
         ),
-       // 'task:printJsSummary',
+        // 'task:printJsSummary',
         'task:notifyCssDone'
     )
 );
 
+gulp.task(
+    'task:watchImg',
+    gulp.series(
+        'task:buildImg'
+    )
+);
+
 /**
  * watch files for changes
  */
 
-gulp.task('task:setWatcherJs', function() {
-    return gulp.watch(PATH.JS.SRC, gulp.series('task:watchJsSrc', 'task:printJsSummary'));
-});
-
-gulp.task('task:setWatcherCss', function() {
-    return gulp.watch(PATH.CSS.SRC, gulp.series('task:watchCss', 'task:printJsSummary'));
-});
+gulp.task('task:setWatcherJs',  () => gulp.watch(PATH.JS.SRC, gulp.series('task:watchJsSrc', 'task:printJsSummary')));
+gulp.task('task:setWatcherCss', () => gulp.watch(PATH.CSS.SRC, gulp.series('task:watchCss', 'task:printJsSummary')));
+gulp.task('task:setWatcherImg', () => gulp.watch(PATH.IMG.SRC, gulp.series('task:watchImg', 'task:printJsSummary')));
 
 gulp.task('task:setWatcher',
     gulp.parallel(
         'task:setWatcherJs',
-        'task:setWatcherCss'
+        'task:setWatcherCss',
+        'task:setWatcherImg'
     )
 );
 
@@ -958,12 +1126,16 @@ gulp.task(
         'task:configDevelop',
         gulp.parallel(
             gulp.series(
-                'task:cleanJsBuild',
+                'task:cleanJsDestBuild',
                 'task:watchJsSrc'
             ),
             gulp.series(
-                'task:cleanCssBuild',
+                'task:cleanCssDest',
                 'task:watchCss'
+            ),
+            gulp.series(
+                'task:cleanImgDest',
+                'task:watchImg'
             )
         ),
         'task:printJsSummary',
@@ -977,12 +1149,16 @@ gulp.task(
         'task:configProduction',
         gulp.parallel(
             gulp.series(
-                'task:cleanJsBuild',
+                'task:cleanJsDestBuild',
                 'task:buildJs'
             ),
             gulp.series(
-                'task:cleanCssBuild',
+                'task:cleanCssDest',
                 'task:watchCss'
+            ),
+            gulp.series(
+                'task:cleanImgDest',
+                'task:watchImg'
             )
         ),
         'task:printJsSummary'

img/svg/ccp_sso.svg

@@ -0,0 +1,82 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 540 90" width="100%" height="100%" shape-rendering="geometricPrecision">
+    <defs>
+        <!-- animation -->
+        <linearGradient id="pf-svg-sso-animation-gradient" x1="0%" y1="0%" x2="100%" y2="0">
+            <stop offset="0%" style="stop-color:#6c6c6c; stop-opacity: 0" />
+            <stop offset="55%" style="stop-color:#6c6c6c; stop-opacity: 0" />
+            <stop offset="60%" style="stop-color:#44aa82; stop-opacity: 1" />
+            <stop offset="75%" style="stop-color:#66c84f; stop-opacity: 1" />
+            <stop offset="80%" style="stop-color:#6c6c6c; stop-opacity: 0" />
+            <stop offset="100%" style="stop-color:#6c6c6c; stop-opacity: 0" />
+        </linearGradient>
+
+        <pattern id="pf-svg-sso-animation-pattern" x="0" y="0" width="300%" height="100%" patternUnits="userSpaceOnUse">
+            <rect x="0" y="0" width="150%" height="100%" fill="url(#pf-svg-sso-animation-gradient)">
+                <animate attributeType="XML" attributeName="x" from="0" to="150%" dur="2s" repeatCount="indefinite" />
+            </rect>
+            <rect x="-150%" y="0" width="150%" height="100%" fill="url(#pf-svg-sso-animation-gradient)">
+                <animate attributeType="XML" attributeName="x" from="-150%" to="0" dur="2s" repeatCount="indefinite" />
+            </rect>
+        </pattern>
+        <!-- background/frame -->
+        <linearGradient id="pf-svg-sso-bg-gradient">
+            <stop offset="0" stop-color="#343434" />
+            <stop offset=".071" stop-color="#3e3e3e" />
+            <stop offset="1" stop-color="#212121" />
+        </linearGradient>
+        <linearGradient id="pf-svg-sso-bg-darken">
+            <stop offset="0" style="stop-color: #343434; stop-opacity: 0;" />
+            <stop offset=".071" style="stop-color: #3e3e3e; stop-opacity: .071;" />
+            <stop offset="1" style="stop-color: #212121; stop-opacity: 1;" />
+        </linearGradient>
+        <linearGradient id="pf-svg-sso-bg-frame">
+            <stop offset="0" style="stop-color: #6c6c6c; stop-opacity: 1" />
+            <stop offset="1" style="stop-color: #232323; stop-opacity: 1" />
+        </linearGradient>
+        <linearGradient xlink:href="#pf-svg-sso-bg-frame" id="l" x1="-2.652" y1="-.686" x2="-2.298" y2="90.354" gradientUnits="userSpaceOnUse" />
+        <linearGradient xlink:href="#pf-svg-sso-bg-gradient" id="k" x1="-4.95" y1="-1.747" x2="-3.712" y2="90.884" gradientUnits="userSpaceOnUse" />
+        <linearGradient xlink:href="#pf-svg-sso-bg-darken" id="m" x1="-4.95" y1="-1.747" x2="-3.712" y2="90.884" gradientUnits="userSpaceOnUse" />
+    </defs>
+
+    <symbol id="pf-svg-sso" viewBox="0 0 540 90">
+        <g>
+            <path d="M8 0h524c4.432 0 8 3.568 8 8v74c0 4.432-3.568 8-8 8H8c-4.432 0-8-3.568-8-8V8c0-4.432 3.568-8 8-8z" fill="url(#k)" />
+        </g>
+        <g>
+            <path d="M2.191 2.5A7.965 7.965 0 00.584 5h173.352v85h2.5V5h362.98a7.966 7.966 0 00-1.607-2.5z" fill="url(#l)" />
+            <path d="M2.191 2.5A7.965 7.965 0 00.584 5h173.352v85h2.5V5h362.98a7.966 7.966 0 00-1.607-2.5z" fill="url(#pf-svg-sso-animation-pattern)" />
+        </g>
+        <g>
+            <path d="M8 0h524c4.432 0 8 3.568 8 8v74c0 4.432-3.568 8-8 8H8c-4.432 0-8-3.568-8-8V8c0-4.432 3.568-8 8-8z" fill="url(#m)" />
+        </g>
+        <g fill="currentColor">
+            <path d="M21.707 26.07v10.302h7.412v-2.65h33.59V26.07z" />
+            <path d="M66.19 26.07l22.55 43.116 22.552-43.116h-8.04S89.607 51.981 88.742 53.651l-14.505-27.58z" />
+            <path d="M114.806 26.07v10.302h7.364v-2.65h33.577V26.07z" />
+            <path d="M21.707 40.262v7.682H62.71v-7.682z" />
+            <path d="M114.806 40.262v7.682h40.941v-7.682z" />
+            <path d="M21.707 51.796v10.339H62.71V54.46H29.119v-2.664z" />
+            <path d="M114.806 51.796v10.339h40.941V54.46H122.17v-2.664z" />
+        </g>
+        <g fill="currentColor">
+            <path d="M194.44 62.09v-27.3h5.67v23.309h10.509v3.99z" />
+            <path d="M212.823 46.247q.059-1.738.177-3.299.139-1.58.475-2.923.355-1.363.987-2.45.652-1.086 1.719-1.857 1.086-.77 2.686-1.185 1.6-.415 3.872-.415 2.252 0 3.852.415t2.667 1.185q1.086.77 1.718 1.857.652 1.087.988 2.45.355 1.343.474 2.923.138 1.56.197 3.299v3.891q0 1.818-.098 3.477-.08 1.64-.415 3.042-.316 1.383-.948 2.509-.633 1.126-1.739 1.935-1.086.79-2.726 1.205-1.64.435-3.97.435-2.331 0-3.97-.435-1.64-.414-2.746-1.205-1.087-.81-1.739-1.935-.632-1.126-.968-2.51-.316-1.402-.414-3.041-.08-1.66-.08-3.477zm5.827 6.46q0 .552.02 1.224.04.652.158 1.323.138.652.395 1.265.276.612.73 1.086.455.454 1.127.75.691.277 1.659.277 1.007 0 1.699-.276.691-.297 1.145-.79.455-.494.712-1.126.256-.652.375-1.363.118-.712.138-1.442.02-.731.02-1.383v-6.973q0-.553-.02-1.284 0-.73-.118-1.501-.1-.79-.336-1.541-.237-.77-.692-1.363-.454-.612-1.165-.968-.711-.375-1.758-.375-1.126 0-1.857.375-.73.356-1.185.948-.454.573-.672 1.324-.217.75-.316 1.52-.079.751-.079 1.462.02.712.02 1.245z" />
+            <path d="M235.511 46.247q.06-1.738.178-3.299.138-1.58.474-2.923.356-1.363.988-2.45.652-1.086 1.718-1.857 1.087-.77 2.667-1.185 1.6-.415 3.872-.415 1.817.02 3.338.277 1.54.257 2.746.928 1.224.652 2.074 1.798.869 1.126 1.363 2.904.217.83.217 1.659.02.83.06 1.66h-5.67q-.04-1.028-.138-1.937-.099-.908-.514-1.58-.395-.691-1.224-1.106-.81-.415-2.252-.474-1.107 0-1.857.375-.731.356-1.185.948-.435.573-.652 1.324-.218.75-.316 1.52-.08.751-.08 1.462.02.712.02 1.245v7.585q0 .553.02 1.225.04.652.158 1.323.138.652.395 1.265.277.612.711 1.086.455.454 1.126.75.692.277 1.66.277 1.205 0 2.014-.553.83-.553 1.324-1.501.494-.968.672-2.292.197-1.323.158-2.864h-3.912v-3.99h9.423v14.657h-4.247v-3.121h-.08q-.434 1.067-1.026 1.778-.593.691-1.304 1.126-.691.434-1.482.612-.77.198-1.54.257-2.331 0-3.97-.435-1.64-.414-2.746-1.205-1.087-.81-1.719-1.935-.632-1.126-.968-2.51-.316-1.402-.415-3.041-.079-1.66-.079-3.477z" />
+            <path d="M263.989 62.09v-27.3h5.669v27.3z" />
+            <path d="M286.835 34.79h5.67v27.3h-5.907l-4.405-9.72q-.573-1.205-1.086-2.449-.514-1.244-1.008-2.568-.474-1.323-.968-2.765-.494-1.442-.987-3.062h-.08q.159 1.699.317 3.694.158 1.995.296 4.089.118 2.074.197 4.03.08 1.955.08 3.614v5.136h-5.67v-27.3h5.867l4.405 9.937q.553 1.185 1.047 2.41.514 1.224 1.007 2.548.494 1.304.988 2.765.494 1.462 1.007 3.121h.08q-.159-1.856-.297-3.812-.138-1.956-.257-3.95-.138-1.976-.217-3.892-.079-1.936-.079-3.773z" />
+            <path d="M316.419 54.168q.217 1.086.335 2.173.139 1.086.198 2.212h.119q0-.336.039-1.007.06-.672.138-1.383.08-.711.139-1.304.079-.612.138-.85l1.738-12.444h5.294l-4.622 20.524h-5.729l-1.738-8.296q-.277-1.304-.435-2.568-.138-1.284-.256-2.608h-.158q-.119 2.49-.534 4.88l-1.62 8.592H303.6l-4.682-20.524h5.531l1.857 12.504q.04.237.118.85.08.612.139 1.323.079.711.138 1.383.06.671.06 1.007h.078q.06-1.126.178-2.212.138-1.087.356-2.193l2.173-12.662h4.325z" />
+            <path d="M326.524 62.09V41.564h5.255V62.09zm0-23.014V34.79h5.255v4.286z" />
+            <path d="M343.208 62.168q-.77.08-1.64.138-.85.06-1.699.02-.83-.04-1.58-.217-.75-.178-1.323-.573-.573-.395-.91-1.027-.335-.632-.335-1.58V45.002h-2.133v-3.437h2.094v-5.669h5.293v5.67h2.233v3.436h-2.233v12.741q.06.336.317.494.256.158.592.217.356.06.711.04.376-.02.613-.04z" />
+            <path d="M344.898 62.09v-27.3h5.255v8.889h.079q.553-.909 1.205-1.422.671-.534 1.303-.81.652-.277 1.225-.356.593-.079 1.007-.079 1.126 0 2.094.316.988.297 1.7.929.73.632 1.125 1.62.395.987.336 2.37v15.842h-5.255V48.025q0-.751-.079-1.363-.059-.613-.296-1.047-.217-.435-.671-.672-.435-.257-1.186-.296-.75-.02-1.264.257-.494.276-.81.79-.296.513-.434 1.224-.119.692-.08 1.521v13.65z" />
+            <path d="M368.516 62.09v-27.3h15.941v3.99h-10.271v6.874h9.461v4.03h-9.461v8.415h10.271v3.99z" />
+            <path d="M400.212 34.79h6.065l-6.559 27.3h-7.565l-6.716-27.3h6.064l3.556 17.501q.256 1.166.415 2.331.158 1.146.276 2.331.06.553.158 1.126.099.553.099 1.126h.079q0-.573.079-1.126.099-.573.158-1.126.118-1.185.276-2.33.158-1.166.415-2.332z" />
+            <path d="M407.098 62.09v-27.3h15.941v3.99h-10.272v6.874h9.462v4.03h-9.462v8.415h10.272v3.99z" />
+            <path d="M430.716 46.247q.06-1.738.178-3.299.138-1.58.474-2.923.356-1.363.988-2.45.652-1.086 1.718-1.857 1.087-.77 2.687-1.185 1.6-.415 3.871-.415 2.252 0 3.852.415t2.667 1.185q1.086.77 1.719 1.857.651 1.087.987 2.45.356 1.343.474 2.923.139 1.56.198 3.299v3.891q0 1.818-.099 3.477-.079 1.64-.415 3.042-.316 1.383-.948 2.509-.632 1.126-1.738 1.935-1.087.79-2.726 1.205-1.64.435-3.97.435-2.332 0-3.971-.435-1.64-.414-2.746-1.205-1.086-.81-1.738-1.935-.632-1.126-.968-2.51-.316-1.402-.415-3.041-.079-1.66-.079-3.477zm5.827 6.46q0 .552.02 1.224.04.652.158 1.323.139.652.395 1.265.277.612.731 1.086.454.454 1.126.75.691.277 1.66.277 1.007 0 1.698-.276.692-.297 1.146-.79.454-.494.711-1.126.257-.652.375-1.363.119-.712.139-1.442.02-.731.02-1.383v-6.973q0-.553-.02-1.284 0-.73-.119-1.501-.099-.79-.336-1.541-.237-.77-.691-1.363-.454-.612-1.166-.968-.71-.375-1.758-.375-1.126 0-1.856.375-.731.356-1.186.948-.454.573-.671 1.324-.218.75-.316 1.52-.08.751-.08 1.462.02.712.02 1.245z" />
+            <path d="M458.896 43.679h.079q.435-.889 1.067-1.403.632-.533 1.284-.81.671-.296 1.303-.375.633-.079 1.087-.079 1.126 0 2.094.316.987.297 1.698.929.731.632 1.126 1.62.396.987.336 2.37v15.842h-5.254V48.4q0-.75-.08-1.363-.058-.612-.295-1.047-.218-.454-.672-.691-.435-.257-1.185-.297-.75-.02-1.264.277-.494.276-.81.79-.297.514-.435 1.225-.118.691-.079 1.501v13.294h-5.254V41.565h5.254z" />
+            <path d="M472.518 62.09v-27.3h5.254v27.3z" />
+            <path d="M481.695 62.09V41.564h5.254V62.09zm0-23.014V34.79h5.254v4.286z" />
+            <path d="M495.91 43.679h.078q.435-.889 1.067-1.403.632-.533 1.284-.81.671-.296 1.303-.375.633-.079 1.087-.079 1.126 0 2.094.316.987.297 1.699.929.73.632 1.125 1.62.396.987.336 2.37v15.842h-5.254V48.4q0-.75-.08-1.363-.058-.612-.295-1.047-.218-.454-.672-.691-.435-.257-1.185-.297-.75-.02-1.264.277-.494.276-.81.79-.297.514-.435 1.225-.118.691-.079 1.501v13.294h-5.254V41.565h5.254z" />
+            <path d="M508.681 48.617q-.098-1.817.356-3.22.474-1.422 1.442-2.39.988-.987 2.47-1.481 1.48-.514 3.416-.514 2.746 0 4.346.632 1.6.613 2.43 1.778.83 1.166 1.066 2.845.238 1.679.238 3.772v2.766h-10.51v2.983q.02 1.007.218 1.64.217.612.573.967.375.356.869.474.494.119 1.086.119 1.442 0 1.956-.948.533-.968.474-2.904h5.255q.079 1.718-.297 3.12-.375 1.384-1.264 2.371-.87.968-2.291 1.482-1.403.533-3.418.533-2.291 0-3.91-.494-1.6-.494-2.628-1.54-1.027-1.067-1.482-2.687-.454-1.64-.395-3.911zm10.51.553v-1.777q-.02-.79-.159-1.304-.138-.534-.454-.85-.297-.316-.83-.454-.513-.138-1.304-.138-.987 0-1.5.316-.514.316-.751.83-.218.513-.238 1.185-.02.652-.02 1.343v.85z" />
+        </g>
+    </symbol>
+</svg>

img/svg/logo_inline.svg

@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" viewBox="0 0 355 370" width="100%" height="100%"  shape-rendering="geometricPrecision">
+    <filter id="LogoFilterShadow" filterUnits="userSpaceOnUse" x="-10px" y="-10px" height="120%" width="120%">
+        <feGaussianBlur in="SourceAlpha" result="blurOut" stdDeviation="4"/>
+        <feOffset in="blurOut" result="dropBlur" dx="5" dy="5"/>
+        <feComposite operator="over" in="SourceGraphic" in2="dropBlur" result="final"/>
+    </filter>
+
+    <!-- a glow that takes on the stroke color of the object it's applied to -->
+    <filter id="strokeGlow" filterUnits="userSpaceOnUse" x="-10px" y="-10px" height="120%" width="120%">
+        <feOffset in="SourceGraphic" dx="0" dy="0" result="centeredOffset"/>
+        <feGaussianBlur in="centeredOffset" stdDeviation="3" result="blur2"/>
+
+        <feGaussianBlur result="blur3" in="offIn" stdDeviation="5"/>
+        <feBlend in="SourceGraphic" in2="blur3" mode="lighten" result="blend3"/>
+
+        <feMerge>
+            <feMergeNode in="blur2"/>
+            <feMergeNode in="blend1"/>
+            <feMergeNode in="SourceGraphic"/>
+        </feMerge>
+    </filter>
+
+    <defs>
+        <polygon id="pf-svg-logo-top-right" points="196 10 227 297 354 365" class="logo-ploygon-top-right"/>
+        <clipPath id="pf-svg-logo-top-right-clip">
+            <use xlink:href="#pf-svg-logo-top-right"/>
+        </clipPath>
+        <polygon id="pf-svg-logo-bottom-left" points="2 362 74 285 178 287" class="logo-ploygon-bottom-left"/>
+        <clipPath id="pf-svg-logo-bottom-left-clip">
+            <use xlink:href="#pf-svg-logo-bottom-left"/>
+        </clipPath>
+        <polygon id="pf-svg-logo-bottom-right" points="193 286 121 318 336 363" class="logo-ploygon-bottom-right"/>
+        <clipPath id="pf-svg-logo-bottom-right-clip">
+            <use xlink:href="#pf-svg-logo-bottom-right"/>
+        </clipPath>
+        <polygon id="pf-svg-logo-top-left" points="203 142 0 353 189 1" class="logo-ploygon-top-left"/>
+        <clipPath id="pf-svg-logo-top-left-clip">
+            <use xlink:href="#pf-svg-logo-top-left"/>
+        </clipPath>
+    </defs>
+
+    <symbol id="pf-svg-logo" viewBox="0 0 355 370" width="100%" height="100%" filter="url(#LogoFilterShadow)">
+        <g>
+            <title>Logo</title>
+            <use xlink:href="#pf-svg-logo-top-right" filter="url(#strokeGlow)" clip-path="url(#pf-svg-logo-top-right-clip)"/>
+            <use xlink:href="#pf-svg-logo-bottom-left" filter="url(#strokeGlow)" clip-path="url(#pf-svg-logo-bottom-left-clip)"/>
+            <use xlink:href="#pf-svg-logo-bottom-right" filter="url(#strokeGlow)" clip-path="url(#pf-svg-logo-bottom-right-clip)"/>
+            <use xlink:href="#pf-svg-logo-top-left" filter="url(#strokeGlow)" clip-path="url(#pf-svg-logo-top-left-clip)"/>
+        </g>
+    </symbol>
+</svg>

img/svg/logo_simple.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 355 370" width="100%" height="100%" shape-rendering="geometricPrecision">
+    <polygon points="227 297 354 365 196 10" style="fill:#477372;" />
+    <polygon points="121 318 336 363 193 286" style="fill:#375959;" />
+    <polygon points="0 353 95 177 189 1 203 142" style="fill:#63676a;" />
+    <polygon points="74 285 178 287 2 362" style="fill:#5cb85c;" />
+</svg>

img/svg/swords.svg

@@ -1,4 +1,4 @@
-<svg class="pf-logo-wrapper" xmlns="http://www.w3.org/2000/svg" version="1.2" width="0" height="0" shape-rendering="geometricPrecision">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" width="0" height="0" shape-rendering="geometricPrecision">
     <symbol id="pf-svg-swords" viewBox="0 0 512 512">
         <g>
             <path fill="currentColor"

js/app.js

@@ -48,13 +48,12 @@ requirejs.config({
         hoverIntent: 'lib/jquery.hoverIntent.min',                      // v1.10.0  Hover intention - http://cherne.net/brian/resources/jquery.hoverIntent.html
         select2: 'lib/select2.min',                                     // v4.0.13  Drop Down customization - https://select2.github.io
         validator: 'lib/validator.min',                                 // v0.10.1  Validator for Bootstrap 3 - https://github.com/1000hz/bootstrap-validator
-        lazylinepainter: 'lib/jquery.lazylinepainter-1.5.1.min',        // v1.5.1   SVG line animation plugin - http://lazylinepainter.info
         blueImpGallery: 'lib/blueimp-gallery',                          // v2.21.3  Image Gallery - https://github.com/blueimp/Gallery
         blueImpGalleryHelper: 'lib/blueimp-helper',                     //          helper function for Blue Imp Gallery
         blueImpGalleryBootstrap: 'lib/bootstrap-image-gallery',         // v3.4.2   Bootstrap extension for Blue Imp Gallery - https://blueimp.github.io/Bootstrap-Image-Gallery
         bootstrapConfirmation: 'lib/bootstrap-confirmation.min',        // v1.0.7   Bootstrap extension for inline confirm dialog - https://github.com/tavicu/bs-confirmation
         bootstrapToggle: 'lib/bootstrap-toggle.min',                    // v2.2.0   Bootstrap Toggle (Checkbox) - http://www.bootstraptoggle.com
-        lazyload: 'lib/jquery.lazyload.min',                            // v1.9.7   LazyLoader images - https://appelsiini.net/projects/lazyload/
+        lazyload: 'lib/lazyload.min',                                   // v14.0.0  LazyLoader images - https://github.com/verlok/lazyload
         sortable: 'lib/sortable.min',                                   // v1.10.1  Sortable - drag&drop reorder - https://github.com/SortableJS/Sortable
 
         'summernote.loader': './app/summernote.loader',                 // v0.8.10  Summernote WYSIWYG editor -https://summernote.org
@@ -151,9 +150,6 @@ requirejs.config({
         validator: {
             deps: ['jquery', 'bootstrap']
         },
-        lazylinepainter: {
-            deps: ['jquery', 'bootstrap']
-        },
         blueImpGallery: {
             deps: ['jquery']
         },
@@ -163,9 +159,6 @@ requirejs.config({
         bootstrapToggle: {
             deps: ['jquery', 'bootstrap']
         },
-        lazyload: {
-            deps: ['jquery']
-        },
         summernote: {
             deps: ['jquery']
         }

js/app/init.js

@@ -18,7 +18,6 @@ define([], () => {
 
     return {
         path: {
-            img: '/public/img/',                                            // path for images
             api: '/api/rest',                                               //ajax URL - REST API
             // user API
             getCaptcha: '/api/User/getCaptcha',                             // ajax URL - get captcha image

js/app/login.js

@@ -9,17 +9,15 @@ define([
     'app/render',
     'blueImpGallery',
     'layout/header_login',
-    'bootbox',
     'lazyload',
-    'layout/logo',
-    'layout/demo_map',
+    'bootbox',
     'dialog/account_settings',
     'dialog/notification',
     'dialog/manual',
     'dialog/changelog',
     'dialog/credit',
     'dialog/api_status'
-], ($, Init, Util, Render, Gallery, HeaderLogin, bootbox) => {
+], ($, Init, Util, Render, Gallery, HeaderLogin, LazyLoad, bootbox) => {
 
     'use strict';
 
@@ -29,7 +27,6 @@ define([
         // header
         headerId: 'pf-landing-top',                                             // id for header
         headerContainerId: 'pf-header-container',                               // id for header container
-        logoContainerId: 'pf-logo-container',                                   // id for main header logo container
         headHeaderMapId: 'pf-header-map',                                       // id for header image (svg animation)
 
         // map bg
@@ -177,7 +174,7 @@ define([
         // license ------------------------------------------------------------
         $('.' + config.navigationLinkLicenseClass).on('click', function(e){
             e.preventDefault();
-            $.fn.showCreditsDialog(false, true);
+            $.fn.showCreditsDialog();
         });
 
         // releases -----------------------------------------------------------
@@ -404,7 +401,7 @@ define([
      * init scrollSpy for navigation bar
      */
     let initScrollSpy = () => {
-        let scrollElement = window;
+        let scrollElement = document;
         let timeout;
 
         // show elements that are currently in the viewport
@@ -515,7 +512,7 @@ define([
 
         let showNotificationPanel = () => {
             let data = {
-                version: Util.getVersion()
+                version: currentVersion
             };
 
             requirejs(['text!templates/ui/notice.html', 'mustache'], (template, Mustache) => {
@@ -818,8 +815,9 @@ define([
         });
 
         // init "lazy loading" for images
-        $('.' + config.galleryThumbImageClass).lazyload({
-            threshold : 300
+        let lazyLoadInstance = new LazyLoad({
+            elements_selector: `.${config.galleryThumbImageClass}`,
+            use_native: true
         });
 
         // hide splash loading animation
@@ -848,11 +846,8 @@ define([
         initYoutube();
 
         // draw header logo
-        $('#' + config.logoContainerId).drawLogo(() => {
-            // init header animation
+        document.querySelector(`.logo-ploygon-top-right`).addEventListener('animationend', () => {
             HeaderLogin.init(document.getElementById(config.headerContainerId));
-        }, false);
-
+        });
     });
-
 });

js/app/map/util.js

@@ -1759,7 +1759,7 @@ define([
             for(let i = 0; i < services.length; i++){
                 let icon = getServiceIcon(services[i]);
                 if(icon){
-                    content += '<img class="' + Util.config.popoverListIconClass + '" src="/public/img/icons/client/ui/window/' + icon + '.png" alt="' + services[i] + '">';
+                    content += `<img class="${Util.config.popoverListIconClass}" src="${Util.imgRoot()}icons/client/ui/window/${icon}.png" alt="${services[i]}">`;
                 }
             }
             return content;

js/app/module_map.js

@@ -1609,7 +1609,7 @@ define([
                             let gridItemEl = Object.assign(document.createElement('div'), {
                                 className: config.editableToggleItemClass + (layout === layoutCurrent ? ' active' : '')
                             });
-                            gridItemEl.style.setProperty('--bg-image',`url("/public/img/icons/grid_${layout}.png")`);
+                            gridItemEl.style.setProperty('--bg-image', `url("${Util.imgRoot()}/icons/grid_${layout}.png")`);
                             gridItemEl.dataset.value = layout;
                             return gridItemEl;
                         });

js/app/page.js

@@ -443,15 +443,17 @@ define([
     let loadSVGs = () => {
 
         let executor = resolve => {
-            let parentElement = $('body');
-
             let svgPaths = [
-                'img/svg/logo.svg',
-                'img/svg/swords.svg'
-            ].map(path => 'text!' + path + '!strip');
+                'svg/logo_inline.svg',
+                'svg/swords.svg'
+            ].map(path => `text!${Util.imgRoot()}${path}!strip`);
 
             requirejs(svgPaths, (...SVGs) => {
-                parentElement.append.apply(parentElement, SVGs);
+                let svgWrapperEl = Object.assign(document.createElement('div'), {
+                    className: 'pf-svg-wrapper'
+                });
+                svgWrapperEl.insertAdjacentHTML('beforeend', SVGs.join(''));
+                document.body.append(svgWrapperEl);
 
                 resolve({
                     action: 'loadSVGs',
@@ -910,6 +912,8 @@ define([
     let setBodyObserver = () => {
 
         let executor = resolve => {
+            document.body.style.setProperty('--svgBubble', `url("${Util.imgRoot()}svg/bubble.svg")`);
+
             let bodyElement = $(document.body);
 
             // global "popover" callback (for all popovers)

js/app/setup.js

@@ -81,7 +81,7 @@ define([
         let body = $('body');
 
         // navigation (scroll) ----------------------------------------------------------------------------------------
-        Util.initScrollSpy(document.getElementById(config.navigationElementId), window, {
+        Util.initScrollSpy(document.getElementById(config.navigationElementId), document, {
             offset: 300
         });
 

js/app/ui/dialog/credit.js

@@ -6,45 +6,33 @@ define([
     'jquery',
     'app/init',
     'app/util',
-    'bootbox',
-    'layout/logo'
+    'bootbox'
 ], ($, Init, Util, bootbox) => {
     'use strict';
 
     let config = {
-        // jump info dialog
-        creditsDialogClass: 'pf-credits-dialog',                                // class for credits dialog
-        creditsDialogLogoContainerId: 'pf-logo-container'                       // id for logo element
+        creditsDialogClass: 'pf-credits-dialog'
     };
 
     /**
      * show jump info dialog
      */
-    $.fn.showCreditsDialog = function(callback, enableHover){
-
+    $.fn.showCreditsDialog = function(){
         requirejs(['text!templates/dialog/credit.html', 'mustache'], (template, Mustache) => {
-
             let data = {
-                logoContainerId: config.creditsDialogLogoContainerId,
-                version: Util.getVersion()
+                version: Util.getVersion(),
+                imgSrcBackground: `${Util.imgRoot()}header/pf-header-780.webp`,
+                imgSrcPatreon: `${Util.imgRoot()}misc/donate_patreon.png`,
+                imgSrcPaypal: `${Util.imgRoot()}misc/donate_paypal.png`,
             };
 
             let content = Mustache.render(template, data);
 
-            let creditDialog = bootbox.dialog({
+            bootbox.dialog({
                 className: config.creditsDialogClass,
                 title: 'Licence',
                 message: content
             });
-
-            // after modal is shown =======================================================================
-            creditDialog.on('shown.bs.modal', function(e){
-
-                // load Logo svg
-                creditDialog.find('#' + config.creditsDialogLogoContainerId).drawLogo(callback, enableHover);
-            });
-
         });
-
     };
 });