Skip to content

Commit 8f152a8

Browse files
sudo-selfsudo-self
authored
Update index.html
1 parent 6171ea3 commit 8f152a8

File tree

1 file changed

+62
-198
lines changed

1 file changed

+62
-198
lines changed

‎index.html‎

Lines changed: 62 additions & 198 deletions
Original file line numberDiff line numberDiff line change
@@ -19,35 +19,10 @@
1919
<meta name="author" content="JesseJesse.xyz" />
2020

2121
<link rel="manifest" href="/manifest.json" />
22-
2322
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
24-
25-
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
2623
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16 32x32" />
27-
<link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192" />
28-
<link rel="icon" href="/icon-512.png" type="image/png" sizes="512x512" />
29-
<link rel="icon" href="/icon-192-maskable.png" type="image/png" sizes="192x192" purpose="maskable" />
30-
<link rel="icon" href="/icon-512-maskable.png" type="image/png" sizes="512x512" purpose="maskable" />
31-
32-
<meta name="theme-color" content="#1a1a2e" />
33-
34-
<meta name="application-name" content="Python YouTube Ringtones" />
35-
<meta name="short_name" content="YT Ringtones" />
36-
<meta name="description" content="Generate custom ringtones from YouTube videos with one click! Python YouTube Ringtones lets you convert YouTube audio into high-quality MP3 and iPhone ringtones in seconds. No software required – fast, free, and online!" />
37-
<meta name="start_url" content="/" />
38-
<meta name="display" content="standalone" />
39-
<meta name="background_color" content="#111827" />
40-
<meta name="orientation" content="portrait" />
41-
42-
4324
<script src="https://cdn.tailwindcss.com"></script>
4425

