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

feat: Change placeholder and usage

Browse source 
- Move files
- Remove demo folder for art
- Remove unused files
- Add placeholders
- Move flag to placeholder
- Replace content with placeholders
This commit is contained in:
sthag 2025-06-21 12:11:03 +02:00
parent 57dffa3502
commit 52daf0ca51
9 changed files with 99 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

64
source/screens/demo/examples/card.njk
View file

@ -21,29 +21,7 @@ tags:
<!-- {{ page.fileSlug }}.page -->
<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>
{{ ph.flag('svg', '', 'flag', '') }}
{# <img id="dither" src="art/flag_dither.png" width="1920" height="1200" alt="Background flag dithered"/> #}
</div>
<div class="card_box">
@ -72,28 +50,34 @@ tags:
// console.log(colors);
document.getElementById('js_content').addEventListener('mouseenter', () => {
iId = setInterval(() => {
for (let i = 1; i <= colors.length; i++) {
document
.getElementById('js_content')
.addEventListener('mouseenter', () => {
iId = setInterval(() => {
for (let i = 1; i <= colors.length; i++) {
position++;
if (position >= colors.length) {
position = 0;
}
document
.getElementById("triangle-" + i)
.setAttribute("fill", colors[position]);
}
position++;
if (position >= colors.length) {
position = 0;
}
}, 600);
});
document.getElementById("triangle-" + i).setAttribute("fill", colors[position]);
}
position++;
if (position >= colors.length) {
position = 0;
}
}, 600);
});
document.getElementById('js_content').addEventListener('mouseleave', () => {
iId && clearInterval(iId);
});
document
.getElementById('js_content')
.addEventListener('mouseleave', () => {
iId && clearInterval(iId);
});
</script>
{% endblock %}