Описание
Сделайте ваш сайт более гостеприимным для ваших пользователей.
Этот скрипт всегда подскажет пользователю его текущее время и поприветствует его фразой, аля "Доброе утро, username".
Установка: Скачайте и загрузите на свой сайт JS файл (внимание, для работы нужен jQuery версии 1.7.10 (или выше))
Добавьте в удобное место следующих код:
Код
<div id="hello_block">
<div class="-up-text"></div>
<?if($USERNAME$)?><div class="-nick">$USERNAME$</div><?endif?>
<div class="-time"></div>
</div>
<script type="text/javascript" src="/helloblock.js"></script>
После этого добавьте стили:
Код
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400'); /* Советую использовать этот шрифт */
#hello_block {display: flex; width: 100%; max-width: 300px; min-height: 200px; border-radius: 10px; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; color: #fff; font-family: 'Roboto', sans-serif; font-weight: 400; text-shadow: 1px 1px 0 #333, 1px 0 0 #333, 1px -1px 0 #333, 0 -1px 0 #333, -1px -1px 0 #333, -1px 0 0 #333, -1px 1px 0 #333, 0 1px 0 #333, 0 0 1px #333;}
#hello_block[data-time] {background-repeat: no-repeat; background-position: center bottom; background-size: cover;}
#hello_block[data-time="0"] {background-color: #e1b9bf; background-image: url('http://pandora.clan.su/time0.png');}
#hello_block[data-time="1"] {background-color: #5ecdf9; background-image: url('http://pandora.clan.su/time1.png');}
#hello_block[data-time="2"] {background-color: #c4637d; background-image: url('http://pandora.clan.su/time2.png');}
#hello_block[data-time="3"] {background-color: #4c4089; background-image: url('http://pandora.clan.su/time3.png');}
#hello_block .-up-text {font-size: 150%;}
#hello_block .-nick {font-size: 120%;}
#hello_block .-time {margin-top: 5%; font-size: 200%; font-weight: 300;}
Фон блока храниться на моём сайта, но лучше их скачать, вот ссылки:
time0.png | утро
time1.png | день
time2.png | вечер
time3.png | ночь