Select Text read_text.html
mk_novel.html
<!DOCTYPE html>
<html>
<head>
<title>mk_novel.html</title>
<link rel="stylesheet" href="{{ url_for('static', filename='dark.css') }}">
<style>
body {
background-color: #2C2C2C;
color: white;
font-family: Arial, sans-serif;
}
/* Button Styling */
.refresh-button, .refresh-button2 {
display: inline-block;
padding: 5px;
margin: 10px 1px;
font-size: 1em;
color: rgb(0, 0, 0);
text-decoration: none;
border-radius: 5px;
}
.refresh-button {
background-color: orange;
}
.refresh-button2 {
background-color: rgb(255, 225, 0);
}
.refresh-button:hover, .refresh-button2:hover {
background-color: orange;
}
/* Sticky Header */
.sticky {
position: sticky;
top: 0;
background-color: orange;
padding: 10px 0;
z-index: 1000;
text-align: center !important;
width: 100% !important;
height: auto !important;
}
/* Video Gallery */
.video-gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
/* Figure Styling */
figure {
max-width: 300px;
margin: 10px;
text-align: center;
}
figcaption {
margin-top: 8px;
font-size: 1rem;
color: #cccccc;
}
/* Text Styling */
pre, p {
color: white;
font-size: 24px;
font-family: monospace;
white-space: pre-wrap;
word-wrap: break-word;
}
/* Image Styling */
img {
width: 200px;
height: auto;
display: block;
margin-bottom: 5px;
border-radius: 8px;
}
/* Link Styling */
a {
color: red;
font-size: 24px;
text-decoration: none;
}
/* Highlighted Span */
span {
background-color: yellow;
color: black;
padding: 2px;
border-radius: 5px;
font-size: 1em;
}
/* Video Display */
.video-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
margin-top: 20px;
}
.video-item {
display: flex;
flex-direction: column;
align-items: center;
max-width: 420px;
margin: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
padding: 10px;
background-color: rgba(170, 160, 150, 0.5);
border-radius: 5px;
}
video {
width: 20%;
height: auto;
}
/* Container for Centering */
.vid_container {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<script>
function findString(str) {
if (parseInt(navigator.appVersion) < 4) return;
if (window.find) {
var strFound = window.find(str);
if (!strFound) {
window.find(str, 0, 1);
}
if (strFound) {
var range = window.getSelection().getRangeAt(0);
var span = document.createElement("span");
span.style.backgroundColor = "yellow";
range.surroundContents(span);
}
} else if (navigator.appName.indexOf("Microsoft") != -1) {
// Not implemented for brevity
} else if (navigator.appName == "Opera") {
alert("Opera browsers not supported, sorry...");
return;
}
if (!strFound) alert("String '" + str + "' not found!");
}
function moveToNextOccurrence() {
var search_str = document.getElementById("search_input").value;
findString(search_str);
}
</script>
</head>
<body style="background-color: rgb(156, 23, 23);">
<header class="sticky">
<a class="refresh-button2" href="{{ url_for('index') }}">Home</a> | |
<a class="refresh-button2" href="{{ url_for('mp3upload') }}">Play Mp3</a> | |
<a class="refresh-button2" href="{{ url_for('add_novel_caption') }}">Add Caption</a> | |
<a class="refresh-button2" href="{{ url_for('add_novel_text') }}">add_text</a> | <a class="refresh-button2" href="{{ url_for('novel_balacoon') }}">Create Mp3</a> |
<a class="refresh-button" href="{{ url_for('start_project') }}">Start_Project</a> |
<a class="refresh-button" href="{{ url_for('combine_audio_image') }}">Join Image/Mp3</a> |
<a class="refresh-button" href="{{ url_for('merge_novel_videos') }}">Merge_Novel_Videos</a> |
<a href="{{ url_for('readlog') }}">View Log</a> |
<input style="width:25%;" type="text" id="search_input" />
<button id="search_submit" onclick="moveToNextOccurrence()">
Find in page Next
</button>
<form action="{{ url_for('search') }}" method="post">
<label style="font-size:1em;color:yellow;" for="search_terms">Search for (comma-separated):</label>
<input style="font-size:1em;color:orange;width:50%" type="text" id="search_terms" name="search_terms" required>
<button style="font-size:1em;color:navy;"type="submit">Search</button>
</form>
</center>
</header>
<main>
{% block content %}
{% endblock %}
</main><br/><br/>
<hr><br/>
<footer class="video-gallery">
<video width="420" height="auto" controls>
<source src="static/temp_exp/novel_concatenationX.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<video width="420" height="auto" controls>
<source src="static/temp_exp/avatarX.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<br/><br/>
<video width="420" height="auto" controls>
<source src="static/temp_exp/untitledXXXXX.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<video width="420" height="auto" controls>
<source src="static/temp_exp/untitledXXXX.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<video width="420" height="auto" controls>
<source src="static/temp_exp/novel_creationX.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<video width="420" height="auto" controls>
<source src='static/temp_exp/final_flipbookX.mp4' type="video/mp4" />
Your browser does not support the video tag.
</video>
<p>© 2024 FlaskArchitect Blog</p>
</footer>
</body>
</html>
Back to file list