dennisgunia/jokes_webpage_2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added changing backgrounds

Browse Source
This commit is contained in:
Dennis Gunia
2020-09-22 12:13:48 +02:00
parent 63cd5f112f
commit 0ec9d9fb60
9 changed files with 2293 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
static/index.html
View File

@@ -9,8 +9,10 @@
<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%;">
@@ -47,6 +49,71 @@
</div>
</div>
</div>
<div class="bot-bar">
<a class="bot-bar-item cmd-add" data-toggle="tooltip" data-placement="right" title="Witze einsenden">
<svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-heart" xmlns="http://www.w3.org/2000/svg">
<path class="def" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path class="def" fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
<path class="fill" fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
</svg>
</a><br /><br />
<a class="bot-bar-item cmd-likes" data-toggle="tooltip" data-placement="right" title="Meine Favoriten">
<svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-heart" xmlns="http://www.w3.org/2000/svg">
<path class="fill" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
<path class="def" fill-rule="evenodd" 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.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
</a>
</div>
<div class="popup-bg-likes" id="popup-bg-likes">
<div class="popup-bg-likes-content">
<div class="liked-joke-header">
<h1 style="padding-right: 3rem;">Deine Favoriten</h1>
<a class="cmd-close-likes bot-bar-item" id="cmd-close-likes">
<svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-x-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path class="def" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path class="def" fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
<path class="fill" fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</a>
</div>
<div class="liked-joke-list">
<div id="favList" >
</div>
</div>
</div>
</div>
<div class="template" id="j-template">
<div class="liked-joke-content">
<h3>{{category}} - {{author}}</h3>
<p>{{text}}</p>
</div>
<div class="liked-joke-like">
<a style="padding-right: 1rem;" class="bot-bar-item follow" href="/?wid={{id}}" data-toggle="tooltip" data-placement="left" title="Favorit entfernen">
<svg width="2em" height="2em" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path class="def" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-11.5.5a.5.5 0 0 1 0-1h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5z"/>
<path class="fill" fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path class="fill" fill-rule="evenodd" d="M4 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5A.5.5 0 0 0 4 8z"/>
</svg>
</a>
<a class="bot-bar-item unlike" id="like-remove-{{id}}" data-toggle="tooltip" data-placement="left" title="Favorit entfernen">
<svg width="2em" height="2em" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path class="def" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
<path class="fill" fill-rule="evenodd" 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.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
</a>
</div>
</div>
<script src="/particles.js"></script>
<script src="/stats.js"></script>
<script src="/pConfig.js"></script>
<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>

0
static/pConfig.js Normal file
View File

1541
static/particles.js Normal file
View File

File diff suppressed because it is too large Load Diff

110
static/particles_1.json Normal file
View File

