Spaces:
Running
Running
Add 2 files
Browse files- index.html +585 -94
- prompts.txt +1 -0
index.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>
|
| 7 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
<style>
|
|
@@ -43,57 +43,399 @@
|
|
| 43 |
.word {
|
| 44 |
margin: 0 0.5rem;
|
| 45 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 46 |
</style>
|
| 47 |
</head>
|
| 48 |
<body class="bg-gray-900 text-white min-h-screen flex flex-col">
|
| 49 |
<header class="bg-black py-4 px-6 shadow-lg">
|
| 50 |
<div class="container mx-auto flex justify-between items-center">
|
| 51 |
<h1 class="text-2xl font-bold text-blue-400">
|
| 52 |
-
<i class="fas fa-newspaper mr-2"></i>
|
| 53 |
</h1>
|
| 54 |
-
<div class="flex items-center space-x-4">
|
| 55 |
<button id="playPauseBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
|
| 56 |
<i class="fas fa-play mr-2"></i> Play
|
| 57 |
</button>
|
|
|
|
|
|
|
|
|
|
| 58 |
<div class="flex items-center">
|
| 59 |
<i class="fas fa-tachometer-alt mr-2 text-blue-400"></i>
|
| 60 |
<input type="range" id="speedControl" min="1" max="20" value="5" class="speed-control w-32">
|
| 61 |
<span id="speedValue" class="ml-2 text-blue-400">5x</span>
|
| 62 |
</div>
|
|
|
|
|
|
|
|
|
|
| 63 |
</div>
|
| 64 |
</div>
|
| 65 |
</header>
|
| 66 |
|
| 67 |
<main class="flex-grow flex items-center justify-center p-6">
|
| 68 |
-
<
|
| 69 |
-
|
| 70 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 71 |
</div>
|
| 72 |
</div>
|
| 73 |
</main>
|
| 74 |
|
| 75 |
<footer class="bg-black py-4 px-6">
|
| 76 |
<div class="container mx-auto text-center text-gray-400">
|
| 77 |
-
<p>
|
| 78 |
</div>
|
| 79 |
</footer>
|
| 80 |
|
| 81 |
<script>
|
| 82 |
-
|
| 83 |
-
|
| 84 |
-
|
| 85 |
-
|
| 86 |
-
|
| 87 |
-
|
| 88 |
-
|
| 89 |
-
|
| 90 |
-
|
| 91 |
-
|
| 92 |
-
|
| 93 |
-
|
| 94 |
-
|
| 95 |
-
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 96 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 97 |
// Format text into 5-word lines
|
| 98 |
function formatTextToLines(text) {
|
| 99 |
const words = text.split(/\s+/);
|
|
@@ -107,25 +449,19 @@
|
|
| 107 |
return lines;
|
| 108 |
}
|
| 109 |
|
| 110 |
-
// Get
|
| 111 |
-
const
|
| 112 |
-
|
| 113 |
-
|
| 114 |
-
|
| 115 |
-
|
| 116 |
-
|
| 117 |
-
|
| 118 |
-
newsParagraphs.forEach(paragraph => {
|
| 119 |
const lines = formatTextToLines(paragraph);
|
| 120 |
lines.forEach(lineWords => {
|
| 121 |
formattedContent += '<div class="word-line">';
|
| 122 |
lineWords.forEach(word => {
|
| 123 |
-
|
| 124 |
-
if (word.endsWith(':') && word === lineWords[0]) {
|
| 125 |
-
formattedContent += `<span class="word text-blue-400 font-bold">${word}</span>`;
|
| 126 |
-
} else {
|
| 127 |
-
formattedContent += `<span class="word">${word}</span>`;
|
| 128 |
-
}
|
| 129 |
});
|
| 130 |
formattedContent += '</div>';
|
| 131 |
});
|
|
@@ -134,78 +470,233 @@
|
|
| 134 |
});
|
| 135 |
|
| 136 |
teleprompterText.innerHTML = formattedContent;
|
|
|
|
|
|
|
| 137 |
|
| 138 |
-
|
| 139 |
-
|
| 140 |
-
|
| 141 |
-
|
| 142 |
-
|
|
|
|
|
|
|
| 143 |
|
| 144 |
-
|
| 145 |
-
|
| 146 |
-
|
| 147 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 148 |
|
| 149 |
-
if (
|
| 150 |
-
|
| 151 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 152 |
}
|
| 153 |
-
});
|
| 154 |
-
|
| 155 |
-
// Play/Pause functionality
|
| 156 |
-
playPauseBtn.addEventListener('click', function() {
|
| 157 |
-
isPlaying = !isPlaying;
|
| 158 |
|
| 159 |
-
|
| 160 |
-
|
| 161 |
-
|
| 162 |
-
|
| 163 |
-
|
| 164 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 165 |
}
|
| 166 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 167 |
|
| 168 |
-
|
| 169 |
-
|
| 170 |
-
|
| 171 |
-
|
| 172 |
-
|
| 173 |
-
|
| 174 |
-
|
| 175 |
-
|
| 176 |
-
|
| 177 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 178 |
}
|
| 179 |
-
|
|
|
|
|
|
|
| 180 |
}
|
|
|
|
| 181 |
|
| 182 |
-
|
| 183 |
-
|
| 184 |
-
|
| 185 |
-
|
| 186 |
-
|
| 187 |
-
|
| 188 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 189 |
|
| 190 |
-
//
|
| 191 |
-
if (
|
| 192 |
-
|
| 193 |
-
|
| 194 |
-
speedControl.value = scrollSpeed + 1;
|
| 195 |
-
speedControl.dispatchEvent(new Event('input'));
|
| 196 |
-
}
|
| 197 |
}
|
| 198 |
-
|
| 199 |
-
|
| 200 |
-
|
| 201 |
-
|
| 202 |
-
|
| 203 |
-
|
| 204 |
-
|
| 205 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 206 |
}
|
| 207 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 208 |
});
|
|
|
|
|
|
|
|
|
|
| 209 |
</script>
|
| 210 |
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sovitich28/sovitich-projects" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 211 |
</html>
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Advanced Teleprompter</title>
|
| 7 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
<style>
|
|
|
|
| 43 |
.word {
|
| 44 |
margin: 0 0.5rem;
|
| 45 |
}
|
| 46 |
+
.card {
|
| 47 |
+
transition: all 0.3s ease;
|
| 48 |
+
}
|
| 49 |
+
.card:hover {
|
| 50 |
+
transform: translateY(-5px);
|
| 51 |
+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
| 52 |
+
}
|
| 53 |
+
.fade-in {
|
| 54 |
+
animation: fadeIn 0.5s ease-in;
|
| 55 |
+
}
|
| 56 |
+
@keyframes fadeIn {
|
| 57 |
+
from { opacity: 0; }
|
| 58 |
+
to { opacity: 1; }
|
| 59 |
+
}
|
| 60 |
</style>
|
| 61 |
</head>
|
| 62 |
<body class="bg-gray-900 text-white min-h-screen flex flex-col">
|
| 63 |
<header class="bg-black py-4 px-6 shadow-lg">
|
| 64 |
<div class="container mx-auto flex justify-between items-center">
|
| 65 |
<h1 class="text-2xl font-bold text-blue-400">
|
| 66 |
+
<i class="fas fa-newspaper mr-2"></i> Advanced Teleprompter
|
| 67 |
</h1>
|
| 68 |
+
<div id="headerControls" class="flex items-center space-x-4 hidden">
|
| 69 |
<button id="playPauseBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
|
| 70 |
<i class="fas fa-play mr-2"></i> Play
|
| 71 |
</button>
|
| 72 |
+
<button id="listenBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center">
|
| 73 |
+
<i class="fas fa-volume-up mr-2"></i> Listen
|
| 74 |
+
</button>
|
| 75 |
<div class="flex items-center">
|
| 76 |
<i class="fas fa-tachometer-alt mr-2 text-blue-400"></i>
|
| 77 |
<input type="range" id="speedControl" min="1" max="20" value="5" class="speed-control w-32">
|
| 78 |
<span id="speedValue" class="ml-2 text-blue-400">5x</span>
|
| 79 |
</div>
|
| 80 |
+
<button id="backBtn" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center">
|
| 81 |
+
<i class="fas fa-arrow-left mr-2"></i> Back
|
| 82 |
+
</button>
|
| 83 |
</div>
|
| 84 |
</div>
|
| 85 |
</header>
|
| 86 |
|
| 87 |
<main class="flex-grow flex items-center justify-center p-6">
|
| 88 |
+
<!-- Main Menu -->
|
| 89 |
+
<div id="mainMenu" class="w-full max-w-4xl text-center fade-in">
|
| 90 |
+
<h2 class="text-3xl font-bold mb-12 text-blue-400">Welcome to Teleprompter</h2>
|
| 91 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
| 92 |
+
<div class="card bg-gray-800 p-8 rounded-lg cursor-pointer hover:bg-gray-700 transition-all" onclick="showBookCategories()">
|
| 93 |
+
<div class="text-5xl mb-4 text-blue-400">
|
| 94 |
+
<i class="fas fa-book"></i>
|
| 95 |
+
</div>
|
| 96 |
+
<h3 class="text-xl font-bold mb-2">Read Book</h3>
|
| 97 |
+
<p class="text-gray-300">Choose from our collection of books</p>
|
| 98 |
+
</div>
|
| 99 |
+
<div class="card bg-gray-800 p-8 rounded-lg cursor-pointer hover:bg-gray-700 transition-all" onclick="showArticleCategories()">
|
| 100 |
+
<div class="text-5xl mb-4 text-green-400">
|
| 101 |
+
<i class="fas fa-newspaper"></i>
|
| 102 |
+
</div>
|
| 103 |
+
<h3 class="text-xl font-bold mb-2">Read Article</h3>
|
| 104 |
+
<p class="text-gray-300">Browse through various articles</p>
|
| 105 |
+
</div>
|
| 106 |
+
<div class="card bg-gray-800 p-8 rounded-lg cursor-pointer hover:bg-gray-700 transition-all" onclick="showGenerateText()">
|
| 107 |
+
<div class="text-5xl mb-4 text-purple-400">
|
| 108 |
+
<i class="fas fa-magic"></i>
|
| 109 |
+
</div>
|
| 110 |
+
<h3 class="text-xl font-bold mb-2">Generate Text</h3>
|
| 111 |
+
<p class="text-gray-300">Create custom content with AI</p>
|
| 112 |
+
</div>
|
| 113 |
+
</div>
|
| 114 |
+
</div>
|
| 115 |
+
|
| 116 |
+
<!-- Book Categories -->
|
| 117 |
+
<div id="bookCategories" class="w-full max-w-4xl hidden fade-in">
|
| 118 |
+
<h2 class="text-3xl font-bold mb-8 text-blue-400">Book Categories</h2>
|
| 119 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
| 120 |
+
<div class="card bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showBooks('fiction')">
|
| 121 |
+
<img src="https://source.unsplash.com/random/300x200/?fiction,book" alt="Fiction" class="w-full h-48 object-cover">
|
| 122 |
+
<div class="p-4">
|
| 123 |
+
<h3 class="text-xl font-bold">Fiction</h3>
|
| 124 |
+
<p class="text-gray-400 text-sm">Novels and stories</p>
|
| 125 |
+
</div>
|
| 126 |
+
</div>
|
| 127 |
+
<div class="card bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showBooks('science')">
|
| 128 |
+
<img src="https://source.unsplash.com/random/300x200/?science,book" alt="Science" class="w-full h-48 object-cover">
|
| 129 |
+
<div class="p-4">
|
| 130 |
+
<h3 class="text-xl font-bold">Science</h3>
|
| 131 |
+
<p class="text-gray-400 text-sm">Scientific literature</p>
|
| 132 |
+
</div>
|
| 133 |
+
</div>
|
| 134 |
+
<div class="card bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showBooks('history')">
|
| 135 |
+
<img src="https://source.unsplash.com/random/300x200/?history,book" alt="History" class="w-full h-48 object-cover">
|
| 136 |
+
<div class="p-4">
|
| 137 |
+
<h3 class="text-xl font-bold">History</h3>
|
| 138 |
+
<p class="text-gray-400 text-sm">Historical accounts</p>
|
| 139 |
+
</div>
|
| 140 |
+
</div>
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
|
| 144 |
+
<!-- Books List -->
|
| 145 |
+
<div id="booksList" class="w-full max-w-4xl hidden fade-in">
|
| 146 |
+
<h2 id="booksCategoryTitle" class="text-3xl font-bold mb-8 text-blue-400"></h2>
|
| 147 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 148 |
+
<!-- Books will be inserted here by JavaScript -->
|
| 149 |
+
</div>
|
| 150 |
+
</div>
|
| 151 |
+
|
| 152 |
+
<!-- Article Categories -->
|
| 153 |
+
<div id="articleCategories" class="w-full max-w-4xl hidden fade-in">
|
| 154 |
+
<h2 class="text-3xl font-bold mb-8 text-green-400">Article Categories</h2>
|
| 155 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
| 156 |
+
<div class="card bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showArticles('technology')">
|
| 157 |
+
<img src="https://source.unsplash.com/random/300x200/?technology" alt="Technology" class="w-full h-48 object-cover">
|
| 158 |
+
<div class="p-4">
|
| 159 |
+
<h3 class="text-xl font-bold">Technology</h3>
|
| 160 |
+
<p class="text-gray-400 text-sm">Tech news and reviews</p>
|
| 161 |
+
</div>
|
| 162 |
+
</div>
|
| 163 |
+
<div class="card bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showArticles('health')">
|
| 164 |
+
<img src="https://source.unsplash.com/random/300x200/?health" alt="Health" class="w-full h-48 object-cover">
|
| 165 |
+
<div class="p-4">
|
| 166 |
+
<h3 class="text-xl font-bold">Health</h3>
|
| 167 |
+
<p class="text-gray-400 text-sm">Medical and wellness</p>
|
| 168 |
+
</div>
|
| 169 |
+
</div>
|
| 170 |
+
<div class="card bg-gray-800 rounded-lg overflow-hidden cursor-pointer" onclick="showArticles('business')">
|
| 171 |
+
<img src="https://source.unsplash.com/random/300x200/?business" alt="Business" class="w-full h-48 object-cover">
|
| 172 |
+
<div class="p-4">
|
| 173 |
+
<h3 class="text-xl font-bold">Business</h3>
|
| 174 |
+
<p class="text-gray-400 text-sm">Finance and markets</p>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
|
| 180 |
+
<!-- Articles List -->
|
| 181 |
+
<div id="articlesList" class="w-full max-w-4xl hidden fade-in">
|
| 182 |
+
<h2 id="articlesCategoryTitle" class="text-3xl font-bold mb-8 text-green-400"></h2>
|
| 183 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 184 |
+
<!-- Articles will be inserted here by JavaScript -->
|
| 185 |
+
</div>
|
| 186 |
+
</div>
|
| 187 |
+
|
| 188 |
+
<!-- Generate Text -->
|
| 189 |
+
<div id="generateText" class="w-full max-w-4xl hidden fade-in">
|
| 190 |
+
<h2 class="text-3xl font-bold mb-8 text-purple-400">Generate Text</h2>
|
| 191 |
+
<div class="bg-gray-800 p-6 rounded-lg">
|
| 192 |
+
<div class="mb-6">
|
| 193 |
+
<label for="promptInput" class="block text-lg font-medium mb-2">Enter your prompt:</label>
|
| 194 |
+
<textarea id="promptInput" rows="3" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="e.g., Create an article about cyber security"></textarea>
|
| 195 |
+
</div>
|
| 196 |
+
<button onclick="generateContent()" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium flex items-center mx-auto">
|
| 197 |
+
<i class="fas fa-magic mr-2"></i> Generate Content
|
| 198 |
+
</button>
|
| 199 |
+
</div>
|
| 200 |
+
<div id="generatedContent" class="mt-8 hidden">
|
| 201 |
+
<h3 class="text-xl font-bold mb-4">Generated Content</h3>
|
| 202 |
+
<div class="bg-gray-800 p-6 rounded-lg">
|
| 203 |
+
<div id="generatedText" class="mb-6"></div>
|
| 204 |
+
<button onclick="loadGeneratedContent()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium">
|
| 205 |
+
<i class="fas fa-upload mr-2"></i> Load to Teleprompter
|
| 206 |
+
</button>
|
| 207 |
+
</div>
|
| 208 |
+
</div>
|
| 209 |
+
</div>
|
| 210 |
+
|
| 211 |
+
<!-- Teleprompter View -->
|
| 212 |
+
<div id="teleprompterView" class="w-full max-w-4xl hidden">
|
| 213 |
+
<div class="teleprompter-container w-full h-96 bg-black border-2 border-blue-800 rounded-lg overflow-hidden shadow-xl">
|
| 214 |
+
<div id="teleprompterText" class="teleprompter-text h-full overflow-y-hidden text-3xl leading-relaxed p-8 gradient-mask">
|
| 215 |
+
<!-- Content will be inserted here by JavaScript -->
|
| 216 |
+
</div>
|
| 217 |
</div>
|
| 218 |
</div>
|
| 219 |
</main>
|
| 220 |
|
| 221 |
<footer class="bg-black py-4 px-6">
|
| 222 |
<div class="container mx-auto text-center text-gray-400">
|
| 223 |
+
<p id="footerText">Select an option to begin using the teleprompter</p>
|
| 224 |
</div>
|
| 225 |
</footer>
|
| 226 |
|
| 227 |
<script>
|
| 228 |
+
// Sample data for books and articles
|
| 229 |
+
const bookData = {
|
| 230 |
+
fiction: [
|
| 231 |
+
{ title: "The Great Novel", image: "https://source.unsplash.com/random/300x400/?fiction,novel", file: "fiction1.txt" },
|
| 232 |
+
{ title: "Mystery Tales", image: "https://source.unsplash.com/random/300x400/?mystery,book", file: "fiction2.txt" }
|
| 233 |
+
],
|
| 234 |
+
science: [
|
| 235 |
+
{ title: "Quantum Physics", image: "https://source.unsplash.com/random/300x400/?quantum,physics", file: "science1.txt" },
|
| 236 |
+
{ title: "Cosmos Explained", image: "https://source.unsplash.com/random/300x400/?cosmos,space", file: "science2.txt" }
|
| 237 |
+
],
|
| 238 |
+
history: [
|
| 239 |
+
{ title: "Ancient Civilizations", image: "https://source.unsplash.com/random/300x400/?ancient,history", file: "history1.txt" },
|
| 240 |
+
{ title: "World War Chronicles", image: "https://source.unsplash.com/random/300x400/?war,history", file: "history2.txt" }
|
| 241 |
+
]
|
| 242 |
+
};
|
| 243 |
+
|
| 244 |
+
const articleData = {
|
| 245 |
+
technology: [
|
| 246 |
+
{ title: "The Future of AI", image: "https://source.unsplash.com/random/300x200/?ai,technology", file: "tech1.txt" },
|
| 247 |
+
{ title: "Blockchain Revolution", image: "https://source.unsplash.com/random/300x200/?blockchain", file: "tech2.txt" }
|
| 248 |
+
],
|
| 249 |
+
health: [
|
| 250 |
+
{ title: "Nutrition Science", image: "https://source.unsplash.com/random/300x200/?nutrition", file: "health1.txt" },
|
| 251 |
+
{ title: "Mental Wellness", image: "https://source.unsplash.com/random/300x200/?mental,health", file: "health2.txt" }
|
| 252 |
+
],
|
| 253 |
+
business: [
|
| 254 |
+
{ title: "Market Trends 2023", image: "https://source.unsplash.com/random/300x200/?market,trends", file: "business1.txt" },
|
| 255 |
+
{ title: "Startup Success", image: "https://source.unsplash.com/random/300x200/?startup", file: "business2.txt" }
|
| 256 |
+
]
|
| 257 |
+
};
|
| 258 |
+
|
| 259 |
+
// Sample book and article content (in a real app, this would be loaded from files)
|
| 260 |
+
const fileContents = {
|
| 261 |
+
"fiction1.txt": "CHAPTER 1\n\nThe rain fell in torrents as Eleanor stepped off the train, her small suitcase clutched tightly in her hand. The station was nearly empty at this late hour, and the few people who remained hurried past her without a glance. She pulled her coat tighter around her shoulders and walked into the storm, unaware that this night would change her life forever...",
|
| 262 |
+
"fiction2.txt": "DETECTIVE'S JOURNAL - ENTRY 47\n\nThe case of the missing heiress had grown cold, but something about the butler's testimony didn't add up. Why would he claim to have been in the garden at midnight when the groundskeeper swore he saw him in the library? The pieces were there, I just needed to put them together...",
|
| 263 |
+
"science1.txt": "QUANTUM ENTANGLEMENT: A NEW ERA\n\nThe phenomenon of quantum entanglement, where particles become interconnected and the state of one instantly influences the other regardless of distance, has baffled scientists for decades. Recent experiments at CERN have demonstrated that this 'spooky action at a distance' (as Einstein called it) may hold the key to quantum computing breakthroughs...",
|
| 264 |
+
"science2.txt": "THE COSMIC WEB\n\nOur universe is not just a random scattering of galaxies but forms an intricate cosmic web of filaments and voids. This large-scale structure, revealed through advanced telescope observations and computer simulations, shows how dark matter acts as the scaffolding upon which visible matter assembles into the galaxies we observe today...",
|
| 265 |
+
"history1.txt": "THE LOST CITY OF ATLANTIS\n\nWhile Plato's account of Atlantis was long considered allegorical, recent underwater archaeological discoveries suggest there may be truth to the ancient tale. Marine surveys off the coast of Spain have revealed structures that match Plato's descriptions with uncanny accuracy, dating to the exact time period he mentioned...",
|
| 266 |
+
"history2.txt": "DECODING THE ENIGMA\n\nThe breaking of the German Enigma code by Allied cryptanalysts during World War II was one of the most significant intelligence victories in history. This breakthrough, largely credited to Alan Turing and his team at Bletchley Park, is estimated to have shortened the war by two years and saved countless lives...",
|
| 267 |
+
"tech1.txt": "ARTIFICIAL INTELLIGENCE: BEYOND THE HYPE\n\nWhile AI has dominated tech headlines, the real revolution is happening behind the scenes. From drug discovery to climate modeling, machine learning algorithms are solving problems that were previously intractable. The next decade will see AI move from narrow applications to more general intelligence, fundamentally changing how we interact with technology...",
|
| 268 |
+
"tech2.txt": "BLOCKCHAIN'S SECOND ACT\n\nAfter the cryptocurrency boom and bust, blockchain technology is finding its true calling in supply chain management, digital identity, and secure voting systems. The key innovation isn't decentralization but the creation of tamper-proof, transparent records that multiple parties can trust without a central authority...",
|
| 269 |
+
"health1.txt": "THE MICROBIOME REVOLUTION\n\nResearch into the human microbiome - the trillions of bacteria living in and on our bodies - is transforming our understanding of health. These microbial communities influence everything from digestion to mental health, and personalized microbiome therapies may soon become standard medical practice...",
|
| 270 |
+
"health2.txt": "MINDFULNESS IN THE DIGITAL AGE\n\nAs screen time increases and attention spans decrease, neuroscientists are documenting the benefits of mindfulness practices. Regular meditation has been shown to reduce stress, improve focus, and even increase gray matter density in brain regions associated with memory and emotional regulation...",
|
| 271 |
+
"business1.txt": "2023 MARKET OUTLOOK\n\nDespite economic headwinds, several sectors show strong growth potential. Renewable energy, cybersecurity, and healthcare technology are expected to outperform, while traditional retail and commercial real estate face continued challenges. Investors should focus on companies with strong cash flows and adaptable business models...",
|
| 272 |
+
"business2.txt": "FROM GARAGE TO GLOBAL: STARTUP LESSONS\n\nAnalyzing the journeys of successful startups reveals common patterns: solving real problems, relentless focus on product-market fit, and the ability to pivot when necessary. The most enduring companies aren't those with the most funding but those that create genuine value for their customers..."
|
| 273 |
+
};
|
| 274 |
+
|
| 275 |
+
// Navigation history stack
|
| 276 |
+
let navigationStack = ['mainMenu'];
|
| 277 |
+
let currentContentFile = '';
|
| 278 |
+
let generatedTextContent = '';
|
| 279 |
+
let audioContext;
|
| 280 |
+
let audioBuffer;
|
| 281 |
+
let audioSource;
|
| 282 |
+
let isAudioPlaying = false;
|
| 283 |
+
|
| 284 |
+
// DOM elements
|
| 285 |
+
const mainMenu = document.getElementById('mainMenu');
|
| 286 |
+
const bookCategories = document.getElementById('bookCategories');
|
| 287 |
+
const booksList = document.getElementById('booksList');
|
| 288 |
+
const booksCategoryTitle = document.getElementById('booksCategoryTitle');
|
| 289 |
+
const articleCategories = document.getElementById('articleCategories');
|
| 290 |
+
const articlesList = document.getElementById('articlesList');
|
| 291 |
+
const articlesCategoryTitle = document.getElementById('articlesCategoryTitle');
|
| 292 |
+
const generateText = document.getElementById('generateText');
|
| 293 |
+
const teleprompterView = document.getElementById('teleprompterView');
|
| 294 |
+
const teleprompterText = document.getElementById('teleprompterText');
|
| 295 |
+
const headerControls = document.getElementById('headerControls');
|
| 296 |
+
const playPauseBtn = document.getElementById('playPauseBtn');
|
| 297 |
+
const listenBtn = document.getElementById('listenBtn');
|
| 298 |
+
const backBtn = document.getElementById('backBtn');
|
| 299 |
+
const speedControl = document.getElementById('speedControl');
|
| 300 |
+
const speedValue = document.getElementById('speedValue');
|
| 301 |
+
const promptInput = document.getElementById('promptInput');
|
| 302 |
+
const generatedContent = document.getElementById('generatedContent');
|
| 303 |
+
const generatedText = document.getElementById('generatedText');
|
| 304 |
+
const footerText = document.getElementById('footerText');
|
| 305 |
+
|
| 306 |
+
// Show main menu
|
| 307 |
+
function showMainMenu() {
|
| 308 |
+
hideAllViews();
|
| 309 |
+
mainMenu.classList.remove('hidden');
|
| 310 |
+
headerControls.classList.add('hidden');
|
| 311 |
+
navigationStack = ['mainMenu'];
|
| 312 |
+
footerText.textContent = 'Select an option to begin using the teleprompter';
|
| 313 |
+
}
|
| 314 |
+
|
| 315 |
+
// Show book categories
|
| 316 |
+
function showBookCategories() {
|
| 317 |
+
hideAllViews();
|
| 318 |
+
bookCategories.classList.remove('hidden');
|
| 319 |
+
headerControls.classList.add('hidden');
|
| 320 |
+
navigationStack.push('bookCategories');
|
| 321 |
+
footerText.textContent = 'Select a book category to browse';
|
| 322 |
+
}
|
| 323 |
+
|
| 324 |
+
// Show article categories
|
| 325 |
+
function showArticleCategories() {
|
| 326 |
+
hideAllViews();
|
| 327 |
+
articleCategories.classList.remove('hidden');
|
| 328 |
+
headerControls.classList.add('hidden');
|
| 329 |
+
navigationStack.push('articleCategories');
|
| 330 |
+
footerText.textContent = 'Select an article category to browse';
|
| 331 |
+
}
|
| 332 |
+
|
| 333 |
+
// Show books for a category
|
| 334 |
+
function showBooks(category) {
|
| 335 |
+
hideAllViews();
|
| 336 |
+
booksList.classList.remove('hidden');
|
| 337 |
+
|
| 338 |
+
// Set category title
|
| 339 |
+
const categoryTitles = {
|
| 340 |
+
fiction: 'Fiction Books',
|
| 341 |
+
science: 'Science Books',
|
| 342 |
+
history: 'History Books'
|
| 343 |
+
};
|
| 344 |
+
booksCategoryTitle.textContent = categoryTitles[category];
|
| 345 |
+
|
| 346 |
+
// Clear previous books
|
| 347 |
+
booksList.querySelector('.grid').innerHTML = '';
|
| 348 |
+
|
| 349 |
+
// Add books for the category
|
| 350 |
+
bookData[category].forEach(book => {
|
| 351 |
+
const bookElement = document.createElement('div');
|
| 352 |
+
bookElement.className = 'card bg-gray-800 rounded-lg overflow-hidden cursor-pointer';
|
| 353 |
+
bookElement.onclick = () => loadContent(book.file, book.title);
|
| 354 |
+
|
| 355 |
+
bookElement.innerHTML = `
|
| 356 |
+
<img src="${book.image}" alt="${book.title}" class="w-full h-48 object-cover">
|
| 357 |
+
<div class="p-4">
|
| 358 |
+
<h3 class="text-xl font-bold">${book.title}</h3>
|
| 359 |
+
</div>
|
| 360 |
+
`;
|
| 361 |
+
|
| 362 |
+
booksList.querySelector('.grid').appendChild(bookElement);
|
| 363 |
+
});
|
| 364 |
+
|
| 365 |
+
navigationStack.push('booksList');
|
| 366 |
+
footerText.textContent = `Browse ${categoryTitles[category]}`;
|
| 367 |
+
}
|
| 368 |
+
|
| 369 |
+
// Show articles for a category
|
| 370 |
+
function showArticles(category) {
|
| 371 |
+
hideAllViews();
|
| 372 |
+
articlesList.classList.remove('hidden');
|
| 373 |
+
|
| 374 |
+
// Set category title
|
| 375 |
+
const categoryTitles = {
|
| 376 |
+
technology: 'Technology Articles',
|
| 377 |
+
health: 'Health Articles',
|
| 378 |
+
business: 'Business Articles'
|
| 379 |
+
};
|
| 380 |
+
articlesCategoryTitle.textContent = categoryTitles[category];
|
| 381 |
+
|
| 382 |
+
// Clear previous articles
|
| 383 |
+
articlesList.querySelector('.grid').innerHTML = '';
|
| 384 |
+
|
| 385 |
+
// Add articles for the category
|
| 386 |
+
articleData[category].forEach(article => {
|
| 387 |
+
const articleElement = document.createElement('div');
|
| 388 |
+
articleElement.className = 'card bg-gray-800 rounded-lg overflow-hidden cursor-pointer';
|
| 389 |
+
articleElement.onclick = () => loadContent(article.file, article.title);
|
| 390 |
+
|
| 391 |
+
articleElement.innerHTML = `
|
| 392 |
+
<img src="${article.image}" alt="${article.title}" class="w-full h-48 object-cover">
|
| 393 |
+
<div class="p-4">
|
| 394 |
+
<h3 class="text-xl font-bold">${article.title}</h3>
|
| 395 |
+
</div>
|
| 396 |
+
`;
|
| 397 |
+
|
| 398 |
+
articlesList.querySelector('.grid').appendChild(articleElement);
|
| 399 |
+
});
|
| 400 |
+
|
| 401 |
+
navigationStack.push('articlesList');
|
| 402 |
+
footerText.textContent = `Browse ${categoryTitles[category]}`;
|
| 403 |
+
}
|
| 404 |
|
| 405 |
+
// Show generate text view
|
| 406 |
+
function showGenerateText() {
|
| 407 |
+
hideAllViews();
|
| 408 |
+
generateText.classList.remove('hidden');
|
| 409 |
+
headerControls.classList.add('hidden');
|
| 410 |
+
navigationStack.push('generateText');
|
| 411 |
+
footerText.textContent = 'Enter a prompt to generate custom content';
|
| 412 |
+
}
|
| 413 |
+
|
| 414 |
+
// Show teleprompter view
|
| 415 |
+
function showTeleprompterView() {
|
| 416 |
+
hideAllViews();
|
| 417 |
+
teleprompterView.classList.remove('hidden');
|
| 418 |
+
headerControls.classList.remove('hidden');
|
| 419 |
+
navigationStack.push('teleprompterView');
|
| 420 |
+
footerText.textContent = 'Use the controls to manage the teleprompter';
|
| 421 |
+
}
|
| 422 |
+
|
| 423 |
+
// Hide all views
|
| 424 |
+
function hideAllViews() {
|
| 425 |
+
mainMenu.classList.add('hidden');
|
| 426 |
+
bookCategories.classList.add('hidden');
|
| 427 |
+
booksList.classList.add('hidden');
|
| 428 |
+
articleCategories.classList.add('hidden');
|
| 429 |
+
articlesList.classList.add('hidden');
|
| 430 |
+
generateText.classList.add('hidden');
|
| 431 |
+
teleprompterView.classList.add('hidden');
|
| 432 |
+
generatedContent.classList.add('hidden');
|
| 433 |
+
}
|
| 434 |
+
|
| 435 |
+
// Load content into teleprompter
|
| 436 |
+
function loadContent(filename, title) {
|
| 437 |
+
currentContentFile = filename;
|
| 438 |
+
|
| 439 |
// Format text into 5-word lines
|
| 440 |
function formatTextToLines(text) {
|
| 441 |
const words = text.split(/\s+/);
|
|
|
|
| 449 |
return lines;
|
| 450 |
}
|
| 451 |
|
| 452 |
+
// Get content from our "file system"
|
| 453 |
+
const content = fileContents[filename];
|
| 454 |
+
|
| 455 |
+
// Insert formatted content
|
| 456 |
+
let formattedContent = `<div class="text-center text-4xl font-bold mb-8 text-blue-400">${title}</div>`;
|
| 457 |
+
const paragraphs = content.split('\n\n');
|
| 458 |
+
|
| 459 |
+
paragraphs.forEach(paragraph => {
|
|
|
|
| 460 |
const lines = formatTextToLines(paragraph);
|
| 461 |
lines.forEach(lineWords => {
|
| 462 |
formattedContent += '<div class="word-line">';
|
| 463 |
lineWords.forEach(word => {
|
| 464 |
+
formattedContent += `<span class="word">${word}</span>`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 465 |
});
|
| 466 |
formattedContent += '</div>';
|
| 467 |
});
|
|
|
|
| 470 |
});
|
| 471 |
|
| 472 |
teleprompterText.innerHTML = formattedContent;
|
| 473 |
+
showTeleprompterView();
|
| 474 |
+
}
|
| 475 |
|
| 476 |
+
// Load generated content into teleprompter
|
| 477 |
+
function loadGeneratedContent() {
|
| 478 |
+
if (!generatedTextContent) return;
|
| 479 |
+
|
| 480 |
+
teleprompterText.innerHTML = generatedTextContent;
|
| 481 |
+
showTeleprompterView();
|
| 482 |
+
}
|
| 483 |
|
| 484 |
+
// Generate content using AI (simulated for now)
|
| 485 |
+
function generateContent() {
|
| 486 |
+
const prompt = promptInput.value.trim();
|
| 487 |
+
if (!prompt) {
|
| 488 |
+
alert('Please enter a prompt');
|
| 489 |
+
return;
|
| 490 |
+
}
|
| 491 |
+
|
| 492 |
+
// Simulate API call with timeout
|
| 493 |
+
promptInput.disabled = true;
|
| 494 |
+
generatedText.innerHTML = '<div class="text-center py-8"><i class="fas fa-spinner fa-spin text-3xl text-purple-400"></i><p class="mt-4">Generating content...</p></div>';
|
| 495 |
+
generatedContent.classList.remove('hidden');
|
| 496 |
+
|
| 497 |
+
// In a real app, this would call the Deepseek API
|
| 498 |
+
setTimeout(() => {
|
| 499 |
+
// Simulated response based on prompt
|
| 500 |
+
let response = '';
|
| 501 |
|
| 502 |
+
if (prompt.toLowerCase().includes('cyber security')) {
|
| 503 |
+
response = `CYBER SECURITY IN THE MODERN AGE\n\nThe digital landscape has become increasingly complex, with cyber threats evolving at an unprecedented pace. Recent years have seen a dramatic rise in sophisticated attacks targeting critical infrastructure, financial systems, and personal data.\n\nExperts agree that traditional security measures are no longer sufficient. The adoption of zero-trust architectures, AI-driven threat detection, and continuous employee training have become essential components of a robust cyber defense strategy.\n\nAs we move toward an increasingly connected world, the importance of cyber security cannot be overstated. Organizations must prioritize security at every level, from endpoint protection to cloud infrastructure, to safeguard against the growing threat of cybercrime.`;
|
| 504 |
+
} else if (prompt.toLowerCase().includes('artificial intelligence')) {
|
| 505 |
+
response = `THE AI REVOLUTION: WHAT'S NEXT?\n\nArtificial Intelligence has transitioned from academic research to mainstream applications at a breathtaking pace. What began as simple pattern recognition has evolved into systems capable of generating human-like text, creating original artwork, and even writing functional code.\n\nThe next frontier for AI involves moving beyond narrow applications toward more general intelligence. Researchers are exploring techniques like meta-learning and neural architecture search to create systems that can adapt to new tasks with minimal additional training.\n\nWhile the potential benefits are enormous, ethical considerations around bias, transparency, and control remain critical challenges that must be addressed as AI systems become more powerful and pervasive in our daily lives.`;
|
| 506 |
+
} else {
|
| 507 |
+
// Generic response for other prompts
|
| 508 |
+
response = `${prompt.toUpperCase()}\n\nThis is a simulated response to your prompt about "${prompt}". In a real implementation, this content would be generated by the Deepseek API based on your specific request.\n\nThe generated text would typically include several paragraphs of relevant, coherent content that addresses the topic you requested. The quality and depth of the response would depend on the specificity of your prompt and the capabilities of the AI model.\n\nFor demonstration purposes, this is placeholder text that shows where the actual generated content would appear. The real implementation would connect to the API endpoint you provide to fetch dynamic, AI-generated responses.`;
|
| 509 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 510 |
|
| 511 |
+
// Format the response for display
|
| 512 |
+
generatedText.innerHTML = response.replace(/\n\n/g, '<br><br>');
|
| 513 |
+
generatedTextContent = response;
|
| 514 |
+
|
| 515 |
+
// Create audio (simulated - in real app would use TTS API)
|
| 516 |
+
createAudioFromText(response);
|
| 517 |
+
|
| 518 |
+
promptInput.disabled = false;
|
| 519 |
+
}, 2000);
|
| 520 |
+
}
|
| 521 |
+
|
| 522 |
+
// Create audio from text (simulated)
|
| 523 |
+
function createAudioFromText(text) {
|
| 524 |
+
// In a real app, this would call a Text-to-Speech API
|
| 525 |
+
console.log('Audio would be generated from:', text.substring(0, 50) + '...');
|
| 526 |
+
|
| 527 |
+
// For demo purposes, we'll just simulate that we have audio ready
|
| 528 |
+
audioBuffer = 'simulated_audio_data';
|
| 529 |
+
}
|
| 530 |
+
|
| 531 |
+
// Play/pause audio
|
| 532 |
+
function toggleAudio() {
|
| 533 |
+
if (!audioBuffer) {
|
| 534 |
+
alert('No audio available for this content');
|
| 535 |
+
return;
|
| 536 |
+
}
|
| 537 |
+
|
| 538 |
+
if (isAudioPlaying) {
|
| 539 |
+
// Pause audio
|
| 540 |
+
if (audioSource) {
|
| 541 |
+
audioSource.stop();
|
| 542 |
}
|
| 543 |
+
listenBtn.innerHTML = '<i class="fas fa-volume-up mr-2"></i> Listen';
|
| 544 |
+
isAudioPlaying = false;
|
| 545 |
+
} else {
|
| 546 |
+
// Play audio (simulated)
|
| 547 |
+
listenBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause';
|
| 548 |
+
isAudioPlaying = true;
|
| 549 |
+
|
| 550 |
+
// In a real app, this would play the actual audio buffer
|
| 551 |
+
console.log('Playing audio...');
|
| 552 |
+
|
| 553 |
+
// Simulate audio ending after some time
|
| 554 |
+
setTimeout(() => {
|
| 555 |
+
if (isAudioPlaying) {
|
| 556 |
+
listenBtn.innerHTML = '<i class="fas fa-volume-up mr-2"></i> Listen';
|
| 557 |
+
isAudioPlaying = false;
|
| 558 |
+
}
|
| 559 |
+
}, 30000); // 30 seconds for demo
|
| 560 |
+
}
|
| 561 |
+
}
|
| 562 |
|
| 563 |
+
// Navigation back
|
| 564 |
+
function navigateBack() {
|
| 565 |
+
if (navigationStack.length <= 1) return;
|
| 566 |
+
|
| 567 |
+
navigationStack.pop();
|
| 568 |
+
const previousView = navigationStack[navigationStack.length - 1];
|
| 569 |
+
|
| 570 |
+
switch (previousView) {
|
| 571 |
+
case 'mainMenu':
|
| 572 |
+
showMainMenu();
|
| 573 |
+
break;
|
| 574 |
+
case 'bookCategories':
|
| 575 |
+
showBookCategories();
|
| 576 |
+
break;
|
| 577 |
+
case 'booksList':
|
| 578 |
+
// We can't go directly back to books list as we don't store the category
|
| 579 |
+
// So just go back to book categories
|
| 580 |
+
navigationStack.pop();
|
| 581 |
+
showBookCategories();
|
| 582 |
+
break;
|
| 583 |
+
case 'articleCategories':
|
| 584 |
+
showArticleCategories();
|
| 585 |
+
break;
|
| 586 |
+
case 'articlesList':
|
| 587 |
+
// Same as books list
|
| 588 |
+
navigationStack.pop();
|
| 589 |
+
showArticleCategories();
|
| 590 |
+
break;
|
| 591 |
+
case 'generateText':
|
| 592 |
+
showGenerateText();
|
| 593 |
+
break;
|
| 594 |
+
case 'teleprompterView':
|
| 595 |
+
// Go back to wherever we came from
|
| 596 |
+
navigationStack.pop();
|
| 597 |
+
const viewBeforeTeleprompter = navigationStack[navigationStack.length - 1];
|
| 598 |
+
if (viewBeforeTeleprompter === 'generateText') {
|
| 599 |
+
showGenerateText();
|
| 600 |
+
} else {
|
| 601 |
+
// Default back to main menu if we don't know
|
| 602 |
+
showMainMenu();
|
| 603 |
}
|
| 604 |
+
break;
|
| 605 |
+
default:
|
| 606 |
+
showMainMenu();
|
| 607 |
}
|
| 608 |
+
}
|
| 609 |
|
| 610 |
+
// Teleprompter state
|
| 611 |
+
let isPlaying = false;
|
| 612 |
+
let scrollInterval;
|
| 613 |
+
let scrollPosition = 0;
|
| 614 |
+
let scrollSpeed = 5; // Default speed
|
| 615 |
+
|
| 616 |
+
// Update speed display
|
| 617 |
+
speedControl.addEventListener('input', function() {
|
| 618 |
+
scrollSpeed = parseInt(this.value);
|
| 619 |
+
speedValue.textContent = `${scrollSpeed}x`;
|
| 620 |
+
|
| 621 |
+
if (isPlaying) {
|
| 622 |
+
clearInterval(scrollInterval);
|
| 623 |
+
startScrolling();
|
| 624 |
+
}
|
| 625 |
+
});
|
| 626 |
+
|
| 627 |
+
// Play/Pause functionality
|
| 628 |
+
playPauseBtn.addEventListener('click', function() {
|
| 629 |
+
isPlaying = !isPlaying;
|
| 630 |
+
|
| 631 |
+
if (isPlaying) {
|
| 632 |
+
playPauseBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause';
|
| 633 |
+
startScrolling();
|
| 634 |
+
} else {
|
| 635 |
+
playPauseBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Play';
|
| 636 |
+
clearInterval(scrollInterval);
|
| 637 |
+
}
|
| 638 |
+
});
|
| 639 |
+
|
| 640 |
+
// Listen button
|
| 641 |
+
listenBtn.addEventListener('click', toggleAudio);
|
| 642 |
+
|
| 643 |
+
// Back button
|
| 644 |
+
backBtn.addEventListener('click', navigateBack);
|
| 645 |
+
|
| 646 |
+
// Start scrolling function
|
| 647 |
+
function startScrolling() {
|
| 648 |
+
scrollInterval = setInterval(function() {
|
| 649 |
+
scrollPosition += 0.5 * (scrollSpeed / 5);
|
| 650 |
+
teleprompterText.scrollTop = scrollPosition;
|
| 651 |
|
| 652 |
+
// Reset to top when reaching bottom
|
| 653 |
+
if (scrollPosition >= teleprompterText.scrollHeight - teleprompterText.clientHeight) {
|
| 654 |
+
scrollPosition = 0;
|
| 655 |
+
teleprompterText.scrollTop = 0;
|
|
|
|
|
|
|
|
|
|
| 656 |
}
|
| 657 |
+
}, 16); // ~60fps
|
| 658 |
+
}
|
| 659 |
+
|
| 660 |
+
// Keyboard controls
|
| 661 |
+
document.addEventListener('keydown', function(e) {
|
| 662 |
+
// Spacebar to play/pause
|
| 663 |
+
if (e.code === 'Space') {
|
| 664 |
+
e.preventDefault();
|
| 665 |
+
if (teleprompterView.classList.contains('hidden')) return;
|
| 666 |
+
playPauseBtn.click();
|
| 667 |
+
}
|
| 668 |
+
|
| 669 |
+
// Arrow up to increase speed
|
| 670 |
+
if (e.code === 'ArrowUp') {
|
| 671 |
+
e.preventDefault();
|
| 672 |
+
if (teleprompterView.classList.contains('hidden')) return;
|
| 673 |
+
if (scrollSpeed < 20) {
|
| 674 |
+
speedControl.value = scrollSpeed + 1;
|
| 675 |
+
speedControl.dispatchEvent(new Event('input'));
|
| 676 |
}
|
| 677 |
+
}
|
| 678 |
+
|
| 679 |
+
// Arrow down to decrease speed
|
| 680 |
+
if (e.code === 'ArrowDown') {
|
| 681 |
+
e.preventDefault();
|
| 682 |
+
if (teleprompterView.classList.contains('hidden')) return;
|
| 683 |
+
if (scrollSpeed > 1) {
|
| 684 |
+
speedControl.value = scrollSpeed - 1;
|
| 685 |
+
speedControl.dispatchEvent(new Event('input'));
|
| 686 |
+
}
|
| 687 |
+
}
|
| 688 |
+
|
| 689 |
+
// Escape to go back
|
| 690 |
+
if (e.code === 'Escape') {
|
| 691 |
+
e.preventDefault();
|
| 692 |
+
if (navigationStack.length > 1) {
|
| 693 |
+
navigateBack();
|
| 694 |
+
}
|
| 695 |
+
}
|
| 696 |
});
|
| 697 |
+
|
| 698 |
+
// Initialize
|
| 699 |
+
showMainMenu();
|
| 700 |
</script>
|
| 701 |
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sovitich28/sovitich-projects" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 702 |
</html>
|
prompts.txt
CHANGED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
add listen to the text ,add this (when i enter the website it will show 3 choices , read book , read article,generate text) the text and audio of book and article it should be in the project folder , the text as .txt , when i choose read book ,it will show a list of book categories and when i choose a categorie it will show a list of books of that categorie , the same with read article , and when i choose generate text it will show a text field where the user can write a prompt like " create an article about cyber security" and it will generate the text using the deepseek api thatr i will procvide later and generate an audio of the text generated so when i click on listen it will start , and add back button to return to the previous page except the main page , the book and article card container should contain an image and a title
|