UPDATE: Local Asciinema

snippet/static/js/app.js

@@ -1,7 +1,7 @@
-// Initialize the AOS library
-AOS.init();
-
 $(function () {
+    // Initialize the AOS library
+    AOS.init();
+
     // Dark-mode switch functionality
     $(".darkmode-switch").on("click", function () {
         $("html").toggleClass("dark");
@@ -27,42 +27,55 @@ $(function () {
     setTimeout(function () {
         $("#loading-msg").hide();
     }, 1000);
-});
 
-// Confetti animation
-var skew = 1;
-var duration = 10 * 1000;
-var animationEnd = Date.now() + duration;
+    // Confetti animation
+    var skew = 1;
+    var duration = 10 * 1000;
+    var animationEnd = Date.now() + duration;
+
+    var canvas = document.getElementById("banner");
+    canvas.confetti =
+        canvas.confetti || confetti.create(canvas, { resize: true });
 
-var canvas = document.getElementById("banner");
-canvas.confetti = canvas.confetti || confetti.create(canvas, { resize: true });
+    function randomInRange(min, max) {
+        return Math.random() * (max - min) + min;
+    }
 
-function randomInRange(min, max) {
-    return Math.random() * (max - min) + min;
-}
+    (function frame() {
+        var timeLeft = animationEnd - Date.now();
+        var ticks = Math.max(200, 500 * (timeLeft / duration));
+        skew = Math.max(0.8, skew - 0.001);
 
-(function frame() {
-    var timeLeft = animationEnd - Date.now();
-    var ticks = Math.max(200, 500 * (timeLeft / duration));
-    skew = Math.max(0.8, skew - 0.001);
+        canvas.confetti({
+            particleCount: 1,
+            startVelocity: 0,
+            ticks: ticks,
+            origin: {
+                x: Math.random(),
+                // since particles fall down, skew start toward the top
+                y: Math.random() * skew - 0.2,
+            },
+            colors: ["#ff005d"],
+            shapes: ["circle"],
+            gravity: randomInRange(0.2, 0.4),
+            scalar: randomInRange(0.4, 1),
+            drift: randomInRange(-0.4, 0.4),
+        });
 
-    canvas.confetti({
-        particleCount: 1,
-        startVelocity: 0,
-        ticks: ticks,
-        origin: {
-            x: Math.random(),
-            // since particles fall down, skew start toward the top
-            y: Math.random() * skew - 0.2,
-        },
-        colors: ["#ff005d"],
-        shapes: ["circle"],
-        gravity: randomInRange(0.2, 0.4),
-        scalar: randomInRange(0.4, 1),
-        drift: randomInRange(-0.4, 0.4),
-    });
+        if (timeLeft > 0) {
+            requestAnimationFrame(frame);
+        }
+    })();
 
-    if (timeLeft > 0) {
-        requestAnimationFrame(frame);
-    }
-})();
+    // Initialize the Asciinema player
+    AsciinemaPlayer.create(
+        "/static/file/demo.cast",
+        document.getElementById("demo"),
+        {
+            rows: 18,
+            preload: true,
+            autoplay: true,
+            theme: "asciinema",
+        }
+    );
+});

snippet/templates/home_sections/hero.html

@@ -1,5 +1,5 @@
-<section class="container pt-12 pb-6 flex flex-col lg:flex-row gap-2 md:gap-4 lg:gap-8 text-black dark:text-white">
-    <div class="flex flex-col flex-1 justify-center lg:pb-8">
+<section class="container pt-12 pb-6 flex flex-col xl:flex-row gap-2 md:gap-4 lg:gap-8 text-black dark:text-white">
+    <div class="flex flex-col flex-1 justify-center lg:pb-8 max-w-screen-sm mx-auto xl:max-w-full xl:mx-0">
         <div class="mb-4 text-center md:text-left">
             <h1 class="text-3xl md:text-5xl lg:text-4xl font-bold">
                 <span class="text-pink-600">Modern-looking</span>
@@ -33,7 +33,7 @@ <h1 class="text-3xl md:text-5xl lg:text-4xl font-bold">
         </div>
         <p class="mt-2 text-neutral-500" id="copy-msg"></p>
     </div>
-    <div class="flex-1 my-auto">
-        <script src="https://asciinema.org/a/510373.js" id="asciicast-510373" data-theme="asciinema" data-size="big" data-speed="3" data-rows="20"></script>
+    <div class="flex-1 mx-auto w-[95%] max-w-screen-sm xl:mx-0">
+        <div id="demo"></div>
     </div>
 </section>

snippet/templates/home_sections/stat.html

@@ -1,5 +1,5 @@
 {% load millify %}
-<section class="py-10 text-black dark:text-white bg-white dark:bg-black transition-colors duration-300 select-none">
+<section class="py-6 md:py-10 text-black dark:text-white bg-white dark:bg-black transition-colors duration-300 select-none">
     <div class="container flex flex-col gap-8 md:gap-10 items-center justify-center"
          data-aos="fade-up"
          data-aos-duration="400"

templates/base/_css_tags.html

@@ -6,7 +6,8 @@
 {% endcompress %}
 {% compress css file styles %}
       {% tailwind_css %}
-      <link rel="stylesheet" href="{% static 'css/extra.css' %}"/>
       <link rel="stylesheet" href="{% static 'css/fonts.css' %}"/>
+      <link rel="stylesheet" href="{% static 'css/extra.css' %}"/>
       <link rel="stylesheet" href="{% static 'css/aos.css' %}"/>
+      <link rel="stylesheet" href="{% static 'css/asciinema-player.css' %}"/>
 {% endcompress %}

templates/base/_js_tags.html

@@ -4,5 +4,6 @@
     <script src="{% static 'js/aos.js' %}"></script>
     <script src="{% static 'js/cash.min.js' %}"></script>
     <script src="{% static 'js/confetti.min.js' %}"></script>
+    <script src="{% static 'js/asciinema-player.min.js' %}"></script>
     <script src="{% static 'js/app.js' %}"></script>
 {% endcompress %}

templates/disclaimer.html

@@ -1,7 +1,17 @@
 {% extends 'base/_base.html' %}
+<!-- Titles -->
 {% block title %}
-    PasteMe Disclaimer
+    PasteMe - Disclaimer
 {% endblock title %}
+{% block meta_title %}
+    This is a free-to-use service for the general public. The hosting provider is not liable for the content stored on this service. We do not know what is sent to our storage servers and we can't control or filter the data. We also can not give out any details about the author of the paste because we do not log them.
+{% endblock meta_title %}
+{% block meta_og_title %}
+    This is a free-to-use service for the general public. The hosting provider is not liable for the content stored on this service. We do not know what is sent to our storage servers and we can't control or filter the data. We also can not give out any details about the author of the paste because we do not log them.
+{% endblock meta_og_title %}
+{% block meta_tw_title %}
+    This is a free-to-use service for the general public. The hosting provider is not liable for the content stored on this service. We do not know what is sent to our storage servers and we can't control or filter the data. We also can not give out any details about the author of the paste because we do not log them.
+{% endblock meta_tw_title %}
 {% block content %}
     <div class="md:container h-full flex items-center justify-center">
         <div class="py-12 flex flex-col items-center justify-center gap-2">