Spaces:

ProjectGenesis
/

loot-spinner-supreme

Running

App Files Files Community

ProjectGenesis commited on Nov 18, 2025

Commit

54f31d6

verified ·

1 Parent(s): 9b5d02f

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Nioplay Loot Box + Multiplier Demo</title>
<style>
:root {
--bg: #050505;
--accent: #ff8c00;
--accent-soft: rgba(255, 140, 0, 0.3);
--gold: #ffcc66;
--text-main: #f7f7f7;
--text-dim: #a7a7a7;
--loot-box-size: 90px;
--pill-width: 90px;
--pill-height: 40px;
--gap: 18px;
--transition-duration: 1100ms;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: radial-gradient(circle at top, #1a0d00 0%, #000 55%);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Segoe UI", sans-serif;
color: var(--text-main);
}

.module {
width: 1100px;
max-width: 100%;
border-radius: 24px;
padding: 28px 32px 36px;
background:
radial-gradient(circle at top, rgba(255, 140, 0, 0.16), transparent 65%),
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(10, 10, 10, 0.95));
box-shadow:
0 0 40px rgba(0, 0, 0, 0.9),
0 0 60px rgba(255, 140, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(18px);
}

.label {
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 6px;
}

.section {
margin-bottom: 24px;
}

.track-shell {
position: relative;
padding: 22px 0;
border-radius: 18px;
background:
radial-gradient(circle at top, rgba(255, 140, 0, 0.18), transparent 60%),
linear-gradient(to bottom, rgba(10, 10, 10, 0.98), rgba(5, 5, 5, 0.98));
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.85),
inset 0 0 0 1px rgba(255, 255, 255, 0.04);
overflow: hidden;
}

.track-wrapper {
overflow: hidden;
padding: 0 70px;
}

.track {
display: flex;
align-items: center;
gap: var(--gap);
transform: translateX(0px);
will-change: transform;
}

.selection-window {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
border-radius: 16px;
border: 2px solid var(--accent);
box-shadow:
0 0 18px rgba(255, 140, 0, 0.9),
0 0 40px rgba(255, 140, 0, 0.4);
pointer-events: none;
z-index: 4;
}

.selection-window--loot {
width: var(--loot-box-size);
height: var(--loot-box-size) + 20px;
}

.selection-window--multi {
width: var(--pill-width);
height: var(--pill-height) + 12px;
}

.selection-window::before {
content: "";
position: absolute;
inset: -16px;
border-radius: inherit;
background: radial-gradient(
circle at center,
rgba(255, 140, 0, 0.14),
transparent 60%
);
opacity: 0.8;
}

/* Loot boxes */

.loot-box {
width: var(--loot-box-size);
height: var(--loot-box-size);
border-radius: 18px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.08);
background: radial-gradient(circle at top, #171717, #050505);
box-shadow:
0 8px 18px rgba(0, 0, 0, 0.85),
0 0 18px rgba(0, 0, 0, 0.7);
overflow: hidden;
transition:
transform 160ms ease-out,
box-shadow 160ms ease-out,
border-color 160ms ease-out,
filter 160ms ease-out;
}

.loot-box::before {
content: "";
position: absolute;
inset: 8px;
border-radius: 14px;
border: 2px solid rgba(255, 255, 255, 0.16);
box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.9);
z-index: 1;
}

