Spaces:

AARIFSHABIR
/

projectile

Running

App Files Files Community

AARIFSHABIR commited on Jun 3, 2025

Commit

0e62845

verified ·

1 Parent(s): 3a6c368

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +371 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Projectile
-emoji: 📉
 colorFrom: purple
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: projectile
+emoji: 🐳
 colorFrom: purple
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,371 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Projectile Motion Learning App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .projectile-path {
+            height: 250px;
+            position: relative;
+            overflow: hidden;
+        }
+        .projectile {
+            width: 20px;
+            height: 20px;
+            background-color: #3B82F6;
+            border-radius: 50%;
+            position: absolute;
+            bottom: 0;
+            left: 5%;
+            transition: all 0.1s linear;
+        }
+        .ground {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 2px;
+            background-color: #555;
+        }
+        #animationCanvas {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-blue-600 mb-2">Projectile Motion Master</h1>
+            <p class="text-gray-600 text-lg">Learn, calculate, and visualize projectile motion problems</p>
+        </header>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Theory Section -->
+            <div class="bg-white rounded-lg shadow-lg p-6">
+                <h2 class="text-2xl font-semibold text-blue-600 mb-4 border-b pb-2">Theory</h2>
+                <div class="space-y-4">
+                    <div class="bg-blue-50 p-4 rounded">
+                        <h3 class="font-medium text-blue-800">What is Projectile Motion?</h3>
+                        <p class="text-gray-700 mt-2">Projectile motion is the motion of an object thrown or projected into the air, subject only to acceleration as a result of gravity.</p>
+                    </div>
+                    <div class="bg-blue-50 p-4 rounded">
+                        <h3 class="font-medium text-blue-800">Key Equations</h3>
+                        <ul class="list-disc pl-5 mt-2 space-y-1 text-gray-700">
+                            <li><strong>Horizontal motion:</strong> x = v₀cosθ × t</li>
+                            <li><strong>Vertical motion:</strong> y = v₀sinθ × t - ½gt²</li>
+                            <li><strong>Time of flight:</strong> T = (2v₀sinθ)/g</li>
+                            <li><strong>Maximum height:</strong> H = (v₀²sin²θ)/2g</li>
+                            <li><strong>Range:</strong> R = (v₀²sin2θ)/g</li>
+                        </ul>
+                    </div>
+                    <div class="bg-blue-50 p-4 rounded">
+                        <h3 class="font-medium text-blue-800">Parameters</h3>
+                        <ul class="list-disc pl-5 mt-2 space-y-1 text-gray-700">
+                            <li><strong>v₀</strong> = initial velocity (m/s)</li>
+                            <li><strong>θ</strong> = projection angle (degrees)</li>
+                            <li><strong>g</strong> = acceleration due to gravity (9.8 m/s²)</li>
+                            <li><strong>t</strong> = time (s)</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <!-- Calculator Section -->
+            <div class="bg-white rounded-lg shadow-lg p-6">
+                <h2 class="text-2xl font-semibold text-blue-600 mb-4 border-b pb-2">Problem Solver</h2>
+                <div class="space-y-4">
+                    <div>
+                        <label for="velocity" class="block text-sm font-medium text-gray-700">Initial Velocity (m/s)</label>
+                        <input type="number" id="velocity" min="0" value="20" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                    </div>
+                    <div>
+                        <label for="angle" class="block text-sm font-medium text-gray-700">Projection Angle (degrees)</label>
+                        <input type="number" id="angle" min="0" max="90" value="45" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                    </div>
+                    <div>
+                        <label for="height" class="block text-sm font-medium text-gray-700">Initial Height (m)</label>
+                        <input type="number" id="height" min="0" value="0" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+                    </div>
+                    <button onclick="calculateProjectile()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition duration-300">
+                        Calculate
+                    </button>
+                    <div id="results" class="hidden space-y-2 mt-4 border-t pt-4">
+                        <h3 class="font-semibold text-gray-800">Results:</h3>
+                        <p id="timeOfFlight" class="text-gray-700"></p>
+                        <p id="maxHeight" class="text-gray-700"></p>
+                        <p id="range" class="text-gray-700"></p>
+                        <div class="pt-4">
+                            <button onclick="shareResults()" class="w-full flex items-center justify-center bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-md transition duration-300">
+                                <i class="fab fa-whatsapp mr-2"></i> Share on WhatsApp
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Visualization Section -->
+            <div class="bg-white rounded-lg shadow-lg p-6">
+                <h2 class="text-2xl font-semibold text-blue-600 mb-4 border-b pb-2">Visualization</h2>
+                <div class="projectile-path bg-gray-50 rounded-md mb-4" id="projectileContainer">
+                    <div class="ground"></div>
+                    <div class="projectile" id="projectile"></div>
+                </div>
+                <div class="flex justify-center">
+                    <button onclick="animateProjectile()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-8 rounded-md transition duration-300">
+                        Animate
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Practice Problems Section -->
+        <div class="mt-16 bg-white rounded-lg shadow-lg p-6">
+            <h2 class="text-2xl font-semibold text-blue-600 mb-4 border-b pb-2">Practice Problems</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
+                    <h3 class="font-medium text-blue-700">Problem 1</h3>
+                    <p class="text-gray-700 mt-2">A ball is thrown with an initial velocity of 15 m/s at an angle of 30° to the horizontal. Calculate the maximum height reached and the horizontal distance traveled.</p>
+                    <button onclick="loadSolution(1)" class="mt-3 text-blue-600 hover:text-blue-800 text-sm font-medium">Show Solution</button>
+                    <div id="solution1" class="hidden mt-3 bg-blue-50 p-3 rounded text-sm text-gray-700"></div>
+                </div>
+                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
+                    <h3 class="font-medium text-blue-700">Problem 2</h3>
+                    <p class="text-gray-700 mt-2">A stone is thrown from a cliff 20 meters high with a velocity of 25 m/s at 15° above the horizontal. How long does it take to hit the ground?</p>
+                    <button onclick="loadSolution(2)" class="mt-3 text-blue-600 hover:text-blue-800 text-sm font-medium">Show Solution</button>
+                    <div id="solution2" class="hidden mt-3 bg-blue-50 p-3 rounded text-sm text-gray-700"></div>
+                </div>
+                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
+                    <h3 class="font-medium text-blue-700">Problem 3</h3>
+                    <p class="text-gray-700 mt-2">A projectile is launched at 60° with the horizontal and lands 100 meters away. What was the initial velocity?</p>
+                    <button onclick="loadSolution(3)" class="mt-3 text-blue-600 hover:text-blue-800 text-sm font-medium">Show Solution</button>
+                    <div id="solution3" class="hidden mt-3 bg-blue-50 p-3 rounded text-sm text-gray-700"></div>
+                </div>
+                <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
+                    <h3 class="font-medium text-blue-700">Problem 4</h3>
+                    <p class="text-gray-700 mt-2">At what angle should you throw a ball to achieve the maximum range? Prove mathematically.</p>
+                    <button onclick="loadSolution(4)" class="mt-3 text-blue-600 hover:text-blue-800 text-sm font-medium">Show Solution</button>
+                    <div id="solution4" class="hidden mt-3 bg-blue-50 p-3 rounded text-sm text-gray-700"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Constants
+        const g = 9.8; // acceleration due to gravity in m/s²
+        let animationId;
+        // Calculate projectile motion parameters
+        function calculateProjectile() {
+            const v0 = parseFloat(document.getElementById('velocity').value);
+            const angle = parseFloat(document.getElementById('angle').value);
+            const h0 = parseFloat(document.getElementById('height').value);
+            if (isNaN(v0) || isNaN(angle) || isNaN(h0) || v0 <= 0 || angle < 0 || angle > 90 || h0 < 0) {
+                alert('Please enter valid positive values.\nAngle must be between 0 and 90 degrees.');
+                return;
+            }
+            const angleRad = angle * Math.PI / 180;
+            const v0x = v0 * Math.cos(angleRad);
+            const v0y = v0 * Math.sin(angleRad);
+            // Calculate time of flight (quadratic equation)
+            const a = -g / 2;
+            const b = v0y;
+            const c = h0;
+            // Quadratic formula (take the positive root)
+            const timeOfFlight = (-b - Math.sqrt(b*b - 4*a*c)) / (2*a);
+            // Maximum height
+            const maxHeight = h0 + (v0y * v0y) / (2 * g);
+            // Horizontal range
+            const range = v0x * timeOfFlight;
+            // Display results
+            document.getElementById('timeOfFlight').textContent = `Time of flight: ${timeOfFlight.toFixed(2)} seconds`;
+            document.getElementById('maxHeight').textContent = `Maximum height: ${maxHeight.toFixed(2)} meters`;
+            document.getElementById('range').textContent = `Horizontal range: ${range.toFixed(2)} meters`;
+            document.getElementById('results').classList.remove('hidden');
+            // Store results for sharing
+            sessionStorage.setItem('projectileResults', JSON.stringify({
+                velocity: v0,
+                angle: angle,
+                initialHeight: h0,
+                timeOfFlight: timeOfFlight.toFixed(2),
+                maxHeight: maxHeight.toFixed(2),
+                range: range.toFixed(2)
+            }));
+        }
+        // Animate projectile motion
+        function animateProjectile() {
+            const v0 = parseFloat(document.getElementById('velocity').value);
+            const angle = parseFloat(document.getElementById('angle').value);
+            const h0 = parseFloat(document.getElementById('height').value);
+            if (isNaN(v0) || isNaN(angle) || isNaN(h0) || v0 <= 0 || angle < 0 || angle > 90 || h0 < 0) {
+                alert('Please enter valid positive values first by clicking Calculate.\nAngle must be between 0 and 90 degrees.');
+                return;
+            }
+            const projectile = document.getElementById('projectile');
+            const container = document.getElementById('projectileContainer');
+            const containerWidth = container.clientWidth;
+            const containerHeight = container.clientHeight;
+            const angleRad = angle * Math.PI / 180;
+            const v0x = v0 * Math.cos(angleRad);
+            const v0y = v0 * Math.sin(angleRad);
+            // Calculate time of flight (same as in calculateProjectile)
+            const a = -g / 2;
+            const b = v0y;
+            const c = h0;
+            const timeOfFlight = (-b - Math.sqrt(b*b - 4*a*c)) / (2*a);
+            // Clear previous animation if any
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+            // Scale factor to fit animation in container
+            const maxRange = v0x * timeOfFlight;
+            const maxHeight = h0 + (v0y * v0y) / (2 * g);
+            const xScale = (containerWidth * 0.8) / maxRange;
+            const yScale = (containerHeight * 0.8) / Math.max(maxHeight, h0);
+            let t = 0;
+            const dt = timeOfFlight / 100; // small time increments
+            function frame() {
+                if (t <= timeOfFlight) {
+                    const x = v0x * t;
+                    const y = h0 + v0y * t - 0.5 * g * t * t;
+                    // Scale and position projectile (flip y-coordinate because CSS y increases downward)
+                    projectile.style.left = `${5 + x * xScale}px`;
+                    projectile.style.bottom = `${y * yScale}px`;
+                    t += dt;
+                    animationId = requestAnimationFrame(frame);
+                } else {
+                    // Animation complete
+                    projectile.style.left = '5%';
+                    projectile.style.bottom = '0%';
+                }
+            }
+            // Start animation
+            frame();
+        }
+        // Share results on WhatsApp
+        function shareResults() {
+            const storedResults = sessionStorage.getItem('projectileResults');
+            if (!storedResults) {
+                alert('Please calculate results first.');
+                return;
+            }
+            const results = JSON.parse(storedResults);
+            const message = `Check out my projectile motion calculations!%0A%0AInitial Velocity: ${results.velocity} m/s%0AProjection Angle: ${results.angle}°%0AInitial Height: ${results.initialHeight} m%0A%0ATime of Flight: ${results.timeOfFlight} s%0AMaximum Height: ${results.maxHeight} m%0ARange: ${results.range} m%0A%0ACalculated using Projectile Motion Master app.`;
+            const url = `https://wa.me/?text=${message}`;
+            window.open(url, '_blank');
+        }
+        // Load practice problem solutions
+        function loadSolution(problemNum) {
+            const solutionDiv = document.getElementById(`solution${problemNum}`);
+            if (solutionDiv.classList.contains('hidden')) {
+                let solutionText = '';
+                switch(problemNum) {
+                    case 1:
+                        solutionText = `
+                            <p class="font-medium">Given:</p>
+                            <p>v₀ = 15 m/s, θ = 30°, g = 9.8 m/s²</p>
+                            <p class="font-medium mt-2">1. Maximum height:</p>
+                            <p>H = (v₀²sin²θ)/2g</p>
+                            <p>H = (15² × sin²30°)/19.6</p>
+                            <p>H = (225 × 0.25)/19.6 ≈ 2.87 m</p>
+                            <p class="font-medium mt-2">2. Horizontal range:</p>
+                            <p>R = (v₀²sin2θ)/g</p>
+                            <p>R = (15² × sin60°)/9.8</p>
+                            <p>R = (225 × 0.866)/9.8 ≈ 19.88 m</p>
+                        `;
+                        break;
+                    case 2:
+                        solutionText = `
+                            <p class="font-medium">Given:</p>
+                            <p>v₀ = 25 m/s, θ = 15°, h₀ = 20 m, g = 9.8 m/s²</p>
+                            <p class="font-medium mt-2">Vertical motion equation:</p>
+                            <p>y = h₀ + v₀sinθ × t - ½gt²</p>
+                            <p>At landing, y = 0:</p>
+                            <p>0 = 20 + 25sin15° × t - 4.9t²</p>
+                            <p>0 = 20 + 6.47t - 4.9t²</p>
+                            <p class="mt-2">Solve quadratic equation:</p>
+                            <p>t = [-6.47 ± √(6.47² + 4×4.9×20)] / (-9.8)</p>
+                            <p>t = [-6.47 ± 20.46] / -9.8</p>
+                            <p>Positive solution: t ≈ 2.75 seconds</p>
+                        `;
+                        break;
+                    case 3:
+                        solutionText = `
+                            <p class="font-medium">Given:</p>
+                            <p>θ = 60°, R = 100 m, g = 9.8 m/s²</p>
+                            <p class="font-medium mt-2">Range equation:</p>
+                            <p>R = (v₀²sin2θ)/g</p>
+                            <p>100 = (v₀² × sin120°)/9.8</p>
+                            <p>100 = (v₀² × 0.866)/9.8</p>
+                            <p>v₀² = (100 × 9.8)/0.866 ≈ 1131.6</p>
+                            <p>v₀ ≈ √1131.6 ≈ 33.64 m/s</p>
+                        `;
+                        break;
+                    case 4:
+                        solutionText = `
+                            <p class="font-medium">Maximum range occurs at 45°</p>
+                            <p class="font-medium mt-2">Proof:</p>
+                            <p>Range equation: R = (v₀²sin2θ)/g</p>
+                            <p>To maximize R, maximize sin2θ</p>
+                            <p>Maximum value of sin2θ is 1 when 2θ = 90°</p>
+                            <p>Therefore θ = 45° gives maximum range</p>
+                            <p class="mt-2">At 45°:</p>
+                            <p>R<sub>max</sub> = v₀²/g</p>
+                        `;
+                        break;
+                }
+                solutionDiv.innerHTML = solutionText;
+                solutionDiv.classList.remove('hidden');
+            } else {
+                solutionDiv.classList.add('hidden');
+            }
+        }
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AARIFSHABIR/projectile" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Make app for learning and solving numericals based on projectile motion and how to share it on whatsapp