mirror of
https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git
synced 2026-06-15 18:01:52 +02:00
Joined custom_document html and css elements with index and style
This commit is contained in:
Verena Schulz
+181
-100
@@ -9,7 +9,7 @@ body {
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
#h1 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@@ -23,41 +23,41 @@ body {
|
||||
position: relative;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
width: 770px;
|
||||
height: 60px;
|
||||
height: 60px;
|
||||
background-color: #FFF;
|
||||
box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
width: 350px;
|
||||
height: 200px;
|
||||
transition: border 0.3s, background-color 0.3s;
|
||||
border: 2px dashed #7378c9;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.upload-container.dragover {
|
||||
border-color: #007BFF;
|
||||
background-color: #eaf0ff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.upload-container p {
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.file-name {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
@@ -66,19 +66,19 @@ body {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
#thumbnailContainer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
#thumbnailImage {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@@ -87,7 +87,7 @@ body {
|
||||
height: 100px;
|
||||
/*border: 1px dashed black;*/
|
||||
}
|
||||
|
||||
|
||||
.custom-btn {
|
||||
padding: 10px 20px;
|
||||
margin-top: 10px;
|
||||
@@ -98,12 +98,12 @@ body {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.custom-btn:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
|
||||
.submit-btn:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
@@ -115,64 +115,70 @@ body {
|
||||
.KI-wrapper {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.checkbox-group {
|
||||
--borderColor: #007bfff5;
|
||||
--borderWidth: .125em;
|
||||
}
|
||||
--borderColor: #007bfff5;
|
||||
--borderWidth: .125em;
|
||||
}
|
||||
|
||||
.checkbox-group input[type=checkbox] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
vertical-align: middle;
|
||||
background: #fff;
|
||||
font-size: 1.8em;
|
||||
border-radius: 0.125em;
|
||||
display: inline-block;
|
||||
border: var(--borderWidth) solid var(--borderColor);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.checkbox-group input[type=checkbox]:before,
|
||||
.checkbox-group input[type=checkbox]:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: var(--borderColor);
|
||||
width: calc(var(--borderWidth) * 3);
|
||||
height: var(--borderWidth);
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
transform-origin: left center;
|
||||
}
|
||||
.checkbox-group input[type=checkbox]:before {
|
||||
transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(0);
|
||||
transition: transform 200ms ease-in 200ms;
|
||||
}
|
||||
.checkbox-group input[type=checkbox]:after {
|
||||
width: calc(var(--borderWidth) * 5);
|
||||
transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(0);
|
||||
transform-origin: left center;
|
||||
transition: transform 200ms ease-in;
|
||||
}
|
||||
.checkbox-group input[type=checkbox]:checked:before {
|
||||
transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(1);
|
||||
transition: transform 200ms ease-in;
|
||||
}
|
||||
.checkbox-group input[type=checkbox]:checked:after {
|
||||
width: calc(var(--borderWidth) * 5);
|
||||
transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(1);
|
||||
transition: transform 200ms ease-out 200ms;
|
||||
}
|
||||
.checkbox-group input[type=checkbox]:focus {
|
||||
outline: calc(var(--borderWidth) / 2) dotted rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.checkbox-group input[type=checkbox] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
vertical-align: middle;
|
||||
background: #fff;
|
||||
font-size: 1.8em;
|
||||
border-radius: 0.125em;
|
||||
display: inline-block;
|
||||
border: var(--borderWidth) solid var(--borderColor);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkbox-container{
|
||||
.checkbox-group input[type=checkbox]:before,
|
||||
.checkbox-group input[type=checkbox]:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: var(--borderColor);
|
||||
width: calc(var(--borderWidth) * 3);
|
||||
height: var(--borderWidth);
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.checkbox-group input[type=checkbox]:before {
|
||||
transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(0);
|
||||
transition: transform 200ms ease-in 200ms;
|
||||
}
|
||||
|
||||
.checkbox-group input[type=checkbox]:after {
|
||||
width: calc(var(--borderWidth) * 5);
|
||||
transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(0);
|
||||
transform-origin: left center;
|
||||
transition: transform 200ms ease-in;
|
||||
}
|
||||
|
||||
.checkbox-group input[type=checkbox]:checked:before {
|
||||
transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(1);
|
||||
transition: transform 200ms ease-in;
|
||||
}
|
||||
|
||||
.checkbox-group input[type=checkbox]:checked:after {
|
||||
width: calc(var(--borderWidth) * 5);
|
||||
transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(1);
|
||||
transition: transform 200ms ease-out 200ms;
|
||||
}
|
||||
|
||||
.checkbox-group input[type=checkbox]:focus {
|
||||
outline: calc(var(--borderWidth) / 2) dotted rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
justify-items: left;
|
||||
@@ -194,13 +200,13 @@ input[type="file"] {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.mitte {
|
||||
background-color: #FFF;
|
||||
display: flex;
|
||||
@@ -213,10 +219,10 @@ input[type="file"] {
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.progressbar{
|
||||
|
||||
.progressbar {
|
||||
position: relative;
|
||||
width: 210px;
|
||||
height: 30px;
|
||||
@@ -226,15 +232,15 @@ input[type="file"] {
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.progress_fill{
|
||||
|
||||
.progress_fill {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background: green;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.progress_text{
|
||||
|
||||
.progress_text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 5px;
|
||||
@@ -252,7 +258,9 @@ input[type="file"] {
|
||||
padding: 2px 10px 2px 10px;
|
||||
}
|
||||
|
||||
#ai_type, #transkript_type, #language_option {
|
||||
#ai_type,
|
||||
#transkript_type,
|
||||
#language_option {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@@ -260,7 +268,7 @@ input[type="file"] {
|
||||
gap: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow-wrap:inherit;
|
||||
overflow-wrap: inherit;
|
||||
padding-bottom: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 10px;
|
||||
@@ -274,7 +282,7 @@ input[type="file"] {
|
||||
background: #fff;
|
||||
padding: 10px 30px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.step-item {
|
||||
@@ -336,7 +344,7 @@ input[type="file"] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.testy{
|
||||
.testy {
|
||||
background-color: #FFF;
|
||||
display: flex;
|
||||
width: auto;
|
||||
@@ -352,13 +360,13 @@ input[type="file"] {
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background-color: red;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
border: 1px solid black;
|
||||
margin: 5px;
|
||||
border-radius: 100px;
|
||||
background-color: red;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 5px;
|
||||
border: 1px solid black;
|
||||
margin: 5px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
li {
|
||||
@@ -394,24 +402,24 @@ li {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle1:checked + .hamburger1 .top {
|
||||
#toggle1:checked+.hamburger1 .top {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
margin-top: 22.5px;
|
||||
}
|
||||
|
||||
#toggle1:checked + .hamburger1 .meat {
|
||||
#toggle1:checked+.hamburger1 .meat {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
#toggle1:checked + .hamburger1 .bottom {
|
||||
#toggle1:checked+.hamburger1 .bottom {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
#toggle1:checked ~ .menu1 {
|
||||
#toggle1:checked~.menu1 {
|
||||
height: 150px;
|
||||
width: 300px;
|
||||
}
|
||||
@@ -465,7 +473,9 @@ li {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#step2, #step3, #step5 {
|
||||
#step2,
|
||||
#step3,
|
||||
#step5 {
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
@@ -498,7 +508,8 @@ li {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
#speakerLocker, #speakerResender{
|
||||
#speakerLocker,
|
||||
#speakerResender {
|
||||
padding: 10px 20px;
|
||||
margin: 20px auto;
|
||||
background-color: #007BFF;
|
||||
@@ -513,7 +524,77 @@ li {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.speakerView, .speakerAudio, .speakerWrite{
|
||||
.speakerView,
|
||||
.speakerAudio,
|
||||
.speakerWrite {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
margin-top: 50px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
width: 90%;
|
||||
max-width: 650px;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
textarea,
|
||||
select {
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
margin-top: 5px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.buttons button {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#result {
|
||||
margin-top: 20px;
|
||||
color: #333;
|
||||
word-break: break-word;
|
||||
}
|
||||
Reference in New Issue
Block a user