Spaces:

discoverwithanand
/

anycoder-bddf45de

Running

App Files Files Community

discoverwithanand commited on Dec 1, 2025

Commit

c87150b

verified ·

1 Parent(s): 0d8d287

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +716 -19

index.html CHANGED Viewed

@@ -1,19 +1,716 @@
-<!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>Nearest Integer Square Root Finder</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    :root {
+      --primary: #6366f1;
+      --primary-dark: #4f46e5;
+      --secondary: #ec4899;
+      --background: #0f172a;
+      --surface: #1e293b;
+      --surface-light: #334155;
+      --text: #f8fafc;
+      --text-muted: #94a3b8;
+      --success: #22c55e;
+      --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    }
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: var(--background);
+      min-height: 100vh;
+      color: var(--text);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    header {
+      width: 100%;
+      padding: 1rem 2rem;
+      background: var(--surface);
+      border-bottom: 1px solid var(--surface-light);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 1rem;
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+    .logo i {
+      font-size: 1.75rem;
+      background: var(--gradient);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .logo h1 {
+      font-size: 1.25rem;
+      font-weight: 600;
+    }
+    .built-with {
+      color: var(--text-muted);
+      font-size: 0.875rem;
+      text-decoration: none;
+      transition: color 0.3s ease;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .built-with:hover {
+      color: var(--primary);
+    }
+    main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem;
+      width: 100%;
+      max-width: 800px;
+    }
+    .calculator-card {
+      background: var(--surface);
+      border-radius: 1.5rem;
+      padding: 2.5rem;
+      width: 100%;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+      border: 1px solid var(--surface-light);
+    }
+    .card-header {
+      text-align: center;
+      margin-bottom: 2rem;
+    }
+    .card-header h2 {
+      font-size: 1.75rem;
+      margin-bottom: 0.5rem;
+      background: var(--gradient);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .card-header p {
+      color: var(--text-muted);
+      font-size: 0.95rem;
+    }
+    .input-group {
+      position: relative;
+      margin-bottom: 1.5rem;
+    }
+    .input-group label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-weight: 500;
+      color: var(--text-muted);
+    }
+    .input-wrapper {
+      position: relative;
+      display: flex;
+      gap: 0.75rem;
+    }
+    .input-wrapper input {
+      flex: 1;
+      padding: 1rem 1.25rem;
+      font-size: 1.25rem;
+      border: 2px solid var(--surface-light);
+      border-radius: 0.75rem;
+      background: var(--background);
+      color: var(--text);
+      transition: all 0.3s ease;
+      outline: none;
+    }
+    .input-wrapper input:focus {
+      border-color: var(--primary);
+      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
+    }
+    .input-wrapper input::placeholder {
+      color: var(--text-muted);
+    }
+    .btn {
+      padding: 1rem 1.5rem;
+      font-size: 1rem;
+      font-weight: 600;
+      border: none;
+      border-radius: 0.75rem;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .btn-primary {
+      background: var(--gradient);
+      color: white;
+    }
+    .btn-primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
+    }
+    .btn-secondary {
+      background: var(--surface-light);
+      color: var(--text);
+    }
+    .btn-secondary:hover {
+      background: #475569;
+    }
+    .btn-random {
+      background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+      color: white;
+    }
+    .btn-random:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 10px 20px rgba(245, 158, 11, 0.3);
+    }
+    .button-group {
+      display: flex;
+      gap: 0.75rem;
+      margin-top: 1rem;
+      flex-wrap: wrap;
+    }
+    .result-container {
+      margin-top: 2rem;
+      padding: 2rem;
+      background: var(--background);
+      border-radius: 1rem;
+      border: 1px solid var(--surface-light);
+      display: none;
+      animation: fadeIn 0.5s ease;
+    }
+    .result-container.show {
+      display: block;
+    }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(10px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .result-header {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      margin-bottom: 1.5rem;
+    }
+    .result-header i {
+      font-size: 1.5rem;
+      color: var(--success);
+    }
+    .result-header h3 {
+      font-size: 1.25rem;
+    }
+    .result-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
+    }
+    .result-item {
+      background: var(--surface);
+      padding: 1.25rem;
+      border-radius: 0.75rem;
+      text-align: center;
+      border: 1px solid var(--surface-light);
+      transition: transform 0.3s ease;
+    }
+    .result-item:hover {
+      transform: translateY(-3px);
+    }
+    .result-item.highlight {
+      border-color: var(--primary);
+      background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
+    }
+    .result-label {
+      font-size: 0.85rem;
+      color: var(--text-muted);
+      margin-bottom: 0.5rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .result-value {
+      font-size: 2rem;
+      font-weight: 700;
+      background: var(--gradient);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .result-item.highlight .result-value {
+      font-size: 2.5rem;
+    }
+    .result-sub {
+      font-size: 0.85rem;
+      color: var(--text-muted);
+      margin-top: 0.25rem;
+    }
+    .visualization {
+      margin-top: 2rem;
+      padding: 1.5rem;
+      background: var(--surface);
+      border-radius: 0.75rem;
+      border: 1px solid var(--surface-light);
+    }
+    .visualization h4 {
+      margin-bottom: 1rem;
+      color: var(--text-muted);
+      font-size: 0.9rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .number-line {
+      position: relative;
+      height: 60px;
+      background: var(--background);
+      border-radius: 0.5rem;
+      margin: 1rem 0;
+      overflow: hidden;
+    }
+    .number-line-track {
+      position: absolute;
+      top: 50%;
+      left: 5%;
+      right: 5%;
+      height: 4px;
+      background: var(--surface-light);
+      border-radius: 2px;
+      transform: translateY(-50%);
+    }
+    .number-marker {
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      transition: all 0.5s ease;
+    }
+    .marker-dot {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      background: var(--primary);
+    }
+    .marker-dot.input {
+      background: var(--secondary);
+      width: 20px;
+      height: 20px;
+      box-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
+    }
+    .marker-dot.nearest {
+      background: var(--success);
+      width: 24px;
+      height: 24px;
+      box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
+    }
+    .marker-label {
+      position: absolute;
+      font-size: 0.75rem;
+      white-space: nowrap;
+      color: var(--text-muted);
+    }
+    .marker-label.top {
+      bottom: 100%;
+      margin-bottom: 0.5rem;
+    }
+    .marker-label.bottom {
+      top: 100%;
+      margin-top: 0.5rem;
+    }
+    .formula-display {
+      margin-top: 1.5rem;
+      padding: 1rem;
+      background: var(--background);
+      border-radius: 0.5rem;
+      font-family: 'Courier New', monospace;
+      font-size: 0.9rem;
+      color: var(--text-muted);
+      text-align: center;
+    }
+    .formula-display span {
+      color: var(--primary);
+      font-weight: 600;
+    }
+    .error-message {
+      color: #ef4444;
+      font-size: 0.875rem;
+      margin-top: 0.5rem;
+      display: none;
+    }
+    .error-message.show {
+      display: block;
+      animation: shake 0.5s ease;
+    }
+    @keyframes shake {
+      0%,
+      100% {
+        transform: translateX(0);
+      }
+      25% {
+        transform: translateX(-5px);
+      }
+      75% {
+        transform: translateX(5px);
+      }
+    }
+    footer {
+      width: 100%;
+      padding: 1.5rem;
+      text-align: center;
+      color: var(--text-muted);
+      font-size: 0.875rem;
+      border-top: 1px solid var(--surface-light);
+    }
+    @media (max-width: 600px) {
+      .calculator-card {
+        padding: 1.5rem;
+      }
+      .card-header h2 {
+        font-size: 1.5rem;
+      }
+      .input-wrapper {
+        flex-direction: column;
+      }
+      .btn {
+        width: 100%;
+        justify-content: center;
+      }
+      .button-group {
+        flex-direction: column;
+      }
+      .result-value {
+        font-size: 1.5rem;
+      }
+      .result-item.highlight .result-value {
+        font-size: 2rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="logo">
+      <i class="fas fa-square-root-variable"></i>
+      <h1>Square Root Finder</h1>
+    </div>
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">
+      <i class="fas fa-code"></i>
+      Built with anycoder
+    </a>
+  </header>
+  <main>
+    <div class="calculator-card">
+      <div class="card-header">
+        <h2><i class="fas fa-calculator"></i> Nearest Integer Square Root</h2>
+        <p>Enter any positive number to find its nearest integer square root</p>
+      </div>
+      <div class="input-group">
+        <label for="numberInput">Enter a positive number</label>
+        <div class="input-wrapper">
+          <input type="number" id="numberInput" placeholder="e.g., 50" min="0" step="any">
+          <button class="btn btn-primary" onclick="calculateSquareRoot()">
+                        <i class="fas fa-calculator"></i>
+                        Calculate
+                    </button>
+        </div>
+        <p class="error-message" id="errorMessage">Please enter a valid positive number</p>
+      </div>
+      <div class="button-group">
+        <button class="btn btn-random" onclick="generateRandom()">
+                    <i class="fas fa-dice"></i>
+                    Random Number
+                </button>
+        <button class="btn btn-secondary" onclick="clearAll()">
+                    <i class="fas fa-eraser"></i>
+                    Clear
+                </button>
+      </div>
+      <div class="result-container" id="resultContainer">
+        <div class="result-header">
+          <i class="fas fa-check-circle"></i>
+          <h3>Results</h3>
+        </div>
+        <div class="result-grid">
+          <div class="result-item">
+            <div class="result-label">Input Number</div>
+            <div class="result-value" id="inputNumber">-</div>
+          </div>
+          <div class="result-item">
+            <div class="result-label">Exact Square Root</div>
+            <div class="result-value" id="exactRoot">-</div>
+          </div>
+          <div class="result-item highlight">
+            <div class="result-label">Nearest Integer √</div>
+            <div class="result-value" id="nearestRoot">-</div>
+            <div class="result-sub" id="nearestSquare">-</div>
+          </div>
+          <div class="result-item">
+            <div class="result-label">Difference</div>
+            <div class="result-value" id="difference">-</div>
+          </div>
+        </div>
+        <div class="visualization">
+          <h4><i class="fas fa-chart-line"></i> Visual Representation</h4>
+          <div class="number-line">
+            <div class="number-line-track"></div>
+            <div class="number-marker" id="lowerMarker" style="left: 20%;">
+              <div class="marker-dot"></div>
+              <span class="marker-label top" id="lowerLabel">-</span>
+              <span class="marker-label bottom" id="lowerSquare">-</span>
+            </div>
+            <div class="number-marker" id="inputMarker" style="left: 50%;">
+              <div class="marker-dot input"></div>
+              <span class="marker-label top" id="inputLabel">Input</span>
+            </div>
+            <div class="number-marker" id="upperMarker" style="left: 80%;">
+              <div class="marker-dot"></div>
+              <span class="marker-label top" id="upperLabel">-</span>
+              <span class="marker-label bottom" id="upperSquare">-</span>
+            </div>
+          </div>
+          <div class="formula-display" id="formulaDisplay">
+            √<span>n</span> ≈ <span>result</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+  <footer>
+    <p>© 2024 Square Root Finder | Mathematical precision at your fingertips</p>
+  </footer>
+  <script>
+    const numberInput = document.getElementById('numberInput');
+        const resultContainer = document.getElementById('resultContainer');
+        const errorMessage = document.getElementById('errorMessage');
+        numberInput.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                calculateSquareRoot();
+            }
+        });
+        function calculateSquareRoot() {
+            const input = parseFloat(numberInput.value);
+            // Validate input
+            if (isNaN(input) || input < 0) {
+                showError();
+                return;
+            }
+            hideError();
+            // Calculate values
+            const exactRoot = Math.sqrt(input);
+            const floorRoot = Math.floor(exactRoot);
+            const ceilRoot = Math.ceil(exactRoot);
+            // Determine nearest integer square root
+            let nearestRoot;
+            if (exactRoot === floorRoot) {
+                nearestRoot = floorRoot;
+            } else {
+                const floorDiff = Math.abs(input - (floorRoot * floorRoot));
+                const ceilDiff = Math.abs(input - (ceilRoot * ceilRoot));
+                nearestRoot = floorDiff <= ceilDiff ? floorRoot : ceilRoot;
+            }
+            const nearestSquare = nearestRoot * nearestRoot;
+            const difference = Math.abs(input - nearestSquare);
+            // Update display
+            document.getElementById('inputNumber').textContent = formatNumber(input);
+            document.getElementById('exactRoot').textContent = formatNumber(exactRoot, 6);
+            document.getElementById('nearestRoot').textContent = nearestRoot;
+            document.getElementById('nearestSquare').textContent = `(${nearestRoot}² = ${nearestSquare})`;
+            document.getElementById('difference').textContent = formatNumber(difference, 4);
+            // Update visualization
+            updateVisualization(input, floorRoot, ceilRoot, nearestRoot);
+            // Update formula display
+            document.getElementById('formulaDisplay').innerHTML =
+                `√<span>${formatNumber(input)}</span> = <span>${formatNumber(exactRoot, 6)}</span> ≈ <span>${nearestRoot}</span>`;
+            // Show results
+            resultContainer.classList.add('show');
+        }
+        function updateVisualization(input, floorRoot, ceilRoot, nearestRoot) {
+            const lowerMarker = document.getElementById('lowerMarker');
+            const inputMarker = document.getElementById('inputMarker');
+            const upperMarker = document.getElementById('upperMarker');
+            const lowerSquare = floorRoot * floorRoot;
+            const upperSquare = ceilRoot * ceilRoot;
+            // Handle perfect squares
+            if (floorRoot === ceilRoot) {
+                lowerMarker.style.left = '30%';
+                inputMarker.style.left = '50%';
+                upperMarker.style.left = '70%';
+                document.getElementById('lowerLabel').textContent = `√${lowerSquare} = ${floorRoot}`;
+                document.getElementById('lowerSquare').textContent = 'Perfect Square!';
+                document.getElementById('upperLabel').textContent = `√${(floorRoot + 1) * (floorRoot + 1)} = ${floorRoot + 1}`;
+                document.getElementById('upperSquare').textContent = `${(floorRoot + 1) * (floorRoot + 1)}`;
+            } else {
+                // Calculate positions
+                const range = upperSquare - lowerSquare;
+                const inputPosition = ((input - lowerSquare) / range) * 60 + 20;
+                lowerMarker.style.left = '20%';
+                inputMarker.style.left = `${Math.min(80, Math.max(20, inputPosition))}%`;
+                upperMarker.style.left = '80%';
+                document.getElementById('lowerLabel').textContent = `√${lowerSquare} = ${floorRoot}`;
+                document.getElementById('lowerSquare').textContent = `${lowerSquare}`;
+                document.getElementById('upperLabel').textContent = `√${upperSquare} = ${ceilRoot}`;
+                document.getElementById('upperSquare').textContent = `${upperSquare}`;
+            }
+            document.getElementById('inputLabel').textContent = formatNumber(input);
+            // Highlight nearest
+            const lowerDot = lowerMarker.querySelector('.marker-dot');
+            const upperDot = upperMarker.querySelector('.marker-dot');
+            lowerDot.classList.remove('nearest');
+            upperDot.classList.remove('nearest');
+            if (nearestRoot === floorRoot) {
+                lowerDot.classList.add('nearest');
+            } else {
+                upperDot.classList.add('nearest');
+            }
+        }
+        function generateRandom() {
+            const random = Math.floor(Math.random() * 10000) + 1;
+            numberInput.value = random;
+            calculateSquareRoot();
+        }
+        function clearAll() {
+            numberInput.value = '';
+            resultContainer.classList.remove('show');
+            hideError();
+        }
+        function showError() {
+            errorMessage.classList.add('show');
+            numberInput.style.borderColor = '#ef4444';
+        }
+        function hideError() {
+            errorMessage.classList.remove('show');
+            numberInput.style.borderColor = '';
+        }
+        function formatNumber(num, decimals = 2) {
+            if (Number.isInteger(num)) {
+                return num.toString();
+            }
+            return parseFloat(num.toFixed(decimals)).toString();
+        }
+        // Initial animation
+        document.addEventListener('DOMContentLoaded', () => {
+            numberInput.focus();
+        });
+  </script>
+</body>
+</html>