slight updates

2025-02-24 16:46:32 -05:00
parent 9a2c1c3fca
commit 099bfceb7e
97 changed files with 13112 additions and 43 deletions
--- a/site/french-pub/CAone/asshole.png
+++ b/site/french-pub/CAone/asshole.png
--- a/site/french-pub/CAone/index.html
+++ b/site/french-pub/CAone/index.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+
+<html lang="en">
+    <!-- fancy scroll capture based on Not Art Gallery :D -->
+    <head>
+        <meta charset="UTF-8">
+        <title>Cultural Activity 1 | Tyler Clarke</title>
+        <link rel="stylesheet" href="main.css">
+    </head>
+    <body>
+        <div id="fourthpage" class="page">
+            <div>
+                <b>While this hasn't altered my studies much, being a French film, there was quite a bit of new vocabulary to learn (subtitles were helpful):</b><br><br><br>
+
+                <ol>
+                    <li>Mariages: Weddings. This is mentioned quite early.</li>
+                    <li>Massacre: Same meaning as in English. Again, c’est un film interessant.</li>
+                    <li>Communiquer: (to) communicate.</li>
+                    <li>Chapeau: Hat</li>
+                    <li>Cerises: Cherries</li>
+                    <li>Racistes: Racists. Yep. Interesting movie.</li>
+                    <li>Arbres: Trees.</li>
+                    <li>Voisin: Neighbor.</li>
+                    <li>Exposition cadavre: Cadaver exhibition</li>
+                    <li>Viande: Meat</li>
+                    <li>Carnivore: carnivorous</li>
+                    <li>Carrée: Square</li>
+                    <li>Rien: Nothing</li>
+                    <li>Monnaie: Money</li>
+                    <li>Que est-ce vous fait: What are you doing?</li>
+                </ol>
+            </div>
+        </div>
+        <div id="thirdpage" class="page">
+            <div><p>
+                Being set almost entirely in France, it presented an interesting (albeit quite exaggerated) image of Paris. Shown
+                occasionally were the infamous faire la bise, a hospital, various government officials, and some “typical citizens”
+                (particularly memorably, a very angry man whose entire part in the film was to yell “a**hole” in French). I was actually surprised at how close
+                an analogue French urban culture, as depicted, is to urban culture in America. It was, in a way, eye-opening: My default assumption about France was
+                largely, as I believe most people have experienced, shaped by American films. To actually watch something out of France demonstrated just how
+                wrong my default assumption was, and how similar the French really are to Americans. I would imagine that this is because urban areas tend to be
+                progressive, which means dropping a lot of traditions most people would expect in France, and especially since in major population centers like Paris
+                there is a heavy influx of people from other places, which leads to cultural pollution and the eventual eradication of tradition in tote.
+            </p>
+            <br>
+        <img src="poorpeople.png" /></div>
+        </div>
+        <div id="secondpage" class="page">
+            <div>
+                La Belle Verte is a film about extra-terrestrial vegan telepaths who travel to Earth. The goal of the movie seems to be largely
+                to point out hypocrisies and problems in modern human society (“For
+                instance, if you want something, you can’t get it without money.”, “Even to eat?”, “Especially!”). It was a very
+                well-made movie; while not as comedic as advertised, it contained very well-presented messages about society and human
+                cruelty.<br><br>
+                <img src="asshole.png" />
+                <br><br>
+                J’aime ce film. C’est interessant.
+            </div>
+        </div>
+        <div id="firstpage" class="page">
+            <div>
+                <b>My Activity:</b> My activity of choice was to watch a Francophone movie.<br>
+                <b>My Movie Choice:</b> I decided to watch a Coline Serreau film named “La Belle Verte”.
+                <br><br>
+                <img src="labelleverte.png" />
+            </div>
+        </div>
+        <div id="head" class="classic">
+            <div id="head-inner">
+                <h1>Tyler Clarke</h1>
+                <h2>Cultural Activity 1</h2>
+            </div>
+            <div id="scrollDown">Scroll Down To "You've Reached The End"</div>
+        </div>
+        <div id="final">
+            <div id="final-inner">
+                Word Count: <span id="wordcount"></span><br><br>
+                <i>Web design by Tyler Clarke. Images extracted from “La Belle Verte” by Tyler Clarke.<br>
+                Design not licensed. Use it as you like. I have no clue which copyrights, trademarks, and licenses apply to the images, but I extracted them from a legally obtained copy.<br>
+                Scripts by Tyler Clarke, with the help of unlicensed StackOverflow snippets (referenced in the code with comments).</i>
+                <div id="youfinished" style="display: none;">
+                    You've reached the end!
+                </div>
+            </div>
+        </div>
+        <script src="main.js"></script>
+        <script>
+            const scrolly_check = () => {
+                Array.from(document.getElementsByClassName("scrolly")).forEach((el) => {
+                    var rect = el.getBoundingClientRect();
+                    if (rect.bottom > 0 && rect.top < window.innerHeight) {
+                        el.classList.add("scrolly-in");
+                    }
+                    else {
+                        el.classList.remove("scrolly-in");
+                    }
+                });
+            };
+
+            window.addEventListener("wheel", scrolly_check);
+            window.addEventListener("scroll", scrolly_check);
+
+            scrolly_check();
+            document.getElementById("head").style.backgroundColor = "black";
+        </script>
+    </body>
+</html>
--- a/site/french-pub/CAone/labelleverte.png
+++ b/site/french-pub/CAone/labelleverte.png
--- a/site/french-pub/CAone/main.css
+++ b/site/french-pub/CAone/main.css
@@ -0,0 +1,178 @@
+@keyframes bounce {
+    0% {
+        margin-top: 0px;
+    }
+    25% {
+        margin-top: 100px;
+    }
+    50% {
+        margin-top: 0px;
+    }
+    75% {
+        margin-top: -100px;
+    }
+    100% {
+        margin-top: 0px;
+    }
+}
+
+@font-face {
+    font-family: "Cantarell var";
+    font-weight: 100 900;
+    font-display: swap;
+    font-style: normal;
+    font-named-instance: "Regular";
+    src: url("https://swaous.asuscomm.com/Cantarell-VF.otf") format("opentype");
+}
+
+* {
+    font-family: Cantarell;
+    margin: 0px;
+    padding: 0px;
+    text-align: center;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    overflow: hidden;
+}
+
+body{
+    overflow-y: hidden;
+}
+
+#head {
+    width: 100vw;
+    height: 100vh;
+    background-color: white;
+    transition: background-color 3s;
+    position: relative;
+}
+
+#head-inner {
+    position: absolute;
+    display: inline-block;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+}
+
+#scrollDown {
+    position: absolute;
+    top: 80%;
+    left: 50%;
+    transform: translate(-50%, -100%);
+    display: none;
+    color: green;
+    font-family: monospace;
+    font-weight: bold;
+    font-size: 1.5em;
+    animation-name: bounce;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+}
+
+#scrollDown.ready {
+    display: inline;
+}
+
+.page {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
+#secondpage {
+    background-color: black;
+    color: white;
+}
+
+#thirdpage {
+    background-color: black;
+}
+
+#thirdpage > div > p{
+    background-image: linear-gradient(to right, blue 33%, white 33%, white 66%, red 66%);
+    background-clip: text;
+    color: transparent;
+    font-weight: bold;
+    font-size: 1.5em;
+}
+
+#fourthpage > div > ol > li {
+    text-align: left;
+    margin-bottom: 1em;
+}
+
+ol {
+    height: 20vh;
+    overflow: hidden;
+}
+
+li {
+    margin-left: 5ch;
+    overflow: visible;
+}
+
+#firstpage {
+    background-color: white;
+}
+
+.page > div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: left;
+    max-width: 60vw;
+}
+
+b {
+    color: green;
+}
+
+#final {
+    height: 100vh;
+    overflow: hidden;
+}
+
+#final-inner {
+    position: fixed;
+    top: 50%;
+    width: 100vw;
+    padding-left: 25vw;
+    padding-right: 25vw;
+    box-sizing: border-box;
+    color: white;
+    font-weight: bold;
+    overflow: visible;
+}
+
+#youfinished {
+    position: absolute;
+    top: 250%;
+    left: 50%;
+    transform: translate(-50%, -100%);
+    color: green;
+    font-family: monospace;
+    font-weight: bold;
+    font-size: 1.5em;
+    animation-name: bounce;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+}
+
+img{
+    box-sizing: border-box;
+    padding-left: 20%;
+    padding-right: 20%;
+    max-width: 100%;
+    transition: padding 1s;
+}
+
+img:hover {
+    padding-left: 10%;
+    padding-right: 10%;
+}
--- a/site/french-pub/CAone/main.js
+++ b/site/french-pub/CAone/main.js
@@ -0,0 +1,129 @@
+/* Fun scroll capture stuff :D */
+var scrollPos = {
+    realX: 0,
+    realY: 0,
+    virtX: 0,
+    virtY: 0
+};
+
+const rScroll = () => {
+    window.scrollTo({
+        top: scrollPos.virtY,
+        left: scrollPos.virtX
+    });
+};
+
+function textNodesUnder(el){ // THANKS, STACKOVERFLOW
+  var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
+  while(n=walk.nextNode()) a.push(n);
+  return a;
+}
+
+const firstRoomSize = 3000;
+const secondRoomSize = 3000;
+
+const rooms = [
+    {
+        el: document.getElementById("head"),
+        size: 3000,
+        type: "opacity"
+    },
+    {
+        el: document.getElementById("firstpage"),
+        size: 3000,
+        type: "opacity"
+    },
+    {
+        el: document.getElementById("secondpage"),
+        size: 3000,
+        type: "opacity"
+    },
+    {
+        el: document.getElementById("thirdpage"),
+        size: 3000,
+        type: "opacity"
+    }
+];
+
+const doScrollTasks = () => {
+    var roomOffset = 0;
+    rooms.forEach(item => {
+        if (item.type == "opacity") {
+            var subtractor = 0;
+            if (scrollPos.realY - roomOffset > item.size / 2) {
+                subtractor = (scrollPos.realY - roomOffset) - item.size / 2;
+            }
+            var percent = (item.size - subtractor - (scrollPos.realY - roomOffset)) / item.size;
+            item.el.style.opacity = percent;
+            if ((item.size - subtractor - (scrollPos.realY - roomOffset)) / item.size < 0) {
+                item.el.style.visibility = "hidden";
+            }
+            else {
+                item.el.style.visibility = "";
+            }
+        }
+        roomOffset += item.size;
+    });
+    document.getElementsByTagName("ol")[0].scrollTo({
+        left: 0,
+        top: (scrollPos.realY - roomOffset) / 10
+    });
+    var baseline = (scrollPos.realY - roomOffset) / 10 - document.getElementsByTagName("ol")[0].scrollHeight;
+    scrollPos.virtY = baseline;
+    baseline -= window.innerHeight;
+    var proportion = ((window.innerWidth - baseline) / window.innerWidth);
+    if (proportion < 0) {
+        scrollPos.realY = roomOffset + (document.getElementsByTagName("ol")[0].scrollHeight + window.innerWidth + window.innerHeight) * 10;
+        document.getElementById("youfinished").style.display = "";
+    }
+    document.getElementById("final-inner").style.transform = "translate(" + 100 * proportion + "vw, -50%)";
+    document.getElementById("final").style.backgroundColor = "rgba(0, 0, 0, " + (baseline / window.innerWidth) + ")";
+    rScroll();
+};
+
+doScrollTasks(); // Initial scrolling reset and setup
+
+const scrollBy = (x, y) => {
+    scrollPos.realX += x;
+    scrollPos.realY += y;
+    if (scrollPos.realY < 0) {
+        scrollPos.realY = 0;
+    }
+    if (scrollPos.realX != 0) {
+        scrollPos.realX = 0;
+    }
+    doScrollTasks();
+}
+
+window.addEventListener("wheel", (event) => {
+    scrollBy(event.deltaX, event.deltaY);
+    event.preventDefault();
+    event.stopPropagation();
+}, { passive: false });
+
+document.getElementById("head").ontransitionend = () => {
+    document.getElementById("scrollDown").classList.add("ready");
+};
+
+window.addEventListener("keydown", (evt) => {
+    if (evt.key == "ArrowUp") {
+        scrollBy(0, -300);
+    }
+    else if (evt.key == "ArrowDown") {
+        scrollBy(0, 300);
+    }
+});
+
+const countUnder = (node) => {
+    var wc = 0;
+    textNodesUnder(node).forEach(item => {
+        item.textContent.split(" ").forEach(word => {
+            if (word != "") {
+                wc++;
+            }
+        });
+    });
+    return wc;
+};
+
+document.getElementById("wordcount").innerText = countUnder(document.documentElement) - countUnder(document.getElementById("final"));
--- a/site/french-pub/CAone/poorpeople.png
+++ b/site/french-pub/CAone/poorpeople.png
--- a/site/french-pub/restaurant/Freeware
+++ b/site/french-pub/restaurant/Freeware
@@ -0,0 +1,5 @@
+This font was found on the internet and did not come with a license. While we try to make sure that all the fonts on fontsquirrel.com are properly licensed for commercial use, there are many fonts that have either been abandoned by their authors or the authors distribute their fonts without an explicit license. 
+
+It is our opinion that if the unlicensed font is freely available for download from either the original source or from multiple free-font sites then we assume it to be safe to use the font commercially. This is no guarantee of such freedom, but there are so many unlicensed free fonts distributed by primary sources that the intentions must be read that the font is free to use how you like.
+
+We are not lawyers and don't pretend to be them on TV. Please report any errors/violations you know of. http://www.fontsquirrel.com/contact
--- a/site/french-pub/restaurant/UpperEastSide.ttf
+++ b/site/french-pub/restaurant/UpperEastSide.ttf
--- a/site/french-pub/restaurant/index.html
+++ b/site/french-pub/restaurant/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+
+
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Fren1001: Un Restaurant</title>
+        <link rel="stylesheet" href="main.css" />
+    </head>
+    <body>
+        <div id="title">
+            <h1>La Bonne Plate</h1>
+            <h2 id="below"><span class="dash"></span> Un Restaurant Français <span class="dash"></span></h2>
+            <a onclick="goTo('contact');">Contact</a> | <a onclick="goTo('menu')">Menu</a> | <a onclick="goTo('about')">Au sujet de La Bonne Plate</a>
+        </div>
+        <div id="about">
+            <h2>Au sujet de La Bonne Plate</h2>
+            <p>
+                <i>« Un boulette de pâte, un baguette! »</i>
+            </p>
+            <p>
+                La Bonne Plate est un grand restaurant dans Paris. Il a dix ans.
+            </p>
+            <p>
+                C'est un restaurant fusion - Franco-Chinois.
+            </p>
+        </div>
+        <div id="contact">
+            <h2>Contact</h2>
+            <p>
+                Notre numero de telephone est 04.94.20.52.72.<br>
+                <small><i>This is not a real telephone number. I doubt it will pick up if you call it, but some random Frenchman/woman will probably be quite peeved if it does.</i></small>
+            </p>
+        </div>
+        <div id="menu">
+            <h2>Menu</h2>
+            <h3 style="color: blue;"><span class="dash"></span> Les Boissons <span class="dash"></span></h3>
+            <div class="menu-grid">
+                <div style="background-image: url(https://images.immediate.co.uk/production/volatile/sites/4/2021/02/GettyImages-691675462-bad58dd-e1612798887823.jpg?quality=90&webp=true&resize=940,400);">
+                    <h3>Un Thé Vert</h3>
+                    <p>Notre thé vert est délicieux! Mais, fais attention, c'est très chaud.<br>3.0</p>
+                </div>
+                <div style="background-image: url(https://thumbs.dreamstime.com/b/cup-coffee-white-background-isolated-35737898.jpg);">
+                    <h3>Un Café</h3>
+                    <p>Prenez un café noir, ou au lait; glacé ou chaude! Nous avons tout.<br>2.5</p>
+                </div>
+                <div style="background-image: url(https://hips.hearstapps.com/thepioneerwoman/wp-content/uploads/2018/05/how-to-make-coconut-milk-01.jpg?resize=1200:*);">
+                    <h3>Un Lait de Coco</h3>
+                    <p>Une boisson Chinoise! Froid et crémeux, notre lait de coco est super.<br>3.5</p>
+                </div>
+                <div style="background-image: url('https://www.thespruceeats.com/thmb/bwlD7UoHqAbViYPyjAzLoCgwvmk=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/lemon-presse-58fffb7e3df78ca159f2f9d0.jpg');">
+                    <h3>Un Citron Pressé</h3>
+                    <p>La boisson Française traditionnelle! Les citrons trés bon, un peu de sucre, et l'eau.<br>2.0</p>
+                </div>
+            </div>
+            <h3 style="color: blue;"><span class="dash"></span> Les Choses à Manger <span class="dash"></span></h3>
+            <div class="menu-grid">
+                <div style="background-image: url(https://www.oliviascuisine.com/wp-content/uploads/2016/01/boeuf-bourguignon-2.jpg);">
+                    <h3>Boeuf Bourguignon</h3>
+                    <p>
+                        Boeuf succulent et pommes de terre croquant. Avec brocoli.<br>10.0
+                    </p>
+                </div>
+                <div style="background-image: url(https://www.oliviascuisine.com/wp-content/uploads/2016/07/Hash-Brown-Crust-Quiche-Lorraine-11.jpg)">
+                    <h3>Quiche Lorraine</h3>
+                    <p>
+                        Un pâtisserie populaire en Français! Croquant et chaude, c'est un classique.<br>6.5
+                    </p>
+                </div>
+                <div style="background-image: url(https://cdn3.i-scmp.com/sites/default/files/images/methode/2018/09/07/0f0da82a-b1b1-11e8-b224-884456d4cde1_972x_150833.jpg)">
+                    <h3>Éclair de cochon de lait</h3>
+                    <p>Cochon de lait sur un éclair. Un plat nouveau, très Franco-Chinois!<br>7.75</p>
+                    <br><small><i>This is a real Chinese-French fusion dish! Click <a href="https://www.scmp.com/magazines/style/travel-food/article/2163219/la-chine-innovative-french-chinese-restaurant-macaus">here</a> for the review site I found it on. I figured out the name with some Frenchery - it's an éclair of suckling pig, the word for "suckling pig" is cochon de lait (thanks, WR), add a "de".</i></small>
+                </div>
+                <div style="background-image: url(https://insanelygoodrecipes.com/wp-content/uploads/2020/11/Beef-Broccoli-and-Rice-683x1024.webp)">
+                    <h3>Poulet de « General Tso »</h3>
+                    <p>
+                        Poulet frit avec un sauce sucŕe et aigre. Prenez avec du brocoli ou les nouilles.<br>
+                        5.5
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div id="bottomthing">
+            Made by Tyler Clarke circa 2023 a.d.<br>
+            Designed and built solely by Tyler Clarke. Fonts from various sources.<br>
+            <br>
+            Images aggregated from Google, may be licensed.
+            <br><br>
+            Totally open source and not copyrighted. You don't have to give me credit if you use any parts of this page, or the
+            whole thing - I'd be grateful if you did, though.
+        </div>
+        <script>
+            function goTo(id){
+                var el = document.getElementById(id);
+                var box = el.getBoundingClientRect();
+                window.scrollBy({
+                    top: box.top - window.innerHeight/2 + box.height/2,
+                    left: box.left,
+                    behavior: "smooth"
+                });
+                el.style.backgroundColor = "yellow";
+                el.ontransitionend = () => {
+                    el.style.backgroundColor = "";
+                };
+            }
+        </script>
+    </body>
+</html>
--- a/site/french-pub/restaurant/main.css
+++ b/site/french-pub/restaurant/main.css
@@ -0,0 +1,129 @@
+@import url('https://fonts.googleapis.com/css2?family=Croissant+One&display=swap');
+
+@font-face {
+    font-family: "Upper East Side";
+    src: url(UpperEastSide.ttf);
+}
+
+h1, h2 {
+    font-family: "Upper East Side", sans-serif;
+}
+
+a, p {
+    font-family: Croissant One, Calibri, sans-serif;
+}
+
+a:hover{
+    opacity: 75%;
+}
+
+h1 {
+    font-size: 3em;
+}
+
+h2{
+    font-size: 2em;
+}
+
+h3 {
+    font-family: Croissant One, Calibri, sans-serif;
+    color: red;
+}
+
+div {
+    background-size: cover;
+    background-position: center;
+}
+
+#below {
+    color: green;
+}
+
+body {
+    margin: 0px;
+    padding: 0px;
+    background-color: rgb(127, 172, 255);
+    background-image: linear-gradient(135deg, blue 0%, blue 33%, white 33%, white 66%, red 66%, red);
+    background-position: 0px, 0px;
+    background-attachment: fixed;
+    display: grid;
+    grid-template-areas:
+    'a a a a a'
+    'b b b c c'
+    'd d d d d'
+    'f f f f f';
+}
+
+body > div {
+    padding: 50px;
+    border-radius: 50px;
+    min-width: 300px;
+    min-height: 300px;
+    /*background-color: white;*/
+    display: inline-block;
+    text-align: center;
+    box-sizing: border-box;
+    margin: 100px;
+    box-shadow: 30px 30px 30px 15px rgba(0, 0, 0, 0.8);
+    transition: box-shadow 0.5s, transform 0.5s, background-color 0.5s;
+}
+
+body > div:hover {
+    box-shadow: 15px 15px 10px 5px rgba(0, 0, 0, 0.8);
+    transform: translate(15px, 15px);
+}
+
+#title {
+    grid-area: a;
+}
+
+#about{
+    grid-area: b;
+}
+
+#contact{
+    grid-area: c;
+}
+
+#menu {
+    grid-area: d;
+}
+
+#bottomthing {
+    grid-area: f;
+    margin: 0px;
+    padding: 200px;
+    background-color: black;
+    color: white;
+    border: none;
+    border-radius: 0px;
+    transition: none;
+    transform: none !important;
+}
+
+span.dash{
+    display: inline-block;
+    width: 5ch;
+    background-color: black;
+    height: 1px;
+    margin-bottom: 8px;
+}
+
+small {
+    font-size: 0.5em;
+}
+
+.menu-grid {
+    display: grid;
+    grid-template-columns: 25% 25% 25% 25%;
+}
+
+.menu-grid > * {
+    margin: 10px;
+    padding: 10px;
+    box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, .5);
+}
+
+#bottomthing {
+    font-family: sans-serif;
+}