Reimar/video-compressor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create design for frontpage

Browse Source
This commit is contained in:
Reimar 2025-01-27 21:11:04 +01:00
parent 9360128642
commit f5bf017f11
Signed by: Reimar
GPG Key ID: 93549FA07F0AE268
2 changed files with 128 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
public/assets/style/main.css Normal file
View File

@ -0,0 +1,112 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
body {
background-color: #F0F0F0;
font-family: "Open Sans", sans-serif;
text-align: center;
}
*::selection {
background-color: #00BCD4;
color: white;
}
h1 {
background-image: linear-gradient(to right, #4CAF50, #4CAF50 40%, #00BCD4 60%);
background-clip: text;
color: transparent;
font-size: 3rem;
margin-top: 3rem;
margin-bottom: 1rem;
}
p {
color: #9E9E9E;
font-size: 0.8rem;
}
#file-input {
display: none;
}
#file-drop-area {
max-width: 355px;
height: 200px;
border: 3px dotted #BDBDBD;
margin: 3rem auto;
border-radius: 1rem;
display: flex;
justify-content: center;
align-items: center;
transition: background-color ease-in 200ms;
cursor: pointer;
}
#file-drop-area span {
color: #9E9E9E;
}
#file-drop-area:hover, #file-drop-area:focus {
background-color: #E0E0E0;
outline: none;
}
button {
background-image: linear-gradient(to right, #4CAF50, #00BCD4);
border: none;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
font-weight: bold;
transition: all ease-in 100ms;
cursor: pointer;
}
button:hover {
filter: brightness(1.1);
}
button:active {
filter: brightness(0.8);
}
button:focus {
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
outline: 2px solid black;
}
input, select {
background-color: white;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
border: 1px solid #BDBDBD;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
transition: all ease-in 100ms;
}
input:focus, select:focus {
outline: none;
border: 1px solid #00BCD4;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}
#filesize {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
#filesize-unit {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 1px solid white;
}
#filesize-unit:focus {
border-left: 1px solid #00BCD4;
}
#compress {
margin-left: 1rem;
}

19
public/index.html
View File

@ -5,13 +5,26 @@
<title>Video Compressor</title> <title>Video Compressor</title>
<script src="/assets/scripts/ffmpeg/package/dist/umd/ffmpeg.js"></script> <script src="/assets/scripts/ffmpeg/package/dist/umd/ffmpeg.js"></script>
<script defer src="/assets/scripts/main.js"></script> <script defer src="/assets/scripts/main.js"></script>
<link rel="stylesheet" href="/assets/style/main.css">
</head> </head>
<body> <body>
<h1>Video Compressor</h1> <h1>Video Compressor</h1>
<p>Compress video files to a specific file size, so you can upload them to your favorite social media and messaging apps!</p> <p>Compress video files to a specific file size, so you can upload them to your favorite social media and messaging apps!</p>
<input id="file-input" type="file" accept="video/*">
<p>File size: <input id="filesize" type="number" value="10">MB</p> <div id="file-drop-area" tabindex="0">
<button onclick="compress()">Submit</button> <span>Drag and drop a file here!</span>
</div>
<input id="file-input" type="file" accept="video/*" tabindex="-1">
<input id="filesize" type="number" value="10"><!--
--><select id="filesize-unit">
<option value="K">KB</option>
<option value="M" selected>MB</option>
<option value="G">GB</option>
</select>
<button id="compress" onclick="compress()">Go!</button>
</body> </body>
</html> </html>