nemunaire/youp0m
1
0
Fork 0
Code Issues Pull requests Releases Packages 1 Activity

First frontend revision

Browse source
This commit is contained in:
nemunaire 2016-06-26 17:54:08 +02:00
commit 192548e38b
5 changed files with 7755 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

5
main.go
View file

@ -44,7 +44,10 @@ func main() {
authFunc := func (r *http.Request) (*User){ return Authenticate(*htpasswd, r) }
mux := http.NewServeMux()
mux.Handle("/", http.FileServer(http.Dir("./static/")))
mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { http.ServeFile(w, r, "./static/index.html") })
mux.Handle("/css/", http.FileServer(http.Dir("./static")))
mux.Handle("/js/", http.FileServer(http.Dir("./static")))
mux.Handle("/api/", http.StripPrefix("/api", ApiHandler(authFunc)))
mux.Handle("/images/", http.StripPrefix("/images", ImagesHandler(

47
static/css/style.css Normal file
View file

@ -0,0 +1,47 @@
body {
background: #181818;
color: #ffffff;
font-familly: sans-serif;
margin: 0;
padding: 0;
width: 100%;
}
h1,h2 {
text-align: center;
}
figure.big {
display: table-cell;
height: 100vh;
width: 100vw;
text-align: center;
vertical-align: middle;
}
.big img {
max-height: calc(100vh - 5px);
max-width: calc(100vw - 5px);
}
a {
outline: none;
}
img {
box-shadow: 0px 0px 10px #9AB;
transition: box-shadow 1s ease-out;
}
img:hover {
box-shadow: 0px 0px 20px #FED;
}
.big figcaption {
background: #656565;
color: #FFF;
font-weight: bold;
margin: -100px auto;
opacity: 0.65;
padding: 10px;
position: relative;
}

23
static/index.html
View file

@ -1 +1,22 @@
<h1>Welcome on YouP0m!</h1>
<!DOCTYPE html>
<html>
<head>
<title>YouP0m</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" media="all" href="/css/style.css">
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/youp0m.js"></script>
</head>
<body>
<h1>Welcome on YouP0m!</h1>
<noscript>
<p>
You need a JavaScript capable browser to use this website.<br>
Please enable-it or switch to a JavaScript capable browser.
</p>
</noscript>
<script type="text/javascript">
document.write("<h2>We are loading a cute picture just for you, please wait&hellip;</h2>");
</script>
</body>
</html>

7588
static/js/prototype.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

94
static/js/youp0m.js Normal file
View file

@ -0,0 +1,94 @@
var picts = null;
var api_url = "/api/images";
var img_url = "/images/";
function get_picts(then, then_value) {
new Ajax.Request(api_url, {
method: 'get',
onSuccess: function(transport) {
picts = transport.responseText.evalJSON();
if (then) then(then_value);
},
});
}
function show_picture(id) {
if (!picts) {
get_picts(show_picture, id);
return;
}
if (id == null || id == "")
id = picts[Math.floor(Math.random() * picts.length)].name;
var i = parseInt(id);
if (!isNaN(i) && i < picts.length) {
display_picture(picts[i], (picts.length+i-1)%picts.length);
} else {
var found = false;
picts.forEach(function (pict, index) {
if (pict.name == id)
{
found = true;
display_picture(pict, picts[(picts.length+index-1)%picts.length].name);
}
});
if (!found) {
get_picture(id);
}
}
}
function get_picture(id) {
if (id == null) id = "last";
new Ajax.Request(api_url + "/" + id, {
method: 'get',
onSuccess: function(transport) {
var response = transport.responseText.evalJSON();
display_picture(response);
},
onFailure: function(transport) {
var response = transport.responseText.evalJSON();
display_error(response["errmsg"]);
}
});
}
function display_picture(pict, next) {
while (document.body.hasChildNodes()) document.body.removeChild(document.body.lastChild);
var figure = document.createElement("figure");
figure.className = "big";
var img = document.createElement("img");
img.src = img_url + pict.name;
img.alt = pict.name;
if (next != null) {
var link = document.createElement("a");
link.onclick = function(e) {
window.history.pushState(null, "YouP0m", link.href);
sync();
return false;
};
link.href = "/" + next;
link.appendChild(img);
figure.appendChild(link);
} else {
figure.appendChild(img);
}
document.body.appendChild(figure);
}
function display_error(msg) {
$$("body")[0].innerHTML = '<h1>An error occurs</h1><h2>' + msg + '</h2>';
}
function sync() {
show_picture(window.location.pathname.slice(1));
}
window.onpopstate = sync;
document.onreadystatechange = function() {
if (document.readyState == "complete")
sync();
}