+
-
- 1. Step
+ 2. Step
+ 3. Step
+ 4. Step
+ 5. Step
+ 6. Step
+
+
+
-
-
+
+
+
+
+
-
-
-
Manage document types
-
-
+
+
-
-
-
+
+
+
-
-
-
-
- Upload your video here:
-
-
- Drag and drop video file
- -No video chosen
-
- ![]()
-
-
-
-
-
-
-
-
-
- Choose your preferences:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Choose prefered document style:
-
-
-
-
- 
- 
+
+
-
+
+
+
Upload your video here:
+
+
- Drag and drop video file
+ +No video chosen
+
+ ![]()
+
+
-
-
-
+
+
+
+
+
+
Choose your preferences:
+
+
+
-
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
-
-
+
+
+
+
-
-
-
-
-
Click to submit:
- + -
-
-
-
-
-
+
+
+
+
+
\ No newline at end of file
diff --git a/electron/main/style.css b/electron/main/style.css
index ee73be1..89750a1 100644
--- a/electron/main/style.css
+++ b/electron/main/style.css
@@ -186,6 +186,8 @@ input[type="file"] {
gap: 5px;
}
+/* Hover effects for all different document options (with placeholders)*/
+
.figure1 {
position: relative;
}
@@ -201,12 +203,79 @@ input[type="file"] {
object-fit: contain;
display: none;
transition: opacity .2s;
+ z-index: 999;
}
.figure1:hover .img-hover1 {
display: flex;
}
+.figure2 {
+ position: relative;
+}
+
+.img-hover2 {
+ position: absolute;
+ width: 200px;
+ height: 200px;
+ top: 0;
+ right: 40%;
+ left: 0;
+ bottom: 0;
+ object-fit: contain;
+ display: none;
+ transition: opacity .2s;
+ z-index: 999;
+}
+
+.figure2:hover .img-hover2 {
+ display: flex;
+}
+
+.figure3 {
+ position: relative;
+}
+
+.img-hover3 {
+ position: absolute;
+ width: 200px;
+ height: 200px;
+ top: 0;
+ right: 40%;
+ left: 0;
+ bottom: 0;
+ object-fit: contain;
+ display: none;
+ transition: opacity .2s;
+ z-index: 999;
+}
+
+.figure3:hover .img-hover3 {
+ display: flex;
+}
+
+.figure4 {
+ position: relative;
+}
+
+.img-hover4 {
+ position: absolute;
+ width: 200px;
+ height: 200px;
+ top: 0;
+ right: 40%;
+ left: 0;
+ bottom: 0;
+ object-fit: contain;
+ display: none;
+ transition: opacity .2s;
+ z-index: 999;
+}
+
+.figure4:hover .img-hover4 {
+ display: flex;
+}
+
.img-icon {
width: 15px;
height: 15px;
@@ -236,7 +305,7 @@ input[type="file"] {
background-color: #FFF;
display: flex;
width: 780px;
- height: 500px;
+ height: 550px;
flex-direction: column;
align-items: center;
gap: 10px;
@@ -245,6 +314,7 @@ input[type="file"] {
border-style: solid;
border-radius: 6px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+ padding-top: 50px;
}
.progressbar {
@@ -477,7 +547,14 @@ li {
-webkit-transition: all 0.3s ease;
}
-.menu1 a:first-child {
+#customDocBtn {
+ border: none;
+ background-color:#1C3B69;
+ font: 700 20px 'Oswald', sans-serif;
+ border-radius: 0%;
+}
+
+.menu1 button:first-child {
margin-top: 30px;
}
@@ -494,7 +571,7 @@ li {
text-decoration: none;
}
-.li1:hover {
+.li1:hover, #customDocBtn:hover{
background-color: #FFF;
color: rgb(61, 61, 61);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -562,10 +639,9 @@ li {
.container {
background: white;
- padding: 30px;
- margin-top: 50px;
+ padding: 10px;
+ margin-top: 30px;
border-radius: 12px;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 650px;
}
-
- ---Starting---
-
-
- ---Transkribing---
-
-
- ---Document creation---
-
+
+
-
-
+
-
+
Choose prefered document style:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-Change names of the speakers:
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
+
+
+
+ Click to submit:
+ + +
+
+
+ ---Starting---
+
+
+ ---Transkribing---
+
+
+ ---Document creation---
+
+
+
+
+
+
+
+ Change names of the speakers:
+
+
+
+
+
+
+
+
+
+
+
+
+
Klick to download your document:
+ +
-
+
+