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
@@ -6,128 +6,10 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Custom Document</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f0f2f5;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.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: 600px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: bold;
|
||||
margin-top: 15px;
|
||||
display: block;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Manage document types</h1>
|
||||
|
||||
<label for="existingDocs">Vorhandene Dokumente auswählen (optional):</label>
|
||||
<!--Drop Down-->
|
||||
<select name="existingDocs" id="existingDocs">
|
||||
<option value="newDoc">-- Neues Dokument erstellen --</option>
|
||||
</select>
|
||||
|
||||
<div id="docNameWrapper">
|
||||
<label for="docName">Dokumentname:</label>
|
||||
<input type="text" id="docName" placeholder="Gib hier den Dokumentnamen ein">
|
||||
</div>
|
||||
|
||||
<label for="prompt">Dein Prompt:</label>
|
||||
<textarea id="prompt" placeholder="Schreibe hier den Prompt für dein Dokument..."></textarea>
|
||||
|
||||
<div class="buttons">
|
||||
<a href="index.html">
|
||||
<button id="goBackBtn">Abbrechen</button>
|
||||
</a>
|
||||
<button id="deleteBtn">Dokument löschen</button>
|
||||
<button id="generateBtn">Dokument speichern</button>
|
||||
</div>
|
||||
|
||||
<div id="result"></div>
|
||||
</div>
|
||||
|
||||
<script src="languages.js"></script>
|
||||
<script>
|
||||
const goBackBtn = document.getElementById("goBackBtn");
|
||||
|
||||
@@ -177,6 +177,35 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" style="display:none;">
|
||||
<h1>Manage document types</h1>
|
||||
|
||||
<label for="existingDocs">Vorhandene Dokumente auswählen (optional):</label>
|
||||
<!--Drop Down-->
|
||||
<select name="existingDocs" id="existingDocs">
|
||||
<option value="newDoc">-- Neues Dokument erstellen --</option>
|
||||
</select>
|
||||
|
||||
<div id="docNameWrapper">
|
||||
<label for="docName">Dokumentname:</label>
|
||||
<input type="text" id="docName" placeholder="Gib hier den Dokumentnamen ein">
|
||||
</div>
|
||||
|
||||
<label for="prompt">Dein Prompt:</label>
|
||||
<textarea id="prompt" placeholder="Schreibe hier den Prompt für dein Dokument..."></textarea>
|
||||
|
||||
<div class="buttons">
|
||||
<a href="index.html">
|
||||
<button id="goBackBtn">Abbrechen</button>
|
||||
</a>
|
||||
<button id="deleteBtn">Dokument löschen</button>
|
||||
<button id="generateBtn">Dokument speichern</button>
|
||||
</div>
|
||||
|
||||
<div id="result"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<button id ="nextBtn" class="navBtn">→</button>
|
||||
|
||||
</div>
|
||||
|
||||
+117
-36
@@ -25,7 +25,7 @@ body {
|
||||
width: 770px;
|
||||
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;
|
||||
@@ -36,7 +36,7 @@ body {
|
||||
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;
|
||||
@@ -78,7 +78,7 @@ body {
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -123,9 +123,9 @@ input[type="file"] {
|
||||
.checkbox-group {
|
||||
--borderColor: #007bfff5;
|
||||
--borderWidth: .125em;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-group input[type=checkbox] {
|
||||
.checkbox-group input[type=checkbox] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
vertical-align: middle;
|
||||
@@ -137,9 +137,10 @@ input[type="file"] {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
.checkbox-group input[type=checkbox]:before,
|
||||
.checkbox-group input[type=checkbox]:after {
|
||||
}
|
||||
|
||||
.checkbox-group input[type=checkbox]:before,
|
||||
.checkbox-group input[type=checkbox]:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background: var(--borderColor);
|
||||
@@ -148,31 +149,36 @@ input[type="file"] {
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
transform-origin: left center;
|
||||
}
|
||||
.checkbox-group input[type=checkbox]:before {
|
||||
}
|
||||
|
||||
.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 {
|
||||
}
|
||||
|
||||
.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 {
|
||||
}
|
||||
|
||||
.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 {
|
||||
}
|
||||
|
||||
.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{
|
||||
.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;
|
||||
@@ -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;
|
||||
@@ -227,14 +233,14 @@ input[type="file"] {
|
||||
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;
|
||||
@@ -394,24 +402,24 @@ li {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toggle1:checked + .hamburger1 .top {
|
||||
#toggle1:checked+.hamburger1 .top {
|
||||
-webkit-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);
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
#toggle1:checked + .hamburger1 .bottom {
|
||||
#toggle1:checked+.hamburger1 .bottom {
|
||||
-webkit-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