From ad0b317f652f189251199a0589d9ce67878e6fe1 Mon Sep 17 00:00:00 2001
From: kami <ookamikun@ookamikun.tv>
Date: Fri, 12 Jul 2024 16:29:14 +0000
Subject: [PATCH] initial commit

---
 footer_cote.html | 355 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 355 insertions(+)
 create mode 100644 footer_cote.html

diff --git a/footer_cote.html b/footer_cote.html
new file mode 100644
index 0000000..fd49794
--- /dev/null
+++ b/footer_cote.html
@@ -0,0 +1,355 @@
+<div class="twitch-icon" onclick="toggleTwitchWidget()">
+    <img src="https://cdn.iconscout.com/icon/free/png-512/free-twitch-11-461838.png?f=webp&w=256" alt="Twitch Icon">
+</div>
+<div id="twitch-widget" class="twitch-widget">
+    <div class="widget-content">
+        <iframe id="twitch-stream" 
+            src="about:blank"
+            width="350" height="200" 
+            allowtransparency="true" frameborder="0" 
+            sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts">
+        </iframe>
+        <iframe id="twitch-chat"
+            src="about:blank"
+            width="350" height="100%" 
+            allowtransparency="true" frameborder="0" 
+            sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts">
+        </iframe>
+    </div>
+    <div class="widget-footer" onclick="toggleTwitchWidget()">
+        <span class="close-button">✖</span>
+        <span class="close-text">Close panel</span>
+    </div>
+</div>
+<div class="discord-icon" onclick="toggleDiscordWidget()">
+    <img src="https://cdn.iconscout.com/icon/free/png-256/discord-2752210-2285027.png" alt="Discord Icon">
+</div>
+<div id="discord-widget" class="discord-widget">
+    <div class="widget-content">
+        <iframe 
+            src="https://discord.com/widget?id=896713616089309184&theme=dark" 
+            width="350" height="100%" 
+            allowtransparency="true" frameborder="0" 
+            sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts">
+        </iframe>
+    </div>
+    <div class="widget-footer" onclick="toggleDiscordWidget()">
+        <span class="close-button">✖</span>
+        <span class="close-text">Close panel</span>
+    </div>
+</div>
+
+<style>
+    .twitch-icon, .discord-icon {
+        position: fixed;
+        width: 50px;
+        height: 50px;
+        cursor: pointer;
+        z-index: 1000;
+        border-radius: 10px; /* Added border radius for both icons */
+    }
+    .twitch-icon {
+        bottom: 80px; /* Positioned above Discord icon */
+        right: 20px;
+    }
+    .discord-icon {
+        bottom: 20px;
+        right: 20px;
+    }
+    .twitch-icon img, .discord-icon img {
+        width: 100%;
+        height: 100%;
+        border-radius: 10px; /* Ensure the border radius is applied to the images as well */
+    }
+    .twitch-widget, .discord-widget {
+        position: fixed;
+        top: 0;
+        right: -350px; /* Default to slightly revealed */
+        width: 350px;
+        height: 100%;
+        background: #2c2f33;
+        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
+        z-index: 1001; /* Ensure panels display over the icons */
+        transition: right 0.3s ease-in-out;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+    .widget-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
+    .twitch-widget .widget-content iframe, .discord-widget .widget-content iframe {
+        display: block;
+        width: 100%;
+        flex: 1;
+    }
+    .twitch-widget .widget-content iframe:first-child {
+        height: 200px; /* Fixed height for the stream */
+        flex: none;
+    }
+    .widget-footer {
+        background: #23272a;
+        color: white;
+        padding: 10px;
+        text-align: center;
+        font-size: 20px;
+        cursor: pointer;
+        position: relative;
+    }
+    .close-button {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    .close-text {
+        display: block;
+        text-align: center;
+    }
+
+    #twitch-chat {
+        background-color: #212529; /* Slightly darker shade */
+    }
+
+    @keyframes jiggle {
+        0%, 100% {
+            transform: rotate(0deg);
+        }
+        12.5% {
+            transform: rotate(5deg);
+        }
+        25% {
+            transform: rotate(-5deg);
+        }
+        37.5% {
+            transform: rotate(5deg);
+        }
+        50% {
+            transform: rotate(-5deg);
+        }
+        62.5% {
+            transform: rotate(5deg);
+        }
+        75% {
+            transform: rotate(-5deg);
+        }
+        87.5% {
+            transform: rotate(5deg);
+        }
+    }
+
+    .jiggle {
+        animation: jiggle 1s ease-in-out;
+    }
+
+    .twitch-icon:hover + .twitch-widget,
+    .twitch-widget:hover,
+    .discord-icon:hover + .discord-widget,
+    .discord-widget:hover {
+        right: -320px; /* Reveal 30px */
+    }
+</style>
+
+<!--
+Made by OokamiKunTV, and is freely shared to be modified/improved.
+Ensures various promotion details on a FourthWall store are encapsulated,
+sorted, and properly displayed in a toggleable container to improve UX.
+
+Use of this code is at your own risk: it may break things and need
+adjustments depending on your site's code. Note that the script
+processes the promotion details client-side, so different languages
+may break the processing if the site is translated.
+-->
+
+<!-- Product Promotion Encapsulation -->
+<style>
+.product-info__promotion-description {
+	position: relative;
+	margin: 20px 0;
+}
+
+.product-info__promotion-description .toggle-button {
+	background-color: var(--cc-btn-primary-bg);
+	color: var(--color-on-primary);
+	border: none;
+	padding: 16px 24px;
+	cursor: pointer;
+	font-size: 16px;
+	font-family: var(--font-family-heading);
+	text-align: center;
+	width: 100%;
+	border-radius: var(--button-corner-radius);
+	transition: opacity 0.3s;
+	margin-bottom: 10px;
+}
+
+.product-info__promotion-description .toggle-button:hover {
+	opacity: 0.8;
+}
+
+.product-info__promotion-description .promotion-content {
+	max-height: 0;
+	overflow: hidden;
+	padding: 0 24px;
+	background-color: var(--color-background);
+	color: var(--color-on-background);
+	border: 1px solid transparent;
+	border-radius: var(--button-corner-radius);
+	margin-top: -10px;
+	font-size: 14px;
+	transition: max-height 0.5s ease, padding 0.5s ease, border-color 0.5s ease;
+	box-sizing: border-box;
+}
+
+.product-info__promotion-description .promotion-content.show {
+	padding: 16px 24px;
+	max-height: 500px;
+	border-color: var(--cc-btn-primary-bg);
+}
+
+.promotion-content ul {
+	list-style: disc;
+	padding-left: 20px;
+	margin: 0;
+}
+
+.promotion-content li {
+	margin-bottom: 5px;
+	position: relative;
+}
+
+.promotion-content li::marker {
+	font-size: 14px;
+}
+
+.promotion-content li p {
+	margin: 0;
+	text-indent: -14px;
+	padding-left: 14px;
+}
+
+/* Become a Member CTA button */
+#btn-promotion-content-become-member {
+	background-color: var(--cc-btn-primary-bg);
+	color: var(--color-on-primary);
+	border: none;
+	border-radius: var(--button-corner-radius);
+	padding: 10px 20px;
+	font-family: var(--font-family-heading);
+	font-size: 16px;
+	cursor: pointer;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	margin: 20px auto 0 auto;
+	transition: opacity 0.3s;
+	width: 100%;
+}
+#btn-promotion-content-become-member:hover {
+	opacity: 0.8;
+}
+</style>
+
+<!-- Do not mess with this script unless you know what you're doing -->
+
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+	var descriptions = document.querySelectorAll('.product-info__promotion-description');
+	
+	descriptions.forEach(function(description) {
+		var button = document.createElement('button');
+		button.classList.add('toggle-button');
+		button.textContent = "Show Promotion Details";
+		
+		var content = description.textContent.trim();
+
+		// Split the content into parts
+		var parts = content.split(/(?<=Members), /);  // Use regular expression to handle dynamic content
+		var firstPart = parts[0].split(', ');
+		var secondPart = parts[1].split('. ');
+
+		var twitchDiscounts = [];
+		var memberDiscounts = [];
+		var otherPromotions = [];
+		var freeShippingLine = '';
+		var checkoutLine = '';
+
+		firstPart.forEach(function(line) {
+			if (/Twitch Subs/i.test(line)) {
+				twitchDiscounts.push(line);
+			} else if (/Members/i.test(line)) {
+				memberDiscounts.push(line);
+			} else {
+				otherPromotions.push(line);  // Add to other promotions if it doesn't match predefined patterns
+			}
+		});
+
+		secondPart.forEach(function(line) {
+			if (/Free shipping/i.test(line)) {
+				freeShippingLine = line;
+			} else if (/Promotion auto-applied on checkout/i.test(line)) {
+				checkoutLine = line;
+			}
+		});
+
+		// Sort each category
+		twitchDiscounts.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+		memberDiscounts.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+		otherPromotions.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+
+		// Create the list items for each category
+		var finalContent = '<ul>';
+		twitchDiscounts.forEach(function(line) {
+			finalContent += '<li><p>' + line + '</p></li>';
+		});
+		memberDiscounts.forEach(function(line) {
+			finalContent += '<li><p>' + line + '</p></li>';
+		});
+		otherPromotions.forEach(function(line) {
+			finalContent += '<li><p>' + line + '</p></li>';
+		});
+		if (freeShippingLine) {
+			finalContent += '<li><p>' + freeShippingLine + '</p></li>';
+		}
+		if (checkoutLine) {
+			finalContent += '<li><p>' + checkoutLine + '</p></li>';
+		}
+		finalContent += '</ul>';
+
+		description.innerHTML = "";
+		description.appendChild(button);
+		
+		var contentDiv = document.createElement('div');
+		contentDiv.classList.add('promotion-content');
+		contentDiv.innerHTML = finalContent;
+		description.appendChild(contentDiv);
+		
+		button.addEventListener('click', function() {
+			if (contentDiv.classList.contains('show')) {
+				contentDiv.classList.remove('show');
+				button.textContent = "Show Promotion Details";
+			} else {
+				contentDiv.classList.add('show');
+				button.textContent = "Hide Promotion Details";
+			}
+		});
+	});
+	// Create the Become a Member CTA button
+    var button = document.createElement('button');
+    button.id = 'btn-promotion-content-become-member';
+    button.textContent = 'Become a Member!';
+
+    button.addEventListener('click', function() {
+        var siteUrl = window.location.origin;
+        var targetUrl = siteUrl + '/supporters/pricing';
+        window.location.href = targetUrl;
+    });
+
+    // Inject the button at the end of the .promotion-content element
+    var promotionContent = document.querySelector('.promotion-content');
+    if (promotionContent) {
+        promotionContent.appendChild(button);
+    }
+});
+</script>
+<!-- End of Product Promotion Encapsulation -->
\ No newline at end of file