interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

Move tasks to separate files and simplify

Browse source
This commit is contained in:
Stephan Hagedorn 2021-03-09 22:54:56 +01:00
parent dde26ec45e
commit 06ba111392
12 changed files with 1560 additions and 1030 deletions
Download patch file Download diff file Expand all files Collapse all files

167
source/screens/demo/card.njk
View file

@ -8,89 +8,102 @@
{% block title %}Karte{% endblock %}
{% block head %}
{{ super() }}
{{ super() }}
{% endblock %}
{% block body %}
<div class="card_bkg">
<div id="dither"></div>
<svg version="1.1" id="flag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1200" preserveAspectRatio="xMinYMax slice" alt="Background flag">
{# <defs>
<filter id="turb3">
<feColorMatrix type="saturate" values="1" /> </filter>
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
</filter>
<symbol id="triangle-5">
<rect y="0" fill="#273F8B" width="1920" height="1200"/>
</symbol>
</defs>
<g>
<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
</g> #}
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
</svg>
{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
</div>
<div class="card_box">
<div id="jsCardHover">
<p>Titel<br/>and description</p>
<h1>Prename Surname</h1>
<p><a class="card_address" href="">name@domain.tld</a><br/><a class="decent" href="http://">site.tld</a> &middot; <span class="decent">Street No., Postcode City</span></p>
</div>
</div>
<div class="card_bkg">
<div id="dither"></div>
<svg version="1.1" id="flag" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
{# <defs>
<filter id="turb3">
<feColorMatrix type="saturate" values="1" />
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/>
</filter>
<symbol id="triangle-5">
<rect y="0" fill="#273F8B" width="1920" height="1200"/>
</symbol>
</defs>
<g>
<use xlink:href="#triangle-5" style="filter: url(#turb3);" />
</g> #}
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
<polygon id="triangle-6" fill="#8E1F68" points="0,1200 1920,458.25 1920,1200 "/>
<polygon id="triangle-7" fill="#D30A51" points="0,1200 1920,522.75 1920,1200 "/>
<polygon id="triangle-8" fill="#F2AF13" points="0,1200 1920,741.75 1920,1200 "/>
<polygon id="triangle-9" fill="#FAD803" points="0,1200 1920,787.5 1920,1200 "/>
<polygon id="triangle-4" fill="#3C579A" points="0,1200 0,0 733.5,0 "/>
<polygon id="triangle-3" fill="#B7E0F0" points="0,1200 0,0 688.5,0 "/>
<polygon id="triangle-2" fill="#6BC7D9" points="0,1200 0,0 453,0 "/>
<polygon id="triangle-1" fill="#52BED1" points="0,1200 0,0 370.5,0 "/>
</svg>
{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
</div>
<div class="card_box">
<div id="jsCardHover">
<p>Titel<br/>and description</p>
<h1>Prename Surname</h1>
<p>
<a class="card_address" href="">name@domain.tld</a><br/>
<a class="decent" href="http://site.tld">site.tld</a>
&middot;
<span class="decent">Street No., Postcode City</span></p>
</div>
</div>
{% endblock %}
{% block script %}
{{ super() }}
<script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
{{ super() }}
{# <script src="{{ pageBase }}js/{{hippie.jsFile}}.min.js" type="text/javascript"></script> #}
<!-- build:js js/main.concat.min.js -->
<script src="{{ pageBase }}js/variables.js"></script>
<script src="{{ pageBase }}js/functions.js"></script>
<script src="{{ pageBase }}js/global.js"></script>
<!-- endbuild -->
<script>
$(document).ready(function () {
// composeMail('.card_address', 'neues', 'interaktionsweise', 'de', '', '');
var colors = new Array();
var position = 0;
var colors = new Array();
var position = 0;
for (var i = 1; i <= $("#flag").children().length; i++) {
colors.push($("#triangle-"+ i).attr("fill"));
}
for (var i = 1; i <= $("#flag").children().length; i++) {
colors.push($("#triangle-" + i).attr("fill"));
}
$('#jsCardHover').on({
mouseenter: function() {
// $('#flag').addClass('effect');
// $('#flag').css('opacity', 0);
$('#flag').stop().fadeOut(10000);
this.iid = setInterval(function() {
for (var i = 1; i <= colors.length; i++) {
position++;
if (position >= colors.length) {
position = 0;
}
$("#triangle-"+ i).attr("fill", colors[position]);
}
position++;
if (position >= colors.length) {
position = 0;
}
}, 600);
},
mouseleave: function() {
// $('#flag').removeClass('effect');
// $('#flag').css('opacity', 1);
$('#flag').stop().fadeIn(1000);
this.iid && clearInterval(this.iid);
},
click: function() {
$("#dither").toggle();
}
});
});
</script>
{% endblock %}
$('#jsCardHover').on({
mouseenter: function () {
// $('#flag').addClass('effect');
// $('#flag').css('opacity', 0);
$('#flag')
.stop()
.fadeOut(10000);
this.iid = setInterval(function () {
for (var i = 1; i <= colors.length; i++) {
position++;
if (position >= colors.length) {
position = 0;
}
$("#triangle-" + i).attr("fill", colors[position]);
}
position++;
if (position >= colors.length) {
position = 0;
}
}, 600);
},
mouseleave: function () {
// $('#flag').removeClass('effect');
// $('#flag').css('opacity', 1);
$('#flag')
.stop()
.fadeIn(1000);
this.iid && clearInterval(this.iid);
},
click: function () {
$("#dither").toggle();
}
});
});
</script>
{% endblock %}