update
This commit is contained in:
262
ejs/home.ejs
262
ejs/home.ejs
@@ -3,9 +3,269 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset='utf-8'>
|
<meta charset='utf-8'>
|
||||||
<title>Hyprcut</title>
|
<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'>
|
<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>
|
</head>
|
||||||
<body>
|
<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>
|
</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>
|
</html>
|
||||||
Reference in New Issue
Block a user