From 00b63d7c478eef9c4938faf2e5b7300383c4e546 Mon Sep 17 00:00:00 2001
From: Samrendra <43675000+SamrendraS@users.noreply.github.com>
Date: Thu, 1 Aug 2024 12:31:09 +0530
Subject: [PATCH] Adding arcade themed styles (#19)

* base UI changes

* added scanlines and arcade ui changes

* fixing merge conflicts

* adding loader and more changes to css file

* adding marquee changes

* adding arcade colors

* looks good

* removing unused css

* adding media queries
---
 askeladd-dvm-marketplace/src/app/globals.css | 372 ++++++++++++++++++-
 askeladd-dvm-marketplace/src/app/page.tsx    | 141 +++----
 askeladd-dvm-marketplace/tailwind.config.ts  |  13 +-
 3 files changed, 442 insertions(+), 84 deletions(-)

diff --git a/askeladd-dvm-marketplace/src/app/globals.css b/askeladd-dvm-marketplace/src/app/globals.css
index 479e07d..b44340d 100644
--- a/askeladd-dvm-marketplace/src/app/globals.css
+++ b/askeladd-dvm-marketplace/src/app/globals.css
@@ -1,28 +1,372 @@
-@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --neon-green: #4cff1a;  
+  --crt-green: #39ff14;   
+  --neon-pink: #ff69b4;
+  --neon-blue: #4169e1;
+  --neon-yellow: #ffd700;
+  --neon-orange: #ffa500;
+  --neon-red: #ff4500;
+  --dark-purple: #1a0836;
+}
+
 body {
   background-color: #000;
-  color: #00ff00;
+  color: var(--neon-green);
+  font-family: 'Press Start 2P', cursive;
+  overflow-x: hidden;
+}
+
+.crt-overlay {
+  content: " ";
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: 
+    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
+    linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.03));
+  z-index: 2;
+  background-size: 100% 3px, 3px 100%;
+  pointer-events: none;
+  animation: flicker 0.15s infinite;
+}
+
+@keyframes flicker {
+  0% { opacity: 0.97; }
+  50% { opacity: 1; }
+  100% { opacity: 0.98; }
+}
+
+.scanlines {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+  background: linear-gradient(to bottom, 
+    rgba(255,255,255,0), rgba(255,255,255,0) 50%, 
+    rgba(0,0,0,.1) 50%, rgba(0,0,0,.1));
+  background-size: 100% 4px;
+  animation: scanline 10s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes scanline {
+  0% { background-position: 0 0; }
+  100% { background-position: 0 100%; }
+}
+
+.arcade-cabinet {
+  position: relative;
+  max-width: 740px;
+  width: 90%; 
+  margin: 2rem auto 4rem;
+  padding: 1rem; 
+  margin: 2rem auto 4rem; 
+  padding: 2rem;
+  background-color: #111;
+  border: 12px solid var(--neon-green);
+  box-shadow: 
+    0 0 0 4px #000000,
+    0 0 0 8px var(--neon-green),
+    0 0 20px rgba(50, 205, 50, 0.4);
+  border-radius: 10px;
+  background-image: 
+    linear-gradient(45deg, #0a0a0a 25%, transparent 25%), 
+    linear-gradient(-45deg, #0a0a0a 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #0a0a0a 75%),
+    linear-gradient(-45deg, transparent 75%, #0a0a0a 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+
+.cabinet-content {
+  background-color: rgba(0,0,0,0.8);
+  border: 2px solid var(--neon-pink);
+  padding: 1rem;
+  border-radius: 5px;
+  position: relative;
+  overflow: hidden;
+  background-image: 
+    linear-gradient(45deg, #0a0a0a 25%, transparent 25%), 
+    linear-gradient(-45deg, #0a0a0a 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #0a0a0a 75%),
+    linear-gradient(-45deg, transparent 75%, #0a0a0a 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+
+.cabinet-content::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  right: -50%;
+  bottom: -50%;
+  background: radial-gradient(
+    circle at center,
+    transparent 30%,
+    rgba(0,0,0,0.6) 100%
+  );
+  pointer-events: none;
+}
+
+.game-screen {
+  position: relative;
+  overflow: hidden;
+  border-radius: 20px;
+  box-shadow: inset 0 0 20px rgba(0,255,0,0.3);
+}
+
+.game-screen::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1)), 
+    linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0.1));
+  background-size: 4px 4px;
+  background-position: 0 0, 2px 2px;
+  pointer-events: none;
 }
 
-.spinner {
-  border: 4px solid rgba(0, 255, 0, 0.1);
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  border-left-color: #00ff00;
-  animation: spin 1s ease infinite;
+.neon-text {
+  text-shadow: 
+    0 0 3px var(--neon-green),
+    0 0 6px var(--neon-green),
+    0 0 12px var(--neon-green);
+  animation: textGlitch 3s infinite;
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
+@keyframes textGlitch {
+  0%, 100% { transform: none; opacity: 1; }
+  7% { transform: skew(-0.5deg, -0.9deg); opacity: 0.75; }
+  10% { transform: none; opacity: 1; }
+  27% { transform: none; opacity: 1; }
+  30% { transform: skew(0.8deg, -0.1deg); opacity: 0.75; }
+  35% { transform: none; opacity: 1; }
+  52% { transform: none; opacity: 1; }
+  55% { transform: skew(-1deg, 0.2deg); opacity: 0.75; }
+  50% { transform: none; opacity: 1; }
+  72% { transform: none; opacity: 1; }
+  75% { transform: skew(0.4deg, 1deg); opacity: 0.75; }
+  80% { transform: none; opacity: 1; }
+}
+
+.neon-text-sm {
+  font-size: 0.8rem;
+  line-height: 1.2;
+  text-shadow: 
+    0 0 1px var(--neon-green),
+    0 0 2px var(--neon-green),
+    0 0 4px var(--neon-green);
+}
+
+.marquee {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  background: var(--dark-purple);
+  border: 2px solid var(--neon-green);
+  padding: 10px 0;
+  z-index: 1000; 
+  font-size: 0.8rem; 
+}
+
+@media (max-width: 640px) {
+  .marquee {
+    font-size: 0.6rem;
   }
-  100% {
-    transform: rotate(360deg);
+}
+
+.marquee span {
+  display: inline-block;
+  width: max-content;
+  padding-left: 100%;
+  animation: marquee 30s linear infinite;
+  color: var(--neon-yellow);
+  text-shadow: 0 0 3px var(--neon-orange);
+}
+
+@keyframes marquee {
+  0% { transform: translate(0, 0); }
+  100% { transform: translate(-100%, 0); }
+}
+
+.glitch {
+  position: relative;
+  color: var(--neon-green);
+  text-shadow: 0 0 3px var(--neon-green);
+}
+
+.glitch::before,
+.glitch::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.glitch::before {
+  left: 2px;
+  text-shadow: -1px 0 var(--neon-pink);
+  animation: glitch-animation 2s infinite linear alternate-reverse;
+}
+
+.glitch::after {
+  left: -2px;
+  text-shadow: 1px 0 var(--neon-blue);
+  animation: glitch-animation 3s infinite linear alternate-reverse;
+}
+
+@media (max-width: 640px) {
+  .glitch {
+    font-size: 1.4rem;
+    word-break: break-word;
+    hyphens: auto;
   }
+
+  .neon-text-sm {
+    font-size: 0.7rem;
+  }
+
+  .arcade-cabinet {
+    border-width: 8px;
+  }
+
+  .cabinet-content {
+    padding: 0.5rem; 
+  }
+
+  .game-screen {
+    padding: 1rem; 
+  }
+
+  input[type="number"] {
+    font-size: 0.8rem; 
+  }
+
+  .submit-job-button,
+  .verify-proof-button {
+    font-size: 0.8rem; 
+    padding: 0.4rem 0.8rem; 
+  }
+
+  .proof-container pre {
+    font-size: 0.6rem;
+  }
+}
+
+@keyframes glitch-animation {
+  0% { clip-path: inset(71% 0 10% 0); text-shadow: 1px 0 var(--neon-pink), -1px 0 var(--neon-yellow); }
+  20% { clip-path: inset(29% 0 71% 0); text-shadow: -1px 0 var(--neon-pink), 1px 0 var(--neon-yellow); }
+  40% { clip-path: inset(57% 0 43% 0); text-shadow: 1px 0 var(--neon-yellow), -1px 0 var(--neon-pink); }
+  60% { clip-path: inset(14% 0 86% 0); text-shadow: -1px 0 var(--neon-yellow), 1px 0 var(--neon-pink); }
+  80% { clip-path: inset(86% 0 14% 0); text-shadow: 1px 0 var(--neon-pink), -1px 0 var(--neon-yellow); }
+  100% { clip-path: inset(43% 0 57% 0); text-shadow: -1px 0 var(--neon-pink), 1px 0 var(--neon-yellow); }
+}
+
+.blink {
+  animation: blink 1s steps(2, start) infinite;
+}
+
+@keyframes blink {
+  to { visibility: hidden; }
 }
+
+.pixel-spinner {
+  width: 32px;
+  height: 32px;
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect fill="%2332cd32" x="0" y="0" width="16" height="16"/><rect fill="%2332cd32" x="16" y="16" width="16" height="16"/><rect fill="%2332cd32" x="32" y="32" width="16" height="16"/><rect fill="%2332cd32" x="48" y="48" width="16" height="16"/></svg>');
+  animation: pixel-spinner-rotate 1s steps(4) infinite;
+}
+
+@keyframes pixel-spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+.proof-container {
+  background: rgba(26, 8, 54, 0.5);
+  border: 2px solid var(--neon-pink);
+  border-radius: 8px;
+  padding: 16px;
+  margin-top: 24px;
+  box-shadow: 0 0 8px var(--neon-pink);
+}
+
+input:focus, button:focus {
+  outline: none;
+  box-shadow: 0 0 8px var(--neon-blue);
+}
+
+.submit-job-button,
+.verify-proof-button {
+  width: 100%;
+  background: var(--neon-green);
+  color: #000000;
+  border: 1px solid #000000;
+  box-shadow: 0 0 8px var(--neon-blue);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: bold;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  transition: all 0.3s ease;
+  text-shadow: none;
+}
+
+.submit-job-button:hover,
+.verify-proof-button:hover {
+  background: var(--neon-pink);
+  box-shadow: 0 0 12px var(--neon-pink);
+}
+
+.submit-job-button:active,
+.verify-proof-button:active {
+  transform: translateY(2px);
+  box-shadow: 0 0 4px var(--neon-pink);
+}
+
+.submit-job-button:disabled,
+.verify-proof-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.crt-curve {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 10;
+  background: 
+    radial-gradient(
+      ellipse at center,
+      transparent 50%,
+      rgba(0, 0, 0, 0.3) 100%
+    );
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
\ No newline at end of file
diff --git a/askeladd-dvm-marketplace/src/app/page.tsx b/askeladd-dvm-marketplace/src/app/page.tsx
index ebd0dbb..fb43e50 100644
--- a/askeladd-dvm-marketplace/src/app/page.tsx
+++ b/askeladd-dvm-marketplace/src/app/page.tsx
@@ -226,10 +226,10 @@ export default function Home() {
   /** TODO fetch subscribed event
     * fix search jobId => check if relayer support NIP-50 
     * Fetch Job result from the Prover
-    * - Tags: By reply of the event_id of the job request?
-    * - By author
-    * - Timestamp since/until (doesn't work as expected for me)
-  */
+     * - Tags: By reply of the event_id of the job request?
+     * - By author
+     * - Timestamp since/until (doesn't work as expected for me)
+     */
   const fetchEventsProof = async () => {
     console.log("fetch events job result proof")
     // if(jobEventResult && jobId)return;
@@ -279,7 +279,7 @@ export default function Home() {
         setIsLoading(true);
         const prove_result = prove_and_verify(logSize, claim);
         console.log("prove_result", prove_result);
-        const serialised_proof_from_nostr_event =  JSON.stringify(starkProof);
+        const serialised_proof_from_nostr_event = JSON.stringify(starkProof);
         console.log("serialised_proof_from_nostr_event", serialised_proof_from_nostr_event);
         const verify_result = verify_stark_proof(logSize, claim, serialised_proof_from_nostr_event);
         console.log("verify result", verify_result);
@@ -319,76 +319,81 @@ export default function Home() {
   };
 
   return (
-    <main className="min-h-screen bg-black text-green-400 font-mono p-8">
-      <h1 className="text-4xl mb-8 text-center">Askeladd DVM Marketplace</h1>
-      <p className="text-center">Censorship global proving network</p>
-      <p className="text-center mb-8">Powered by Nostr and Circle STARKs.</p>
-
-      <div className="max-w-md mx-auto bg-gray-900 p-6 rounded-lg shadow-lg">
-        <div className="mb-4">
-          <label className="block mb-2">Log Size</label>
-          <input
-            type="number"
-            value={logSize}
-            onChange={(e) => setLogSize(Number(e.target.value))}
-            className="w-full bg-gray-800 text-green-400 px-3 py-2 rounded"
-          />
-        </div>
-
-        <div className="mb-4">
-          <label className="block mb-2">Claim</label>
-          <input
-            type="number"
-            value={claim}
-            onChange={(e) => setClaim(Number(e.target.value))}
-            className="w-full bg-gray-800 text-green-400 px-3 py-2 rounded"
-          />
-        </div>
-
-        <button
-          onClick={submitJob}
-          disabled={isLoading}
-          className={`w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded ${isLoading ? "opacity-50 cursor-not-allowed" : ""
-            }`}
-        >
-          {isLoading ? "Processing..." : "Submit Job"}
-        </button>
-      </div>
-
-      {isWaitingJob && <div className="spinner mt-4 mx-auto"></div>}
+    <main className="min-h-screen bg-black text-neon-green font-arcade p-4 pb-16 relative overflow-hidden">
+      <div className="crt-overlay"></div>
+      <div className="scanlines"></div>
+      <div className="crt-curve"></div>
+      <div className="arcade-cabinet">
+        <div className="cabinet-content">
+          <h1 className="text-4xl mb-4 text-center glitch neon-text" data-text="Askeladd DVM Arcade">Askeladd DVM Marketplace</h1>
+          <p className="text-center blink neon-text-sm">Censorship resistant global proving network</p>
+          <p className="text-center blink neon-text-sm">Powered by Nostr and Circle STARKs.</p>
+          <div className="max-w-md mx-auto bg-dark-purple p-6 rounded-lg shadow-neon mt-8 relative game-screen">
+            <div className="mb-4">
+              <label className="block mb-2 text-neon-pink">Log Size</label>
+              <input
+                type="number"
+                value={logSize}
+                onChange={(e) => setLogSize(Number(e.target.value))}
+                className="w-full bg-black text-neon-green px-3 py-2 rounded border-neon-green border-2"
+              />
+            </div>
 
-      {jobId && (
-        <div className="mt-8 text-center">
-          <p >Job ID: {jobId}</p>
-          <p>Status: {proofStatus}</p>
-          {isLoading && <div className="spinner mt-4 mx-auto"></div>}
+            <div className="mb-4">
+              <label className="block mb-2 text-neon-pink">Claim</label>
+              <input
+                type="number"
+                value={claim}
+                onChange={(e) => setClaim(Number(e.target.value))}
+                className="w-full bg-black text-neon-green px-3 py-2 rounded border-neon-green border-2"
+              />
+            </div>
 
-          {error && <p>Error: {error}</p>}
-          {proof && (
-            <div>
-              <p className="mt-4">Proof received:</p>
-              <pre className="bg-gray-800 p-4 rounded mt-2 overflow-x-auto">
-                {proof}
-              </pre>
-              {starkProof &&
+            <button
+              onClick={submitJob}
+              disabled={isLoading}
+              className={`submit-job-button ${isLoading ? "opacity-50 cursor-not-allowed" : ""
+                }`}
+            >
+              {isLoading ? "PROCESSING..." : "SUBMIT JOB"}
+            </button>
+          </div>
+          {isLoading && <div className="pixel-spinner mt-4 mx-auto"></div>}
 
-                <>
-                  <p>Proof of work nonce: {starkProof?.commitment_scheme_proof?.proof_of_work?.nonce}</p>
-                </>
+          {jobId && (
+            <div className="mt-8 text-center">
+              <p className="text-neon-orange text-sm sm:text-base">Job ID: <span className="break-all">{jobId}</span></p>
+              <p className="text-neon-yellow text-sm sm:text-base">Status: {proofStatus}</p>
 
-              }
-              <button
-                onClick={verifyProofHandler}
-                disabled={isLoading}
-                className={`mt-4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ${isLoading ? "opacity-50 cursor-not-allowed" : ""
-                  }`}
-              >
-                {isLoading ? "Verifying..." : "Verify Proof"}
-              </button>
+              {error && <p className="text-neon-red blink">Error: {error}</p>}
+              {proof && (
+                <div className="proof-container">
+                  <p className="mt-4 text-neon-pink">Proof received:</p>
+                  <pre className="bg-dark-purple p-4 rounded mt-2 overflow-x-auto text-neon-green text-xs">
+                    {proof}
+                  </pre>
+                  {starkProof && (
+                    <p className="text-neon-yellow">
+                      Proof of work nonce: {starkProof?.commitment_scheme_proof?.proof_of_work?.nonce}
+                    </p>
+                  )}
+                  <button
+                    onClick={verifyProofHandler}
+                    disabled={isLoading}
+                    className={`verify-proof-button mt-4 ${isLoading ? "opacity-50 cursor-not-allowed" : ""
+                      }`}
+                  >
+                    {isLoading ? "VERIFYING..." : "VERIFY PROOF"}
+                  </button>
+                </div>
+              )}
             </div>
           )}
         </div>
-      )}
+      </div>
+      <div className="marquee">
+        <span>Welcome to Askeladd DVM Marketplace! Prove your claims and conquer the blockchain realm!</span>
+      </div>
     </main>
   );
 }
diff --git a/askeladd-dvm-marketplace/tailwind.config.ts b/askeladd-dvm-marketplace/tailwind.config.ts
index 552f3b9..9a10e1f 100644
--- a/askeladd-dvm-marketplace/tailwind.config.ts
+++ b/askeladd-dvm-marketplace/tailwind.config.ts
@@ -8,9 +8,18 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        mono: ["Press Start 2P", "monospace"],
+        arcade: ['"Press Start 2P"', 'cursive'],
+      },
+      colors: {
+        'neon-green': '#00ff00',
+        'neon-pink': '#ff00ff',
+        'neon-blue': '#00ffff',
+        'neon-yellow': '#ffff00',
+        'neon-orange': '#ff8000',
+        'neon-red': '#ff0000',
+        'dark-purple': '#2a0e61',
       },
     },
   },
   plugins: [],
-};
+};
\ No newline at end of file