-
1
<?php
-
2
$lines = explode("\n", trim(file_get_contents(__DIR__ . '/lines.txt')));
-
3
$line = $lines[array_rand($lines)];
-
4
?>
-
5
<!doctype html>
-
6
<html>
-
7
<head>
-
8
<meta charset="utf-8"/>
-
9
<title>Misaka.nl</title>
-
10
<style type="text/css">
-
11
* {
-
12
margin: 0;
-
13
padding: 0;
-
14
position: relative;
-
15
box-sizing: border-box;
-
16
}
-
17
html, body {
-
18
width: 100%;
-
19
height: 100%;
-
20
margin: 0;
-
21
}
-
22
body {
-
23
background: no-repeat url('/mikoto.png') center center #fff;
-
24
}
-
25
.cont {
-
26
width: 100%;
-
27
height: 100%;
-
28
display: flex;
-
29
justify-content: center;
-
30
align-items: center;
-
31
}
-
32
.balloon {
-
33
width: 152px;
-
34
background: #fff;
-
35
border: 5px solid #f88;
-
36
border-radius: 10px;
-
37
box-shadow: 4px 4px 0 -3px #a67, inset 4px 4px 0 -3px #a67;
-
38
transform: translate(-160px, -60px);
-
39
}
-
40
.balloon-text {
-
41
padding: 4px 6px;
-
42
font-family: Verdana, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
-
43
font-weight: 700;
-
44
color: #f88;
-
45
text-shadow: 1px 1px #a67;
-
46
}
-
47
.balloon-arrow {
-
48
border-left: 20px solid #f88;
-
49
border-top: 18px solid transparent;
-
50
border-right: 20px solid transparent;
-
51
filter: drop-shadow(2px 1px 0 #a67);
-
52
position: absolute;
-
53
bottom: 3px;
-
54
right: -44px;
-
55
}
-
56
</style>
-
57
</head>
-
58
<body>
-
59
<div class="cont">
-
60
<div class="balloon">
-
61
<div class="balloon-text" contenteditable><?=$line;?></div>
-
62
<div class="balloon-arrow"></div>
-
63
</div>
-
64
</div>
-
65
</body>
-
66
</html>
-
67
