Version 1.8

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).

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

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",

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 (
+        <div id="notifications"></div>
+    )
+}
+
+export { NotificationsMain, Notifications };

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 (
     <>
       <ObfuscateLayout />
@@ -122,6 +150,7 @@ function App() {
           }
         />
       </Routes>
+      <NotificationsMain />
     </>
   );
 }

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;

src/pages/settings/appearance.jsx

@@ -161,9 +161,6 @@ function Appearance() {
         <ThemeOption type="nebelung">
           <Obfuscate>Nebelung</Obfuscate>
         </ThemeOption>
-        <ThemeOption type="echo">
-          <Obfuscate>3kh0</Obfuscate>
-        </ThemeOption>
         <ThemeOption type="fracital">
           <Obfuscate>Fracital</Obfuscate>
         </ThemeOption>
@@ -176,6 +173,12 @@ function Appearance() {
         <ThemeOption type="tsunami">
           <Obfuscate>Tsunami</Obfuscate>
         </ThemeOption>
+        { localStorage.getItem("echo") === "true"  ? (
+        <ThemeOption type="echo">
+          <Obfuscate>3kh0</Obfuscate>
+        </ThemeOption>
+        ) : ""
+        }
         { localStorage.getItem("hub") === "true"  ? (
         <ThemeOption type="hub">
           <Obfuscate>Hub</Obfuscate>

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);

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;
+}