1 files changed, 53 insertions, 0 deletions
diff --git a/examples/integrations-playground/src/pages/index.astro b/examples/integrations-playground/src/pages/index.astro
new file mode 100644
index 000000000..677026072
--- /dev/null
+++ b/examples/integrations-playground/src/pages/index.astro
@@ -0,0 +1,53 @@
+---
+import Lorem from '../components/Lorem.astro';
+import Link from '../components/Link.jsx';
+import '../components/Test.js';
+import '../components/Counter.js'; 
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+		<title>Demo</title>
+	</head>
+	<body>
+		<h1 class="px-4 py-4">Test app</h1>
+		<h2 class="partytown-status">
+      <strong>Party Mode!</strong> 
+      Colors changing = partytown is enabled
+    </h2>
+		<my-counter client:load></my-counter>
+    <Link to="/foo" text="Go to Page 2" />
+		<Lorem />
+		<calc-add num={33}></calc-add>
+
+
+    <script type="text/partytown">
+      // Remove `type="text/partytown"` to see this block the page
+      // and cause the page to become unresponsive
+      console.log('start partytown blocking script')
+      const now = Date.now() 
+      let count = 1;
+      while (Date.now() - now < 10000) {
+        if (Date.now() - now > count * 1000) {
+          console.log('blocking', count);
+          count += 1;
+        }
+      }
+      console.log('end partytown blocking script')
+    </script>
+
+    <script>
+      setInterval(() => {
+        const randomColor = Math.floor(Math.random()*16777215).toString(16);
+        document.querySelector('.partytown-status').style.color = "#" + randomColor;
+      }, 100);
+    </script>
+    <style>
+h1, h2 {
+	color: blue; 
+}
+</style>
+	</body>
+</html>