From 182cc9bbecd1eb2002437265a9e98faf17a11e57 Mon Sep 17 00:00:00 2001 From: OutRed <103283478+OutRed@users.noreply.github.com> Date: Fri, 14 Jul 2023 09:43:13 -0500 Subject: [PATCH] Add files via upload --- beta/v4/apps.html | 31 +++ beta/v4/assets/asd | 1 + beta/v4/assets/json/apps.json | 1 + beta/v4/assets/json/games.json | 1 + beta/v4/assets/splash-texts.js | 0 beta/v4/g/index.html | 31 +++ beta/v4/index.html | 475 +++++++++++++++++++++++++++++++++ beta/v4/js/cards.js | 10 + beta/v4/settings.html | 31 +++ beta/v4/styles/style.css | 369 +++++++++++++++++++++++++ 10 files changed, 950 insertions(+) create mode 100644 beta/v4/apps.html create mode 100644 beta/v4/assets/asd create mode 100644 beta/v4/assets/json/apps.json create mode 100644 beta/v4/assets/json/games.json create mode 100644 beta/v4/assets/splash-texts.js create mode 100644 beta/v4/g/index.html create mode 100644 beta/v4/index.html create mode 100644 beta/v4/js/cards.js create mode 100644 beta/v4/settings.html create mode 100644 beta/v4/styles/style.css diff --git a/beta/v4/apps.html b/beta/v4/apps.html new file mode 100644 index 00000000..f66de4db --- /dev/null +++ b/beta/v4/apps.html @@ -0,0 +1,31 @@ + + + + + + OutRed | Apps + + + + +
+

Home

+

Games

+

Apps

+

Settings

+
+ +
+ + + +
+ + + + + \ No newline at end of file diff --git a/beta/v4/assets/asd b/beta/v4/assets/asd new file mode 100644 index 00000000..2761c6cc --- /dev/null +++ b/beta/v4/assets/asd @@ -0,0 +1 @@ +fd \ No newline at end of file diff --git a/beta/v4/assets/json/apps.json b/beta/v4/assets/json/apps.json new file mode 100644 index 00000000..9e26dfee --- /dev/null +++ b/beta/v4/assets/json/apps.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/beta/v4/assets/json/games.json b/beta/v4/assets/json/games.json new file mode 100644 index 00000000..9e26dfee --- /dev/null +++ b/beta/v4/assets/json/games.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/beta/v4/assets/splash-texts.js b/beta/v4/assets/splash-texts.js new file mode 100644 index 00000000..e69de29b diff --git a/beta/v4/g/index.html b/beta/v4/g/index.html new file mode 100644 index 00000000..fb40552c --- /dev/null +++ b/beta/v4/g/index.html @@ -0,0 +1,31 @@ + + + + + + OutRed | Games + + + + +
+

Home

+

Games

+

Apps

+

Settings

+
+ +
+ + + +
+ + + + + \ No newline at end of file diff --git a/beta/v4/index.html b/beta/v4/index.html new file mode 100644 index 00000000..12e291a8 --- /dev/null +++ b/beta/v4/index.html @@ -0,0 +1,475 @@ + + + + + + OutRed | Home + + + + + + + + + +
+

Home

+

Games

+

Apps

+

Settings

+
+ +
+ +

OutRed


+ +
How are you seeing this??? + +


+ +Play Now



+ + +

+ + +
+ +
+
+
+ +
+
+
+
+

Games

+

Explore our wide variety of unblocked games.

+
+
+
+
+
+ + +
+
+
+ +
+
+
+
+

Apps

+

Use a wide variety of utilities to enjoy other sites/tools to the max.

+
+
+
+
+
+ + +
+
+
+ +
+
+
+
+

Settings

+

Want to customize this website to your style? We got you covered.

+
+
+
+
+
+ +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/beta/v4/js/cards.js b/beta/v4/js/cards.js new file mode 100644 index 00000000..ebfb308b --- /dev/null +++ b/beta/v4/js/cards.js @@ -0,0 +1,10 @@ +document.getElementById("cards").onmousemove = e => { + for(const card of document.getElementsByClassName("card")) { + const rect = card.getBoundingClientRect(), + x = e.clientX - rect.left, + y = e.clientY - rect.top; + + card.style.setProperty("--mouse-x", `${x}px`); + card.style.setProperty("--mouse-y", `${y}px`); + }; + } \ No newline at end of file diff --git a/beta/v4/settings.html b/beta/v4/settings.html new file mode 100644 index 00000000..60b6f3d6 --- /dev/null +++ b/beta/v4/settings.html @@ -0,0 +1,31 @@ + + + + + + OutRed | Settings + + + + +
+

Home

+

Games

+

Apps

+

Settings

