From f1f0f8d377463ed4928f8518945c02d444d8aaa0 Mon Sep 17 00:00:00 2001
From: jgj52 <email@jgj52.hu>
Date: Sun, 23 Mar 2025 08:59:28 +0100
Subject: [PATCH] update

---
 ejs/home.ejs | 262 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 261 insertions(+), 1 deletion(-)
diff --git a/ejs/home.ejs b/ejs/home.ejs
index 1e02fb1..3500180 100644
--- a/ejs/home.ejs
+++ b/ejs/home.ejs
@@ -3,9 +3,269 @@
 <head>
     <meta charset='utf-8'>
     <title>Hyprcut</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
     <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Frijole&family=IM+Fell+DW+Pica+SC&family=Meow+Script&family=Pixelify+Sans:wght@400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Special+Elite&family=Swanky+and+Moo+Moo&display=swap');
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', 'Fredoka', 'Frijole', sans-serif;
+        }
+
+        body {
+            background-color: #1a1b1c;
+            color: #ffffff;
+        }
+
+        .card {
+            background-color: #000000;
+            padding: 15px;
+            border: none;
+            border-radius: 15px;
+        }
+
+        .flex {
+            display: flex;
+        }
+
+        .center {
+            justify-content: center;
+            align-items: center;
+        }
+        
+        .effect {
+            position: absolute;
+            left: 10px;
+            top: 100px;
+            width: 25%;
+            height: 50%;
+            .effects {
+                flex-direction: column;
+                gap: 10px;
+                margin-top: 10px;
+                margin-left: 5px;
+                b {
+                    background-color: #1a1b1c;
+                    padding: 5px;
+                    border-radius: 10px;
+                    width: fit-content;
+                }
+            }
+        }
+
+        .media {
+            position: absolute;
+            left: 10px;
+            top: calc(120px + 50%);
+            width: 25%;
+            height: 35%;
+            overflow-x: auto;
+            .ms {
+                flex-wrap: wrap;
+                gap: 15px;
+            }
+            .m {
+                flex-direction: column;
+                width: calc(100% / 4 - 10px);
+                min-width: 100px;
+                flex: 1;
+                text-align: center;
+                img {
+                    width: 100px;
+                }
+                p {
+                    margin-top: 5px;
+                    font-family: 'Fredoka';
+                }
+            }
+        }
+
+        .timeline {
+            position: absolute;
+            left: calc(30px + 25%);
+            top: calc(120px + 50%);
+            width: calc(75% - 50px);
+            height: 35%;
+        }
+        
+        .video {
+            position: absolute;
+            left: calc(30px + 25%);
+            top: 100px;
+            width: calc(75% - 50px);
+            height: 50%;
+            video {
+                position: absolute;
+                width: calc(50% - 20px);
+                height: auto;
+                max-height: 100%;
+            }
+            .left {
+                left: 10px;
+            }
+            .right {
+                right: 10px;
+            }
+        }
+
+        .navbar {
+            position: fixed;
+            width: 80%;
+            height: 7%;
+            top: 20px;
+            backdrop-filter: blur(9px);
+            box-shadow: 0px 0px 1em;
+            border: #ffffff dashed 3px;
+            border-radius: 15px;
+            padding: 10px;
+            z-index: 1000;
+            gap: 10px;
+            .custom-select {
+                position: relative;
+                justify-content: center;
+                width: 100px;
+                font-family: 'Poppins', sans-serif;
+                background-color: #000000;
+                color: #ffffff;
+                border-radius: 10px;
+                select {
+                    display: none;
+                }
+                .selected {
+                    padding: 10px;
+                    background-color: #000000;
+                    color: #ffffff;
+                    border-radius: 10px;
+                    cursor: pointer;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                }
+                .options {
+                    position: absolute;
+                    top: 100%;
+                    left: 0;
+                    right: 0;
+                    background-color: #1a1b1c;
+                    border-radius: 10px;
+                    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.2);
+                    width: 100%;
+                    z-index: 999;
+                    display: none;
+                }
+                .option {
+                    padding: 10px;
+                    cursor: pointer;
+                    justify-content: center;
+                    align-items: center;
+                    transition: background-color 0.3s ease;
+                    i {
+                        margin-right: 5px;
+                    }
+                }
+                .option:hover {
+                    background-color: #333;
+                }
+            }
+
+            .custom-select.open .options {
+                display: block;
+            }
+        }
+    </style>
 </head>
 <body>
