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