ao-studios-site 0.0.0-stage → 1.2.1

package/index.html

@@ -0,0 +1,662 @@
+<!doctype html>
+<html>
+  <head>
+    <script type="module">
+  import { initializeApp } from "https://www.gstatic.com/firebasejs/13.0.0/firebase-app.js";
+  import { getFirestore, doc, getDoc } from "https://www.gstatic.com/firebasejs/13.0.0/firebase-firestore.js";
+
+  const firebaseConfig = {
+    const firebaseConfig = {
+  apiKey: "AIzaSyAN3B8lFWRiuTazD2Quo3TksPEsWi3HFwU",
+  authDomain: "a-o-studios.firebaseapp.com",
+  projectId: "a-o-studios",
+  storageBucket: "a-o-studios.firebasestorage.app",
+  messagingSenderId: "100243979597",
+  appId: "1:100243979597:web:9626963207916d73fb8b04",
+  measurementId: "G-9N3JCY3VQ0"
+};
+  };
+  const app = initializeApp(firebaseConfig);
+  const db = getFirestore(app);
+
+  function showLogin() {
+    document.querySelectorAll(".page").forEach((p) => p.classList.remove("active"));
+    document.getElementById("Password").classList.add("active");
+    document.querySelector("header").style.visibility = "hidden";
+    document.querySelectorAll("nav button").forEach((b) => (b.style.visibility = "hidden"));
+  }
+
+  function showSite() {
+    document.querySelectorAll(".page").forEach((p) => p.classList.remove("active"));
+    document.getElementById("home").classList.add("active");
+    document.querySelector("header").style.visibility = "visible";
+    document.querySelectorAll("nav button").forEach((b) => (b.style.visibility = "visible"));
+  }
+
+  // Turn text into a hash 🔐
+  async function sha256(text) {
+    const buf = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(text));
+    return [...new Uint8Array(buf)].map((b) => b.toString(16).padStart(2, "0")).join("");
+  }
+
+  // Stays logged in for this tab 🧠
+  if (sessionStorage.getItem("ao-ok")) showSite();
+
+  window.check = async function () {
+    const input = document.getElementById("password").value;
+    const snap = await getDoc(doc(db, "settings", "access"));
+    const realHash = snap.data().code;
+
+    if ((await sha256(input)) === realHash) {
+      sessionStorage.setItem("ao-ok", "1");
+      showSite();
+    } else {
+      alert("Wrong password!");
+    }
+  };
+
+  window.signOutAuth = function () {
+    sessionStorage.removeItem("ao-ok");
+    showLogin();
+  };
+</script>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Clarity+City:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>A&O Studios</title>
+
+    <style>
+        /* Our color palette */
+      :root {
+        --bg: #111116;        /* page background (dark)        */
+        --surface: #1b1a24;   /* boxes & cards                 */
+        --surface-2: #282638; /* buttons                       */
+        --line: #454157;      /* borders                       */
+        --accent: #a78bfa;    /* our accent colo               */
+        --accent-2: #c4b5fd;  /* light purple (hover)          */
+        --text: #f4f1ff;      /* main text                     */
+        --muted: #aaa6bc;     /* softer/paragraph text         */
+}
+
+      * {
+        font-family: "Clarity City", sans-serif;
+        box-sizing: border-box;
+      }
+      #Password {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: min(420px, 90%);
+        min-height: 0;
+        max-height: 90vh; 
+        overflow: auto;
+        text-align: center;
+        transition: opacity 0.25s ease, border-color 0.5s ease;
+}
+
+      #Password .container {
+        align-items: center;
+}
+      button {
+        background-color: #282638;
+        border: 1px solid transparent;
+        color: #aaa6bc;
+
+        padding: 9px 14px;
+        border-radius: 9px;
+
+        transition:
+          background 0.2s ease,
+          color 0.2s ease,
+          border-color 0.2s ease;
+      }
+
+      button:hover {
+        background: #c4b5fd;
+        color: #f4f1ff;
+        cursor: pointer;
+      }
+
+      .navigation {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+      }
+
+      /* general */
+
+      body {
+        margin: 0;
+        font-family: Arial, sans-serif;
+        color: white;
+        background-color: #111116;
+      }
+
+      h1 {
+        margin-top: 8px;
+        margin-bottom: 8px;
+      }
+
+      p {
+        color: #aaa6bc;
+      }
+
+      /* Splash screen */
+
+      .intro {
+        position: fixed;
+        top: 0;
+        left: 0;
+
+        width: 100vw;
+        height: 100vh;
+
+        background-color: #111116;
+
+        z-index: 999999;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        opacity: 1;
+        visibility: visible;
+        pointer-events: all;
+
+        transition:
+          opacity 0.7s ease,
+          visibility 0.7s ease;
+      }
+
+      .logo-header {
+        margin: 0;
+        padding: 0;
+
+        color: #f4f1ff;
+        letter-spacing: 3px;
+        text-align: center;
+      }
+
+      .logo {
+        display: inline-block;
+
+        font-size: 50px;
+
+        opacity: 0;
+        transform: translateY(30px);
+
+        transition:
+          transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
+          opacity 0.5s ease;
+      }
+
+      .logo.active {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      .logo.fade {
+        opacity: 0;
+        transform: translateY(-80px);
+      }
+
+      .intro.hide {
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+      }
+
+      /* header */
+
+      header {
+        margin: 16px;
+        padding: 12px 20px;
+        text-align: center;
+        text-shadow: 0 0 2px white;
+        border-radius: 8px;
+        transition: border-color 0.5s ease;
+        border: 2px solid #454157;
+        background-color: #1b1a24;
+        visibility: hidden;
+      }
+
+      header:hover {
+        border-color: #a78bfa;
+      }
+
+      header h4 {
+        position: absolute;
+        left: 10%;
+        bottom: 1rem;
+        font-size: 1.6rem;
+      }
+
+      /* navigation */
+
+      nav button {
+        background-color: #282638;
+        border: 1px solid transparent;
+        visibility: hidden;
+        color: #aaa6bc;
+
+        padding: 9px 14px;
+        border-radius: 9px;
+
+        transition:
+          background 0.2s ease,
+          color 0.2s ease,
+          border-color 0.2s ease;
+      }
+
+      nav button:hover {
+        background: #c4b5fd;
+        color: #f4f1ff;
+        cursor: pointer;
+      }
+
+      nav button.active {
+        background: #282638;
+        color: #f4f1ff;
+        border-color: #454157;
+      }
+
+      /* main */
+
+      main {
+        width: 95%;
+        margin: 20px auto;
+      }
+
+      .page {
+        opacity: 0;
+        visibility: hidden;
+
+        position: absolute;
+
+        width: 90%;
+
+        box-sizing: border-box;
+
+        border: 2px solid #111116;
+
+        background-color: #1b1a24;
+
+        padding: 30px;
+        border-radius: 15px;
+
+        transform: translateY(10px);
+
+        transition:
+          opacity 0.25s ease,
+          transform 0.25s ease,
+          border-color 0.5s ease;
+        min-height: 80vh;
+      }
+
+      .page.active {
+        opacity: 1;
+        visibility: visible;
+        position: relative;
+        width: 100%;
+        transform: translateY(0);
+        border-color: #454157;
+        margin: 0;
+      }
+
+      .page:hover {
+        border-color: #a78bfa;
+      }
+
+      /* Password menu — centered! 🎯 */
+
+      #Password {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+      }
+
+      #Password .container {
+        align-items: center;
+        width: 100%;
+      }
+
+      /* Html Emulator */
+      .container {
+        width: 100%;
+
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+      }
+
+      textarea {
+        width: 90%;
+        height: 150px;
+
+        padding: 8px;
+
+        border: 2px solid #1b1a24;
+        border-radius: 15px;
+
+        background-color: #111116;
+        color: #f4f1ff;
+
+        accent-color: #a78bfa;
+
+        resize: none;
+
+        transition: border-color 0.2s ease;
+      }
+
+      textarea:hover {
+        border-color: #282638;
+      }
+
+      textarea:focus {
+        outline: none;
+        border-color: #a78bfa;
+      }
+
+      .EmulateButton {
+        position: static;
+
+        margin: 0;
+
+        border-radius: 8px;
+
+        width: 80px;
+        height: 30px;
+
+        border: 2px solid #a78bfa;
+
+        background-color: #a78bfa;
+        color: #f4f1ff;
+
+        cursor: pointer;
+
+        transition:
+          background-color 0.2s ease,
+          box-shadow 0.2s ease;
+      }
+
+      .TobyButton {
+        background-color: #282638;
+        border-radius: 8px;
+
+        transition: all 0.2s ease;
+
+        color: #f4f1ff;
+
+        height: 6vh;
+        width: 12vh;
+      }
+
+      .TobyButton:hover {
+        cursor: pointer;
+      }
+    </style>
+  </head>
+
+  <body>
+    <!-- Splash screen -->
+
+    <div class="intro">
+      <h1 class="logo-header">
+        <span class="logo">A&O</span>
+        <span class="logo">Studios</span>
+      </h1>
+    </div>
+
+    <script>
+      const intro = document.querySelector(".intro");
+      const logoSpan = document.querySelectorAll(".logo");
+
+      window.addEventListener("load", () => {
+        // Wait before starting the logo animation
+        setTimeout(() => {
+          logoSpan.forEach((span, idx) => {
+            setTimeout(() => {
+              span.classList.add("active");
+            }, idx * 500);
+          });
+        }, 500);
+
+        // Start fading the logo out
+        setTimeout(() => {
+          logoSpan.forEach((span, idx) => {
+            setTimeout(() => {
+              span.classList.remove("active");
+              span.classList.add("fade");
+            }, idx * 150);
+          });
+        }, 3000);
+
+        // Remove the splash screen
+        setTimeout(() => {
+          intro.classList.add("hide");
+        }, 2000);
+      });
+    </script>
+   <section id="Password" class="page active">
+  <h2>Password</h2>
+  <div class="container">
+    <textarea id="password" placeholder="type password"></textarea>
+    <div>
+      <button onclick="check()">Enter</button>
+    </div>
+  </div>
+</section>
+    <header>
+      <div class="navigation">
+        <h1>A&O Website</h1>
+
+        <nav>
+          <button onclick="showPage('home')">Home</button>
+          <button onclick="showPage('about')">Stuff</button>
+          <button onclick="showPage('projects')">Tools</button>
+          <button onclick="showPage('contact')">Settings</button>
+          <button onclick="showPage('Emulator')">Emulator</button>
+        </nav>
+      </div>
+    </header>
+    <main>
+      <!-- Html Emulator -->
+
+      <section id="Emulator" class="page">
+        <h1>HTML Runner</h1>
+
+        <div class="container">
+          <textarea id="code" placeholder="insert html. . ."></textarea>
+
+          <button class="EmulateButton" onclick="Newtab()">Emulate</button>
+        </div>
+      </section>
+
+      <!-- Home -->
+
+      <section id="home" class="page">
+        <h2>Welcome!</h2>
+
+        <p>Welcome you found our website!</p>
+
+        <p>helo</p>
+
+        <p>
+          About us: We are A&O studios and we are a coding development team that
+          created this website
+        </p>
+      </section>
+
+      <!-- About -->
+
+      <section id="about" class="page">
+        <h2>Stuff</h2>
+
+        <p>We will insert games below.</p>
+
+        <h3>We will add more games soon</h3>
+            <button onclick="Toby()">Toby Web</button>
+            <button onclick="Undertale()">Undertale</button>
+            <button onclick="Knight()">HollowKnight</button>
+            <button onclick="GD()">GeometryDash</button>
+            <button onclick="CC()">CookieClicker</button>
+        <script>
+          function Knight() {
+            const newWindow = window.open("about:blank", "_blank");
+            fetch(
+              "https://cdn.jsdelivr.net/gh/Axononymous/A-O-Studios@main/Games/Hollow_Knight.html",
+            )
+              .then((response) => response.text())
+              .then((Knight) => {
+                newWindow.document.open();
+                newWindow.document.write(Knight);
+                newWindow.document.close();
+              });
+          }
+
+
+
+function GD() {
+const newWindow = window.open("about:blank", "_blank");
+fetch(
+    "https://cdn.jsdelivr.net/gh/Axononymous/A-O-Studios@main/Games/GDWEB___Stable_.html",
+    )
+       .then(response => response.text())
+       .then((GD) => {
+           newWindow.document.open();
+           newWindow.document.write(GD);
+           newWindow.document.close();
+});
+}
+function CC() {
+const newWindow = window.open("about:blank", "_blank");
+fetch(
+   "https://cdn.jsdelivr.net/gh/Axononymous/A-O-Studios@main/Games/Cookie_Clicker.html",
+   )
+      .then(response => response.text())
+      .then((CC) => {
+          newWindow.document.open();
+          newWindow.document.write(CC);
+          newWindow.document.close();
+});
+}
+
+
+
+
+        </script>
+      </section>
+
+      <!-- Projects -->
+
+      <section id="projects" class="page">
+        <h2>T00ls</h2>
+
+        <article>
+          <h3>HTML Emulator</h3>
+
+          <p>A website that lets you type HTML and run it in another tab.</p>
+        </article>
+
+        <article>
+          <h3>Test Website</h3>
+
+          <p>Something awesome we are going to build</p>
+        </article>
+      </section>
+
+      <!-- Settings -->
+
+      <section id="contact" class="page">
+        <h2>Settings</h2>
+
+        <label> This is where are requests and projects will be </label>
+
+        <br />
+        <br />
+        <br />
+
+        <label> Message: </label>
+
+        <br />
+        <br />
+        <br />
+
+        <button>Click me</button>
+      </section>
+    </main>
+
+    <!-- javascript -->
+
+    <script>
+      /* Page navigation */
+
+      function showPage(page) {
+        document.querySelectorAll(".page").forEach(function (section) {
+          section.classList.remove("active");
+        });
+
+        document.getElementById(page).classList.add("active");
+      }
+
+      /* Html Emulator */
+
+      function Newtab() {
+        const code = document.getElementById("code").value;
+
+        const newWindow = window.open("about:blank", "_blank");
+
+        if (!newWindow) {
+          alert(
+            "The new tab was blocked by your browser. Please allow pop-ups for this site.",
+          );
+
+          return;
+        }
+
+        newWindow.document.open();
+
+        newWindow.document.write(code);
+
+        newWindow.document.close();
+      }
+
+      /* Toby Web */
+      function Toby() {
+        const newWindow = window.open("about:blank", "_blank");
+
+        fetch("https://cdn.jsdelivr.net/gh/OddDuckling12/Toby-web@main/index.html")
+          .then((response) => response.text())
+          .then((toby) => {
+            newWindow.document.open();
+            newWindow.document.write(toby);
+            newWindow.document.close();
+          });
+      }
+    </script>
+    <script>
+      function Undertale() {
+        const newWindow = window.open("about:blank", "_blank");
+        fetch(
+          "https://cdn.jsdelivr.net/gh/Axononymous/A-O-Studios@main/Games/Undertale.html",
+        )
+          .then((response) => response.text())
+          .then((under) => {
+            newWindow.document.open();
+            newWindow.document.write(under);
+            newWindow.document.close();
+          });
+      }
+    </script>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,13 @@
 {
   "name": "ao-studios-site",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.2.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs"
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.