.loot-box-inner {
position: relative;
z-index: 2;
width: 48px;
height: 48px;
border-radius: 14px;
background: radial-gradient(circle at top, #222, #000);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 14px rgba(0, 0, 0, 0.8);
}

.loot-box-inner::before {
content: "";
width: 22px;
height: 22px;
border-radius: 6px;
border: 2px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.loot-box[data-rarity="green"] {
box-shadow: 0 0 18px rgba(0, 200, 120, 0.7);
}

.loot-box[data-rarity="blue"] {
box-shadow: 0 0 18px rgba(80, 160, 255, 0.8);
}

.loot-box[data-rarity="purple"] {
box-shadow: 0 0 20px rgba(160, 80, 255, 0.85);
}

.loot-box[data-rarity="gold"] {
box-shadow: 0 0 22px rgba(255, 190, 70, 0.95);
}

.loot-box.selected {
transform: scale(1.12);
border-color: rgba(255, 140, 0, 0.95);
filter: brightness(1.1);
box-shadow:
0 0 26px rgba(255, 140, 0, 0.95),
0 0 60px rgba(255, 140, 0, 0.75);
}

.loot-box.motion-blur {
filter: blur(1px) brightness(0.9);
opacity: 0.9;
}

/* Multiplier pills */

.multi-pill {
min-width: var(--pill-width);
height: var(--pill-height);
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 700;
color: #ffd8a0;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(6px);
box-shadow:
0 0 8px rgba(0, 0, 0, 0.6),
inset 0 0 6px rgba(255, 255, 255, 0.1);
transition:
transform 140ms ease-out,
color 140ms ease-out,
box-shadow 140ms ease-out,
filter 140ms ease-out;
}

.multi-pill.selected {
transform: scale(1.18);
color: #fff2cc;
box-shadow:
0 0 20px rgba(255, 140, 0, 0.95),
0 0 50px rgba(255, 140, 0, 0.6);
}

.multi-pill.motion-blur {
filter: blur(1px) brightness(0.95);
opacity: 0.9;
}

/* Spin button */

.actions {
display: flex;
justify-content: center;
margin-top: 10px;
}

.spin-btn {
min-width: 220px;
border: none;
border-radius: 999px;
padding: 12px 32px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
background: radial-gradient(circle at top, #ffe5a8, #ff8c00);
color: #1a0900;
box-shadow:
0 0 30px rgba(255, 140, 0, 0.95),
0 14px 26px rgba(0, 0, 0, 0.9);
position: relative;
overflow: hidden;
transition:
transform 120ms ease-out,
box-shadow 120ms ease-out,
filter 120ms ease-out;
}

.spin-btn::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.35), transparent 60%);
opacity: 0.8;
pointer-events: none;
mix-blend-mode: screen;
}

.spin-btn:active {
transform: translateY(1px) scale(0.98);
box-shadow:
0 0 18px rgba(255, 140, 0, 0.8),
0 6px 10px rgba(0, 0, 0, 0.9);
filter: brightness(0.96);
}

.spin-btn.disabled {
cursor: wait;
filter: grayscale(0.1) brightness(0.9);
box-shadow:
0 0 14px rgba(255, 140, 0, 0.6),
0 8px 18px rgba(0, 0, 0, 0.9);
}

/* Popup */

.popup-backdrop {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: radial-gradient(circle at center, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.95));
z-index: 50;
}

.popup-backdrop.visible {
display: flex;
}

.popup {
width: 360px;
max-width: 90%;
padding: 22px 22px 20px;
border-radius: 20px;
background:
radial-gradient(circle at top, rgba(255, 140, 0, 0.22), transparent 60%),
linear-gradient(135deg, rgba(25, 25, 25, 0.98), rgba(5, 5, 5, 0.98));
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow:
0 0 40px rgba(0, 0, 0, 1),
0 0 50px rgba(255, 140, 0, 0.85);
text-align: center;
position: relative;
overflow: hidden;
}

.popup::before {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(circle at center, rgba(255, 140, 0, 0.25), transparent 70%);
opacity: 0.7;
pointer-events: none;
}

.popup-title {
position: relative;
z-index: 1;
font-size: 14px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 8px;
}

.popup-total {
position: relative;
z-index: 1;
font-size: 30px;
font-weight: 800;
color: var(--gold);
text-shadow:
0 0 18px rgba(255, 204, 102, 0.9),
0 0 40px rgba(255, 140, 0, 0.85);
margin-bottom: 6px;
}

.popup-line {
position: relative;
z-index: 1;
font-size: 13px;
color: var(--text-dim);
margin-bottom: 3px;
}