@@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 473.496058145316
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 4.7,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "bounce",
"bounce": false,
"attract": {
"enable": true,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

110
static/particles_2.json Normal file
View File

@@ -0,0 +1,110 @@
{
"particles": {
"number": {
"value": 6,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#1b1e34"
},
"shape": {
"type": "polygon",
"stroke": {
"width": 0,
"color": "#000"
},
"polygon": {
"nb_sides": 6
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.3,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 160,
"random": false,
"anim": {
"enable": true,
"speed": 10,
"size_min": 40,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 200,
"color": "#ffffff",
"opacity": 1,
"width": 2
},
"move": {
"enable": true,
"speed": 8,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "grab"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

116
static/particles_3.json Normal file
View File

@@ -0,0 +1,116 @@
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#b61924",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}

144
static/site.css
View File

@@ -229,4 +229,146 @@ body {
color: #007bff ;
}
}
}
.bot-bar{
position: absolute;
bottom: 5rem;
right: 1rem;
overflow-wrap: break-word;
}
.bot-bar-item {
fill: white;
-webkit-filter: drop-shadow( 0px 0px 2px rgba(0, 0, 0, .7));
filter: drop-shadow( 0px 0px 2px rgba(0, 0, 0, .7));
}
.bot-bar-item > svg > .fill {
fill: transparent;
transition: 0.2s linear;
cursor: pointer;
}
.bot-bar-item:hover > svg > .fill {
fill: white
}
.bot-bar-item > svg > .def {
fill: white;
transition: 0.2s linear;
cursor: pointer;
}
.bot-bar-item:hover > svg > .def {
fill: transparent
}
.popup-bg-likes-hide {
visibility: hidden;
}
.popup-bg-likes {
background-color:rgba(0,0,0,0.5);
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
z-index: 20;
display: flex;
justify-content: center ;
align-items: center;
transition: 1s linear;
}
.cmd-close-likes {
position: absolute;
top: 1rem;
right: 1rem;
}
.liked-joke{
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
padding: 1rem 1.25rem 0 1.25rem;
border-radius: .25rem;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.liked-joke-like {
padding-left: 1rem;
}
.unlike > svg {
fill: red;
color: red;
}
.template {
display: none;
}
.popup-bg-likes-content {
position: relative;
background-color:rgba(0,0,0,0.5);
color: black;
border: solid 1px white;
border-radius: .25rem;
padding: 1.25rem;
width: fit-content;
max-height: 90%;
max-width: 90%;
width: 70%;
display: flex;
flex-direction: column;
}
.liked-joke-header{
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
color: white;
}
.liked-joke-list {
min-height: 0px;
min-width: 0px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
overflow: auto;
}
.particles-js1{
width: 100%;
height: 100%;
background-color: #6678ff;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.particles-js2{
width: 100%;
height: 100%;
background-color: rgb(44, 46, 67);
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.particles-js3{
width: 100%;
height: 100%;
background-color: rgb(44, 46, 67);
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}

63
static/site.js
View File

@@ -127,27 +127,74 @@ $('.cmd-like').click(function() {
likelist = likelist.filter(el => el !== jokeClass.cur_joke.id);
}
console.log(likelist)
});
$('.cmd-likes').click(function() {
renderFavList();
$('.popup-bg-likes').fadeIn('fast');
});
$('.cmd-close-likes').click(function() {
$('.popup-bg-likes').fadeOut('fast');
});
async function renderFavList (){
let html = "";
for (let i = 0; i < likelist.length ; i++){
let joke = await jokeClass.get(likelist[i]);
console.log(joke)
html += renderFavJoke(joke);
}
$("#favList").html(html)
for (let i = 0; i < likelist.length ; i++){
$(`#like-remove-${likelist[i]}`).click(function() {
$(`#liked-joke-${likelist[i]}`).fadeOut('fast');
likelist = likelist.filter(el => el !== likelist[i]);
renderFavList();
});
}
}
function renderFavJoke(joke){
let template = $("#j-template").html();
template = template.replace("{{category}}",joke.category)
template = template.replace("{{author}}",joke.author)
template = template.replace("{{text}}",joke.text)
template = template.replace("{{id}}",joke.id)
const final = (`<div class="liked-joke" id="liked-joke-${joke.id}">${template}</div>`)
return final;
}
// ANiMATION
let anim_rows = 50;
$( document ).ready(function() {
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
$('.popup-bg-likes').hide()
// randomize theme
theme = Math.round(Math.random()*2);
$("#gradient-fill").addClass(`bg-fill-s${theme + 1}`);
theme = Math.round(Math.random()*5);
if (theme < 3){
$("#gradient-fill").addClass(`bg-fill-s${theme + 1}`);
anim_rows= (window.innerWidth / 68 ) + (window.innerHeight / 68);
generateBackground(anim_rows);
}else if(theme > 2){
$(".background").append("<div id='particles-js'></div>")
particlesJS.load('particles-js', `particles_${theme - 2}.json`, function() { });
$("#particles-js").addClass(`particles-js${theme - 2}`);
}
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){
@@ -155,6 +202,7 @@ $( document ).ready(function() {
}else{
getWitz();
}
$('#wasted').text(Math.floor((new Date - start) / 1000) + " Sekunden");
});
@@ -163,7 +211,10 @@ $( document ).ready(function() {
$(window).on('resize', function(){
var win = $(this); //this = window
anim_rows= (win.width() / 68) + (win.height() / 68);
generateBackground(anim_rows);
if (theme < 3){
generateBackground(anim_rows);
}
});
$(window).on("unload", function(e) {

149
static/stats.js Normal file
View File

@@ -0,0 +1,149 @@
/**
* @author mrdoob / http://mrdoob.com/
*/
var Stats = function () {
var startTime = Date.now(), prevTime = startTime;
var ms = 0, msMin = Infinity, msMax = 0;
var fps = 0, fpsMin = Infinity, fpsMax = 0;
var frames = 0, mode = 0;
var container = document.createElement( 'div' );
container.id = 'stats';
container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false );
container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
var fpsDiv = document.createElement( 'div' );
fpsDiv.id = 'fps';
fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002';
container.appendChild( fpsDiv );
var fpsText = document.createElement( 'div' );
fpsText.id = 'fpsText';
fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
fpsText.innerHTML = 'FPS';
fpsDiv.appendChild( fpsText );
var fpsGraph = document.createElement( 'div' );
fpsGraph.id = 'fpsGraph';
fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff';
fpsDiv.appendChild( fpsGraph );
while ( fpsGraph.children.length < 74 ) {
var bar = document.createElement( 'span' );
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113';
fpsGraph.appendChild( bar );
}
var msDiv = document.createElement( 'div' );
msDiv.id = 'ms';
msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none';
container.appendChild( msDiv );
var msText = document.createElement( 'div' );
msText.id = 'msText';
msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
msText.innerHTML = 'MS';
msDiv.appendChild( msText );
var msGraph = document.createElement( 'div' );
msGraph.id = 'msGraph';
msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
msDiv.appendChild( msGraph );
while ( msGraph.children.length < 74 ) {
var bar = document.createElement( 'span' );
bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
msGraph.appendChild( bar );
}
var setMode = function ( value ) {
mode = value;
switch ( mode ) {
case 0:
fpsDiv.style.display = 'block';
msDiv.style.display = 'none';
break;
case 1:
fpsDiv.style.display = 'none';
msDiv.style.display = 'block';
break;
}
};
var updateGraph = function ( dom, value ) {
var child = dom.appendChild( dom.firstChild );
child.style.height = value + 'px';
};
return {
REVISION: 12,
domElement: container,
setMode: setMode,
begin: function () {
startTime = Date.now();
},
end: function () {
var time = Date.now();
ms = time - startTime;
msMin = Math.min( msMin, ms );
msMax = Math.max( msMax, ms );
msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')';
updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) );
frames ++;
if ( time > prevTime + 1000 ) {
fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) );
fpsMin = Math.min( fpsMin, fps );
fpsMax = Math.max( fpsMax, fps );
fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')';
updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) );
prevTime = time;
frames = 0;
}
return time;
},
update: function () {
startTime = this.end();
}
}
};
if ( typeof module === 'object' ) {
module.exports = Stats;
}