Update page background and add sharing

Change the entire page background to a subtle green upon successful completion of the rules of inference puzzle. Add share links and a unique URL for direct access to the interactive.

src/pages/RulesOfInferencePlaygroundPage.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import RulesOfInferencePlayground from "@/components/RulesOfInferencePlayground";
+import SocialShare from "@/components/SocialShare";
+
+const RulesOfInferencePlaygroundPage = () => {
+  const [isCompleted, setIsCompleted] = useState(false);
+
+  return (
+    <div 
+      className={`min-h-screen transition-colors duration-500 p-6 ${
+        isCompleted ? 'bg-green-50/50 dark:bg-green-950/20' : 'bg-background'
+      }`}
+    >
+      <div className="max-w-4xl mx-auto space-y-6">
+        <div className="flex items-center justify-between">
+          <Link 
+            to="/themes/discrete-math/foundations" 
+            className="text-primary hover:text-primary/80 font-medium"
+          >
+            ← Back to Foundations
+          </Link>
+          
+          <Link 
+            to="/themes/discrete-math" 
+            className="text-primary hover:text-primary/80 font-medium"
+          >
+            Back to Discrete Math →
+          </Link>
+        </div>
+        
+        <div className="space-y-2">
+          <h1 className="text-3xl font-bold text-foreground">Rules of Inference Playground</h1>
+          <p className="text-muted-foreground">
+            Practice applying resolution and equivalence rules to derive conclusions step by step.
+          </p>
+        </div>
+        
+        <RulesOfInferencePlayground onComplete={setIsCompleted} />
+        
+        <SocialShare 
+          title="Rules of Inference Playground - Interactive Logic Learning"
+          description="Practice applying resolution and equivalence rules to derive conclusions step by step in this interactive logic playground."
+          url={window.location.href}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default RulesOfInferencePlaygroundPage;

src/pages/theme-pages/discrete-math/Foundations.tsx

@@ -59,7 +59,7 @@ const interactives: Interactive[] = [{
   description: "Practice applying resolution and equivalence rules to derive conclusions step by step.",
   tags: ["logic", "proofs", "inference", "resolution", "deduction"],
   component: RulesOfInferencePlayground,
-  greenScreenPath: "/themes/discrete-math/foundations"
+  greenScreenPath: "/discrete-math/foundations/rules-of-inference"
 }];
 const Foundations = () => {
   const [searchTerm, setSearchTerm] = useState("");