Skip to content

Instantly share code, notes, and snippets.

@bryanbecker

bryanbecker/index.html

Created December 29, 2016 01:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bryanbecker/25f88597229e8898c616d629fceef7e5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bryanbecker/25f88597229e8898c616d629fceef7e5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bryanbecker created this gist Dec 29, 2016.
    175 changes: 175 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,175 @@
    <!doctype html>

    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Pedro Penna - @pedropenna">

    <title>Musfealle - Lightdm Webkit Greeter Theme</title>

    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/mock.js"></script>
    <script src="js/main.js"></script>

    <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />

    <style type="text/css">
    html,
    body {
    height: 100%;
    width: 100%;
    background-color: #000000;
    background: url("img/sddm-lain-wired-theme/bgN5.gif") repeat repeat;
    font-family: "Lato", "Open Sans", sans-serif;
    overflow: hidden;
    }

    #motherOfAllContainers {
    width:100%;
    height:100%;
    font-family: sans-serif;
    }

    img {
    padding-top: 50px;
    }

    div {
    padding: 3px;
    }

    #sessionDisplay {
    /* background-color: rgba(230, 230, 150, 0.6); */
    border-radius: 4px;
    /* color: #000000; */
    color: #d2738a;
    display:none;
    font-weight: bold;
    padding: 3px 16px 3px 16px;
    margin-top: 16px;
    margin: 17px 3px 0px 3px;
    }

    #inputBoxesContainer {
    font-size: 16px;
    width: 20%;
    }

    a:link {color:#d2738a;}
    a:visited {color:#d2738a;}
    a:hover {color:#c1b492;}
    a:active {color:#d2738a;}

    .glitch{
    position: relative;
    font-size: 44px;
    color: #c1b492;
    }
    .glitch::before,
    .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    .glitch::before {
    left: 1px;
    text-shadow: -1px 0 red;

    /* important: opaque background masks the original */
    background: black;

    clip: rect(24px, 450px, 36px, 0);

    animation: glitch-anim-1 1s infinite linear alternate-reverse;
    }
    .glitch::after {
    left: -1px;
    text-shadow: -1px 0 blue;

    /* important: opaque background masks the original */
    background: black;

    clip: rect(35px, 500px, 56px, 0);

    animation: glitch-anim-2 2s infinite linear alternate-reverse;
    }

    @keyframes glitch-anim-1 {
    0% {
    clip: rect(70px, 2000px, 76px, 0);
    }
    20% {
    clip: rect(29px, 2000px, 16px, 0);
    }
    40% {
    clip: rect(76px, 2000px, 3px, 0);
    }
    60% {
    clip: rect(42px, 2000px, 78px, 0);
    }
    80% {
    clip: rect(15px, 2000px, 13px, 0);
    }
    100% {
    clip: rect(53px, 2000px, 5px, 0);
    }
    }
    @keyframes glitch-anim-2 {
    0% {
    clip: rect(-10px, 2000px, 10px, 0);
    }
    20% {
    clip: rect(29px, 2000px, 16px, 0);
    }
    40% {
    clip: rect(76px, 2000px, 3px, 0);
    }
    60% {
    clip: rect(42px, 2000px, 78px, 0);
    }
    80% {
    clip: rect(15px, 2000px, 13px, 0);
    }
    100% {
    clip: rect(53px, 2000px, 5px, 0);
    }
    }


    </style>
    </head>
    <body>

    <div id="motherOfAllContainers" align="center">
    <img draggable="false" src="img/sddm-lain-wired-theme/WiredLogIn.gif" >
    <div class="glitch" data-text="W̡̟̤̳̘͈͓͌̊͂̅̀͠ͅh̷̛̘̦̥̻̞̍̔̉̓͗ͤ͊̚ò̢̫͕̞̝͑ͮ͒ ̝̪̼ͧ̏̓͗ͫ͛ͮ́͝i̻̰̼̯̳̜̓͒ͫ͛́̀ͅs̵̭͉̞̜̈́̀̾̐̂́͠ ̩͍̬̩̖̀ͪ̋͒͐t̖̘ͫ̕h̦̲͔ͧͭͨ̋̅̄͆̌͟e̖̘̣̩̯̲̬̝͔̎̓͠ ̜̦̥̟͈̉ͩ͗ͭ͊͘Ư̟͎̓͑̈̅͌̽͋͢s̐͆ͨ̍̽ͤ́ͫ͏̮͕̺̥̻̯͙̠e̵̢͉͓̥̰͉͔̼͎̓ͮ̌̃͐ͦr͙͙̳̼̣̆͌̓ͨ̅́ͫ̑̕?̘͍̪̺̻̤̣̈͑̇̌͑">
    <!-- <div class="glitch" data-text="Who is the User?"> -->
    <!-- Who is the User? -->
    W̡̟̤̳̘͈͓͌̊͂̅̀͠ͅh̷̛̘̦̥̻̞̍̔̉̓͗ͤ͊̚ò̢̫͕̞̝͑ͮ͒ ̝̪̼ͧ̏̓͗ͫ͛ͮ́͝i̻̰̼̯̳̜̓͒ͫ͛́̀ͅs̵̭͉̞̜̈́̀̾̐̂́͠ ̩͍̬̩̖̀ͪ̋͒͐t̖̘ͫ̕h̦̲͔ͧͭͨ̋̅̄͆̌͟e̖̘̣̩̯̲̬̝͔̎̓͠ ̜̦̥̟͈̉ͩ͗ͭ͊͘Ư̟͎̓͑̈̅͌̽͋͢s̐͆ͨ̍̽ͤ́ͫ͏̮͕̺̥̻̯͙̠e̵̢͉͓̥̰͉͔̼͎̓ͮ̌̃͐ͦr͙͙̳̼̣̆͌̓ͨ̅́ͫ̑̕?̘͍̪̺̻̤̣̈͑̇̌͑
    </div>


    <br/>

    <div id="inputBoxesContainer" style="display:none">
    <div>
    <font font color="#c1b492">Ｕｓｅｒ　ＩＤ：</font>
    <input type="text" name="username" id="username" class="form-control" size="6">
    </div>
    <div>
    <font font color="#c1b492">ＰａｓｓＷｏｒｄ：</font><br>
    <input type="password" name="password" id="password" class="form-control" size="16">
    </div>
    <div id="sessionDisplay">
    Session: <span id="sessionNameContainer" style="" ></span>
    </div>
    </div>
    <br><br><br><font font color="#c1b492", font size="1">Don't beleive her lies<font>

    </div>
    </body>
    </html>