Create App.py

App.py

@@ -0,0 +1,170 @@
+import React, { useState } from 'react';
+
+// Simple flame component
+const Flame: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <div className={`absolute w-2 h-3 bg-orange-500 rounded-t-full animate-pulse ${className}`}>
+    <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1 h-2 bg-red-600 rounded-t-full"></div>
+  </div>
+);
+
+// Burning effect wrapper
+const Burning: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className="relative">
+    {children}
+    <Flame className="-top-1 left-1/3" />
+    <Flame className="-top-2 left-1/2 scale-75" />
+    <Flame className="-top-1 left-2/3" />
+    <Flame className="top-0 left-1/4 scale-50" />
+    <Flame className="top-0 left-3/4 scale-50" />
+  </div>
+);
+
+// Bus component
+const Bus: React.FC<{ burning?: boolean; className?: string }> = ({ burning = false, className = '' }) => {
+  const content = (
+    <div className={`w-20 h-10 bg-blue-600 rounded-md border-2 border-black relative flex items-center justify-around p-1 ${className}`}>
+      {/* Windows */}
+      {[...Array(3)].map((_, i) => (
+        <div key={i} className="w-4 h-4 bg-gray-300 opacity-75 rounded-sm"></div>
+      ))}
+      {/* Wheels */}
+      <div className="absolute -bottom-1 left-2 w-4 h-4 bg-black rounded-full"></div>
+      <div className="absolute -bottom-1 right-2 w-4 h-4 bg-black rounded-full"></div>
+    </div>
+  );
+  return burning ? <Burning>{content}</Burning> : content;
+};
+
+// Car component
+const Car: React.FC<{ burning?: boolean; className?: string }> = ({ burning = false, className = '' }) => {
+  const content = (
+    <div className={`w-14 h-7 bg-red-600 rounded-md border-2 border-black relative flex items-center justify-around p-1 ${className}`}>
+       {/* Window */}
+       <div className="w-6 h-4 bg-gray-300 opacity-75 rounded-sm"></div>
+       {/* Wheels */}
+       <div className="absolute -bottom-1 left-1 w-3 h-3 bg-black rounded-full"></div>
+       <div className="absolute -bottom-1 right-1 w-3 h-3 bg-black rounded-full"></div>
+    </div>
+  );
+  return burning ? <Burning>{content}</Burning> : content;
+};
+
+
+// Slingshot component
+const Slingshot: React.FC<{ children?: React.ReactNode, launched: boolean }> = ({ children, launched }) => (
+  <div className="absolute bottom-1/4 left-1/4 transform -translate-x-1/2 z-10">
+    <div className="relative w-24 h-32">
+      {/* Poles */}
+      <div className="absolute bottom-0 left-0 w-4 h-24 bg-yellow-800 rounded-t-md transform -rotate-12"></div>
+      <div className="absolute bottom-0 right-0 w-4 h-24 bg-yellow-800 rounded-t-md transform rotate-12"></div>
+      {/* Band */}
+      <div className={`absolute top-0 left-2 w-20 h-12 border-4 border-gray-700 rounded-b-full transition-transform duration-500 ease-out ${launched ? 'translate-y-0 opacity-0' : '-translate-y-4'}`}>
+          <div className={`absolute bottom-0 left-1/2 transform -translate-x-1/2 ${launched ? 'opacity-0' : 'opacity-100'}`}>
+            {children}
+          </div>
+      </div>
+    </div>
+  </div>
+);
+
+// Collapsed Bridge component
+const CollapsedBridge: React.FC = () => (
+    <div className="absolute top-1/4 left-1/3 transform rotate-12 w-24">
+        <div className="h-4 bg-gray-700 "></div>
+        <div className="h-4 bg-yellow-600 transform rotate-6 translate-y-1"></div>
+        <div className="h-4 bg-gray-600 transform -rotate-4 -translate-y-1"></div>
+        <div className="text-center text-xs text-red-700 font-bold mt-1">BRIDGE OUT</div>
+    </div>
+);
+
+
+export default function DisasterScene() {
+  const [launched, setLaunched] = useState(false);
+
+  const handleLaunch = () => {
+    setLaunched(true);
+  };
+
+  const handleReset = () => {
+    setLaunched(false);
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-sky-400 to-sky-600 p-4">
+      <div className="relative w-full max-w-4xl h-[600px] bg-green-600 rounded-lg shadow-xl overflow-hidden border-4 border-black">
+        {/* Hillside Right */}
+        <div className="absolute top-0 right-0 bottom-0 w-1/3 bg-green-700 skew-x-[-15deg] origin-top-left"></div>
+
+        {/* Road */}
+        <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/4 h-3/4 bg-gray-500">
+          {/* Fork */}
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full h-1/2 flex">
+            {/* Left Fork */}
+            <div className="absolute top-0 left-0 w-1/2 h-full bg-gray-500 transform -rotate-12 origin-bottom-left"></div>
+             {/* Right Fork */}
+            <div className="absolute top-0 right-0 w-1/2 h-full bg-gray-500 transform rotate-12 origin-bottom-right"></div>
+          </div>
+           {/* Dashed Line */}
+           <div className="absolute inset-x-0 bottom-0 top-1/2 flex flex-col items-center">
+                {[...Array(5)].map((_, i) => (
+                    <div key={i} className="w-1 h-4 bg-yellow-300 mb-4"></div>
+                ))}
+            </div>
+        </div>
+
+         {/* Collapsed Bridge Area */}
+         <div className="absolute top-[20%] left-[30%]">
+             <CollapsedBridge />
+         </div>
+
+        {/* Slingshot */}
+        <Slingshot launched={launched}>
+          {!launched && <Bus burning className="scale-75 transform translate-y-2" />}
+        </Slingshot>
+
+        {/* Launched Bus */}
+        <div
+          className={`absolute bottom-1/3 left-1/4 transform transition-all duration-1000 ease-in-out z-20 ${
+            launched
+              ? 'translate-x-[150px] translate-y-[-150px] rotate-45 scale-90' // Move towards fork
+              : '-translate-x-1/2 opacity-0 scale-50' // Hidden initially or in slingshot
+          }`}
+        >
+         {launched && <Bus burning className="scale-75" />}
+        </div>
+
+
+        {/* Crashing Vehicles on Right Hill */}
+        <div className="absolute top-1/3 right-[10%] transform -rotate-12 z-10">
+            <Bus burning className="mb-4 scale-90"/>
+        </div>
+        <div className="absolute top-1/2 right-[15%] transform -rotate-12 z-10">
+             <Car burning className="scale-90"/>
+        </div>
+
+
+      </div>
+
+      <div className="mt-6 flex space-x-4">
+         <button
+            onClick={handleLaunch}
+            disabled={launched}
+            className={`px-6 py-2 rounded-lg text-white font-semibold shadow-md transition-colors duration-300 ${
+              launched
+                ? 'bg-gray-400 cursor-not-allowed'
+                : 'bg-red-600 hover:bg-red-700'
+            }`}
+          >
+            Launch Bus!
+          </button>
+          <button
+            onClick={handleReset}
+            className="px-6 py-2 rounded-lg text-white font-semibold shadow-md transition-colors duration-300 bg-blue-600 hover:bg-blue-700"
+          >
+            Reset
+          </button>
+      </div>
+
+    </div>
+  );
+}