init

17 files changed, 541 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..e43b0f98
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/bx-menu.svg b/bx-menu.svg
new file mode 100644
index 00000000..a9034023
--- /dev/null
+++ b/bx-menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/></svg>
\ No newline at end of file
diff --git a/fonts/Big500-8MLOM.ttf b/fonts/Big500-8MLOM.ttf
new file mode 100644
index 00000000..35ec776d
--- /dev/null
+++ b/fonts/Big500-8MLOM.ttf
diff --git a/fonts/Hacked-KerX.ttf b/fonts/Hacked-KerX.ttf
new file mode 100644
index 00000000..2917611c
--- /dev/null
+++ b/fonts/Hacked-KerX.ttf
diff --git a/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf b/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf
new file mode 100644
index 00000000..fb81e183
--- /dev/null
+++ b/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf
diff --git a/fonts/SmoothElegantRegular-ZLv3.ttf b/fonts/SmoothElegantRegular-ZLv3.ttf
new file mode 100644
index 00000000..f8f70d77
--- /dev/null
+++ b/fonts/SmoothElegantRegular-ZLv3.ttf
diff --git a/images/backgroundNightCity.jpg b/images/backgroundNightCity.jpg
new file mode 100644
index 00000000..05e081c4
--- /dev/null
+++ b/images/backgroundNightCity.jpg
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..cadafd74
--- /dev/null
+++ b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html5>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>littleblack111</title>
+        <link rel="stylesheet" href="/src/css/style.css">
+        <link rel="stylesheet" href="/src/css/index.css">
+    </head>
+    <body>
+        <!-- header -->
+        <header id="navBarHeader">
+            <nav class="navBar">
+                <div class="left">
+                    <a id="btnHome" href="/" class="active">home<span></span></span></a>
+                </div>
+                <div class="right">
+                    <a href="/pages/login/login.html" id="btnLogin">login</a>
+                    <a href="/" id="btnContact">contact</a>
+                </div>
+            </nav> 
+        </header>
+
+        <!-- index page -->
+        <section class="indexPage">
+            <div class="window">
+                <div class="placeholder" id="infos">
+                    <div class="text">
+                        <h2>Hello! This is</h2>
+                        <object class="br"></object>
+                        <h1 class="title">littleblack111</h1>
+                        <object class="br"></object>
+                        <h2>welcome to my <br> website!</h2>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section style="display: block; height: 100%;" class="programs">
+            <br>
+            <br>
+            <br>
+            <h1 style="font-size: 90px; font-family: smooth;">My programs</h1>
+            <li class="programsList">
+                <h3>type-sound</h3>
+                <h3>hyperdog</h3>
+                <h3>remote-control-discord</h3>
+            </li>
+        </section>
+
+        <script src="/src/js/index.js"></script>
+    </body>
+</html>
diff --git a/pages/login/login.html b/pages/login/login.html
new file mode 100644
index 00000000..af351d55
--- /dev/null
+++ b/pages/login/login.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html5>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>littleblack111</title>
+        <link rel="stylesheet" href="/src/css/style.css">
+        <link rel="stylesheet" href="/src/css/login.css">
+    </head>
+    <body>
+        <!-- header -->
+        <header id="navBarHeader">
+            <nav class="navBar">
+                <div class="left">
+                    <a id="btnHome" href="/">home<span></span></span></a>
+                </div>
+                <div class="right">
+                    <a href="/pages/login/login.html" id="btnLogin" class="active">login</a>
+                    <a href="/" id="btnContact">contact</a>
+                </div>
+            </nav> 
+        </header>
+
+        <!-- index page -->
+        <section class="loginPage">
+            <div class="window">
+                <div class="placeholder" id="infos">
+                    <div class="text">
+                        <h1 class="title">login</h1>
+                        <object class="br"></object>
+                        <h2>username</h2>
+                        <input id="username" type="text">
+                        <h2>password</h2>
+                        <input id="password" type="password">
+                        <br><br>
+                        <button onclick="test()">login</button>
+                    </div>
+                </div>
+            </div>
+            <div style="position: flex;">    
+                <a href="/pages/login/register.html" style="position: absolute; bottom: 5px; color: #F4E8C1; background-color: #331E38;">
+                    or create a new account
+                </a>
+            </div>
+        </section>
+        <script src="/src/js/login.js"></script>
+    </body>
+</html>
diff --git a/pages/login/register.html b/pages/login/register.html
new file mode 100644
index 00000000..530f1c9f
--- /dev/null
+++ b/pages/login/register.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html5>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>littleblack111</title>
+        <link rel="stylesheet" href="/src/css/style.css">
+        <link rel="stylesheet" href="/src/css/register.css">
+    </head>
+    <body>
+        <!-- header -->
+        <header id="navBarHeader">
+            <nav class="navBar">
+                <div class="left">
+                    <a id="btnHome" href="/">home<span></span></span></a>
+                </div>
+                <div class="right">
+                    <a href="/pages/login/login.html" id="btnLogin" class="active">login</a>
+                    <a href="/" id="btnContact">contact</a>
+                </div>
+            </nav>
+        </header>
+
+        <!-- index page -->
+        <section class="registerPage">
+            <div class="window">
+                <div class="placeholder" id="infos">
+                    <div class="text">
+                        <h1 class="title">create account</h1>
+                        <object class="br"></object>
+                        <h2>username</h2>
+                        <input id="username" type="text">
+                        <h2>password</h2>
+                        <input id="password" type="text">
+                        <h2>verify password</h2>
+                        <input id="verify-password" type="text">
+                        <br><br>
+                        <button onclick="createAccount()">create account</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <script src="/src/js/register.js"></script>
+    </body>
+</html>
diff --git a/src/css/index.css b/src/css/index.css
new file mode 100644
index 00000000..ea48c8ff
--- /dev/null
+++ b/src/css/index.css
@@ -0,0 +1,75 @@
+/* main info window ======================================= */
+.indexPage {
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url(/images/backgroundNightCity.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: #F4E8C1;
+    z-index: 1;
+}
+
+.window {
+    position: relative;
+    top: 15%;
+    left: 10%;
+    height: 70%;
+    width: 80%;
+    background: transparent;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.window .placeholder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgba(255,255,255, .5);
+    border-radius: 0.7em;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    box-shadow: 0 0 10mm rgba(0,0,0,.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.window .placeholder .text {
+    position: relative;
+    width: 100%;
+    text-align: center;
+}
+
+.window .placeholder .text .title {
+    font-family: smooth;
+    font-size: 15vw;
+}
+
+.window .placeholder .text .br {
+    display: block;
+    height: 0;
+    width: 0;
+    margin-bottom: 5vh;
+}
+
+
+/* programs =============================================== */
+
+.programs {
+    text-align: center;
+    background-color: #F4E8C1;
+    color: #331E38;
+}
+
+.programs .programsList {
+    padding: 10vw;
+    line-height: 40px;
+}
\ No newline at end of file
diff --git a/src/css/login.css b/src/css/login.css
new file mode 100644
index 00000000..565bbe28
--- /dev/null
+++ b/src/css/login.css
@@ -0,0 +1,93 @@
+/* main info window ======================================= */
+.loginPage {
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url(/images/backgroundNightCity.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: #F4E8C1;
+    z-index: 1;
+}
+
+.window {
+    position: relative;
+    top: 15%;
+    left: 10%;
+    height: 70%;
+    width: 80%;
+    background: transparent;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.window .placeholder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgba(255,255,255, .5);
+    border-radius: 0.7em;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    box-shadow: 0 0 10mm rgba(0,0,0,.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.window .placeholder .text {
+    position: relative;
+    width: 80%;
+    text-align: left;
+}
+
+.window .placeholder .text .title {
+    text-align: center;
+    font-family: smooth;
+    font-size: 10vw;
+}
+
+.window .placeholder .text .br {
+    display: block;
+    height: 0;
+    width: 0;
+    margin-bottom: 5vh;
+}
+.window .placeholder .text button,
+.window .placeholder .text input {
+    font-size: 2vh;
+    margin-top: 3mm;
+    background-color: #F4E8C1;
+    width: 100%;
+    height: 4vh;
+    border-color: #331E38;
+    border-style: solid;
+    border-width: 1mm;
+    border-radius: 2mm;
+    margin-bottom: 4mm;
+}
+
+.window .placeholder .text button {
+    background-color: transparent;
+    border-color: transparent;
+    background-color: transparent;
+    font-size: 2.5vh;
+    color: #F4E8C1;
+}
+
+.window .placeholder .text button:hover {
+    background-color: #A0C1B9;
+    color: #331E38;
+}
+
+#createAccount {
+    color: #F4E8C1;
+}
+/* programs =============================================== */
\ No newline at end of file
diff --git a/src/css/register.css b/src/css/register.css
new file mode 100644
index 00000000..7d26e1b7
--- /dev/null
+++ b/src/css/register.css
@@ -0,0 +1,90 @@
+/* main info window ======================================= */
+.registerPage {
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url(/images/backgroundNightCity.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: #F4E8C1;
+    z-index: 1;
+}
+
+.window {
+    position: relative;
+    top: 15%;
+    left: 10%;
+    height: 70%;
+    width: 80%;
+    background: transparent;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.window .placeholder {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgba(255,255,255, .5);
+    border-radius: 0.7em;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    box-shadow: 0 0 10mm rgba(0,0,0,.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.window .placeholder .text {
+    position: relative;
+    width: 80%;
+    text-align: left;
+}
+
+.window .placeholder .text .title {
+    text-align: center;
+    font-family: smooth;
+    font-size: 10vw;
+}
+
+.window .placeholder .text .br {
+    display: block;
+    height: 0;
+    width: 0;
+    margin-bottom: 5vh;
+}
+.window .placeholder .text button,
+.window .placeholder .text input {
+    font-size: 2vh;
+    margin-top: 3mm;
+    background-color: #F4E8C1;
+    width: 100%;
+    height: 4vh;
+    border-color: #331E38;
+    border-style: solid;
+    border-width: 1mm;
+    border-radius: 2mm;
+    margin-bottom: 4mm;
+}
+
+.window .placeholder .text button {
+    background-color: transparent;
+    border-color: transparent;
+    background-color: transparent;
+    font-size: 2.5vh;
+    color: #F4E8C1;
+}
+
+.window .placeholder .text button:hover {
+    background-color: #A0C1B9;
+    color: #331E38;
+}
+
+/* programs =============================================== */
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
new file mode 100644
index 00000000..3966446b
--- /dev/null
+++ b/src/css/style.css
@@ -0,0 +1,109 @@
+:root {
+    --topBarHeight: 10%;
+}
+
+@font-face {
+    font-family: hacked;
+    src: url(/fonts/Hacked-KerX.ttf);
+}
+@font-face {
+    font-family: smooth;
+    src: url(/fonts/SmoothElegantRegular-ZLv3.ttf);
+}
+@font-face {
+    font-family: liga;
+    src: url(/fonts/LigaJetBrainsMonoNerdFont-Regular.ttf);
+}
+@font-face {
+    font-family: big;
+    src: url(/fonts/Big500-8MLOM.ttf);
+}
+ 
+/* page setup ============================================= */
+
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    font-family: liga;
+}
+
+body {
+    top: 0;
+    left: 0;
+}
+
+/* topbar styles ========================================== */
+
+header {
+    position:fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3em;
+    justify-content: space-between;
+    align-items:center;
+    background: color(0, 0, 0, .1);
+    z-index: 1000;
+    background-color: #331E38;
+}
+
+.navBar a {
+    position: relative;
+    height: 100%;
+    font-size: 5mm;
+    text-transform: capitalize;
+    text-align: center;
+    text-decoration: none;
+    margin-left: 5mm;
+    margin-right: 5mm;
+    padding-top: 3mm;
+    padding-bottom: 3mm;
+    color: #F4E8C1;
+}
+
+.navBar .left a {float: left;}
+.navBar .right a {float: right;}
+
+.navBar a::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1mm;
+    background: #F4E8C1;
+    border-radius: 1mm;
+    transform: scaleX(0);
+    transition: transform 0.3s;
+}
+
+.navBar a:hover::after {
+    transform: scaleX(1);
+}
+
+
+.navBar a.active::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1mm;
+    background: #F4E8C1;
+    border-radius: 1mm;
+    transform: scaleX(1);
+}
+
+/* other ================================================== */
+
+.contents {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+
+section {
+    position: relative;
+}
\ No newline at end of file
diff --git a/src/js/index.js b/src/js/index.js
new file mode 100644
index 00000000..241675cf
--- /dev/null
+++ b/src/js/index.js
@@ -0,0 +1,12 @@
+let obj = document.getElementById('infos');
+let topBar = document.getElementById('navBarHeader');
+
+window.addEventListener('scroll', () => {
+    let value = window.scrollY;
+    
+    obj.style.marginTop = value * 2.5 + 'px';
+
+    console.log("==============");
+    console.log(topBar.style.height);
+    console.log(value);
+}, { passive: true });
\ No newline at end of file
diff --git a/src/js/login.js b/src/js/login.js
new file mode 100644
index 00000000..ce4c0803
--- /dev/null
+++ b/src/js/login.js
@@ -0,0 +1,4 @@
+function test() {
+    console.log(document.getElementById("username").value);
+    console.log(document.getElementById("password").value);
+}
\ No newline at end of file
diff --git a/src/js/register.js b/src/js/register.js
new file mode 100644
index 00000000..11f85852
--- /dev/null
+++ b/src/js/register.js
@@ -0,0 +1,10 @@
+function createAccount() {
+    if (document.getElementById("password").value == document.getElementById("verify-password").value) {
+        let username = document.getElementById("username").value;
+        let password = document.getElementById("password").value;
+        console.log(username);
+        console.log(password);
+    } else {
+        console.log("password does not match");
+    }
+}