-    szia
+    <div class="flex center">
+        <div class="navbar flex center">
+            <div class="flex custom-select" id="file">
+                <div class="selected" onclick="toggleSelect('file')">
+                    <span>File</span>
+                </div>
+                <div class="options">
+                    <div class="flex option" onclick="selectOption('file', 'import')">Import</div>
+                </div>
+            </div>
+            <div class="flex custom-select" id="edit">
+                <div class="selected" onclick="toggleSelect('edit')">
+                    <span>Edit</span>
+                </div>
+                <div class="options">
+                    <div class="flex option" onclick="selectOption('edit', 'import')">Import</div>
+                </div>
+            </div>
+            <div class="flex custom-select" id="view">
+                <div class="selected" onclick="toggleSelect('view')">
+                    <span>View</span>
+                </div>
+                <div class="options">
+                    <div class="flex option" onclick="selectOption('view', 'import')">Import</div>
+                </div>
+            </div>
+            <div class="flex custom-select" id="window">
+                <div class="selected" onclick="toggleSelect('window')">
+                    <span>Window</span>
+                </div>
+                <div class="options">
+                    <div class="flex option" onclick="selectOption('window', 'Effect')" id="windowEffect"><i class="fas fa-check"></i>Effects</div>
+                    <div class="flex option" onclick="selectOption('window', 'Media')" id="windowMedia"><i class="fas fa-check"></i>Media</div>
+                    <div class="flex option" onclick="selectOption('window', 'Timeline')" id="windowTimeline"><i class="fas fa-check"></i>Timeline</div>
+                    <div class="flex option" onclick="selectOption('window', 'Video')" id="windowVideo"><i class="fas fa-check"></i>Video</div>
+                </div>
+            </div>
+            
+        </div>
+    </div>
+    <div class="flex center" style="position: absolute; width: 100%; height: 100%;">
+        <div class="card flex effect" id="Effect">
+            <div class="flex effects">
+                <b><i class="fa-solid fa-wand-magic-sparkles"></i> Effect</b>
+                <b><i class="fa-solid fa-wand-magic-sparkles"></i> Cica</b>
+            </div>
+        </div>
+        <div class="card flex center video" id="Video">
+            <video class="left"></video>
+            <video class="right"></video>
+        </div>
+        <div class="card flex center media" id="Media">
+            <div class="flex ms">
+                <div class="flex m">
+                    <img src="https://jgj52.hu/media/20" alt="Icon">
+                    <p>video.mp4</p>
+                </div>
+                <div class="flex m">
+                    <img src="https://jgj52.hu/media/20" alt="Icon">
+                    <p>video.mp3</p>
+                </div>
+            </div>
+        </div>
+        <div class="card flex center timeline" id="Timeline">
+
+        </div>
+    </div>
 </body>
+<script>
+        function toggleSelect(type) {
+            document.getElementById(type).classList.toggle('open');
+        }
+
+        function selectOption(type, value) {
+            toggleSelect(type);
+            if (type === 'window') {
+                const window = document.getElementById(value);
+                const select = document.getElementById(`window${value}`);
+                if (select.innerHTML.includes('</i>')) {
+                    window.style.display = 'none';
+                    console.log(select.innerHTML)
+                    select.innerHTML = value;
+                } else {
+                    window.style.display = 'flex';
+                    select.innerHTML = `<i class="fas fa-check"></i>${value}`;
+                }
+            }
+        }
+</script>
 </html>
\ No newline at end of file