.popup-close {
position: relative;
z-index: 1;
margin-top: 12px;
border: none;
border-radius: 999px;
padding: 8px 20px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
background: radial-gradient(circle at top, #ffe0a0, #ff8c00);
color: #1a0900;
box-shadow:
0 0 20px rgba(255, 140, 0, 0.9),
0 8px 16px rgba(0, 0, 0, 0.9);
}

@media
(max-width: 900px) {
.module {
padding: 20px 16px 24px;
}
.track-wrapper {
padding: 0 40px;
}
}
</style>
</head>
<body>
<div class="module">

<div class="section">
<div class="label">LOOT BOX SPIN</div>
<div class="track-shell">
<div class="selection-window selection-window--loot"></div>
<div class="track-wrapper" id="lootWrapper">
<div cl

Files changed (5) hide show

README.md +8 -5
components/navbar.js +58 -0
index.html +79 -19
script.js +121 -0
style.css +49 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Loot Spinner Supreme
-emoji: 🔥
-colorFrom: indigo
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Loot Spinner Supreme 🎰
+colorFrom: green
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js ADDED Viewed

	@@ -0,0 +1,58 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: rgba(17, 24, 39, 0.8);
+          backdrop-filter: blur(10px);
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .nav-link {
+          transition: all 0.3s ease;
+        }
+        .nav-link:hover {
+          color: #f59e0b;
+        }
+        .logo {
+          text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
+        }
+      </style>
+      <nav class="w-full py-4 px-6">
+        <div class="container mx-auto flex justify-between items-center">
+          <a href="#" class="text-2xl font-bold text-orange-400 flex items-center logo">
+            <i data-feather="package" class="mr-2"></i>
+            LootSpin
+          </a>
+          <div class="hidden md:flex space-x-8">
+            <a href="#" class="text-gray-300 nav-link">Home</a>
+            <a href="#" class="text-gray-300 nav-link">Prizes</a>
+            <a href="#" class="text-gray-300 nav-link">About</a>
+            <a href="#" class="text-orange-400 font-medium nav-link">Play Now</a>
+          </div>
+          <button class="md:hidden text-gray-300">
+            <i data-feather="menu"></i>
+          </button>
+        </div>
+      </nav>
+    `;
+    // Replace feather icons in shadow DOM
+    setTimeout(() => {
+      const featherScript = document.createElement('script');
+      featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
+      this.shadowRoot.appendChild(featherScript);
+      featherScript.onload = () => {
+        if (window.feather) {
+          window.feather.replace({ class: 'feather', 'stroke-width': 2 });
+        }
+      };
+    }, 0);
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,79 @@
-<!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>Loot Spinner Supreme</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/feather-icons"></script>
+  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+  <link rel="stylesheet" href="style.css">
+  <script src="components/navbar.js"></script>
+</head>
+<body class="bg-gradient-to-b from-gray-900 to-black min-h-screen">
+  <custom-navbar></custom-navbar>
+  <main class="container mx-auto px-4 py-12 max-w-6xl">
+    <section class="bg-gray-800/50 backdrop-blur-lg rounded-xl border border-gray-700 p-8 shadow-2xl shadow-orange-500/10 mb-12">
+      <h1 class="text-4xl font-bold text-center text-orange-400 mb-6">
+        <i data-feather="package" class="inline mr-3"></i>
+        Loot Spinner Supreme
+      </h1>
+      <p class="text-gray-300 text-center max-w-2xl mx-auto mb-8">
+        Spin to win amazing prizes with our multiplier system! Every spin gives you a chance to multiply your winnings.
+      </p>
+      <!-- Loot Box Section -->
+      <div class="mb-12">
+        <h2 class="text-xl font-semibold text-orange-300 mb-4 flex items-center">
+          <i data-feather="box" class="mr-2"></i> Loot Boxes
+        </h2>
+        <div id="lootBoxes" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-6">
+          <!-- Loot boxes will be generated by JavaScript -->
+        </div>
+      </div>
+      <!-- Multiplier Section -->
+      <div class="mb-8">
+        <h2 class="text-xl font-semibold text-orange-300 mb-4 flex items-center">
+          <i data-feather="zap" class="mr-2"></i> Multiplier
+        </h2>
+        <div id="multiplierSlider" class="flex items-center justify-center space-x-4 mb-6">
+          <!-- Multiplier options will be generated by JavaScript -->
+        </div>
+      </div>
+      <!-- Spin Button -->
+      <div class="text-center mt-10">
+        <button id="spinButton" class="bg-gradient-to-r from-orange-500 to-amber-600 hover:from-orange-600 hover:to-amber-700 text-white font-bold py-4 px-8 rounded-full text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
+          SPIN TO WIN
+          <i data-feather="rotate-cw" class="ml-2 animate-spin hidden" id="spinnerIcon"></i>
+        </button>
+      </div>
+    </section>
+    <!-- Results Modal -->
+    <div id="resultModal" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 hidden">
+      <div class="bg-gray-800 border border-orange-500/30 rounded-xl p-8 max-w-md w-full mx-4 backdrop-blur-sm">
+        <div class="text-center">
+          <i data-feather="award" class="text-amber-400 w-16 h-16 mx-auto mb-4"></i>
+          <h3 class="text-2xl font-bold text-amber-400 mb-2">You Won!</h3>
+          <p class="text-gray-300 mb-1">Base Prize: <span id="basePrize" class="text-white">0</span> SC</p>
+          <p class="text-gray-300 mb-1">Multiplier: ×<span id="multiplierValue" class="text-white">1</span></p>
+          <div class="border-t border-gray-700 my-4"></div>
+          <p class="text-3xl font-bold text-amber-300 mt-4">Total: <span id="totalPrize">0</span> SC</p>
+          <button id="closeModal" class="mt-6 bg-orange-500 hover:bg-orange-600 text-white font-medium py-2 px-6 rounded-full transition-colors duration-300">
+            Claim Prize
+          </button>
+        </div>
+      </div>
+    </div>
+  </main>
+  <script src="script.js"></script>
+  <script>
+    feather.replace();
+  </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,121 @@

+document.addEventListener('DOMContentLoaded', function() {
+  const lootBoxesContainer = document.getElementById('lootBoxes');
+  const multiplierSlider = document.getElementById('multiplierSlider');
+  const spinButton = document.getElementById('spinButton');
+  const resultModal = document.getElementById('resultModal');
+  const closeModal = document.getElementById('closeModal');
+  const spinnerIcon = document.getElementById('spinnerIcon');
+  // Loot box data
+  const lootBoxes = [
+    { value: 10, rarity: 'common', color: 'text-gray-300' },
+    { value: 20, rarity: 'uncommon', color: 'text-green-400' },
+    { value: 50, rarity: 'rare', color: 'text-blue-400' },
+    { value: 100, rarity: 'epic', color: 'text-purple-400' },
+    { value: 200, rarity: 'legendary', color: 'text-amber-400' },
+    { value: 5, rarity: 'common', color: 'text-gray-300' },
+    { value: 15, rarity: 'uncommon', color: 'text-green-400' },
+    { value: 30, rarity: 'rare', color: 'text-blue-400' },
+    { value: 75, rarity: 'epic', color: 'text-purple-400' },
+    { value: 150, rarity: 'legendary', color: 'text-amber-400' }
+  ];
+  // Multiplier options
+  const multipliers = [1, 1.5, 2, 2.5, 3, 5, 10];
+  // Generate loot boxes
+  lootBoxes.forEach((box, index) => {
+    const boxElement = document.createElement('div');
+    boxElement.className = 'loot-box flex flex-col items-center justify-center';
+    boxElement.dataset.value = box.value;
+    boxElement.dataset.rarity = box.rarity;
+    boxElement.innerHTML = `
+      <i data-feather="package" class="w-10 h-10 ${box.color}"></i>
+      <span class="mt-2 font-medium ${box.color}">${box.value} SC</span>
+      <span class="text-xs text-gray-400">${box.rarity}</span>
+    `;
+    lootBoxesContainer.appendChild(boxElement);
+  });
+  // Generate multiplier options
+  multipliers.forEach(multiplier => {
+    const option = document.createElement('div');
+    option.className = 'multiplier-option';
+    option.textContent = `×${multiplier}`;
+    option.dataset.multiplier = multiplier;
+    option.addEventListener('click', function() {
+      document.querySelectorAll('.multiplier-option').forEach(opt => {
+        opt.classList.remove('selected');
+      });
+      this.classList.add('selected');
+    });
+    multiplierSlider.appendChild(option);
+  });
+  // Set first multiplier as default selected
+  multiplierSlider.firstElementChild?.classList.add('selected');
+  // Spin button functionality
+  spinButton.addEventListener('click', function() {
+    const selectedMultiplier = parseFloat(document.querySelector('.multiplier-option.selected')?.dataset.multiplier || '1');
+    const lootBoxElements = document.querySelectorAll('.loot-box');
+    // Show loading state
+    spinButton.disabled = true;
+    spinnerIcon.classList.remove('hidden');
+    // Clear previous selection
+    lootBoxElements.forEach(box => box.classList.remove('active'));
+    // Random selection animation
+    let counter = 0;
+    const totalIterations = 20;
+    const interval = setInterval(() => {
+      // Remove active class from all
+      lootBoxElements.forEach(box => box.classList.remove('active'));
+      // Select random box
+      const randomIndex = Math.floor(Math.random() * lootBoxElements.length);
+      lootBoxElements[randomIndex].classList.add('active');
+      counter++;
+      // Slow down at the end
+      if (counter > totalIterations * 0.7) {
+        clearInterval(interval);
+        setTimeout(() => {
+          // Final selection
+          const finalIndex = Math.floor(Math.random() * lootBoxElements.length);
+          lootBoxElements.forEach(box => box.classList.remove('active'));
+          lootBoxElements[finalIndex].classList.add('active');
+          // Show result
+          const prize = parseFloat(lootBoxElements[finalIndex].dataset.value);
+          const total = prize * selectedMultiplier;
+          document.getElementById('basePrize').textContent = prize;
+          document.getElementById('multiplierValue').textContent = selectedMultiplier;
+          document.getElementById('totalPrize').textContent = total.toFixed(2);
+          resultModal.classList.remove('hidden');
+          // Reset button
+          spinButton.disabled = false;
+          spinnerIcon.classList.add('hidden');
+        }, 300);
+      }
+    }, 100);
+  });
+  // Close modal
+  closeModal.addEventListener('click', function() {
+    resultModal.classList.add('hidden');
+  });
+  // Replace feather icons
+  feather.replace();
+});

style.css CHANGED Viewed

@@ -1,28 +1,58 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* Custom styles */
+.loot-box {
+  @apply bg-gradient-to-b from-gray-800 to-gray-900 border border-gray-700 rounded-xl p-4 shadow-lg cursor-pointer transition-all duration-300;
+  perspective: 1000px;
+}
+.loot-box:hover {
+  @apply border-orange-500 shadow-orange-500/20;
+  transform: translateY(-4px);
+}
+.loot-box.active {
+  @apply border-amber-400 shadow-amber-400/40;
+  animation: pulse 1.5s infinite;
+}
+.multiplier-option {
+  @apply bg-gray-700 text-white rounded-full px-6 py-2 cursor-pointer transition-all duration-200;
 }
+.multiplier-option:hover {
+  @apply bg-gray-600;
 }
+.multiplier-option.selected {
+  @apply bg-gradient-to-r from-amber-500 to-orange-500 text-gray-900 font-bold;
+  transform: scale(1.05);
 }
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
+  }
 }
+/* Spin animation */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
+.animate-spin {
+  animation: spin 1s linear infinite;
+}