misaka.nl sauce

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