+
+ +
+ + + +
+ + + + + \ No newline at end of file diff --git a/beta/v4/styles/style.css b/beta/v4/styles/style.css new file mode 100644 index 00000000..99ba1427 --- /dev/null +++ b/beta/v4/styles/style.css @@ -0,0 +1,369 @@ +:root { + --bg-color: rgb(20, 20, 20); + --card-color: rgb(23, 23, 23); + } + + body { + + background-color: var(--bg-color); + display: flex; + height: 100vh; + justify-content: center; + margin: 0px; + overflow: hidden; + padding: 0px; + color: rgb(240, 240, 240); + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: 400; + text-align: center; + } + + #cards { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 8px; + max-width: 916px; + width: 100%; + } + + @media (max-width: 1000px) { + .card { + width: calc(33.33% - 4px); + } + } + + #cards:hover > .card::after { + opacity: 1; + } + + .card { + background-color: rgba(255, 255, 255, 0.1); + border-radius: 10px; + cursor: pointer; + display: flex; + height: 260px; + flex-direction: column; + position: relative; + width: 300px; + } + + .card:hover::before { + opacity: 1; + } + + .card::before, + .card::after { + border-radius: inherit; + content: ""; + height: 100%; + left: 0px; + opacity: 0; + position: absolute; + top: 0px; + transition: opacity 500ms; + width: 100%; + } + + .card::before { + background: radial-gradient( + 800px circle at var(--mouse-x) var(--mouse-y), + rgba(255, 255, 255, 0.06), + transparent 40% + ); + z-index: 3; + } + + .card::after { + background: radial-gradient( + 600px circle at var(--mouse-x) var(--mouse-y), + rgba(255, 255, 255, 0.4), + transparent 40% + ); + z-index: 1; + } + + .card > .card-content { + background-color: var(--card-color); + border-radius: inherit; + display: flex; + flex-direction: column; + flex-grow: 1; + inset: 1px; + padding: 10px; + position: absolute; + z-index: 2; + } + + /* -- ↓ ↓ ↓ extra card content styles ↓ ↓ ↓ -- */ + + h1, h2, h3, h4, span { + color: rgb(240, 240, 240); + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: 400; + margin: 0px; + } + + i { + color: rgb(240, 240, 240); + } + + .card-image { + align-items: center; + display: flex; + height: 140px; + justify-content: center; + overflow: hidden; + } + + .card-image > i { + font-size: 6em; + opacity: 0.25; + } + + .card-info-wrapper { + align-items: center; + display: flex; + flex-grow: 1; + justify-content: flex-start; + padding: 0px 20px; + } + + .card-info { + align-items: flex-start; + display: flex; + gap: 10px; + } + + .card-info > i { + font-size: 1em; + height: 20px; + line-height: 20px; + } + + .card-info-title > h3 { + font-size: 1.1em; + line-height: 20px; + } + + .card-info-title > h4 { + color: rgba(255, 255, 255, 0.5); + font-size: 0.85em; + margin-top: 8px; + } + + /* -- ↓ ↓ ↓ some responsiveness ↓ ↓ ↓ -- */ + + @media(max-width: 1000px) { + body { + align-items: flex-start; + overflow: auto; + } + + #cards { + max-width: 1000px; + padding: 10px 0px; + } + + .card { + flex-shrink: 1; + width: calc(50% - 4px); + } + } + + @media(max-width: 500px) { + .card { + height: 180px; + } + + .card-image { + height: 80px; + } + + .card-image > i { + font-size: 3em; + } + + .card-info-wrapper { + padding: 0px 10px; + } + + .card-info > i { + font-size: 0.8em; + } + + .card-info-title > h3 { + font-size: 0.9em; + } + + .card-info-title > h4 { + font-size: 0.8em; + margin-top: 4px; + } + } + + @media(max-width: 320px) { + .card { + width: 100%; + } + } + + .link { + align-items: center; + backdrop-filter: blur(3px); + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 6px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); + cursor: pointer; + display: inline-flex; + gap: 5px; + left: 10px; + padding: 10px 20px; + position: fixed; + text-decoration: none; + z-index: 100; + } + + .link:hover { + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + } + + .link > i, .link > span { + height: 20px; + line-height: 20px; + } + + .link > span { + color: white; + } + + /* homepage stuff */ + .content { + margin-top: 60px; + } + + .title { + font-size: 60px; + margin: 0; + font-weight: 700; + background: -webkit-linear-gradient(rgb(0, 140, 255), rgb(0, 193, 241)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + /* Play Now button */ + .rainbow { + --border-radius: 15px; + --border-width: 4px; + appearance: none; + position: relative; + padding: 1em 2em; + border: 0; + background-color: rgb(20, 20, 20); + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 18px; + font-weight: normal; + color: #fff; + z-index: 2; + transition: .2s; + text-decoration: none; + } + + .rainbow::after { + --m-i: linear-gradient(#000, #000); + --m-o: content-box, padding-box; + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + padding: var(--border-width); + border-radius: var(--border-radius); + background-image: conic-gradient( + #488cfb, + #29dbbc, + #ddf505, + #ff9f0e, + #e440bb, + #655adc, + #488cfb + ); + -webkit-mask-image: var(--m-i), var(--m-i); + mask-image: var(--m-i), var(--m-i); + -webkit-mask-origin: var(--m-o); + mask-origin: var(--m-o); + -webkit-mask-clip: var(--m-o); + mask-composite: exclude; + -webkit-mask-composite: destination-out; + filter: hue-rotate(0); + animation: rotate-hue linear 500ms infinite; + animation-play-state: paused; + } + + .rainbow:hover::after { + animation-play-state: running; + cursor: pointer; + } + + @keyframes rotate-hue { + to { + filter: hue-rotate(1turn); + } + } + + .rainbow, + .rainbow::after { + box-sizing: border-box; + } + + .rainbow:active { + --border-width: 5px; + } + + .rainbow:hover { + cursor: pointer; + } + + /* navigation bar */ + .navigation-bar { + display: flex; + justify-content: center; + align-items: center; + background-color: var(--card-color); + padding: 20px; + color: rgb(240, 240, 240); + position: fixed; + top: 0; + left: 0; + right: 0; + } + + + .navigation-bar p { + margin: 0 15px; + cursor: pointer; + transition: .3s; + font-size: 16px; + } + + .navigation-bar p:hover { + color: rgba(255, 255, 255, 0.7); + } + + /* footer */ + footer { + background-color: var(--card-color); + color: rgb(240, 240, 240); + padding: 10px; + position: fixed; + bottom: 0; + left: 0; + right: 0; + } + + #phrase { + font-size: 20px; + } \ No newline at end of file