SI21/week5/templates/mosaic2.html

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>OVERLAP</title>
        <meta name="description" content="WE HAVE A BAG FULL OF PLANETS, STARS, OUR FAVORITE MOMENTS, DARKEST FEARS, BEST INTENTIONS AND WORST FEELINGS.">
        <link rel="stylesheet" href="./static/style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    </head>
    <body>
        <div class="intro-outer">
            <div class="intro">
                <h1>Overlap</h1>
            </div>
            <div class="intro">
                <p>
                    We have a bag full of planets, stars, our favorite moments, darkest fears, best intentions and worst feelings. We contain them and sometimes they overlap each other. Sometimes we are happy and sad; sometimes we forget why we were even mad in the beginning. But we also share some of these moments or galaxies that reside in our bags with other souls. We remember the same moment through a different window. We remember that day as cold, whereas they remember it as warm. One by one, these moments create one snapshot of the reality. The reality we create collectively. We sometimes trust our memories and our memories always trust us. 
                </p>
                <p>
                    We overlap, we crawl through memory lane. We go silently through the gates of space and time, we exchange our sights with each other and for one spectacular moment, all the stars in our bags spill and we get to see through each others eyes. Our bag is now in the middle, its ready for you to discover and see the networks of our minds, make knots in the middle or intervene with what we call a collective memory of a few xpubbers.
                </p>
            </div>
        </div>
        <div class="theatre">
            {% for file in range (0,42) -%}
            {%- set filez = '%02d' % file -%}
            {%- set filename = lastfiles[file] -%}
            <a href="{{ url_for('zoomedimage', imgpath=filez|replace('static/img/', '')) }}">
            {%- if 'png' in filename or 'jpg' in filename or 'jpeg' in filename or 'gif' in filename -%}
                <img src="{{ filename }}">
            {%- endif -%}
            {%- if 'mp3' in filename or 'm4a' in filename or 'ogg' in filename -%}
                <div class="divaudio">
                <audio controls>
                <source src="{{ filename }}">
                </audio>
                </div>
            {%- endif -%}
            {%- if 'mp4' in filename or 'mkv' in filename or 'ogv' in filename -%}
                <video autoplay loop muted>
            <source src="{{ filename }}">
            </video>
            {%- endif -%}
            {%- if 'html' in filename -%}
                <iframe src="{{ filename }}" ></iframe>
            {%- endif -%}
            </a>
            {%- endfor %}
            <div class="abraxas"><h4>a</h4></div><div class="abraxas"><h4>b</h4></div><div class="abraxas"><h4>r</h4></div><div class="abraxas"><h4>a</h4></div><div class="abraxas"><h4>x</h4></div><div class="abraxas"><h4>a</h4></div><div class="abraxas"><h4>s</h4></div>
        </div>
        <div class="intro-outer">
            <div class="intro">
                <h1>*    *<br>*</h1>
            </div>
            <div class="intro">
                <p>
                    Overlap was produced in June 2023 as part of TTY, special issue 21 of the experimental publishing masters at piet zwart institute, rotterdam. For more see <a href="https://issue.xpub.nl/21" target="_blank">issue.xpub.nl/21</a>
                </p>
            </div>
        </div>
    </body>
    <script >
        $(document).ready(function() {
            $("iframe").each(function() {
                var iframe = $(this);
                var pos = iframe.position();
                var div = document.createElement("div");
                var s = div.style;
                s.position = "absolute";
                s.left = pos.left + "px";
                s.top = pos.top + "px";
                s.height = iframe.height() + "px";
                s.width = iframe.width() + "px";
                iframe.parent().append(div);
                $(div).data("src", iframe.attr("src")).click(function() {
                    window.location = $(this).data("src");
                });
            });
        });
    </script>
</html>
committing martinos updates 1 year ago			`<html>`
			`<head>`
azoth azoth azoth azoth azoth azoth azoth 1 year ago			`<meta name="viewport" content="width=device-width, initial-scale=1">`
			`<title>OVERLAP</title>`
			`<meta name="description" content="WE HAVE A BAG FULL OF PLANETS, STARS, OUR FAVORITE MOMENTS, DARKEST FEARS, BEST INTENTIONS AND WORST FEELINGS.">`
			`<link rel="stylesheet" href="./static/style.css">`
			`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>`
