first commit

2024-10-28 10:36:29 -05:00 · 2024-10-28 10:36:29 -05:00 · 2f5fbe9e5c
commit 2f5fbe9e5c
3 changed files with 124 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UberTuber</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>UberTuber</h1>
+        <input type="text" id="search-input" placeholder="Search for videos...">
+        <button id="search-button">Search</button>
+
+        <h2>Results</h2>
+        <ul id="video-results"></ul>
+    </div>
+    
+    <script src="script.js"></script>
+</body>
+</html>
+
--- a/script.js
+++ b/script.js
@ -0,0 +1,49 @@
+document.getElementById('search-button').addEventListener('click', async () => {
+    const query = document.getElementById('search-input').value;
+    const resultsList = document.getElementById('video-results');
+    resultsList.innerHTML = ''; // Clear previous results
+
+    if (!query) {
+        alert('Please enter a search query.');
+        return;
+    }
+
+    try {
+        const response = await fetch(`https://ubertuberbe.nodemixaholic.com/search?q=${encodeURIComponent(query)}`);
+        const videos = await response.json();
+
+        videos.forEach(video => {
+            const listItem = document.createElement('li');
+            listItem.innerHTML = `
+                <strong>${video.title}</strong> (${video.views} views) by ${video.author}
+                <br>
+                <a href="#" class="download-link" data-url="${video.url}">Download</a>
+            `;
+            resultsList.appendChild(listItem);
+        });
+
+        // Add event listeners to download links
+        document.querySelectorAll('.download-link').forEach(link => {
+            link.addEventListener('click', async (e) => {
+                e.preventDefault();
+                const videoUrl = e.target.dataset.url;
+                const downloadResponse = await fetch(`https://ubertuberbe.nodemixaholic.com/download?url=${encodeURIComponent(videoUrl)}`);
+                const blob = await downloadResponse.blob();
+
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.style.display = 'none';
+                a.href = url;
+                a.download = 'video.mp4'; // You might want to set this dynamically
+                document.body.appendChild(a);
+                a.click();
+                window.URL.revokeObjectURL(url);
+            });
+        });
+
+    } catch (error) {
+        console.error('Error fetching videos:', error);
+        alert('An error occurred while searching for videos.');
+    }
+});
+
--- a/styles.css
+++ b/styles.css
@ -0,0 +1,53 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    padding: 20px;
+}
+
+.container {
+    max-width: 600px;
+    margin: auto;
+    background: white;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1, h2 {
+    text-align: center;
+}
+
+input[type="text"] {
+    width: calc(100% - 22px);
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+button {
+    width: 100%;
+    padding: 10px;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 5px;
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+li {
+    padding: 10px;
+    margin-bottom: 10px;
+    background: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+}
+
+a {
+    color: #007bff;
+    text-decoration: none;
+}
+