add terminal example

geeklogbook · Sep 19, 2023 · a1fbb1c · a1fbb1c
1 parent 7070c2a
commit a1fbb1c
Show file tree

Hide file tree

Showing 9 changed files with 264 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -15,12 +15,13 @@ <h2>Example Pages</h2>
     <a href="the-garden-of-words/index.html" target="_blank">The Garden of Words</a><br/>
     <a href="grannys-cakes/index.html" target="_blank">Granny's Cakes</a><br/>
     <a href="trendy/index.html" target="_blank">Trendy After Office</a><br/>
-    <a href="velvet/index.html" target="_blank">velvet Tailor Shop</a><br/>
+    <a href="velvet/index.html" target="_blank">Tailor Shop</a><br/>
     <h2>CSS Guides</h2>
     <a href="transform/index.html" target="_blank">Rotate In Css</a><br/>
     <a href="border-radius/index.html" target="_blank">Border Radius</a><br/>
     <h2>Another Simple Practices</h2>
     <a href="horror/index.html" target="_blank">Horror Driping</a><br/>
+    <a href="termina/index.html" target="_blank">Terminal Landing page</a>
 
 
 

diff --git a/terminal/css/style.css b/terminal/css/style.css
@@ -0,0 +1,99 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap');
+
+
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+}
+
+:root {
+    --text-color: #00aa00;
+}
+
+body {
+    font-family: 'Roboto Mono', sans-serif;
+    background-color: #333;
+    color: #ccc;
+    font-size: 18px;
+    line-height: 1.6;
+}
+
+h1 {
+    color: var(--text-color);
+    font-size: 50px;
+    letter-spacing: -5px;
+    margin-bottom: 20px;
+}
+
+h2 {
+    color: var(--text-color)
+}
+
+h3 {
+    margin-bottom: 10px;
+}
+
+ul {
+    list-style-type: none;
+}
+
+a {
+    color: var(--text-color);
+    text-decoration: none;
+}
+
+p {
+    margin: 20px 0;
+}
+
+nav {
+    width: 30%;
+}
+
+nav ul {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+nav ul li {
+    color: var(--text-color);
+    cursor: pointer
+}
+
+.container {
+    max-width: 600px;
+    margin: auto;
+    height: 70vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+}
+
+.wb-body {
+    background: #111;
+    padding: 20px;
+}
+
+.hidden {
+    display: none;
+}
+
+.cursor {
+    font-weight: 700;
+    animation: 1s blink step-end infinite;
+}
+
+@keyframes blink {
+    from, 
+    to {
+        color: transparent;
+    }
+
+    50% {
+        color: var(--text-color)
+    }
+}
diff --git a/terminal/images/examples/onebox.png b/terminal/images/examples/onebox.png
diff --git a/terminal/images/examples/principal.png b/terminal/images/examples/principal.png
diff --git a/terminal/images/examples/twobox.png b/terminal/images/examples/twobox.png
diff --git a/terminal/index.html b/terminal/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
+    <title>Welcome</title>
+</head>
+<body>
+
+    <div class="container">
+        <nav>
+            <ul>
+                <li id="about">/about</li>
+                <li id="contact">/contact</li>
+            </ul>
+        </nav>
+
+        <main>
+            <h1>jchemile:$<span class="cursor">|</span></h1>
+            <h3>You can see me in other places: </h3>
+            <ul>
+                <li><a href="" target ="_blank">Github</a></li>
+                <li><a href="" target ="_blank">Linkedin</a></li>
+                <li><a href="" target ="_blank">Codepen</a></li>
+                <li><a href="" target ="_blank">Tableau</a></li>
+                <li><a href="" target ="_blank">Twitter</a></li>
+                <li><a href="" target ="_blank">Personal Blog</a></li>
+            </ul>
+        </main>
+    </div>
+
+    <div class="hidden">
+        <div id="about-content">
+            <h2>about-me:$<span class="cursor">|</span></h2>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis tempora esse deleniti adipisci eaque, nemo ipsam nesciunt ullam corporis amet, recusandae porro excepturi at consectetur obcaecati alias. Impedit, quidem cumque?</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis tempora esse deleniti adipisci eaque, nemo ipsam nesciunt ullam corporis amet, recusandae porro excepturi at consectetur obcaecati alias. Impedit, quidem cumque?</p>
+        </div>
+
+        <div id="contact-content">
+            <h2>contact-me:$<span class="cursor">|</span></h2>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis tempora esse deleniti adipisci </p>
+            <ul>
+                <li>Phone: 555-555-5555</li>
+                <li>Email: [email protected]</li>
+            </ul>
+        </div>
+    </div>
+
+    <script src="js/winbox.bundle.js"></script>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/terminal/js/main.js b/terminal/js/main.js
@@ -0,0 +1,44 @@
+const about = document.querySelector('#about')
+const countact = document.querySelector('#contact')
+const aboutContent = document.querySelector('#about-content')
+const contactContent = document.querySelector('#contact-content')
+
+about.addEventListener('click', () => {
+    const aboutBox = new WinBox({
+        title: 'About Me',
+        background: '#00aa00',
+        width: '400px',
+        height: '400px',
+        top: 50,
+        right: 50,
+        bottom: 50,
+        left: 50,
+        mount:aboutContent,
+        onfocus: function(){
+            this.setBackground('#00aa00')
+        },
+        onblur: function(){
+            this.setBackground('#777')
+        }
+    })
+})
+
+contact.addEventListener('click', () => {
+    const contactBox = new WinBox({
+        title: 'contact Me',
+        background: '#00aa00',
+        width: '400px',
+        height: '400px',
+        top: 150,
+        right: 50,
+        bottom: 50,
+        left: 250,
+        mount:contactContent,
+        onfocus: function(){
+            this.setBackground('#00aa00')
+        },
+        onblur: function(){
+            this.setBackground('#777')
+        }
+    })
+})
diff --git a/terminal/js/winbox.bundle.js b/terminal/js/winbox.bundle.js
diff --git a/terminal/readme.md b/terminal/readme.md
@@ -0,0 +1,20 @@
+# Terminal Page
+Page that emulate terminal behaviour
+
+# Link to the page
+
+[Link to the page in raw githack](https://raw.githack.com/jchemile/varios/master/single-pages/terminal/index.html)
+
+# Images
+
+## Principal
+
+![Home Page](./images/examples/principal.png)
+
+## One Box
+
+![Home Page](./images/examples/onebox.png)
+
+## Two Box
+
+![Home Page](./images/examples/twobox.png)