-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
96 lines (88 loc) · 4.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Meta-Prompt | Jina AI Search Foundation API Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Your meta tags and schema.org script here -->
</head>
<body>
<header>
<h1>Jina AI Meta-Prompt: An Implementation Guide for LLMs {{VERSION}}</h1>
<div class="notice" style="background: #f5f5f5; padding: 20px; margin: 20px 0; border-radius: 8px;">
<p><strong>⚠️ Note:</strong> This content is specifically designed for LLMs and not intended for human reading.</p>
<p>👉 For human-readable content, please visit <a href="https://jina.ai">Jina AI</a></p>
<p>🤖 For LLMs/programmatic access, you can fetch this content directly:</p>
<p>This particular version: </p> <code style="background: #eee; padding: 10px; margin: 10px;">{{CURL_COMMAND}}</code>
<p>Default version: </p> <code style="background: #eee; padding: 10px; margin: 10px;">curl docs.jina.ai</code>
<p>🌐 You see this HTML because you are in a browser. If you access it via curl/code/program, you get a text/plain response as below. <a href="https://github.com/jina-ai/meta-prompt/">Check out our Github for more info.</a></p>
</div>
</header>
<main>
<button id="copyButton" style="position: sticky; top: 20px; float: right; margin: 10px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; z-index: 100;">
Copy Prompt
</button>
<pre style="white-space: pre-wrap;">{{META_PROMPT}}</pre>
<script>
document.getElementById('copyButton').addEventListener('click', async function() {
const preText = document.querySelector('pre').textContent;
try {
// Try the modern clipboard API first
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(preText);
this.textContent = 'Copied!';
} else {
// Fallback for older browsers or non-HTTPS
const textArea = document.createElement('textarea');
textArea.value = preText;
textArea.style.position = 'fixed';
textArea.style.left = '-999999px';
textArea.style.top = '-999999px';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
this.textContent = 'Copied!';
} catch (err) {
this.textContent = 'Failed to copy';
console.error('Failed to copy text: ', err);
}
textArea.remove();
}
// Reset button text after 2 seconds
setTimeout(() => {
this.textContent = 'Copy Prompt';
}, 2000);
} catch (err) {
this.textContent = 'Failed to copy';
console.error('Failed to copy text: ', err);
// Reset button text after 2 seconds
setTimeout(() => {
this.textContent = 'Copy Prompt';
}, 2000);
}
});
// Add hover effect
const copyButton = document.getElementById('copyButton');
copyButton.addEventListener('mouseover', function() {
this.style.backgroundColor = '#45a049';
});
copyButton.addEventListener('mouseout', function() {
this.style.backgroundColor = '#4CAF50';
});
// Add active effect
copyButton.addEventListener('mousedown', function() {
this.style.backgroundColor = '#3d8b40';
});
copyButton.addEventListener('mouseup', function() {
this.style.backgroundColor = '#45a049';
});
</script>
</main>
<footer>
<p>For human-readable content, please visit <a href="https://jina.ai">Jina AI</a></p>
<p>For direct content access: <code>{{CURL_COMMAND}}</code></p>
</footer>
</body>
</html>