committing martinos updates 1 year ago			`</head>`
			`<body>`
azoth azoth azoth azoth azoth azoth azoth 1 year ago			`<div class="intro-outer">`
			`<div class="intro">`
			`<h1>Overlap</h1>`
			`</div>`
			`<div class="intro">`
			`<p>`
			We have a bag full of planets, stars, our favorite moments, darkest fears, best intentions and worst feelings. We contain them and sometimes they overlap each other. Sometimes we are happy and sad; sometimes we forget why we were even mad in the beginning. But we also share some of these moments or galaxies that reside in our bags with other souls. We remember the same moment through a different window. We remember that day as cold, whereas they remember it as warm. One by one, these moments create one snapshot of the reality. The reality we create collectively. We sometimes trust our memories and our memories always trust us.
			`</p>`
			`<p>`
			`We overlap, we crawl through memory lane. We go silently through the gates of space and time, we exchange our sights with each other and for one spectacular moment, all the stars in our bags spill and we get to see through each others eyes. Our bag is now in the middle, its ready for you to discover and see the networks of our minds, make knots in the middle or intervene with what we call a collective memory of a few xpubbers.`
			`</p>`
			`</div>`
			`</div>`
			`<div class="theatre">`
			`{% for file in range (0,42) -%}`
			`{%- set filez = '%02d' % file -%}`
			`{%- set filename = lastfiles[file] -%}`
			`<a href="{{ url_for('zoomedimage', imgpath=filez\|replace('static/img/', '')) }}">`
			`{%- if 'png' in filename or 'jpg' in filename or 'jpeg' in filename or 'gif' in filename -%}`
			`<img src="{{ filename }}">`
			`{%- endif -%}`
			`{%- if 'mp3' in filename or 'm4a' in filename or 'ogg' in filename -%}`
			`<div class="divaudio">`
			`<audio controls>`
			`<source src="{{ filename }}">`
			`</audio>`
			`</div>`
			`{%- endif -%}`
			`{%- if 'mp4' in filename or 'mkv' in filename or 'ogv' in filename -%}`
			`<video autoplay loop muted>`
committing martinos updates 1 year ago			`<source src="{{ filename }}">`
azoth azoth azoth azoth azoth azoth azoth 1 year ago			`</video>`
			`{%- endif -%}`
			`{%- if 'html' in filename -%}`
			`<iframe src="{{ filename }}" ></iframe>`
			`{%- endif -%}`
			`</a>`
			`{%- endfor %}`
			`<div class="abraxas"><h4>a</h4></div><div class="abraxas"><h4>b</h4></div><div class="abraxas"><h4>r</h4></div><div class="abraxas"><h4>a</h4></div><div class="abraxas"><h4>x</h4></div><div class="abraxas"><h4>a</h4></div><div class="abraxas"><h4>s</h4></div>`
			`</div>`
			`<div class="intro-outer">`
			`<div class="intro">`
			`<h1>* <br></h1>`
			`</div>`
			`<div class="intro">`
			`<p>`
			`Overlap was produced in June 2023 as part of TTY, special issue 21 of the experimental publishing masters at piet zwart institute, rotterdam. For more see <a href="https://issue.xpub.nl/21" target="_blank">issue.xpub.nl/21</a>`
			`</p>`
committing martinos updates 1 year ago			`</div>`
azoth azoth azoth azoth azoth azoth azoth 1 year ago			`</div>`
committing martinos updates 1 year ago			`</body>`
azoth azoth azoth azoth azoth azoth azoth 1 year ago			`<script >`
			`$(document).ready(function() {`
			`$("iframe").each(function() {`
			`var iframe = $(this);`
			`var pos = iframe.position();`
			`var div = document.createElement("div");`
			`var s = div.style;`
			`s.position = "absolute";`
			`s.left = pos.left + "px";`
			`s.top = pos.top + "px";`
			`s.height = iframe.height() + "px";`
			`s.width = iframe.width() + "px";`
			`iframe.parent().append(div);`
			`$(div).data("src", iframe.attr("src")).click(function() {`
			`window.location = $(this).data("src");`
			`});`
			`});`
			`});`
			`</script>`
committing martinos updates 1 year ago			`</html>`