45-
<script>
46-
document.addEventListener("DOMContentLoaded", () => {
47-
updateRingtoneCount();
48-
});
49-
</script>
50-
5126
<style>
5227
@keyframes glow {
5328
0% {
@@ -67,213 +42,103 @@
6742
</style>
6843
</head>
6944

70-
<body
71-
style="
72-
background: linear-gradient(to bottom right, #1f2937, #374151, #111827);
73-
color: white;
74-
display: flex;
75-
flex-direction: column;
76-
justify-content: center;
77-
align-items: center;
78-
height: 100vh;
79-
margin: 0;
80-
"
81-
>
82-
<div
83-
id="ringtone-container"
84-
style="
85-
width: 100%;
86-
max-width: 400px;
87-
background: transparent;
88-
border: 2px solid grey;
89-
border-radius: 8px;
90-
padding: 24px;
91-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
92-
text-align: center;
93-
"
94-
>
95-
<img
96-
src="iicon.png"
97-
alt="App Icon"
98-
style="width: 120px; height: 120px; margin-bottom: 20px; display: block; margin-left: auto; margin-right: auto;"
99-
/>
100-
101-
<h1 style="font-size: 20px; font-weight: bold; margin-bottom: 12px; font-family: monospace;">
102-
Python YouTube Ringtones
103-
</h1>
104-
<p style="margin-top: 16px; text-align: center; color: #fbbf24">
105-
JesseJesse.xyz&nbsp;&nbsp;💥&nbsp;<span id="ringtone-count">0</span>
106-
</p>
45+
<body style="background: linear-gradient(to bottom right, #1f2937, #374151, #111827); color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0;">
46+
<div id="ringtone-container" style="width: 100%; max-width: 400px; background: transparent; border: 2px solid grey; border-radius: 8px; padding: 24px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center;">
47+
<img src="iicon.png" alt="App Icon" style="width: 120px; height: 120px; margin-bottom: 20px; display: block; margin-left: auto; margin-right: auto;"/>
48+
<h1 style="font-size: 20px; font-weight: bold; margin-bottom: 12px; font-family: monospace;">Python YouTube Ringtones</h1>
49+
<p style="margin-top: 16px; text-align: center; color: #fbbf24">JesseJesse.xyz&nbsp;&nbsp;💥&nbsp;<span id="ringtone-count">0</span></p>
10750
<br />
10851
<div style="display: flex; gap: 8px">
109-
<input
110-
id="youtube-url"
111-
type="text"
112-
placeholder="Enter YouTube URL"
113-
style="
114-
flex-grow: 1;
115-
padding: 8px;
116-
border: 2px dashed #fbbf24;
117-
border-radius: 4px;
118-
background-color: #374151;
119-
color: white;
120-
outline: none;
121-
"
122-
/>
123-
124-
125-
126-
<button
127-
onclick="pasteClipboard()"
128-
style="
129-
background-color: #6b7280;
130-
color: white;
131-
padding: 8px 12px;
132-
border-radius: 4px;
133-
"
134-
>
135-
&#9998;
136-
</button>
52+
<input id="youtube-url" type="text" placeholder="Enter YouTube URL" style="flex-grow: 1; padding: 8px; border: 2px dashed #fbbf24; border-radius: 4px; background-color: #374151; color: white; outline: none;"/>
53+
<button onclick="pasteClipboard()" style="background-color: #6b7280; color: white; padding: 8px 12px; border-radius: 4px;">&#9998;</button>
13754
</div>
138-
<button
139-
onclick="processRingtone()"
140-
style="
141-
width: 100%;
142-
background-color: #4f46e5;
143-
color: white;
144-
padding: 12px 16px;
145-
border-radius: 4px;
146-
margin-top: 16px;
147-
"
148-
>
149-
Create Ringtones
150-
</button>
151-
<p
152-
id="status"
153-
style="text-align: center; margin-top: 16px; color: #fbbf24"
154-
></p>
155-
<a
156-
id="android-ringtone"
157-
href="#"
158-
download="android_ringtone.mp3"
159-
style="
160-
display: none;
161-
margin-top: 16px;
162-
color: #34b334;
163-
text-decoration: none;
164-
"
165-
><i class="fab fa-android" style="font-size: 24px; color: #3ddc84;"></i>&nbsp;Android Ringtone</a>
166-
167-
<a
168-
id="iphone-ringtone"
169-
href="#"
170-
download
171-
style="
172-
display: none;
173-
margin-top: 16px;
174-
color: #ff0099;
175-
text-decoration: none;
176-
"
177-
><i class="fab fa-apple" style="font-size: 24px; color: #000;"></i>&nbsp;iPhone Ringtone</a
178-
>
55+
<button onclick="processRingtone()" style="width: 100%; background-color: #4f46e5; color: white; padding: 12px 16px; border-radius: 4px; margin-top: 16px;">Create Ringtones</button>
56+
<p id="status" style="text-align: center; margin-top: 16px; color: #fbbf24"></p>
57+
<a id="android-ringtone" href="#" download="android_ringtone.mp3" style="display: none; margin-top: 16px; color: #34b334; text-decoration: none;"><i class="fab fa-android" style="font-size: 24px; color: #3ddc84;"></i>&nbsp;Android Ringtone</a>
58+
<a id="iphone-ringtone" href="#" download="iphone_ringtone.m4r" style="display: none; margin-top: 16px; color: #ff0099; text-decoration: none;"><i class="fab fa-apple" style="font-size: 24px; color: #000;"></i>&nbsp;iPhone Ringtone</a>
17959
</div>
60+
18061
<footer class="text-sm text-blue-300 text-center mt-4">
181-
<a href="https://sudo-soldier-pytr.hf.space" target="_blank" rel="noopener noreferrer">
182-
on huggingface.co
183-
</a>
184-
</footer>
62+
<a href="https://sudo-soldier-pytr.hf.space" target="_blank" rel="noopener noreferrer">on huggingface.co</a>
63+
</footer>
18564

18665
<script>
18766
const REDIS_URL = "https://amused-walleye-31373.upstash.io";
188-
const REDIS_TOKEN =
189-
"AXqNASQgMWZmMTdjYTEtNTJjYi00MDczLWJmZDctNjFjZGUyOTA0ZjEyNjcyMTI0NDM2MDBjNDVmZmE5NjJlMTllYTkyMDI2MDU=";
67+
const REDIS_TOKEN = "AXqNASQgMWZmMTdjYTEtNTJjYi00MDczLWJmZDctNjFjZGUyOTA0ZjEyNjcyMTI0NDM2MDBjNDVmZmE5NjJlMTllYTkyMDI2MDU=";
19068

19169
async function updateRingtoneCount() {
19270
try {
193-
const response = await fetch(`${REDIS_URL}/get/ringtone_count`, {
194-
headers: { Authorization: `Bearer ${REDIS_TOKEN}` },
195-
});
71+
const response = await fetch(`${REDIS_URL}/get/ringtone_count`, { headers: { Authorization: `Bearer ${REDIS_TOKEN}` } });
19672
const data = await response.json();
197-
document.getElementById("ringtone-count").innerText =
198-
data.result || 0;
73+
document.getElementById("ringtone-count").innerText = data.result || 0;
19974
} catch (error) {
20075
console.error("Error fetching ringtone count:", error);
20176
}
20277
}
20378

20479
async function incrementRingtoneCount() {
20580
try {
206-
await fetch(`${REDIS_URL}/incr/ringtone_count`, {
207-
headers: { Authorization: `Bearer ${REDIS_TOKEN}` },
208-
});
81+
await fetch(`${REDIS_URL}/incr/ringtone_count`, { headers: { Authorization: `Bearer ${REDIS_TOKEN}` } });
20982
updateRingtoneCount();
21083
} catch (error) {
21184
console.error("Error updating ringtone count:", error);
21285
}
21386
}
21487

215-
async function processRingtone() {
216-
const urlInput = document.getElementById("youtube-url").value;
217-
const androidLink = document.getElementById("android-ringtone");
218-
const iphoneLink = document.getElementById("iphone-ringtone");
219-
const status = document.getElementById("status");
220-
const ringtoneContainer = document.getElementById("ringtone-container");
221-
222-
if (!urlInput) {
223-
status.innerText = "Please enter a valid YouTube URL.";
224-
return;
225-
}
226-
227-
try {
228-
status.innerText = "⏳ Just a moment...";
229-
const client = await import(
230-
"https://cdn.jsdelivr.net/npm/@gradio/client/+esm"
231-
).then((m) => m.Client);
232-
const connectedClient = await client.connect("sudo-soldier/PYTR");
233-
234-
235-
const result = await connectedClient.predict(
236-
"/process_youtube_or_audio",
237-
{
238-
url: urlInput,
239-
uploaded_audio: null,
240-
}
241-
);
242-
243-
const androidFile = result.data[0]?.url || result.data[0]?.path;
244-
const iphoneFile = result.data[1]?.url || result.data[1]?.path;
245-
246-
if (androidFile) {
247-
androidLink.href = androidFile;
248-
androidLink.download = "android_ringtone.mp3";
249-
androidLink.style.display = "block";
250-
}
251-
252-
if (iphoneFile) {
253-
iphoneLink.href = iphoneFile;
254-
iphoneLink.download = "iphone_ringtone.m4r";
255-
iphoneLink.style.display = "block";
256-
}
257-
258-
status.innerText = "Ringtone ready for download!";
259-
ringtoneContainer.classList.add("glow-border");
260-
incrementRingtoneCount();
261-
} catch (error) {
262-
console.error(error);
263-
status.innerText = "Error processing the request!";
264-
}
265-
}
88+
async function processRingtone() {
89+
const urlInput = document.getElementById("youtube-url").value;
90+
const androidLink = document.getElementById("android-ringtone");
91+
const iphoneLink = document.getElementById("iphone-ringtone");
92+
const status = document.getElementById("status");
93+
const ringtoneContainer = document.getElementById("ringtone-container");
26694

95+
if (!urlInput) {
96+
status.innerText = "Please enter a valid YouTube URL.";
97+
return;
98+
}
26799

100+
try {
101+
status.innerText = "⏳ Just a moment...";
102+
const client = await import("https://cdn.jsdelivr.net/npm/@gradio/client/+esm").then((m) => m.Client);
103+
const connectedClient = await client.connect("sudo-soldier/PYTR");
104+
105+
const result = await connectedClient.predict("/process_youtube_or_audio", { url: urlInput, uploaded_audio: null });
106+
107+
const androidFile = result.data[0]?.url || result.data[0]?.path;
108+
const iphoneFile = result.data[1]?.url || result.data[1]?.path;
109+
110+
if (androidFile) {
111+
androidLink.href = androidFile;
112+
androidLink.download = "android_ringtone.mp3";
113+
androidLink.style.display = "block";
114+
}
115+
116+
if (iphoneFile) {
117+
iphoneLink.href = iphoneFile;
118+
iphoneLink.download = "iphone_ringtone.m4r";
119+
iphoneLink.style.display = "block";
120+
}
121+
122+
status.innerText = "Ringtone ready for download!";
123+
ringtoneContainer.classList.add("glow-border");
124+
incrementRingtoneCount();
125+
} catch (error) {
126+
console.error(error);
127+
status.innerText = "Error processing the request!";
128+
}
129+
}
268130

269131
async function pasteClipboard() {
270132
try {
271133
const text = await navigator.clipboard.readText();
272134
document.getElementById("youtube-url").value = text;
273135
} catch (error) {
274-
alert("Please add the song URL.");
136+
console.error("Failed to read clipboard:", error);
275137
}
276138
}
139+
140+
// Initialize ringtone count on page load
141+
updateRingtoneCount();
277142
</script>
278143
</body>
279144
</html>
@@ -296,4 +161,3 @@ <h1 style="font-size: 20px; font-weight: bold; margin-bottom: 12px; font-family:
296161

297162

298163

299-

0 commit comments

Comments
 (0)