adler.today

by Roman

HTML

<link rel="stylesheet" href="https://lk.tezarius.ru/assets/css/style.bundle.min.css">
<script>
  JSON.check = function(str){ try { return (JSON.parse(str) && !!str); } catch (e) { return false; } };
  JSON.decode = function(str){ return ( JSON.check(str) ) ? JSON.parse(str) : {err:1,str:str}; };
  JSON.encode = JSON.stringify;
  String.prototype.trimChars = function(c){ var re = new RegExp("^[" + c + "]+|[" + c + "]+$", "g"); return this.replace(re,""); };
  Object.filter = function(obj,predicate){ let result = {}, key; for (key in obj) if (obj.hasOwnProperty(key) && !predicate(obj[key],key)) result[key] = obj[key]; return result; };
  var ready = function ( fn ) {
    if ( typeof fn !== 'function' ) return;
    if ( document.readyState === 'complete'  ) return fn();
    document.addEventListener( 'interactive', fn, false );
    document.addEventListener( 'complete', fn, false );
    window.addEventListener( 'load', fn, false );
  };
  })
</script>


<header>
    <div class="flex-inner">
        <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-pill btn-sm btn-outline-primary random" onClick="DTMain.random();">Случайное</button>
            <button type="button" class="btn btn-pill btn-sm btn-outline-primary shuffle" onClick="DTMain.shuffle();">Без повторов</button>
        </div>
    </div>
</header>

<main>
	<section id="center">
		<p id="message">Это Адлер, Детка!</p>
	</section>
</main>

<footer>
  <div class="flex-inner">
      <div class="kt-widget-14__foot-label btn btn-sm btn-label-brand btn-bold">
          © 2020 | <a href="mailto:[email protected]">[email protected]</a>
      </div>
  </div>
</footer>

CSS

body,
        html {
            height: 100%;
            width: 100%;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
        }
        header, footer {
            width: 100%;
        }
        header .flex-inner, footer .flex-inner {
            padding: 10px 20px;
        }
        header {
            text-align: right;
        }
        footer {
            text-align: left;
        }
        main, section#center {
            text-align: center;
            font-size: 5rem;
        }

        section#center p {}

        @media (max-width: 768px){
            main, section#center {
                font-size: 3rem;
            }
        }

JavaScript

var quotes = [
            "Поброди по Мандарину",
            "Прогуляйся по набережной",
            "Пройди вдоль Мзымты",
            "Сходи в Беcтужев",
            "Вкуси Барабульку",
            "Отдохни у Ивана",
            "Прокатись по Олимпийскому Парку",

        ];
var DTMain = function(){
        // Private Function
        var interval = 5000, timerRandom, timerShuffle, $btnRandom, $btnShuffle, $place = $('#message');
        var common = function(){
            $btnRandom = $('button.random');
            $btnShuffle = $('button.shuffle');
            random();
        };
        var random = function(){
            clearInterval(timerShuffle);
            timerShuffle = null;
            clearInterval(timerRandom);
            if( $btnRandom.hasClass('btn-outline-primary') ) $btnRandom.removeClass('btn-outline-primary').addClass('btn-outline-secondary');
            if( $btnShuffle.hasClass('btn-outline-secondary') ) $btnShuffle.removeClass('btn-outline-secondary').addClass('btn-outline-primary');
            $place.html(quotes[Math.floor(Math.random() * quotes.length)]);
            timerRandom = setInterval(function(){
                $place.html(quotes[Math.floor(Math.random() * quotes.length)]);
            },interval);
        };


        var index = 0, stop = quotes.length-1, quotesCopy, qoutesShuffle;
        var nextQuote = function(){
            $place.html(qoutesShuffle[++index]);
            if( index>stop ) index = 0;
        };
        var shuffle = function(){
            if( timerShuffle ){
                nextQuote();
                clearInterval(timerShuffle);
                timerShuffle = setInterval(nextQuote,interval);
            }
            else{
                //
                clearInterval(timerRandom);
                timerRandom = null;
                if( $btnShuffle.hasClass('btn-outline-primary') ) $btnShuffle.removeClass('btn-outline-primary').addClass('btn-outline-secondary');
                if(...