<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html" charset=utf-8">
<head>
<link rel="stylesheet" href="style.css">
<script src="poems.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container fade-box">
<ul>
<li id="s1"></li>
<li id="s2"></li>
<li id="s3"></li>
<li id="s4"></li>
</ul>
</div>
</body>
</html>
window.onload = function() {
var eS1 = document.getElementById('s1');
var eS2 = document.getElementById('s2');
var eS3 = document.getElementById('s3');
var eS4 = document.getElementById('s4');
var poemsTemp, poemsArr = [];
eS1.onmousedown = clearSelection;
eS2.onmousedown = clearSelection;
eS3.onmousedown = clearSelection;
eS4.onmousedown = clearSelection;
eS1.onclick = showNext;
eS2.onclick = showNext;
eS3.onclick = showNext;
eS4.onclick = showNext;
showNext();
function clearSelection() {
return false;
}
function showNext() {
if (!poemsArr.length) {
poemsTemp = [].concat(poems);
for (var i = 0; i < poems.length; i++) {
poemsArr.push(poemsTemp.splice(Math.floor(Math.random()*poemsTemp.length), 1)[0]);
}
}
var poem = poemsArr.pop();
eS1.innerHTML = poem.s1;
eS2.innerHTML = poem.s2;
eS3.innerHTML = poem.s3;
eS4.innerHTML = poem.s4;
}
}
@import url(http://fonts.googleapis.com/css?family=Marmelad&subset=latin,cyrillic);
body {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.6;
background: #3498db;
}
.container {
max-width: 500px;
padding-top: 50px;
padding-right: 30px;
padding-left: 30px;
margin-right: auto;
margin-left: auto;
}
.fade-box ul {
padding: 0;
list-style-type: none;
font-family: 'Marmelad', sans-serif;
}
.fade-box li {
position: relative;
padding: 15px 50px;
cursor: pointer;
border-top: solid 1px #e3ebf0;
background: #fff;
box-shadow: -1.09703px 1.023px 0 #217dbb, -2.19406px 2.046px 0 #217dbb, -3.29109px 3.06899px 0 #217dbb, -4.38812px 4.09199px 0 #217dbb, -5.48515px 5.11499px 0 #217dbb, -6.58218px 6.13799px 0 #217dbb, -7.67921px 7.16098px 0 #217dbb, -8.77624px 8.18398px 0 #217dbb, -9.87327px 9.20698px 0 #217dbb, -10.97031px 10.22998px 0 #217dbb, -12.06734px 11.25297px 0 #217dbb, -13.16437px 12.27597px 0 #217dbb, -14.2614px 13.29897px 0 #217dbb, -15.35843px 14.32197px 0 #217dbb, -16.45546px 15.34496px 0 #217dbb, -17.55249px 16.36796px 0 #217dbb, -18.64952px 17.39096px 0 #217dbb, -19.74655px 18.41396px 0 #217dbb, -20.84358px 19.43695px 0 #217dbb, -21.94061px 20.45995px 0 #217dbb, -23.03764px 21.48295px 0 #217dbb, -24.13467px 22.50595px 0 #217dbb, -25.2317px 23.52894px 0 #217dbb, -26.32873px 24.55194px 0 #217dbb, -27.42576px 25.57494px 0 #217dbb, -28.52279px 26.59794px 0 #217dbb, -29.61982px 27.62093px 0 #217dbb, -30.71686px 28.64393px 0 #217dbb, -31.81389px 29.66693px 0 #217dbb, -32.91092px 30.68993px 0 #217dbb, -34.00795px 31.71292px 0 #217dbb, -35.10498px 32.73592px 0 #217dbb, -36.20201px 33.75892px 0 #217dbb, -37.29904px 34.78192px 0 #217dbb, -38.39607px 35.80491px 0 #217dbb, -39.4931px 36.82791px 0 #217dbb, -40.59013px 37.85091px 0 #217dbb, -41.68716px 38.87391px 0 #217dbb, -42.78419px 39.8969px 0 #217dbb, -43.88122px 40.9199px 0 #217dbb, -44.97825px 41.9429px 0 #217dbb, -46.07528px 42.9659px 0 #217dbb, -47.17231px 43.98889px 0 #217dbb, -48.26934px 45.01189px 0 #217dbb, -49.36637px 46.03489px 0 #217dbb, -50.46341px 47.05789px 0 #217dbb, -51.56044px 48.08088px 0 #217dbb, -52.65747px 49.10388px 0 #217dbb, -53.7545px 50.12688px 0 #217dbb, -54.85153px 51.14988px 0 #217dbb;
}
.fade-box li:hover {
top: 2px;
right: 2px;
background: rgba(255,255,255,0.9);
box-shadow: -1.09703px 1.023px 0 #217dbb, -2.19406px 2.046px 0 #217dbb, -3.29109px 3.06899px 0 #217dbb, -4.38812px 4.09199px 0 #217dbb, -5.48515px 5.11499px 0 #217dbb, -6.58218px 6.13799px 0 #217dbb, -7.67921px 7.16098px 0 #217dbb, -8.77624px 8.18398px 0 #217dbb, -9.87327px 9.20698px 0 #217dbb, -10.97031px 10.22998px 0 #217dbb, -12.06734px 11.25297px 0 #217dbb, -13.16437px 12.27597px 0 #217dbb, -14.2614px 13.29897px 0 #217dbb, -15.35843px 14.32197px 0 #217dbb, -16.45546px 15.34496px 0 #217dbb, -17.55249px 16.36796px 0 #217dbb, -18.64952px 17.39096px 0 #217dbb, -19.74655px 18.41396px 0 #217dbb, -20.84358px 19.43695px 0 #217dbb, -21.94061px 20.45995px 0 #217dbb, -23.03764px 21.48295px 0 #217dbb, -24.13467px 22.50595px 0 #217dbb, -25.2317px 23.52894px 0 #217dbb, -26.32873px 24.55194px 0 #217dbb, -27.42576px 25.57494px 0 #217dbb, -28.52279px 26.59794px 0 #217dbb, -29.61982px 27.62093px 0 #217dbb, -30.71686px 28.64393px 0 #217dbb, -31.81389px 29.66693px 0 #217dbb, -32.91092px 30.68993px 0 #217dbb, -34.00795px 31.71292px 0 #217dbb, -35.10498px 32.73592px 0 #217dbb, -36.20201px 33.75892px 0 #217dbb, -37.29904px 34.78192px 0 #217dbb, -38.39607px 35.80491px 0 #217dbb, -39.4931px 36.82791px 0 #217dbb, -40.59013px 37.85091px 0 #217dbb, -41.68716px 38.87391px 0 #217dbb, -42.78419px 39.8969px 0 #217dbb, -43.88122px 40.9199px 0 #217dbb, -44.97825px 41.9429px 0 #217dbb, -46.07528px 42.9659px 0 #217dbb, -47.17231px 43.98889px 0 #217dbb, -48.26934px 45.01189px 0 #217dbb, -49.36637px 46.03489px 0 #217dbb, -50.46341px 47.05789px 0 #217dbb, -51.56044px 48.08088px 0 #217dbb, -52.65747px 49.10388px 0 #217dbb;
}
.fade-box li:first-child {
border-top: none;
}
.fade-box li:active {
top: 5px;
right: 5px;
box-shadow: -1.09703px 1.023px 0 #217dbb, -2.19406px 2.046px 0 #217dbb, -3.29109px 3.06899px 0 #217dbb, -4.38812px 4.09199px 0 #217dbb, -5.48515px 5.11499px 0 #217dbb, -6.58218px 6.13799px 0 #217dbb, -7.67921px 7.16098px 0 #217dbb, -8.77624px 8.18398px 0 #217dbb, -9.87327px 9.20698px 0 #217dbb, -10.97031px 10.22998px 0 #217dbb, -12.06734px 11.25297px 0 #217dbb, -13.16437px 12.27597px 0 #217dbb, -14.2614px 13.29897px 0 #217dbb, -15.35843px 14.32197px 0 #217dbb, -16.45546px 15.34496px 0 #217dbb, -17.55249px 16.36796px 0 #217dbb, -18.64952px 17.39096px 0 #217dbb, -19.74655px 18.41396px 0 #217dbb, -20.84358px 19.43695px 0 #217dbb, -21.94061px 20.45995px 0 #217dbb, -23.03764px 21.48295px 0 #217dbb, -24.13467px 22.50595px 0 #217dbb, -25.2317px 23.52894px 0 #217dbb, -26.32873px 24.55194px 0 #217dbb, -27.42576px 25.57494px 0 #217dbb, -28.52279px 26.59794px 0 #217dbb, -29.61982px 27.62093px 0 #217dbb, -30.71686px 28.64393px 0 #217dbb, -31.81389px 29.66693px 0 #217dbb, -32.91092px 30.68993px 0 #217dbb, -34.00795px 31.71292px 0 #217dbb, -35.10498px 32.73592px 0 #217dbb, -36.20201px 33.75892px 0 #217dbb, -37.29904px 34.78192px 0 #217dbb, -38.39607px 35.80491px 0 #217dbb, -39.4931px 36.82791px 0 #217dbb, -40.59013px 37.85091px 0 #217dbb, -41.68716px 38.87391px 0 #217dbb, -42.78419px 39.8969px 0 #217dbb, -43.88122px 40.9199px 0 #217dbb, -44.97825px 41.9429px 0 #217dbb, -46.07528px 42.9659px 0 #217dbb, -47.17231px 43.98889px 0 #217dbb, -48.26934px 45.01189px 0 #217dbb, -49.36637px 46.03489px 0 #217dbb;
}
var poems =[
{
"s1": "Вшивая вместо сердца почку ",
"s2": "Сказал с улыбкою хирург",
"s3": "«Конечно так он жить не будет",
"s4": "Но вдруг»"
},{
"s1": "При встрече с вами я подумал ",
"s2": "Что может ну её жену",
"s3": "И раз за разом убеждаюсь ",
"s4": "Что ну"
},{
"s1": "Вениамин спасал Оксану ",
"s2": "От нападения лося ",
"s3": "Потом глядит спаслась Оксана ",
"s4": "Не вся"
},{
"s1": "Ты что там делал Игореша ",
"s2": "Да ничего играл с сестрой ",
"s3": "Дурак немедленно обратно",
"s4": "Зарой"
},{
"s1": "Вот Маяковский был мужчина ",
"s2": "А не какойто пидарас ",
"s3": "Сам тихо взял и застрелился ",
"s4": "Пять раз"
},{
"s1": "А я одну подругу знаю ",
"s2": "Её от интегралов прёт ",
"s3": "И не берущиеся даже ",
"s4": "Берёт"
},{
"s1": "Лягушки хором замолчали ",
"s2": "Все стихли даже вдалеке ",
"s3": "Когда французы подходили",
"s4": "К реке"
},{
"s1": "На зиму ёж пришел в свинарник",
"s2": "Отъелся вырос облысел",
"s3": "К весне он выглядел и хрюкал",
"s4": "Как все"
},{
"s1": "И днём и ночью царь ученый",
"s2": "Ходил под окнами светлиц",
"s3": "И выявлял потенциальных ",
"s4": "Цариц"
},{
"s1": "Проснулся я в поту холодном",
"s2": "И на душе скребут ежи",
"s3": "Я в мавзолей а нет всё в норме",
"s4": "Лежит"
},{
"s1": "Я бросил девушку за то что",
"s2": "Она красива и умна",
"s3": "Ещё за то что недовольна",
"s4": "Жена"
},{
"s1": "В тоске прекраснейшая дама",
"s2": "Рыдает горько в три ручья",
"s3": "Опять на рыцарском турнире",
"s4": "Ничья"
},{
"s1": "Зарыв воскресшего Исуса",
"s2": "Народ под строчкой рест ин пис",
"s3": "На гробовой доске добавил",
"s4": "На бис"
},{
"s1": "За тем сугробом размещалось",
"s2": "Такое множество засад",
"s3": "Что он уже в четыре слоя",
"s4": "Зассат"
},{
"s1": "Так обаятельна Оксана",
"s2": "И нежный стан и звонкий смех",
"s3": "Что я внезапно обаялся",
"s4": "При всех"
},{
"s1": "Изольда Марковна спугнула",
"s2": "Меня избыточностью форм",
"s3": "Я не смогу ей обеспечить",
"s4": "Прокорм"
},{
"s1": "Смотрю на небо там сверкает",
"s2": "Носок дырявый без каймы",
"s3": "Прости нас боже ты такой же",
"s4": "Как мы"
},{
"s1": "Пусть Карл и Клара постарели",
"s2": "Но пронеся сквозь годы страсть",
"s3": "Всё смотрят что бы друг у друга",
"s4": "Украсть"
},{
"s1": "Циклоп с Кутузовым был нежен",
"s2": "Цветы вино и лёгкий джаз",
"s3": "Сидят всю ночь влюблённо смотрят",
"s4": "Глаз в глаз"
},{
"s1": "Я часто в спичечной коробке",
"s2": "Сдаю прям спички а не кал",
"s3": "Ещё бы кто то там особо",
"s4": "Вникал"
},{
"s1": "Я вспомнил девушку простую",
"s2": "Услышав как она поёт",
"s3": "Потом юннаты разъяснили",
"s4": "Койот"
},{
"s1": "Кружит вокруг сороконожки ",
"s2": "Растерянный сороконог ",
"s3": "Забыл между каких сегментов ",
"s4": "Он мог "
},{
"s1": "Самец совы в бессильном гневе",
"s2": "Шагами меряет кровать ",
"s3": "Она опять не прилетела ",
"s4": "Дневать"
},{
"s1": "Однажды лебедь раком щуку ",
"s2": "Снимал на видео Крылов ",
"s3": "И на ютьюбе неплохой был ",
"s4": "Улов"
},{
"s1": "Мамуль я кажется влюбилась ",
"s2": "Он покорил меня душой",
"s3": "К тому же у него реально ",
"s4": "Большой"
},{
"s1": "Был изгнан из уютной спальни",
"s2": "На жёсткий кухонный настил ",
"s3": "Нашёл хозяйские ботинки ",
"s4": "И мстил"
},{
"s1": "Внезапный дождь поставил точку ",
"s2": "Погасли свечи кончен бал ",
"s3": "Пишу в графе напротив лета ",
"s4": "Просрал"
}
]