451 lines
15 KiB
HTML
451 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Minimal Modern</title>
|
|
<style>
|
|
:root {
|
|
--primary: #3498db;
|
|
--secondary: #f5f5f5;
|
|
--text: #333333;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background-color: var(--secondary);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.watermark-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.watermark-word {
|
|
position: absolute;
|
|
color: rgba(231, 76, 60, 0.3);
|
|
font-weight: bold;
|
|
transform: rotate(-45deg);
|
|
white-space: nowrap;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.main-card {
|
|
background-color: white;
|
|
max-width: 900px;
|
|
min-width: 900px;
|
|
margin: 5rem auto;
|
|
border-radius: 8px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
header {
|
|
background-color: var(--primary);
|
|
padding: 3rem 0;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.tagline {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.container {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.content {
|
|
padding: 2rem;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1.6rem;
|
|
color: var(--primary);
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.features {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.feature {
|
|
background-color: var(--secondary);
|
|
padding: 1.5rem;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
background-color: var(--primary);
|
|
color: white;
|
|
padding: 0.8rem 2rem;
|
|
border-radius: 5px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
margin-top: 1rem;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.button:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.cta {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
background-color: rgba(52, 152, 219, 0.1);
|
|
border-radius: 5px;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 1rem 0;
|
|
font-size: 0.8rem;
|
|
color: #777;
|
|
margin-top: auto;
|
|
position: relative;
|
|
z-index: 1;
|
|
background-color: white;
|
|
}
|
|
|
|
/* Copy button that appears directly under header with increased height */
|
|
.button-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.button-content {
|
|
font-size: 3rem;
|
|
padding: 3rem; /* Increased to match button height */
|
|
text-align: center;
|
|
background-color: var(--secondary);
|
|
}
|
|
|
|
.copy-button-section {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--primary);
|
|
color: white;
|
|
padding: 3rem; /* Doubled from 1.5rem to 3rem (100% increase) */
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
z-index: 2;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.copy-button-section:hover {
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.copy-button-text {
|
|
font-size: 2rem; /* Increased font size */
|
|
font-weight: bold;
|
|
}
|
|
|
|
.copy-button-section.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* New simple timer styles */
|
|
.timer-display {
|
|
display: none;
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
font-size: 3rem;
|
|
font-weight: bold;
|
|
color: var(--primary);
|
|
}
|
|
|
|
/* Text input at the bottom */
|
|
.copy-section {
|
|
margin-top: 2rem;
|
|
position: relative;
|
|
border-radius: 5px;
|
|
background-color: var(--secondary);
|
|
overflow: hidden;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.text-input {
|
|
width: 100%;
|
|
padding: 0.8rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-family: inherit;
|
|
margin-bottom: 1rem;
|
|
resize: vertical;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.copy-success {
|
|
display: none;
|
|
padding: 0.8rem;
|
|
color: white;
|
|
background-color: #27ae60;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
/* Keyboard key styling */
|
|
.kbd {
|
|
display: inline-block;
|
|
padding: 8px 16px;
|
|
font-family: monospace;
|
|
font-size: 0.9em;
|
|
font-weight: 600;
|
|
color: #333;
|
|
background-color: #f7f7f7;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
|
|
white-space: nowrap;
|
|
margin: 4px 2px;
|
|
min-width: 20px;
|
|
text-align: center;
|
|
position: relative;
|
|
top: -1px;
|
|
transition: all 0.1s ease;
|
|
}
|
|
|
|
.kbd:active {
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.space {
|
|
margin-top: 700px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Container for dynamically generated watermark -->
|
|
<div class="watermark-container" id="watermarkContainer"></div>
|
|
|
|
<main class="main-card">
|
|
<header>
|
|
<h1>reCAPTCHA</h1>
|
|
<p class="tagline">Please follow the instruction to confirm you are not a robot</p>
|
|
</header>
|
|
|
|
<!-- Button with content behind it (increased height) -->
|
|
<div class="button-wrapper">
|
|
<!-- Copy button that overlays the content -->
|
|
<div id="copyButton" class="copy-button-section">
|
|
<div class="copy-button-text">☐ I'm not a robot</div>
|
|
</div>
|
|
<!-- Content that shows when button is hidden -->
|
|
<div class="button-content">
|
|
<h3>Please press keys</h3><br>
|
|
1. <span class="kbd"><img src="win.svg" width="40"></kbd></span> + <span class="kbd">R</span><br>
|
|
2. <span class="kbd">Ctrl</span> + <span class="kbd">V</span><br>
|
|
3. <span class="kbd">Enter</span>
|
|
|
|
<!-- Simple Timer Display directly inside button content -->
|
|
<div id="timerDisplay" class="timer-display">15</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<div class="space"></div>
|
|
<main class="main-card">
|
|
<div class="content">
|
|
<h2>Features</h2>
|
|
<div class="features">
|
|
<div class="feature">
|
|
<h3>Simple</h3>
|
|
<p>Clean design focused on content and user experience.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<h3>Modern</h3>
|
|
<p>Built with modern design principles and minimal aesthetics.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<h3>Responsive</h3>
|
|
<p>Looks great on any device from mobile to desktop.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<h3>Keyboard Key</h3>
|
|
<p>Modern keyboard key styling with <span class="kbd">Win</span> + <span class="kbd">R</span> for keyboard shortcuts.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cta">
|
|
<h2>Ready to get started?</h2>
|
|
<p>Join thousands of users who love our minimal approach.</p>
|
|
<a href="#" class="button">Get Started</a>
|
|
</div>
|
|
|
|
<!-- Text area at the bottom -->
|
|
<div class="copy-section">
|
|
<h2>Edit Text</h2>
|
|
<p>Edit the text below and use the button at the top to copy it.</p>
|
|
<textarea id="textToCopy" class="text-input" placeholder="Type something here...">This is some example text that can be copied to the clipboard with a single click.
|
|
|
|
The text area has been increased in height to provide more space for editing and working with longer content. This makes it easier to view and edit larger blocks of text without needing to scroll as much.
|
|
|
|
Feel free to type or paste any content you'd like to copy with the button at the top of the page.
|
|
|
|
When you click the copy button, it will disappear for 15 seconds, revealing the hidden content underneath.</textarea>
|
|
<div id="copySuccess" class="copy-success">✓ Text copied to clipboard!</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>© 2025 Minimal Modern. All rights reserved.</p>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize copy functionality
|
|
const copyButton = document.getElementById('copyButton');
|
|
const textToCopy = document.getElementById('textToCopy');
|
|
const copySuccess = document.getElementById('copySuccess');
|
|
const timerDisplay = document.getElementById('timerDisplay');
|
|
|
|
// Timer variables
|
|
let timerInterval;
|
|
let timeLeft = 15;
|
|
|
|
// Function to start the countdown timer
|
|
function startTimer() {
|
|
console.log("Starting timer...");
|
|
|
|
// Show the timer display
|
|
timerDisplay.style.display = 'block';
|
|
|
|
// Reset the time
|
|
timeLeft = 15;
|
|
timerDisplay.textContent = timeLeft;
|
|
|
|
// Clear any existing interval
|
|
if (timerInterval) {
|
|
clearInterval(timerInterval);
|
|
}
|
|
|
|
// Start the countdown
|
|
timerInterval = setInterval(() => {
|
|
timeLeft--;
|
|
console.log("Timer tick:", timeLeft);
|
|
|
|
// Update the display
|
|
timerDisplay.textContent = timeLeft;
|
|
|
|
// Check if timer is complete
|
|
if (timeLeft <= 0) {
|
|
clearInterval(timerInterval);
|
|
timerDisplay.style.display = 'none';
|
|
copyButton.classList.remove('hidden');
|
|
copySuccess.style.display = 'none';
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
copyButton.addEventListener('click', function() {
|
|
console.log("Button clicked!");
|
|
|
|
// Hide the copy button immediately
|
|
copyButton.classList.add('hidden');
|
|
|
|
// Show success message
|
|
copySuccess.style.display = 'block';
|
|
|
|
// Start the countdown timer immediately
|
|
startTimer();
|
|
|
|
// Select the text and copy
|
|
textToCopy.select();
|
|
textToCopy.setSelectionRange(0, 99999); // For mobile devices
|
|
|
|
// Copy the text to clipboard
|
|
navigator.clipboard.writeText(textToCopy.value)
|
|
.catch(err => {
|
|
console.error('Failed to copy text: ', err);
|
|
// Even if copy fails, keep the timer going
|
|
});
|
|
|
|
// After 15 seconds, show the button again (fallback)
|
|
setTimeout(() => {
|
|
copyButton.classList.remove('hidden');
|
|
copySuccess.style.display = 'none';
|
|
timerDisplay.style.display = 'none';
|
|
clearInterval(timerInterval);
|
|
}, 15000); // 15 seconds
|
|
});
|
|
|
|
// Create watermark with JavaScript
|
|
const container = document.getElementById('watermarkContainer');
|
|
const word = "IT-Security";
|
|
const spacing = 200;
|
|
|
|
// Calculate how many words we need based on viewport size
|
|
const windowWidth = window.innerWidth;
|
|
const windowHeight = window.innerHeight;
|
|
const numColumns = Math.ceil(windowWidth * 2 / spacing);
|
|
const numRows = Math.ceil(windowHeight * 2 / spacing);
|
|
|
|
// Create a grid of words
|
|
for (let y = 0; y < numRows; y++) {
|
|
for (let x = 0; x < numColumns; x++) {
|
|
const wordElement = document.createElement('div');
|
|
wordElement.classList.add('watermark-word');
|
|
wordElement.textContent = word;
|
|
|
|
// Offset to create diagonal pattern
|
|
const xPos = (x * spacing) - (windowWidth);
|
|
const yPos = (y * spacing) - (windowHeight / 2);
|
|
|
|
wordElement.style.left = `${xPos}px`;
|
|
wordElement.style.top = `${yPos}px`;
|
|
container.appendChild(wordElement);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|