Skip to content

Instantly share code, notes, and snippets.

@bryanbecker

bryanbecker/index.html

Created December 29, 2016 01:33
Show Gist options
  • Save bryanbecker/25f88597229e8898c616d629fceef7e5 to your computer and use it in GitHub Desktop.
Save bryanbecker/25f88597229e8898c616d629fceef7e5 to your computer and use it in GitHub Desktop.
Download ZIP
Lightdm Webkit 2 theme
Raw
index.html
<!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>
@bryanbecker
Copy link
Author

bryanbecker commented Dec 29, 2016 •
edited
Loading

UPDATE this theme is now a full repository with easier install at https://github.com/bryanbecker/glitchdm

Instructions to install:

  1. Make sure you are running lightdm (default on ubuntu)
  2. Install lightdm-webkit2-greeter and set it as your default greeter
  3. Install the musfealle theme. I like this theme because it's simple and fast. "A LightDM Webkit Greeter Theme that doesn't force you to use a mouse"
  4. Replace the index.html of the theme with this gist
  5. The css looks for two gifs files (WiredLogIn.gif and bgN5.gif)in img/sddm-lain-wired-theme/. You need to download them from this guy's repository and put them there yourself
  6. Make the new theme your lightdm-webkit2-greeter default (instructions in the musfealle repo)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment