zum Testen der Importfunktion
Kopieren Sie nachfolgenden Code und fügen sie ihn in das Feld für den HTML-Code Import ein.
Klicken Sie dann auf den Button "Code importieren"!
Sie können dann die vorgegebenen Links und Buttons bearbeiten oder löschen und neue Links und Buttons nach Bedarf hinzufügen.
Fügen Sie Links zu Ihren wichtigsten Webseiten hinzu und belegen Sie beliebig viele Buttons mit Daten, die Sie oft benötigen, aber nicht gleich zur Hand haben, wie z.B. Anschriften, Keywords, Steuernummern, IBAN-Nummern, Textbausteinen, Standardantworten, Code fragmente, Walletadressen usw.
Beispiel 1 - Kopieren Sie folgenden Code in die Zwischenablage (Clipboard) und fügen Sie ihn in das Feld für den HTML-Code Import ein.
<!DOCTYPE html>
<html>
<head>
<title>Meine Link-Clipboard Liste</title>
<style>
body {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
display: flex;
flex-wrap: wrap;
gap: 8px;
background-color: #fff5e6;
}
h1 {
color: #cc6600;
border-bottom: 2px solid #ffd699;
padding-bottom: 8px;
margin-bottom: 15px;
width: 100%;
}
h2 {
color: #cc6600;
padding-bottom: 8px;
margin-bottom: 8px;
margin-top: 15px;
width: 100%;
}
h2:nth-of-type(2) {
margin-top: 30px;
border-top: 2px solid #ffd699;
padding-top: 15px;
}
h2:first-of-type {
margin-top: 0;
}
/* Modified button styles */
button {
min-width: 150px;
margin: 4px !important;
box-sizing: border-box;
padding: 6px 10px; /* Reduced from 8px 12px */
border: none;
border-radius: 4px;
background-color: #ff9933;
color: white;
cursor: pointer;
position: relative;
font-weight: bold;
min-height: 0;
height: auto;
white-space: normal;
line-height: 1.1; /* Reduced from 1.2 */
}
/* New styles for link buttons */
h2:first-of-type ~ button {
width: 100%;
display: block;
margin-bottom: 8px !important;
}
/* Style for clipboard buttons (keep the original responsive layout) */
h2:nth-of-type(2) ~ button {
flex: 0 1 calc(25% - 16px);
display: inline-block;
}
@media (max-width: 992px) {
h2:nth-of-type(2) ~ button {
flex: 0 1 calc(33.333% - 16px);
}
}
@media (max-width: 768px) {
h2:nth-of-type(2) ~ button {
flex: 0 1 calc(50% - 16px);
}
}
@media (max-width: 480px) {
h2:nth-of-type(2) ~ button {
flex: 0 1 100%;
}
}
.success-message {
color: #4CAF50;
background-color: #e8f5e9;
padding: 6px;
border-radius: 4px;
margin-top: 8px;
opacity: 0;
transition: opacity 0.3s ease;
position: fixed;
right: 12px;
top: 12px;
z-index: 1000;
border: 1px solid #ffd699;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.footer-text {
width: 100%;
text-align: center;
margin-top: 30px;
padding: 20px;
color: #cc6600;
font-weight: bold;
font-size: 1.2em;
border-top: 2px solid #ffd699;
}
.footer-text a {
color: #cc6600;
text-decoration: none;
}
.footer-text a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Meine Link-Clipboard Liste</h1>
<h2>Links</h2>
<button onclick="window.open('https://www.skool.com/one-life-invest/about', '_blank')">One Life Invest Community</button>
<button onclick="window.open('https://linktr.ee/', '_blank')">Linktree</button>
<button onclick="window.open('https://one-life-invest.com/', '_blank')">One Life Invest Community</button>
<button onclick="window.open('https://sites.google.com/view/mymoin-com/link-clipboard-generator/html-code-zum-importieren', '_blank')">Beispiel HTML-Code zum Testen der Importfunktion</button>
<button onclick="window.open('https://presearch.com/', '_blank')">Suchmaschine Presearch</button>
<button onclick="window.open('https://skainetsystems.com/ref/a17217ae', '_blank')">SkAInet Registrierung</button>
<button onclick="window.open('https://www.shoutout.global/signup?id=k1js5&affref=rkJQ8aDSo', '_blank')">Zum TryMOIN Partnerprogramm</button>
<h2>Texte zum Kopieren</h2>
<button onclick="copyToClipboard('Das hat geklappt!', this)">Bei Klick auf diesen Button wird dieser Text ins Clipboard kopiert: Das hat geklappt!</button>
<button onclick="copyToClipboard('Sie können sowohl die Beschriftung des Buttons als auch den gewünschten Text eingeben, der ins Clipboard kopiert werden soll!', this)">Button 2 - Zur freien Verfügung</button>
<button onclick="copyToClipboard('Testen Sie es!', this)">Button 3 - Zur freien Verfügung</button>
<button onclick="copyToClipboard('Geben Sie hier Ihren gewünschten Text ein!', this)">Button 4 - Zur freien Verfügung</button>
<button onclick="copyToClipboard('Tragen Sie hier Ihre Wallet-Adresse ein!', this)">BTC Wallet WOS</button>
<button onclick="copyToClipboard('Tragen Sie hier Ihre Wallet-Adresse ein!', this)">USDT TRC20 Wallet bei RedotPay</button>
<button onclick="copyToClipboard('Geben Sie hier Ihren gewünschten Text ein!', this)">Button 7: Nicht belegt!</button>
<button onclick="copyToClipboard('Geben Sie hier Ihren gewünschten Text ein!', this)">Button 8: Nicht belegt!</button>
<button onclick="copyToClipboard('DE 176906140', this)">Umsatzsteuer-ID</button>
<button onclick="copyToClipboard('skainet, high-frequency-trading, hochfrequenzhandel, hft, cermak, forex, broker, tradingroboter,', this)">Keywords SkAInet</button>
<button onclick="copyToClipboard('https://skainetsystems.com/ref/a17217ae', this)">SkAInet Einladungslink</button>
<div class="footer-text">
<a href="https://sites.google.com/view/mymoin-com/link-clipboard-generator" target="_blank">
Hol dir deine kostenlose "Link-Clipboard Liste!"
</a>
</div>
<script>
function copyToClipboard(text, buttonElement) {
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(text).then(() => {
showSuccessMessage(buttonElement);
}).catch((err) => {
console.error('Failed to copy:', err);
fallbackCopyToClipboard(text, buttonElement);
});
} else {
fallbackCopyToClipboard(text, buttonElement);
}
}
function fallbackCopyToClipboard(text, buttonElement) {
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.position = 'fixed';
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand('copy');
showSuccessMessage(buttonElement);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
alert('Kopieren fehlgeschlagen. Bitte versuchen Sie es erneut.');
}
document.body.removeChild(textArea);
}
function showSuccessMessage(buttonElement) {
const successMessage = document.createElement('div');
successMessage.className = 'success-message';
successMessage.textContent = 'In die Zwischenablage kopiert!';
// Remove any existing messages
const existingMessages = document.querySelectorAll('.success-message');
existingMessages.forEach(msg => msg.remove());
document.body.appendChild(successMessage);
// Force a reflow to ensure animation works
successMessage.offsetHeight;
// Show message
successMessage.style.opacity = '1';
// Hide and remove after delay
setTimeout(() => {
successMessage.style.opacity = '0';
setTimeout(() => successMessage.remove(), 300);
}, 2000);
}
</script>
</body>
</html>
Beispiel 2 - Kopieren Sie folgenden Code in die Zwischenablage (Clipboard) und fügen Sie ihn in das Feld für den HTML-Code Import ein.
<!DOCTYPE html>
<html>
<head>
<title>Meine Link-Clipboard Liste</title>
<style>
body {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
display: flex;
flex-wrap: wrap;
gap: 8px;
background-color: #fff5e6;
}
h1 {
color: #cc6600;
border-bottom: 2px solid #ffd699;
padding-bottom: 8px;
margin-bottom: 15px;
width: 100%;
}
h2 {
color: #cc6600;
padding-bottom: 8px;
margin-bottom: 8px;
margin-top: 15px;
width: 100%;
}
h2:nth-of-type(2) {
margin-top: 30px;
border-top: 2px solid #ffd699;
padding-top: 15px;
}
h2:first-of-type {
margin-top: 0;
}
/* Modified button styles */
button {
min-width: 150px;
margin: 4px !important;
box-sizing: border-box;
padding: 6px 10px; /* Reduced from 8px 12px */
border: none;
border-radius: 4px;
background-color: #ff9933;
color: white;
cursor: pointer;
position: relative;
font-weight: bold;
min-height: 0;
height: auto;
white-space: normal;
line-height: 1.1; /* Reduced from 1.2 */
}
/* New styles for link buttons */
h2:first-of-type ~ button {
width: 100%;
display: block;
margin-bottom: 8px !important;
}
/* Style for clipboard buttons (keep the original responsive layout) */
h2:nth-of-type(2) ~ button {
flex: 0 1 calc(25% - 16px);
display: inline-block;
}
@media (max-width: 992px) {
h2:nth-of-type(2) ~ button {
flex: 0 1 calc(33.333% - 16px);
}
}
@media (max-width: 768px) {
h2:nth-of-type(2) ~ button {
flex: 0 1 calc(50% - 16px);
}
}
@media (max-width: 480px) {
h2:nth-of-type(2) ~ button {
flex: 0 1 100%;
}
}
.success-message {
color: #4CAF50;
background-color: #e8f5e9;
padding: 6px;
border-radius: 4px;
margin-top: 8px;
opacity: 0;
transition: opacity 0.3s ease;
position: fixed;
right: 12px;
top: 12px;
z-index: 1000;
border: 1px solid #ffd699;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.footer-text {
width: 100%;
text-align: center;
margin-top: 30px;
padding: 20px;
color: #cc6600;
font-weight: bold;
font-size: 1.2em;
border-top: 2px solid #ffd699;
}
.footer-text a {
color: #cc6600;
text-decoration: none;
}
.footer-text a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Meine Link-Clipboard Liste</h1>
<h2>Links</h2>
<button onclick="window.open('https://linktr.ee/wbm24', '_blank')">WBM24 auf Linktree</button>
<button onclick="window.open('https://info-10.bookymize.net/skainet', '_blank')">SkAInet - Die Schritt-für-Schritt Anleitung</button>
<button onclick="window.open('https://presearch.com/', '_blank')">Suchmaschine Presearch</button>
<h2>Texte zum Kopieren</h2>
<button onclick="copyToClipboard('Das hat geklappt!', this)">Bei Klick auf diesen Button wird dieser Text ins Clipboard kopiert: Das hat geklappt!</button>
<button onclick="copyToClipboard('Sie können sowohl die Beschriftung des Buttons als auch den gewünschten Text eingeben, der ins Clipboard kopiert werden soll!', this)">Button 2 - Zur freien Verfügung</button>
<button onclick="copyToClipboard('Testen Sie es!', this)">Button 3 - Zur freien Verfügung</button>
<button onclick="copyToClipboard('Tragen Sie hier Ihre Wallet-Adresse ein!', this)">Wallet WOS Lightning </button>
<button onclick="copyToClipboard('Tragen Sie hier Ihre Wallet-Adresse ein!', this)">Wallet WOS BTC</button>
<button onclick="copyToClipboard('Tragen Sie hier Ihre Wallet-Adresse ein!', this)">USDT TRC20 Wallet bei RedotPay</button>
<button onclick="copyToClipboard('Geben Sie hier Ihren gewünschten Text ein!', this)">Button 7: Nicht belegt!</button>
<button onclick="copyToClipboard('Geben Sie hier Ihren gewünschten Text ein!', this)">Button 8: Nicht belegt!</button>
<button onclick="copyToClipboard('DE 176906140', this)">Umsatzsteuer-ID</button>
<button onclick="copyToClipboard('skainet, high-frequency-trading, hochfrequenzhandel, hft, cermak, forex, broker, tradingroboter,', this)">Keywords SkAInet</button>
<div class="footer-text">
<a href="https://sites.google.com/view/mymoin-com/link-clipboard-generator" target="_blank">
Hol dir deine kostenlose "Link-Clipboard Liste!"
</a>
</div>
<script>
function copyToClipboard(text, buttonElement) {
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(text).then(() => {
showSuccessMessage(buttonElement);
}).catch((err) => {
console.error('Failed to copy:', err);
fallbackCopyToClipboard(text, buttonElement);
});
} else {
fallbackCopyToClipboard(text, buttonElement);
}
}
function fallbackCopyToClipboard(text, buttonElement) {
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.position = 'fixed';
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand('copy');
showSuccessMessage(buttonElement);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
alert('Kopieren fehlgeschlagen. Bitte versuchen Sie es erneut.');
}
document.body.removeChild(textArea);
}
function showSuccessMessage(buttonElement) {
const successMessage = document.createElement('div');
successMessage.className = 'success-message';
successMessage.textContent = 'In die Zwischenablage kopiert!';
// Remove any existing messages
const existingMessages = document.querySelectorAll('.success-message');
existingMessages.forEach(msg => msg.remove());
document.body.appendChild(successMessage);
// Force a reflow to ensure animation works
successMessage.offsetHeight;
// Show message
successMessage.style.opacity = '1';
// Hide and remove after delay
setTimeout(() => {
successMessage.style.opacity = '0';
setTimeout(() => successMessage.remove(), 300);
}, 2000);
}
</script>
</body>
</html>
Viel Spaß mit unserem Link-Clipboard Generator!