From 3599798a666191afe9b6a6475d247a0a73df6206 Mon Sep 17 00:00:00 2001 From: Nebelung Date: Sat, 15 Apr 2023 00:32:03 +0000 Subject: [PATCH] Version 1.8 --- CHANGELOG.md | 8 +++-- LICENSE | 2 +- package-lock.json | 4 +-- package.json | 2 +- src/components/notifications.jsx | 56 +++++++++++++++++++++++++++++++ src/pages/app.jsx | 31 ++++++++++++++++- src/pages/home.jsx | 4 +++ src/pages/settings/appearance.jsx | 9 +++-- src/style/appearance.css | 4 +++ src/style/style.css | 45 +++++++++++++++++++++++++ 10 files changed, 155 insertions(+), 10 deletions(-) create mode 100644 src/components/notifications.jsx diff --git a/CHANGELOG.md b/CHANGELOG.md index a58a9cf..87e9253 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -65,14 +65,18 @@ - [x] Obfuscate suggestions - [x] Fix broken tab cloak -### Next Update - - [x] Games +### Version 1.8 + - [x] Notifications for secret themes + - [x] Change 3kh0 theme to secret (type 3kh0 anywhere) + - [x] Games (1 for now) - [x] Update apps - [x] Blocklist - [x] New messages on start - [x] Fix no results - [x] Translate no results - [x] Upgrade dependencies + - [x] Update year on license + - [x] Fix search icon on Nebula theme ### Roadmap The roadmap has moved [here](https://github.com/orgs/Metallic-Web/projects/1/views/1). \ No newline at end of file diff --git a/LICENSE b/LICENSE index 9d0ff0a..4e8962c 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2022 Metallic +Copyright (c) 2023 Metallic Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/package-lock.json b/package-lock.json index dc0e4a6..fb6bad3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "metallic", - "version": "1.7", + "version": "1.8", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "metallic", - "version": "1.7", + "version": "1.8", "license": "MIT", "dependencies": { "@emotion/react": "^11.10.6", diff --git a/package.json b/package.json index 9d39d6e..e711d2d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "metallic", - "version": "1.7", + "version": "1.8", "description": "A powerful web proxy build for speed and customization.", "repository": "https://github.com/Metallic-Web/Metallic.git", "license": "MIT", diff --git a/src/components/notifications.jsx b/src/components/notifications.jsx new file mode 100644 index 0000000..9cde6a5 --- /dev/null +++ b/src/components/notifications.jsx @@ -0,0 +1,56 @@ +import React from "react"; + +class NotificationBuilder { + removeNotification(element) { + setTimeout(function() { + element.style.opacity = 1 + }, 10) + setTimeout(function() { + element.style.opacity = 0 + setTimeout(function() { + element.remove() + }, 300) + }, 5000) + } + constructor() { + this.notifications = [] + } + create(config = {text: ""}) { + var notifications = document.getElementById("notifications") + + var notification = document.createElement("div") + notification.className = "notification" + + var notificationText = document.createElement("div") + notificationText.className = "notification-text" + notificationText.innerText = config.text + + notification.appendChild(notificationText) + + notifications.appendChild(notification) + + notifications.style.transition = "bottom 0.3s cubic-bezier(0.6, 0.4, 0, 1)" + notifications.setAttribute("new", "") + + setTimeout(function() { + notifications.style.transition = "none" + notifications.appendChild(notification) + notifications.removeAttribute("new") + notification.style.marginBottom = 0 + }, 300) + + this.removeNotification(notification) + + this.notifications.push(notification) + } +} + +var Notifications = new NotificationBuilder() + +function NotificationsMain() { + return ( +
+ ) +} + +export { NotificationsMain, Notifications }; \ No newline at end of file diff --git a/src/pages/app.jsx b/src/pages/app.jsx index de28119..f239c82 100644 --- a/src/pages/app.jsx +++ b/src/pages/app.jsx @@ -5,7 +5,9 @@ import "../style/index.css"; import "../proxy.jsx"; import Background from "../components/background.jsx"; import SettingsLayout from "../SettingsLayout.jsx"; -import { ObfuscateLayout } from "../components/obfuscate"; +import { ObfuscateLayout } from "../components/obfuscate.jsx"; +import { NotificationsMain, Notifications } from "../components/notifications.jsx" +import { useLocalAppearance } from "../settings.jsx"; var Home = React.lazy(() => import("./home.jsx")); var SettingsAppearance = React.lazy(() => import("./settings/appearance.jsx")); @@ -20,6 +22,32 @@ var Privacy = React.lazy(() => import("./privacy.jsx")); var Error = React.lazy(() => import("./error.jsx")); function App() { + const [localAppearance, setLocalAppearance] = useLocalAppearance(); + + var echoPattern = ['3', 'k', 'h', '0']; + var echoCurrent = 0; + + document.addEventListener('keydown', function (e) { + if (e.key !== echoPattern[echoCurrent]) { + return (echoCurrent = 0); + } + + echoCurrent++; + + if (echoPattern.length == echoCurrent) { + echoCurrent = 0; + if (localStorage.getItem("echo") !== "true") { + var appearance = localAppearance || "" + Notifications.create({ + text: "Unlocked 3kh0 theme" + }) + setLocalAppearance("echo") + localStorage.setItem("echo", "true") + return appearance; + } + } + }); + return ( <> @@ -122,6 +150,7 @@ function App() { } /> + ); } diff --git a/src/pages/home.jsx b/src/pages/home.jsx index cbf0f57..74991f6 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -10,6 +10,7 @@ import { getLink } from "../util.jsx"; import { useLocalAppearance } from "../settings.jsx"; import { useTranslation } from 'react-i18next'; import { renderToStaticMarkup } from 'react-dom/server'; +import { Notifications } from "../components/notifications.jsx" function Home() { const { t } = useTranslation("home"); @@ -84,6 +85,9 @@ function Home() { var appearance = localAppearance || "" try { if (new URL(e.target.value).hostname === window.atob("cG9ybmh1Yi5jb20=")) { + Notifications.create({ + text: "Unlocked Hub theme" + }) setLocalAppearance("hub") localStorage.setItem("hub", "true") return appearance; diff --git a/src/pages/settings/appearance.jsx b/src/pages/settings/appearance.jsx index 8abde89..9d201f1 100644 --- a/src/pages/settings/appearance.jsx +++ b/src/pages/settings/appearance.jsx @@ -161,9 +161,6 @@ function Appearance() { Nebelung - - 3kh0 - Fracital @@ -176,6 +173,12 @@ function Appearance() { Tsunami + { localStorage.getItem("echo") === "true" ? ( + + 3kh0 + + ) : "" + } { localStorage.getItem("hub") === "true" ? ( Hub diff --git a/src/style/appearance.css b/src/style/appearance.css index 5298628..5d800d1 100644 --- a/src/style/appearance.css +++ b/src/style/appearance.css @@ -341,6 +341,10 @@ body[appearance="nebula"] .search { color: var(--text); } +body[appearance="nebula"] .searchicon { + color: var(--highlight); +} + body[appearance="nebula"] .navitem { background: transparent; color: var(--highlight); diff --git a/src/style/style.css b/src/style/style.css index a2355de..e89b5a9 100644 --- a/src/style/style.css +++ b/src/style/style.css @@ -563,3 +563,48 @@ a { padding: 0 0.1em; margin-left: 0.1em; } + +#notifications { + position: fixed; + bottom: 1rem; + left: 50%; + max-width: calc(100% - 60px); + transform: translate3d(-50%, 0, 0); + transition: bottom 0.3s cubic-bezier(0.6, 0.4, 0, 1); + display: flex; + flex-direction: column; + align-items: center; + pointer-events: none; +} + +#notifications[new] { + bottom: calc(64px + 30px); +} + +.notification { + opacity: 0; + max-width: 100%; + padding: 0 20px; + display: flex; + align-items: center; + height: 50px; + border-radius: 30px; + margin-top: 14px; + background: var(--highlight); + color: var(--text-contrast); + transition: opacity 0.3s cubic-bezier(0.6, 0.4, 0, 1); + user-select: none; + min-width: 150px; + margin-bottom: -64px; + width: fit-content; + pointer-events: all; +} + +.notification-text { + font-size: 15px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + text-align: center; +} \ No newline at end of file