Here is an example of JavaScript code that can be used to disable the right-click context menu on both smartphones and desktop devices. This script prevents users from accessing the context menu that includes options like "View Page Source":
You can include this JavaScript code in your HTML document within a
Please keep in mind that while this script can prevent the context menu from appearing, it is not a foolproof method to protect your website's source code. Users can still access the source code through browser developer tools. For more robust protection, consider implementing additional security measures as mentioned earlier.
// Disable right-click context menu on both desktop and mobile devices
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
});
// Disable touch and hold context menu on mobile devices
document.addEventListener('touchstart', function(event) {
event.preventDefault();
});
You can include this JavaScript code in your HTML document within a
<script> tag or in an external JavaScript file linked to your webpage. When a user tries to right-click on the webpage or touch and hold on mobile devices, the context menu will be prevented from appearing.Please keep in mind that while this script can prevent the context menu from appearing, it is not a foolproof method to protect your website's source code. Users can still access the source code through browser developer tools. For more robust protection, consider implementing additional security measures as mentioned earlier.
index.html
1.5 KB
Device mockups realistic used https://devicescss.xyz/
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
<h2 class="mb-4 text-3xl tracking-tight font-extrabold text-gray-900 dark:text-white">Our Pricing</h2>
<p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">Choose the plan that fits your needs. We offer simple, transparent pricing for everyone.</p>
</div>
<div class="space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 lg:space-y-0">
<!-- Pricing Plan 1 -->
<div class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
<h3 class="mb-4 text-2xl font-semibold">Starter</h3>
<p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Best option for personal use & for your next project.</p>
<div class="flex justify-center items-baseline my-8">
<span class="mr-2 text-5xl font-extrabold">$29</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
<!-- List -->
<ul class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span>Team size: <span class="font-semibold">1 developer</span></span>
</li>
<li class="flex items-center space-x-3">
<svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.707a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
<span>Premium support: <span class="font-semibold">6 months</span></span>
</li>
</ul>
<button class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-900">Get started</button>
</div>
<!-- Add more pricing plans similarly -->
</div>
</div>
</section>
👎1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rainbow Text</title>
<style>
@keyframes rainbow {
0% { color: red; }
16.7% { color: orange; }
33.3% { color: yellow; }
50% { color: green; }
66.7% { color: blue; }
83.3% { color: indigo; }
100% { color: violet; }
}
.rainbow-text {
font-size: 2em;
font-weight: bold;
animation: rainbow 4s infinite; /* Change the duration if needed */
}
</style>
</head>
<body>
<h1 class="rainbow-text">Rainbow Text Effect</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Mockup with Highlight and Copy</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@3.2.1/dist/full.css" rel="stylesheet">
<!-- Prism.js for Syntax Highlighting -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
<style>
/* Optional styling for code block */
pre {
padding: 1rem;
border-radius: 0.5rem;
font-family: monospace;
overflow-x: auto;
}
</style>
</head>
<body class="bg-base-200 p-10">
<div class="card shadow-lg max-w-md mx-auto">
<div class="card-body">
<h2 class="card-title">Highlighted Code Block</h2>
<!-- Code Block with Syntax Highlighting -->
<pre id="codeBlock" class="language-javascript">
<code class="language-javascript">
function greet() {
console.log("Hello, World!");
}
</code>
</pre>
<!-- Copy Button -->
<div class="mt-4">
<button class="btn btn-primary" id="copyButton">Copy Code</button>
</div>
</div>
</div>
<script>
// JavaScript for copy functionality
document.getElementById('copyButton').addEventListener('click', function() {
const codeBlock = document.getElementById('codeBlock').innerText;
navigator.clipboard.writeText(codeBlock).then(() => {
alert("Code copied to clipboard!");
}).catch(err => {
console.error("Failed to copy text: ", err);
});
});
</script>
</body>
</html>
Code mockup with animation https://webhook.site/3a3c4443-89d6-438c-a64f-1e8e4f1d1a38
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grammar Checker and Translator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
}
textarea {
width: 100%;
height: 150px;
padding: 10px;
font-size: 16px;
}
button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
margin-right: 10px;
}
.result, .translation {
margin-top: 20px;
}
.error {
color: red;
}
select {
padding: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Open-Source Grammar Checker and Translator</h1>
<p>Enter text in the box below and click "Check Grammar" or "Translate":</p>
<textarea id="text-input" placeholder="Type or paste your text here..."></textarea>
<br>
<button onclick="checkGrammar()">Check Grammar</button>
<select id="language-select">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="uk">Ukrainian</option>
</select>
<button onclick="translateText()">Translate</button>
<div class="result" id="result"></div>
<div class="translation" id="translation"></div>
<script>
async function checkGrammar() {
const text = document.getElementById("text-input").value;
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = "Checking grammar...";
try {
const response = await fetch("https://api.languagetool.org/v2/check", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: new URLSearchParams({
text: text,
language: "en-US"
})
});
const result = await response.json();
displayResults(result.matches);
} catch (error) {
resultDiv.innerHTML = "Error checking grammar. Please try again.";
}
}
function displayResults(matches) {
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = "";
if (matches.length === 0) {
resultDiv.innerHTML = "<p>No grammar errors found!</p>";
return;
}
matches.forEach(match => {
const error = document.createElement("p");
error.classList.add("error");
error.innerHTML = `Error: <strong>${match.message}</strong> at position ${match.offset}. Suggested correction: <strong>${match.replacements[0]?.value || "No suggestion"}</strong>`;
resultDiv.appendChild(error);
});
}
// Translation functionality using Open Source Library (LibreTranslate)
async function translateText() {
const text = document.getElementById("text-input").value;
const targetLanguage = document.getElementById("language-select").value;
const translationDiv = document.getElementById("translation");
translationDiv.innerHTML = "Translating...";
try {
const response = await fetch("https://libretranslate.de/translate", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
q: text,
source: "en", // You can detect the source language dynamically if needed
target: targetLanguage,
format: "text"
})
});
const result = await response.json();
translationDiv.innerHTML =
} catch (error) {
translationDiv.innerHTML = "Error translating text. Please try again.";
}
}
</script>
</body>
</html>
"Content-Type": "application/json"
},
body: JSON.stringify({
q: text,
source: "en", // You can detect the source language dynamically if needed
target: targetLanguage,
format: "text"
})
});
const result = await response.json();
translationDiv.innerHTML =
<p>Translation: <strong>${result.translatedText}</strong></p>;} catch (error) {
translationDiv.innerHTML = "Error translating text. Please try again.";
}
}
</script>
</body>
</html>
`<div class="avatar-group -space-x-6 rtl:space-x-reverse">
<div class="avatar">
<div class="w-12">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
</div>
</div>
<div class="avatar">
<div class="w-12">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
</div>
</div>
<div class="avatar">
<div class="w-12">
<img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
</div>
</div>
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content w-12">
<span>+99</span>
</div>
</div>
</div>