Skip to content

Commit 7dbf2f1

Browse files
TobiasMue91TobiasMue91
committed
- add daily quote generator (very similar to quotosaurus)
- add reading time estimator both have been created with Claude using the following prompt: ``` Task: Create the given standalone tool based on the example. Requirements: * Use libraries wherever feasible. * Use tailwind for simple styling. * Use modern syntax and highly optimized code. * Implement smart solutions. * Use embedded scripts. * Replace the favicon with a fitting emoji and add the sidebar. * Do not use line breaks or indentations to save tokens and make room for more complexity. * Try to implement as many simple and useful features as possible. * Add SEO. * User friendly UX, modern UI and beautiful design. * Dark/Light mode based on system settings. Tool name: Daily Quote Generator An Example is attached. Use the same API endpoint and update the instructions accordingly. Make the UX as simple as possible while still providing optional options. ``` Improvement prompt: ``` Reflect on your implementation and implement feasible improvements while also adding more fitting features. ```
1 parent 351877f commit 7dbf2f1

File tree

2 files changed

+351
-0
lines changed

2 files changed

+351
-0
lines changed

‎tools/daily_quote_generator.html‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💬</text></svg>">
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta name="description" content="Generate and share inspirational daily quotes with our Daily Quote Generator. Customize your quotes with different categories, authors, and creativity levels.">
8+
<meta name="keywords" content="quote generator, daily quotes, inspirational quotes, motivation, share quotes">
9+
<script src="https://cdn.tailwindcss.com"></script>
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/json5/2.2.3/index.min.js" integrity="sha512-44jdhc+R2TFfzBflS3/dGNEABiNUxBkkrqwO7GWTvGsj3HkQNr3GESvI9PUvAxmqxSnTosR0Ij9y3+o+6J1hig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
11+
<title>Daily Quote Generator</title>
12+
</head>
13+
<body class="bg-gray-100 dark:bg-gray-800 flex justify-center items-center min-h-screen transition-colors duration-300">
14+
<div class="container mx-auto max-w-md p-5 bg-white dark:bg-gray-700 rounded-lg shadow-lg">
15+
<h1 class="text-2xl font-bold text-center mb-4 text-gray-800 dark:text-white">Daily Quote Generator</h1>
16+
<div class="mb-4">
17+
<label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category:</label>
18+
<select id="category" class="mt-1 p-2 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-600 dark:text-white">
19+
<option value="inspirational">Inspirational</option>
20+
<option value="motivational">Motivational</option>
21+
<option value="success">Success</option>
22+
<option value="life">Life</option>
23+
<option value="love">Love</option>
24+
<option value="wisdom">Wisdom</option>
25+
<option value="humor">Humor</option>
26+
</select>
27+
</div>
28+
<div class="mb-4">
29+
<label for="author" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Author (optional):</label>
30+
<input type="text" id="author" class="mt-1 p-2 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-600 dark:text-white" placeholder="Enter author name">
31+
</div>
32+
<div class="mb-4">
33+
<label for="creativity" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Creativity:</label>
34+
<input type="range" id="creativity" min="0" max="100" step="5" value="50" class="w-full">
35+
<div id="creativity-value" class="text-center text-sm text-gray-600 dark:text-gray-400">50%</div>
36+
</div>
37+
<button id="generate-quote" class="w-full rounded-md bg-indigo-600 text-white p-2 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">Generate Quote</button>
38+
<div id="result" class="mt-4 text-center text-sm font-medium text-gray-800 dark:text-white"></div>
39+
<div id="share-buttons" class="mt-4 flex justify-center space-x-2 hidden">
40+
<button onclick="shareOnTwitter()" class="bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded">
41+
<svg class="w-5 h-5 inline-block mr-1" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
42+
Tweet
43+
</button>
44+
<button onclick="shareOnFacebook()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
45+
<svg class="w-5 h-5 inline-block mr-1" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
46+
Share
47+
</button>
48+
</div>
49+
<div id="howToUseSection" class="my-6">
50+
<button onclick="toggleCollapse()" class="flex items-center justify-between w-full p-4 bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-400 text-blue-700 dark:text-blue-300 cursor-pointer">
51+
<h2 class="font-semibold text-lg">How to Use Daily Quote Generator</h2>
52+
<span id="collapseIcon" class="text-xl">+</span>
53+
</button>
54+
<div id="howToUseContent" class="hidden">
55+
<div class="p-4 bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-400 text-blue-700 dark:text-blue-300">
56+
<p class="mb-2">Generate and share inspiring daily quotes with ease:</p>
57+
<ul class="list-disc pl-5 space-y-1">
58+
<li>Select a category from the dropdown menu.</li>
59+
<li>Optionally, enter an author's name for a quote from that person.</li>
60+
<li>Adjust the "Creativity" slider to control the uniqueness of the generated quotes.</li>
61+
<li>Click the "Generate Quote" button to create your quote.</li>
62+
<li>Click on the generated quote to copy it to your clipboard.</li>
63+
<li>Use the share buttons to post the quote on social media.</li>
64+
</ul>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
<script>
70+
document.getElementById('creativity').addEventListener('input', function() {
71+
const creativityValue = this.value;
72+
document.getElementById('creativity-value').textContent = `${creativityValue}%`;
73+
});
74+
document.getElementById('generate-quote').addEventListener('click', generateQuote);
75+
async function generateQuote() {
76+
const category = document.getElementById('category').value;
77+
const author = document.getElementById('author').value;
78+
const creativity = document.getElementById('creativity').value / 100;
79+
const resultContainer = document.getElementById('result');
80+
const shareButtons = document.getElementById('share-buttons');
81+
toggleButtonState();
82+
const botMessage = `I am currently functioning as the Daily Quote Generator API. I will provide responses in this JSON format: {"quote":"generated quote", "author":"quote author"}`;
83+
const userMessage = `Generate a ${category} quote${author ? ` by ${author}` : ''}.`;
84+
try {
85+
const response = await fetch('https://chatgpt.tobiasmue91.workers.dev/', {
86+
method: 'POST',
87+
headers: {"Content-Type": "application/json", "Accept": "*/*"},
88+
body: JSON.stringify({
89+
model: "gpt-3.5-turbo",
90+
max_tokens: 150,
91+
temperature: creativity * 2,
92+
messages: [
93+
{ role: "assistant", content: botMessage },
94+
{ role: "user", content: userMessage },
95+
],
96+
})
97+
});
98+
if (!response.ok) throw new Error('Network response was not ok.');
99+
const data = await response.json();
100+
const responseMessageData = data.choices[0].message.content;
101+
const responseJsonStr = responseMessageData.substring(
102+
responseMessageData.indexOf("{"),
103+
responseMessageData.lastIndexOf("}") + 1
104+
);
105+
const responseJsonData = JSON5.parse(responseJsonStr);
106+
displayQuote(responseJsonData.quote, responseJsonData.author);
107+
shareButtons.classList.remove('hidden');
108+
} catch (error) {
109+
console.error('Error:', error);
110+
resultContainer.textContent = 'Failed to generate a quote. Please try again.';
111+
shareButtons.classList.add('hidden');
112+
} finally {
113+
toggleButtonState();
114+
}
115+
}
116+
function toggleButtonState() {
117+
const button = document.getElementById('generate-quote');
118+
button.disabled = !button.disabled;
119+
button.textContent = button.disabled ? "Generating..." : "Generate Quote";
120+
}
121+
function displayQuote(quote, author) {
122+
const resultContainer = document.getElementById('result');
123+
resultContainer.innerHTML = `"${quote}"<br><span class="text-sm italic">- ${author || 'Unknown'}</span>`;
124+
resultContainer.classList.add('cursor-pointer');
125+
resultContainer.onclick = () => copyToClipboard(`"${quote}" - ${author || 'Unknown'}`);
126+
}
127+
function copyToClipboard(text) {
128+
navigator.clipboard.writeText(text).then(() => {
129+
alert('Quote copied to clipboard!');
130+
}).catch(err => {
131+
console.error('Failed to copy text: ', err);
132+
alert('Failed to copy quote.');
133+
});
134+
}
135+
function toggleCollapse() {
136+
const content = document.getElementById("howToUseContent");
137+
const icon = document.getElementById("collapseIcon");
138+
content.classList.toggle("hidden");
139+
icon.textContent = content.classList.contains("hidden") ? "+" : "-";
140+
}
141+
function shareOnTwitter() {
142+
const quote = document.getElementById('result').innerText;
143+
const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(quote)}`;
144+
window.open(twitterUrl, '_blank');
145+
}
146+
function shareOnFacebook() {
147+
const quote = document.getElementById('result').innerText;
148+
const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}&quote=${encodeURIComponent(quote)}`;
149+
window.open(facebookUrl, '_blank');
150+
}
151+
</script>
152+
<script src="../sidebar.js"></script>
153+
</body>
154+
</html>

0 commit comments

Comments
 (0)