sovitich28 commited on
Commit
1a55a91
·
verified ·
1 Parent(s): d8a5d31

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +585 -94
  2. 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>News 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,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> News Teleprompter
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
- <div class="teleprompter-container w-full max-w-4xl h-96 bg-black border-2 border-blue-800 rounded-lg overflow-hidden shadow-xl">
69
- <div id="teleprompterText" class="teleprompter-text h-full overflow-y-hidden text-3xl leading-relaxed p-8 gradient-mask">
70
- <!-- News content will be inserted here by JavaScript -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Use the controls to adjust the scrolling speed. Click play/pause to start or stop the teleprompter.</p>
78
  </div>
79
  </footer>
80
 
81
  <script>
82
- document.addEventListener('DOMContentLoaded', function() {
83
- // Sample news content
84
- const newsParagraphs = [
85
- "BREAKING NEWS: The city council has approved the new infrastructure plan that will modernize public transportation across the metropolitan area. The $2.3 billion project is expected to create thousands of jobs and reduce commute times by an average of 25%.",
86
- "INTERNATIONAL: Diplomatic tensions rise as trade negotiations between major economic powers reach a stalemate. Analysts warn that prolonged disputes could impact global markets and supply chains. Representatives from both sides are scheduled to meet again next week.",
87
- "TECHNOLOGY: A breakthrough in quantum computing has been announced by researchers at the National Laboratory. The new processor demonstrates error correction capabilities that could make practical quantum computers a reality within the decade.",
88
- "WEATHER: A severe weather system is moving across the region, bringing heavy rains and potential flooding to low-lying areas. Residents are advised to prepare emergency kits and monitor local alerts. The storm is expected to pass by Thursday evening.",
89
- "SPORTS: In a stunning upset, the underdog team defeated the defending champions in overtime last night. The victory marks their first championship in franchise history. Fans celebrated throughout the city as the team returned home this morning.",
90
- "HEALTH: New guidelines from the World Health Organization recommend updated vaccination schedules for children and adults. The changes reflect recent research on immunity duration and emerging disease patterns.",
91
- "ENTERTAINMENT: The highly anticipated film adaptation of the bestselling novel series premieres this weekend. Early reviews praise the director's vision and the lead actor's performance, predicting strong box office numbers.",
92
- "BUSINESS: Major retailers report stronger than expected holiday sales despite economic concerns. Analysts attribute the growth to strategic discounts and consumers prioritizing essential purchases.",
93
- "SCIENCE: Astronomers have discovered a potentially habitable exoplanet orbiting a nearby star. The Earth-sized planet lies within the habitable zone where liquid water could exist on its surface.",
94
- "POLITICS: The legislature is debating comprehensive education reform that would increase funding for public schools and revise curriculum standards. The bill has bipartisan support but faces opposition from some advocacy groups."
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 DOM elements
111
- const teleprompterText = document.getElementById('teleprompterText');
112
- const playPauseBtn = document.getElementById('playPauseBtn');
113
- const speedControl = document.getElementById('speedControl');
114
- const speedValue = document.getElementById('speedValue');
115
-
116
- // Insert formatted news content
117
- let formattedContent = '';
118
- newsParagraphs.forEach(paragraph => {
119
  const lines = formatTextToLines(paragraph);
120
  lines.forEach(lineWords => {
121
  formattedContent += '<div class="word-line">';
122
  lineWords.forEach(word => {
123
- // Highlight category words in blue
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
- // Teleprompter state
139
- let isPlaying = false;
140
- let scrollInterval;
141
- let scrollPosition = 0;
142
- let scrollSpeed = 5; // Default speed
 
 
143
 
144
- // Update speed display
145
- speedControl.addEventListener('input', function() {
146
- scrollSpeed = parseInt(this.value);
147
- speedValue.textContent = `${scrollSpeed}x`;
 
 
 
 
 
 
 
 
 
 
 
 
 
148
 
149
- if (isPlaying) {
150
- clearInterval(scrollInterval);
151
- startScrolling();
 
 
 
 
152
  }
153
- });
154
-
155
- // Play/Pause functionality
156
- playPauseBtn.addEventListener('click', function() {
157
- isPlaying = !isPlaying;
158
 
159
- if (isPlaying) {
160
- playPauseBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause';
161
- startScrolling();
162
- } else {
163
- playPauseBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Play';
164
- clearInterval(scrollInterval);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
165
  }
166
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
 
168
- // Start scrolling function
169
- function startScrolling() {
170
- scrollInterval = setInterval(function() {
171
- scrollPosition += 0.5 * (scrollSpeed / 5);
172
- teleprompterText.scrollTop = scrollPosition;
173
-
174
- // Reset to top when reaching bottom
175
- if (scrollPosition >= teleprompterText.scrollHeight - teleprompterText.clientHeight) {
176
- scrollPosition = 0;
177
- teleprompterText.scrollTop = 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
178
  }
179
- }, 16); // ~60fps
 
 
180
  }
 
181
 
182
- // Keyboard controls
183
- document.addEventListener('keydown', function(e) {
184
- // Spacebar to play/pause
185
- if (e.code === 'Space') {
186
- e.preventDefault();
187
- playPauseBtn.click();
188
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
189
 
190
- // Arrow up to increase speed
191
- if (e.code === 'ArrowUp') {
192
- e.preventDefault();
193
- if (scrollSpeed < 20) {
194
- speedControl.value = scrollSpeed + 1;
195
- speedControl.dispatchEvent(new Event('input'));
196
- }
197
  }
198
-
199
- // Arrow down to decrease speed
200
- if (e.code === 'ArrowDown') {
201
- e.preventDefault();
202
- if (scrollSpeed > 1) {
203
- speedControl.value = scrollSpeed - 1;
204
- speedControl.dispatchEvent(new Event('input'));
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