init
This commit is contained in:
BIN
static/go-next-8.png
Normal file
BIN
static/go-next-8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
59
static/index.html
Normal file
59
static/index.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="site.css" >
|
||||
<link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="background">
|
||||
<div id="bg-content"></div>
|
||||
</div>
|
||||
<div class="header-bar">
|
||||
<div class="row" style="width:100%;">
|
||||
<div class="col">flachwitze.dennisgunia.de</div>
|
||||
<div class="col text-right">Time Wasted <p id="wasted"></p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="score-bar">
|
||||
<div id="score-content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="gradient-fill" id="gradient-fill"></div>
|
||||
<div class="vertical-center">
|
||||
<div class="container container-card">
|
||||
<div class="card" style="width: 100%" id="joke-card">
|
||||
<div class="card-body">
|
||||
<div id=content>
|
||||
<h5 class="card-title" id="joke-title">Card title</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted" id="joke-source">Card subtitle</h6>
|
||||
<p class="card-text" id="joke-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
<br />
|
||||
<a href="#" class="card-link cmd-like">
|
||||
<svg width="1em" height="1em" class="heart" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z"/>
|
||||
<path stroke-linejoin="round" stroke="currentColor" fill="none" stroke-width="2" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="#" class="card-link cmd-more">Mehr Davon!</a>
|
||||
<a href="#" class="card-link cmd-next">Einen anderen Witz bitte ...</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.js" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js" crossorigin="anonymous"></script>
|
||||
<script src="site.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
232
static/site.css
Normal file
232
static/site.css
Normal file
@@ -0,0 +1,232 @@
|
||||
body {
|
||||
background-color: #b0b0b0;
|
||||
}
|
||||
|
||||
.vertical-center {
|
||||
z-index:-1;
|
||||
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
|
||||
min-height: 100vh; /* These two lines are counted as one :-) */
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/*background-color: rgba(0, 0, 0,0.5);*/
|
||||
}
|
||||
|
||||
.gradient-fill {
|
||||
opacity: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bg-fill-s1 {
|
||||
background: rgb(2,0,36);
|
||||
background: linear-gradient(30deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 33%, rgba(0,212,255,1) 100%);;
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.bg-fill-s2 {
|
||||
background: rgb(131,58,180);
|
||||
background: linear-gradient(127deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.bg-fill-s3 {
|
||||
background: rgb(34,193,195);
|
||||
background: linear-gradient(320deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
.background {
|
||||
z-index:0;
|
||||
font-family: 'Bowlby One SC', cursive;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.header-bar {
|
||||
display: flex;
|
||||
position : absolute;
|
||||
z-index:20;
|
||||
font-family: 'Bowlby One SC', cursive;
|
||||
top: 0px;
|
||||
width:100%;
|
||||
/*background-color: rgba(0, 0, 0,0.5);*/
|
||||
color: rgb(255,255,255);
|
||||
padding:1rem;
|
||||
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0, 0, 0,0));
|
||||
}
|
||||
|
||||
.score-bar {
|
||||
display: flex;
|
||||
position : absolute;
|
||||
z-index:19;
|
||||
font-family: 'Bowlby One SC', cursive;
|
||||
bottom: 0px;
|
||||
width:100%;
|
||||
/*background-color: rgba(0, 0, 0,0.5);*/
|
||||
color: rgb(255,255,255);
|
||||
padding:1rem;
|
||||
background-image: linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0,0.5));
|
||||
}
|
||||
|
||||
#bg-content {
|
||||
|
||||
position : absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
|
||||
-moz-transform: translate(-50%, -50%) rotate(-45deg);
|
||||
-ms-transform: translate(-50%, -50%) rotate(-45deg);
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
|
||||
position: absolute;
|
||||
transform-origin: 50% 50%;
|
||||
|
||||
}
|
||||
|
||||
.scr {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.single-line {
|
||||
|
||||
background: url("go-next-8.png") repeat-x;
|
||||
white-space: nowrap;
|
||||
overflow:hidden;
|
||||
color:rgb(153, 136, 136);
|
||||
padding-bottom:48px;
|
||||
width: 5000px;
|
||||
height: 32px;
|
||||
|
||||
|
||||
|
||||
background-size: auto;
|
||||
}
|
||||
|
||||
|
||||
@keyframes slide {
|
||||
from {
|
||||
background-position-x: 0;
|
||||
}
|
||||
to {
|
||||
background-position-x: -653px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide_out {
|
||||
from {
|
||||
position-x: 0;
|
||||
}
|
||||
to {
|
||||
position-x: -100%;
|
||||
}
|
||||
}
|
||||
@keyframes slide_in {
|
||||
from {
|
||||
position-x: 100%;
|
||||
}
|
||||
to {
|
||||
position-x: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.heart > path{
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
|
||||
.heart-en > svg > path {
|
||||
animation: heartClickEn 0.3s linear;
|
||||
color: red;
|
||||
fill: lightcoral;
|
||||
}
|
||||
.heart-en > svg {
|
||||
animation: heartPopIn 0.3s linear;
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
@keyframes dash {
|
||||
to {
|
||||
stroke-dashoffset: 200;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heartClickEn {
|
||||
0% {
|
||||
color: #007bff ;
|
||||
|
||||
}
|
||||
50% {
|
||||
fill: transparent;
|
||||
|
||||
}
|
||||
100% {
|
||||
color: red ;
|
||||
fill: lightcoral;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heartPopIn {
|
||||
0% {
|
||||
transform: scale(1.0);
|
||||
|
||||
}
|
||||
50% {
|
||||
transform: scale(2);
|
||||
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heartPopOut {
|
||||
0% {
|
||||
transform: scale(1.0);
|
||||
|
||||
}
|
||||
50% {
|
||||
transform: scale(2);
|
||||
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
|
||||
.heart-da > svg > path {
|
||||
animation: heartClickDa 0.3s linear;
|
||||
fill: transparent;
|
||||
}
|
||||
.heart-da > svg {
|
||||
animation: heartPopOut 0.3s linear;
|
||||
color: 007bff;
|
||||
}
|
||||
|
||||
@keyframes heartClickDa {
|
||||
0% {
|
||||
color: red ;
|
||||
fill: lightcoral;
|
||||
|
||||
}
|
||||
50% {
|
||||
fill: transparent;
|
||||
|
||||
}
|
||||
100% {
|
||||
color: #007bff ;
|
||||
|
||||
}
|
||||
}
|
||||
214
static/site.js
Normal file
214
static/site.js
Normal file
@@ -0,0 +1,214 @@
|
||||
$.urlParam = function(name){
|
||||
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
|
||||
if (results==null) {
|
||||
return null;
|
||||
}
|
||||
return decodeURI(results[1]) || 0;
|
||||
}
|
||||
|
||||
theme = 0;
|
||||
humor = [];
|
||||
liked = false;
|
||||
likelist = [];
|
||||
function modHumor (catId, catDef, amount = 0) {
|
||||
console.log(catId, catDef, amount)
|
||||
let cf = humor.filter( el => el.catId === catId); // category found
|
||||
if (cf.length == 1) {
|
||||
cf[0].amount += amount;
|
||||
}else{
|
||||
humor.push({
|
||||
catId: catId,
|
||||
catDef: catDef,
|
||||
amount: amount
|
||||
})
|
||||
}
|
||||
}
|
||||
function printHumor(){
|
||||
$("#score-content").hide("fast",function(){
|
||||
let htmlContent = "";
|
||||
for (let i = 0 ; i < humor.length; i++){
|
||||
|
||||
htmlContent += "<button type=\"button\" class=\"btn scr btn-primary\"> "+humor[i].catDef+" <span class=\"badge badge-light\">"+humor[i].amount+"</span></button>";
|
||||
}
|
||||
$("#score-content").html(htmlContent);
|
||||
$("#score-content").show("fast");
|
||||
});
|
||||
}
|
||||
|
||||
let jokeClass = {
|
||||
cur_joke: {},
|
||||
get: (id) => {
|
||||
return new Promise((resolve,reject) => {
|
||||
$.getJSON(`/joke/${id}`).done(function ( data ) {
|
||||
resolve(data.data)
|
||||
}).fail(function ( err ) {
|
||||
reject(err);
|
||||
})
|
||||
})
|
||||
},
|
||||
getRnd: () => {
|
||||
return new Promise((resolve,reject) => {
|
||||
$.getJSON(`/jokes/getRand/`).done(function ( data ) {
|
||||
resolve(data.data)
|
||||
}).fail(function ( err ) {
|
||||
reject(err);
|
||||
})
|
||||
})
|
||||
},
|
||||
up: (id) => {
|
||||
return new Promise((resolve,reject) => {
|
||||
$.getJSON(`/joke/${id}/upvote`).done(function ( data ) {
|
||||
resolve(data.data)
|
||||
}).fail(function ( err ) {
|
||||
reject(err);
|
||||
})
|
||||
})
|
||||
},
|
||||
down: (id) => {
|
||||
return new Promise((resolve,reject) => {
|
||||
$.getJSON(`/joke/${id}/downvote`).done(function ( data ) {
|
||||
resolve(data.data)
|
||||
}).fail(function ( err ) {
|
||||
reject(err);
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
function setLikeButton(state){
|
||||
console.log(state)
|
||||
if (state){
|
||||
$('.cmd-like').removeClass('heart-da').addClass('heart-en');
|
||||
}else{
|
||||
$('.cmd-like').removeClass('heart-en').addClass('heart-da');
|
||||
}
|
||||
}
|
||||
|
||||
async function getWitz(action = 0,id = -1){
|
||||
switch(action){
|
||||
case 0:
|
||||
jokeClass.cur_joke = await jokeClass.getRnd(); break;
|
||||
case 1:
|
||||
jokeClass.cur_joke = await jokeClass.up(id); break;
|
||||
case 2:
|
||||
jokeClass.cur_joke = await jokeClass.down(id); break;
|
||||
case 3:
|
||||
jokeClass.cur_joke = await jokeClass.get(id); break;
|
||||
}
|
||||
liked = (likelist.includes(jokeClass.cur_joke.id))
|
||||
setLikeButton(liked);
|
||||
$("#content").hide("fast", function () {
|
||||
$("#joke-title").text(jokeClass.cur_joke.category);
|
||||
$("#joke-source").text(jokeClass.cur_joke.author);
|
||||
$("#joke-text").html(jokeClass.cur_joke.text);
|
||||
$("#content").show("fast");
|
||||
});
|
||||
}
|
||||
|
||||
$('.cmd-next').click(function() {
|
||||
modHumor(jokeClass.cur_joke.categoryId,jokeClass.cur_joke.category,-50);
|
||||
getWitz(2,jokeClass.cur_joke.id);
|
||||
printHumor();
|
||||
|
||||
});
|
||||
|
||||
$('.cmd-more').click(function() {
|
||||
modHumor(jokeClass.cur_joke.categoryId,jokeClass.cur_joke.category,50);
|
||||
getWitz(1,jokeClass.cur_joke.id);
|
||||
printHumor();
|
||||
});
|
||||
|
||||
$('.cmd-like').click(function() {
|
||||
liked = !liked;
|
||||
setLikeButton(liked);
|
||||
if (liked && !likelist.includes(jokeClass.cur_joke.id)){
|
||||
likelist.push(jokeClass.cur_joke.id);
|
||||
}else{
|
||||
likelist = likelist.filter(el => el !== jokeClass.cur_joke.id);
|
||||
}
|
||||
console.log(likelist)
|
||||
});
|
||||
|
||||
|
||||
|
||||
// ANiMATION
|
||||
|
||||
let anim_rows = 50;
|
||||
$( document ).ready(function() {
|
||||
// randomize theme
|
||||
theme = Math.round(Math.random()*2);
|
||||
$("#gradient-fill").addClass(`bg-fill-s${theme + 1}`);
|
||||
|
||||
anim_rows= (window.innerWidth / 68 ) + (window.innerHeight / 68);
|
||||
generateBackground(anim_rows);
|
||||
try {
|
||||
const tmp = JSON.parse($.cookie("score"));
|
||||
humor = tmp.humor;
|
||||
likelist = tmp.likes;
|
||||
}catch{ }
|
||||
printHumor();
|
||||
|
||||
const reqJoke = $.urlParam('wid');
|
||||
console.log(reqJoke)
|
||||
if (reqJoke){
|
||||
getWitz(3,reqJoke);
|
||||
}else{
|
||||
getWitz();
|
||||
}
|
||||
$('#wasted').text(Math.floor((new Date - start) / 1000) + " Sekunden");
|
||||
});
|
||||
|
||||
|
||||
|
||||
$(window).on('resize', function(){
|
||||
var win = $(this); //this = window
|
||||
anim_rows= (win.width() / 68) + (win.height() / 68);
|
||||
generateBackground(anim_rows);
|
||||
});
|
||||
|
||||
$(window).on("unload", function(e) {
|
||||
$.cookie("score", JSON.stringify({
|
||||
humor: humor,
|
||||
likes: likelist
|
||||
}));
|
||||
});
|
||||
|
||||
const start = new Date;
|
||||
|
||||
setInterval(function() {
|
||||
$('#wasted').text(Math.floor((new Date - start) / 1000) + " Sekunden");
|
||||
}, 1000);
|
||||
|
||||
function generateBackground(rows){
|
||||
|
||||
let fullhmtl = ""
|
||||
for (let i = 0; i < rows;i++){
|
||||
const speed = Math.floor(Math.random() * 20 ) +20
|
||||
const css = "animation: " + speed + "s linear infinite slide;"
|
||||
fullhmtl += "<div class='single-line' style='" + css + "'></div>"
|
||||
}
|
||||
|
||||
$("#bg-content").html(fullhmtl);
|
||||
|
||||
}
|
||||
|
||||
function calculateMapping(){
|
||||
let min = 1000000000;
|
||||
let max = -1000000000;
|
||||
|
||||
for (let i = 0 ; i < humor.length; i++){
|
||||
if(humor[i].scr < min){
|
||||
min = humor[i].scr
|
||||
}
|
||||
}
|
||||
|
||||
const offset = (min * -1);
|
||||
let sum = 0;
|
||||
for (let i = 0 ; i < humor.length; i++){
|
||||
sum += (humor[i].scr + offset);
|
||||
}
|
||||
for (let i = 0 ; i < humor.length; i++){
|
||||
const percentage = ((humor[i].scr + offset) / sum);
|
||||
console.log(percentage);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user