From 5ab6e2a704bbf43916f1c1ee5c0cb85fb9903152 Mon Sep 17 00:00:00 2001 From: mister2fresh <152710569+mister2fresh@users.noreply.github.com> Date: Sat, 10 Jan 2026 08:28:19 -0700 Subject: [PATCH 1/3] Submits animation files --- Art/mister2fresh-eventhorizon/index.html | 26 +++ Art/mister2fresh-eventhorizon/meta.json | 5 + Art/mister2fresh-eventhorizon/style.css | 263 +++++++++++++++++++++++ 3 files changed, 294 insertions(+) create mode 100644 Art/mister2fresh-eventhorizon/index.html create mode 100644 Art/mister2fresh-eventhorizon/meta.json create mode 100644 Art/mister2fresh-eventhorizon/style.css diff --git a/Art/mister2fresh-eventhorizon/index.html b/Art/mister2fresh-eventhorizon/index.html new file mode 100644 index 000000000..228d8fa44 --- /dev/null +++ b/Art/mister2fresh-eventhorizon/index.html @@ -0,0 +1,26 @@ + + + + + + + Event Horizon + + +
Event Horizon
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/Art/mister2fresh-eventhorizon/meta.json b/Art/mister2fresh-eventhorizon/meta.json new file mode 100644 index 000000000..b5247434c --- /dev/null +++ b/Art/mister2fresh-eventhorizon/meta.json @@ -0,0 +1,5 @@ + +{ + "artName": "Event Horizon", + "githubHandle": "mister2fresh" +} \ No newline at end of file diff --git a/Art/mister2fresh-eventhorizon/style.css b/Art/mister2fresh-eventhorizon/style.css new file mode 100644 index 000000000..7b13fb6d7 --- /dev/null +++ b/Art/mister2fresh-eventhorizon/style.css @@ -0,0 +1,263 @@ + + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + background: #000; + overflow: hidden; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + } + + .container { + position: relative; + width: 600px; + height: 600px; + } + + .black-hole { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 150px; + height: 150px; + background: radial-gradient(circle, #000 0%, #111 70%, #222 100%); + border-radius: 50%; + box-shadow: + 0 0 50px 20px rgba(0, 0, 0, 0.8), + inset 0 0 30px rgba(0, 0, 0, 1); + z-index: 10; + } + + .accretion-disk { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 500px; + height: 500px; + border-radius: 50%; + background: conic-gradient( + from 0deg, + transparent, + rgba(255, 100, 0, 0.3), + rgba(255, 150, 50, 0.5), + rgba(255, 200, 100, 0.4), + transparent + ); + animation: rotate 8s linear infinite; + } + + .ring { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; + border: 2px solid; + animation: pulse-ring 3s ease-in-out infinite; + } + + .ring1 { + width: 200px; + height: 200px; + border-color: rgba(255, 150, 50, 0.6); + animation-delay: 0s; + } + + .ring2 { + width: 300px; + height: 300px; + border-color: rgba(255, 120, 30, 0.5); + animation-delay: 1s; + } + + .ring3 { + width: 400px; + height: 400px; + border-color: rgba(255, 100, 20, 0.4); + animation-delay: 2s; + } + + .particle { + position: absolute; + width: 4px; + height: 4px; + background: #fff; + border-radius: 50%; + box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); + } + + .particle1 { + top: 20%; + left: 80%; + animation: spiral1 6s linear infinite; + } + + .particle2 { + top: 60%; + left: 10%; + animation: spiral2 7s linear infinite; + } + + .particle3 { + top: 40%; + left: 90%; + animation: spiral3 5s linear infinite; + } + + .particle4 { + top: 80%; + left: 50%; + animation: spiral4 8s linear infinite; + } + + .particle5 { + top: 10%; + left: 30%; + animation: spiral5 6.5s linear infinite; + } + + .particle6 { + top: 70%; + left: 70%; + animation: spiral6 7.5s linear infinite; + } + + .glow { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 250px; + height: 250px; + background: radial-gradient(circle, rgba(255, 150, 50, 0.3), transparent 70%); + border-radius: 50%; + animation: glow-pulse 4s ease-in-out infinite; + } + + @keyframes rotate { + from { + transform: translate(-50%, -50%) rotate(0deg); + } + to { + transform: translate(-50%, -50%) rotate(360deg); + } + } + + @keyframes pulse-ring { + 0%, 100% { + transform: translate(-50%, -50%) scale(1); + opacity: 0.6; + } + 50% { + transform: translate(-50%, -50%) scale(1.1); + opacity: 0.3; + } + } + + @keyframes glow-pulse { + 0%, 100% { + opacity: 0.5; + transform: translate(-50%, -50%) scale(1); + } + 50% { + opacity: 0.8; + transform: translate(-50%, -50%) scale(1.2); + } + } + + @keyframes spiral1 { + 0% { + transform: rotate(0deg) translateX(250px) rotate(0deg); + opacity: 1; + } + 100% { + transform: rotate(360deg) translateX(0px) rotate(-360deg); + opacity: 0; + } + } + + @keyframes spiral2 { + 0% { + transform: rotate(60deg) translateX(280px) rotate(-60deg); + opacity: 1; + } + 100% { + transform: rotate(420deg) translateX(0px) rotate(-420deg); + opacity: 0; + } + } + + @keyframes spiral3 { + 0% { + transform: rotate(120deg) translateX(260px) rotate(-120deg); + opacity: 1; + } + 100% { + transform: rotate(480deg) translateX(0px) rotate(-480deg); + opacity: 0; + } + } + + @keyframes spiral4 { + 0% { + transform: rotate(180deg) translateX(290px) rotate(-180deg); + opacity: 1; + } + 100% { + transform: rotate(540deg) translateX(0px) rotate(-540deg); + opacity: 0; + } + } + + @keyframes spiral5 { + 0% { + transform: rotate(240deg) translateX(270px) rotate(-240deg); + opacity: 1; + } + 100% { + transform: rotate(600deg) translateX(0px) rotate(-600deg); + opacity: 0; + } + } + + @keyframes spiral6 { + 0% { + transform: rotate(300deg) translateX(265px) rotate(-300deg); + opacity: 1; + } + 100% { + transform: rotate(660deg) translateX(0px) rotate(-660deg); + opacity: 0; + } + } + + .title { + position: absolute; + top: 30px; + left: 50%; + transform: translateX(-50%); + color: rgba(255, 150, 50, 0.8); + font-family: 'Courier New', monospace; + font-size: 32px; + letter-spacing: 8px; + text-transform: uppercase; + animation: flicker 3s ease-in-out infinite; + text-shadow: 0 0 10px rgba(255, 150, 50, 0.5); + } + + @keyframes flicker { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.7; + } + } From 3a493b46ee9a49267dde7fd868616f47911efeee Mon Sep 17 00:00:00 2001 From: mister2fresh <152710569+mister2fresh@users.noreply.github.com> Date: Sat, 10 Jan 2026 09:28:23 -0700 Subject: [PATCH 2/3] Remove extra indentation from CSS --- Art/mister2fresh-eventhorizon/style.css | 470 ++++++++++++------------ 1 file changed, 235 insertions(+), 235 deletions(-) diff --git a/Art/mister2fresh-eventhorizon/style.css b/Art/mister2fresh-eventhorizon/style.css index 7b13fb6d7..47474df03 100644 --- a/Art/mister2fresh-eventhorizon/style.css +++ b/Art/mister2fresh-eventhorizon/style.css @@ -1,263 +1,263 @@ - * { - margin: 0; - padding: 0; - box-sizing: border-box; - } +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} - body { - background: #000; - overflow: hidden; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - } +body { + background: #000; + overflow: hidden; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} - .container { - position: relative; - width: 600px; - height: 600px; - } +.container { + position: relative; + width: 600px; + height: 600px; +} - .black-hole { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 150px; - height: 150px; - background: radial-gradient(circle, #000 0%, #111 70%, #222 100%); - border-radius: 50%; - box-shadow: - 0 0 50px 20px rgba(0, 0, 0, 0.8), - inset 0 0 30px rgba(0, 0, 0, 1); - z-index: 10; - } +.black-hole { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 150px; + height: 150px; + background: radial-gradient(circle, #000 0%, #111 70%, #222 100%); + border-radius: 50%; + box-shadow: + 0 0 50px 20px rgba(0, 0, 0, 0.8), + inset 0 0 30px rgba(0, 0, 0, 1); + z-index: 10; +} - .accretion-disk { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 500px; - height: 500px; - border-radius: 50%; - background: conic-gradient( - from 0deg, - transparent, - rgba(255, 100, 0, 0.3), - rgba(255, 150, 50, 0.5), - rgba(255, 200, 100, 0.4), - transparent - ); - animation: rotate 8s linear infinite; - } +.accretion-disk { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 500px; + height: 500px; + border-radius: 50%; + background: conic-gradient( + from 0deg, + transparent, + rgba(255, 100, 0, 0.3), + rgba(255, 150, 50, 0.5), + rgba(255, 200, 100, 0.4), + transparent + ); + animation: rotate 8s linear infinite; +} - .ring { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 50%; - border: 2px solid; - animation: pulse-ring 3s ease-in-out infinite; - } +.ring { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; + border: 2px solid; + animation: pulse-ring 3s ease-in-out infinite; +} - .ring1 { - width: 200px; - height: 200px; - border-color: rgba(255, 150, 50, 0.6); - animation-delay: 0s; - } +.ring1 { + width: 200px; + height: 200px; + border-color: rgba(255, 150, 50, 0.6); + animation-delay: 0s; +} - .ring2 { - width: 300px; - height: 300px; - border-color: rgba(255, 120, 30, 0.5); - animation-delay: 1s; - } +.ring2 { + width: 300px; + height: 300px; + border-color: rgba(255, 120, 30, 0.5); + animation-delay: 1s; +} - .ring3 { - width: 400px; - height: 400px; - border-color: rgba(255, 100, 20, 0.4); - animation-delay: 2s; - } +.ring3 { + width: 400px; + height: 400px; + border-color: rgba(255, 100, 20, 0.4); + animation-delay: 2s; +} - .particle { - position: absolute; - width: 4px; - height: 4px; - background: #fff; - border-radius: 50%; - box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); - } +.particle { + position: absolute; + width: 4px; + height: 4px; + background: #fff; + border-radius: 50%; + box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); +} - .particle1 { - top: 20%; - left: 80%; - animation: spiral1 6s linear infinite; - } +.particle1 { + top: 20%; + left: 80%; + animation: spiral1 6s linear infinite; +} - .particle2 { - top: 60%; - left: 10%; - animation: spiral2 7s linear infinite; - } +.particle2 { + top: 60%; + left: 10%; + animation: spiral2 7s linear infinite; +} - .particle3 { - top: 40%; - left: 90%; - animation: spiral3 5s linear infinite; - } +.particle3 { + top: 40%; + left: 90%; + animation: spiral3 5s linear infinite; +} - .particle4 { - top: 80%; - left: 50%; - animation: spiral4 8s linear infinite; - } +.particle4 { + top: 80%; + left: 50%; + animation: spiral4 8s linear infinite; +} - .particle5 { - top: 10%; - left: 30%; - animation: spiral5 6.5s linear infinite; - } +.particle5 { + top: 10%; + left: 30%; + animation: spiral5 6.5s linear infinite; +} - .particle6 { - top: 70%; - left: 70%; - animation: spiral6 7.5s linear infinite; - } +.particle6 { + top: 70%; + left: 70%; + animation: spiral6 7.5s linear infinite; +} - .glow { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 250px; - height: 250px; - background: radial-gradient(circle, rgba(255, 150, 50, 0.3), transparent 70%); - border-radius: 50%; - animation: glow-pulse 4s ease-in-out infinite; - } +.glow { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 250px; + height: 250px; + background: radial-gradient(circle, rgba(255, 150, 50, 0.3), transparent 70%); + border-radius: 50%; + animation: glow-pulse 4s ease-in-out infinite; +} - @keyframes rotate { - from { - transform: translate(-50%, -50%) rotate(0deg); - } - to { - transform: translate(-50%, -50%) rotate(360deg); - } - } +@keyframes rotate { + from { + transform: translate(-50%, -50%) rotate(0deg); + } + to { + transform: translate(-50%, -50%) rotate(360deg); + } +} - @keyframes pulse-ring { - 0%, 100% { - transform: translate(-50%, -50%) scale(1); - opacity: 0.6; - } - 50% { - transform: translate(-50%, -50%) scale(1.1); - opacity: 0.3; - } - } +@keyframes pulse-ring { + 0%, 100% { + transform: translate(-50%, -50%) scale(1); + opacity: 0.6; + } + 50% { + transform: translate(-50%, -50%) scale(1.1); + opacity: 0.3; + } +} - @keyframes glow-pulse { - 0%, 100% { - opacity: 0.5; - transform: translate(-50%, -50%) scale(1); - } - 50% { - opacity: 0.8; - transform: translate(-50%, -50%) scale(1.2); - } - } +@keyframes glow-pulse { + 0%, 100% { + opacity: 0.5; + transform: translate(-50%, -50%) scale(1); + } + 50% { + opacity: 0.8; + transform: translate(-50%, -50%) scale(1.2); + } +} - @keyframes spiral1 { - 0% { - transform: rotate(0deg) translateX(250px) rotate(0deg); - opacity: 1; - } - 100% { - transform: rotate(360deg) translateX(0px) rotate(-360deg); - opacity: 0; - } - } +@keyframes spiral1 { + 0% { + transform: rotate(0deg) translateX(250px) rotate(0deg); + opacity: 1; + } + 100% { + transform: rotate(360deg) translateX(0px) rotate(-360deg); + opacity: 0; + } +} - @keyframes spiral2 { - 0% { - transform: rotate(60deg) translateX(280px) rotate(-60deg); - opacity: 1; - } - 100% { - transform: rotate(420deg) translateX(0px) rotate(-420deg); - opacity: 0; - } - } +@keyframes spiral2 { + 0% { + transform: rotate(60deg) translateX(280px) rotate(-60deg); + opacity: 1; + } + 100% { + transform: rotate(420deg) translateX(0px) rotate(-420deg); + opacity: 0; + } +} - @keyframes spiral3 { - 0% { - transform: rotate(120deg) translateX(260px) rotate(-120deg); - opacity: 1; - } - 100% { - transform: rotate(480deg) translateX(0px) rotate(-480deg); - opacity: 0; - } - } +@keyframes spiral3 { + 0% { + transform: rotate(120deg) translateX(260px) rotate(-120deg); + opacity: 1; + } + 100% { + transform: rotate(480deg) translateX(0px) rotate(-480deg); + opacity: 0; + } +} - @keyframes spiral4 { - 0% { - transform: rotate(180deg) translateX(290px) rotate(-180deg); - opacity: 1; - } - 100% { - transform: rotate(540deg) translateX(0px) rotate(-540deg); - opacity: 0; - } - } +@keyframes spiral4 { + 0% { + transform: rotate(180deg) translateX(290px) rotate(-180deg); + opacity: 1; + } + 100% { + transform: rotate(540deg) translateX(0px) rotate(-540deg); + opacity: 0; + } +} - @keyframes spiral5 { - 0% { - transform: rotate(240deg) translateX(270px) rotate(-240deg); - opacity: 1; - } - 100% { - transform: rotate(600deg) translateX(0px) rotate(-600deg); - opacity: 0; - } - } +@keyframes spiral5 { + 0% { + transform: rotate(240deg) translateX(270px) rotate(-240deg); + opacity: 1; + } + 100% { + transform: rotate(600deg) translateX(0px) rotate(-600deg); + opacity: 0; + } +} - @keyframes spiral6 { - 0% { - transform: rotate(300deg) translateX(265px) rotate(-300deg); - opacity: 1; - } - 100% { - transform: rotate(660deg) translateX(0px) rotate(-660deg); - opacity: 0; - } - } +@keyframes spiral6 { + 0% { + transform: rotate(300deg) translateX(265px) rotate(-300deg); + opacity: 1; + } + 100% { + transform: rotate(660deg) translateX(0px) rotate(-660deg); + opacity: 0; + } +} - .title { - position: absolute; - top: 30px; - left: 50%; - transform: translateX(-50%); - color: rgba(255, 150, 50, 0.8); - font-family: 'Courier New', monospace; - font-size: 32px; - letter-spacing: 8px; - text-transform: uppercase; - animation: flicker 3s ease-in-out infinite; - text-shadow: 0 0 10px rgba(255, 150, 50, 0.5); - } +.title { + position: absolute; + top: 30px; + left: 50%; + transform: translateX(-50%); + color: rgba(255, 150, 50, 0.8); + font-family: 'Courier New', monospace; + font-size: 32px; + letter-spacing: 8px; + text-transform: uppercase; + animation: flicker 3s ease-in-out infinite; + text-shadow: 0 0 10px rgba(255, 150, 50, 0.5); +} - @keyframes flicker { - 0%, 100% { - opacity: 1; - } - 50% { - opacity: 0.7; - } - } +@keyframes flicker { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.7; + } +} From 4b8d937b34dd321ae4f6b3bc1e3d5ff834bfec22 Mon Sep 17 00:00:00 2001 From: mister2fresh <152710569+mister2fresh@users.noreply.github.com> Date: Sat, 10 Jan 2026 09:55:05 -0700 Subject: [PATCH 3/3] Corrects stylesheet name and href --- Art/mister2fresh-eventhorizon/index.html | 2 +- Art/mister2fresh-eventhorizon/{style.css => styles.css} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename Art/mister2fresh-eventhorizon/{style.css => styles.css} (100%) diff --git a/Art/mister2fresh-eventhorizon/index.html b/Art/mister2fresh-eventhorizon/index.html index 228d8fa44..5f2a685a2 100644 --- a/Art/mister2fresh-eventhorizon/index.html +++ b/Art/mister2fresh-eventhorizon/index.html @@ -3,7 +3,7 @@ - + Event Horizon diff --git a/Art/mister2fresh-eventhorizon/style.css b/Art/mister2fresh-eventhorizon/styles.css similarity index 100% rename from Art/mister2fresh-eventhorizon/style.css rename to Art/mister2fresh-eventhorizon/styles.css