Spaces:

arirajuns
/

fibonacci-1

Running

App Files Files Community

arirajuns commited on Apr 10, 2025

Commit

ea68f14

verified ·

1 Parent(s): 9fdbede

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +178 -19

README.md CHANGED Viewed

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

 ---
+title: fibonacci-1
+emoji: 🐳
+colorFrom: yellow
 colorTo: blue
 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,178 @@
-<!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>Fibonacci Squares Visualization</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .fib-container {
+            position: relative;
+            width: 100%;
+            height: 500px;
+            overflow: hidden;
+        }
+        .fib-square {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            border: 2px solid rgba(59, 130, 246, 0.7);
+            background-color: rgba(219, 234, 254, 0.7);
+        }
+    </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-indigo-800 mb-2">Fibonacci Squares</h1>
+            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
+                Visual representation of the Fibonacci sequence through proportional squares
+            </p>
+        </header>
+        <div class="flex flex-col lg:flex-row gap-8 items-center">
+            <div class="fib-container bg-white rounded-xl shadow-lg p-4 lg:w-2/3" id="fibContainer">
+                <!-- Squares will be generated here -->
+            </div>
+            <div class="lg:w-1/3 bg-white rounded-xl shadow-lg p-6">
+                <h2 class="text-2xl font-semibold text-indigo-700 mb-4">Controls</h2>
+                <div class="mb-6">
+                    <label for="fibCount" class="block text-sm font-medium text-gray-700 mb-2">Number of terms:</label>
+                    <div class="flex items-center gap-2">
+                        <input type="range" id="fibCount" min="5" max="15" value="8" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                        <span id="countValue" class="text-lg font-medium text-indigo-600">8</span>
+                    </div>
+                </div>
+                <button id="generateBtn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
+                    Generate Squares
+                </button>
+                <div class="mt-6 p-4 bg-indigo-50 rounded-lg">
+                    <h3 class="font-medium text-indigo-800 mb-2">Fibonacci Sequence</h3>
+                    <p class="text-sm text-gray-700">
+                        Each number is the sum of the two preceding ones, starting from 1 and 1.
+                        The ratio between consecutive numbers approaches the golden ratio (≈1.618).
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="mt-12 bg-white rounded-xl shadow-lg p-6">
+            <h2 class="text-2xl font-semibold text-indigo-700 mb-4">Sequence Values</h2>
+            <div id="sequenceList" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+                <!-- Sequence numbers will appear here -->
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const fibContainer = document.getElementById('fibContainer');
+            const fibCount = document.getElementById('fibCount');
+            const countValue = document.getElementById('countValue');
+            const generateBtn = document.getElementById('generateBtn');
+            const sequenceList = document.getElementById('sequenceList');
+            // Update displayed count value
+            fibCount.addEventListener('input', function() {
+                countValue.textContent = this.value;
+            });
+            // Generate Fibonacci sequence
+            function generateFibonacci(n) {
+                const sequence = [1, 1];
+                for (let i = 2; i < n; i++) {
+                    sequence.push(sequence[i-1] + sequence[i-2]);
+                }
+                return sequence;
+            }
+            // Create the square visualization
+            function createSquares(sequence) {
+                fibContainer.innerHTML = '';
+                sequenceList.innerHTML = '';
+                const containerWidth = fibContainer.clientWidth;
+                const containerHeight = fibContainer.clientHeight;
+                const centerX = containerWidth / 2;
+                const centerY = containerHeight / 2;
+                let x = centerX;
+                let y = centerY;
+                let direction = 0; // 0: right, 1: down, 2: left, 3: up
+                // Scale factor to fit the squares in the container
+                const maxSize = Math.max(...sequence);
+                const scale = Math.min(containerWidth, containerHeight) * 0.8 / (maxSize * 2);
+                sequence.forEach((num, index) => {
+                    // Create sequence list item
+                    const seqItem = document.createElement('div');
+                    seqItem.className = 'bg-indigo-100 rounded-lg p-3 text-center';
+                    seqItem.innerHTML = `
+                        <div class="text-xs text-indigo-500">Term ${index + 1}</div>
+                        <div class="text-xl font-bold text-indigo-800">${num}</div>
+                    `;
+                    sequenceList.appendChild(seqItem);
+                    // Calculate scaled size
+                    const scaledSize = num * scale;
+                    // Create square
+                    const square = document.createElement('div');
+                    square.className = 'fib-square';
+                    square.style.width = `${scaledSize}px`;
+                    square.style.height = `${scaledSize}px`;
+                    square.textContent = num;
+                    square.style.fontSize = `${Math.min(20, scaledSize / 3)}px`;
+                    // Position square based on direction
+                    switch (direction) {
+                        case 0: // right
+                            square.style.left = `${x}px`;
+                            square.style.top = `${y}px`;
+                            x += scaledSize;
+                            break;
+                        case 1: // down
+                            square.style.left = `${x - scaledSize}px`;
+                            square.style.top = `${y}px`;
+                            y += scaledSize;
+                            break;
+                        case 2: // left
+                            square.style.left = `${x - scaledSize}px`;
+                            square.style.top = `${y - scaledSize}px`;
+                            x -= scaledSize;
+                            break;
+                        case 3: // up
+                            square.style.left = `${x}px`;
+                            square.style.top = `${y - scaledSize}px`;
+                            y -= scaledSize;
+                            break;
+                    }
+                    fibContainer.appendChild(square);
+                    // Update direction for next square
+                    direction = (direction + 1) % 4;
+                });
+            }
+            // Initial generation
+            const initialSequence = generateFibonacci(parseInt(fibCount.value));
+            createSquares(initialSequence);
+            // Regenerate on button click
+            generateBtn.addEventListener('click', function() {
+                const newSequence = generateFibonacci(parseInt(fibCount.value));
+                createSquares(newSequence);
+            });
+        });
+    </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=arirajuns/fibonacci-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>