added glorp

Author: si-mooon

public/glorpcat1.png

@@ -1,12 +1,12 @@
 import React from 'react'
-
+import Image from 'react'
 const InfoComponent = () => {
   return (
     <div className="flex-1 bg-[#2a2a2a] rounded-2xl p-3 flex flex-col gap-3">
 
         {/* Title */}
         <h1 className="text-center text-5xl tracking-widest text-green-400">
-        GLORPYTHON
+            GLORPYTHON
         </h1>
 
         {/* Code panels */}
@@ -30,7 +30,7 @@ print(sum)`}</pre>
             <div className="bg-[#1f5c29] text-white text-s text-center py-2 tracking-widest font-bold">
             *** ALIEN CODE ***
             </div>
-            <div className="bg-[#3a9447] m-2 rounded-xl p-3">
+            <div className="bg-[#3a9447] transition m-2 rounded-xl p-3">
             <pre className="text-white text-xs leading-relaxed m-0">{`nums eats [1,2,3]
 sum eats 0
 i eats nums slowly:
@@ -48,6 +48,10 @@ print eats sum`}</pre>
         <p className="mb-2">Assume nums is already defined.</p>
         <p>(Hint: you cannot use any +-*/ or **)</p>
         </div>
+
+        <div className="group mb-2 h-10 flex">
+            <img className="h-40 ml-40" src="glorpcat1.png"/>
+        </div>
     </div>
   )
 }

public/glorpcat2.png

@@ -59,7 +59,7 @@ const OutputComponent = () => {
         <button
         onClick={runCode}
         disabled={!pyodideReady}
-        className="bg-green-600 hover:bg-green-500 disabled:bg-gray-600 text-white font-bold py-2 px-6 rounded-lg text-sm w-fit"
+        className="bg-green-600 hover:bg-green-500 hover:animate-pulse disabled:bg-gray-600 text-white font-bold py-2 px-6 rounded-lg text-sm w-fit transition duration:300"
         >
             {pyodideReady ? "submit" : "loading python..."}
         </button>

src/components/InfoComponent.tsx

@@ -1 +1,9 @@
-@import "tailwindcss";
+@import "tailwindcss";
+@theme {
+  --animate-pulse: pulse 1.5s ease-in-out infinite;
+    @keyframes pulse {
+    50% {
+        opacity: 0.7;
+    }
+}
+}