first commit
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="36" viewBox="0 0 24 36">
|
||||
<!-- Klasický styl kurzoru myši -->
|
||||
<polygon points="0,0 20,20 10,20 13,31 9,33 6,22 0,28" fill="black" stroke="white" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 235 B |
+60
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cs">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Let Me Google That For You</title>
|
||||
<meta name="description" content="Vygenerujte odkaz, který za někoho vyhledá dotaz na internetu.">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="orb orb-1"></div>
|
||||
<div class="orb orb-2"></div>
|
||||
|
||||
<div class="container">
|
||||
<h1>LMGTFY</h1>
|
||||
<p>Nechte mě to pro vás vyhledat...</p>
|
||||
|
||||
<form id="config-form">
|
||||
<div class="form-group">
|
||||
<label for="search-query">Co chcete vyhledat?</label>
|
||||
<input type="text" id="search-query" placeholder="Např. jak uvařit vejce..." required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="search-engine">Vyberte vyhledávač:</label>
|
||||
<select id="search-engine">
|
||||
<option value="google">Google</option>
|
||||
<option value="bing">Bing</option>
|
||||
<option value="duckduckgo">DuckDuckGo</option>
|
||||
<option value="seznam">Seznam.cz</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn">Vygenerovat odkaz</button>
|
||||
</form>
|
||||
|
||||
<div id="result-section" class="result-section">
|
||||
<label for="generated-link">Váš odkaz je připraven:</label>
|
||||
<div class="link-container">
|
||||
<input type="text" id="generated-link" readonly>
|
||||
<button type="button" id="copy-btn" class="btn btn-icon" title="Kopírovat">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" id="test-btn" class="btn btn-icon" title="Vyzkoušet odkaz">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
||||
<polyline points="15 3 21 3 21 9"></polyline>
|
||||
<line x1="10" y1="14" x2="21" y2="3"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,56 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const form = document.getElementById('config-form');
|
||||
const queryInput = document.getElementById('search-query');
|
||||
const engineSelect = document.getElementById('search-engine');
|
||||
const resultSection = document.getElementById('result-section');
|
||||
const generatedLinkInput = document.getElementById('generated-link');
|
||||
const copyBtn = document.getElementById('copy-btn');
|
||||
const testBtn = document.getElementById('test-btn');
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const query = queryInput.value.trim();
|
||||
if (!query) return;
|
||||
|
||||
const engine = engineSelect.value;
|
||||
|
||||
// Získání aktuální domény/cesty
|
||||
const baseUrl = window.location.href.split('index.html')[0];
|
||||
const searchUrl = `${baseUrl}search.html?q=${encodeURIComponent(query)}&engine=${encodeURIComponent(engine)}`;
|
||||
|
||||
generatedLinkInput.value = searchUrl;
|
||||
resultSection.classList.add('active');
|
||||
});
|
||||
|
||||
copyBtn.addEventListener('click', () => {
|
||||
generatedLinkInput.select();
|
||||
generatedLinkInput.setSelectionRange(0, 99999); /* Pro mobilní zařízení */
|
||||
|
||||
try {
|
||||
navigator.clipboard.writeText(generatedLinkInput.value);
|
||||
|
||||
// Vizuální zpětná vazba
|
||||
const originalHTML = copyBtn.innerHTML;
|
||||
copyBtn.innerHTML = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
`;
|
||||
setTimeout(() => {
|
||||
copyBtn.innerHTML = originalHTML;
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.error('Nepodařilo se zkopírovat odkaz: ', err);
|
||||
// Fallback pro starší prohlížeče
|
||||
document.execCommand('copy');
|
||||
}
|
||||
});
|
||||
|
||||
testBtn.addEventListener('click', () => {
|
||||
const link = generatedLinkInput.value;
|
||||
if (link) {
|
||||
window.open(link, '_blank');
|
||||
}
|
||||
});
|
||||
});
|
||||
+166
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cs">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hledám to pro vás...</title>
|
||||
<style>
|
||||
/* Styl specifický pro čisté rozhraní vyhledávače */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 10px 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mockup-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 10vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
max-width: 584px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
border: 1px solid #dfe1e5;
|
||||
border-radius: 24px;
|
||||
padding: 0 45px 0 20px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-input:hover {
|
||||
box-shadow: 0 1px 6px rgba(32, 33, 36, .28);
|
||||
border-color: rgba(223, 225, 229, 0);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #4285f4;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #f8f9fa;
|
||||
border-radius: 4px;
|
||||
color: #3c4043;
|
||||
font-size: 14px;
|
||||
margin: 11px 4px;
|
||||
padding: 0 16px;
|
||||
line-height: 27px;
|
||||
height: 36px;
|
||||
min-width: 54px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.btn-search:hover,
|
||||
.btn-search.active {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dadce0;
|
||||
color: #202124;
|
||||
}
|
||||
|
||||
/* Fake Cursor */
|
||||
#fake-cursor {
|
||||
position: fixed;
|
||||
width: 24px;
|
||||
height: 36px;
|
||||
top: 80vh;
|
||||
left: 80vw;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
/* Transition pro plynulý pohyb */
|
||||
transition: all 1s ease-in-out;
|
||||
background-image: url('cursor.svg');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* Užitečné zprávy pro uživatele */
|
||||
#status-msg {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
background: #fff;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="mockup-container">
|
||||
<!-- Zde si můžete později změnit logo.svg za vlastní logo.png -->
|
||||
<img src="logo.svg" alt="Hledání" class="logo" id="logo">
|
||||
|
||||
<div class="search-wrapper">
|
||||
<input type="text" id="fake-input" class="search-input" readonly>
|
||||
<svg class="search-icon" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
|
||||
height="20">
|
||||
<path fill="#4285f4"
|
||||
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<div class="btn-search" id="btn-submit">Search by Google</div>
|
||||
<div class="btn-search">I'm Feeling Lucky</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="fake-cursor"></div>
|
||||
|
||||
<div id="status-msg">Preparing search...</div>
|
||||
|
||||
<script src="search.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const query = urlParams.get('q');
|
||||
const engine = urlParams.get('engine') || 'google';
|
||||
|
||||
const inputField = document.getElementById('fake-input');
|
||||
const cursor = document.getElementById('fake-cursor');
|
||||
const searchBtn = document.getElementById('btn-submit');
|
||||
const statusMsg = document.getElementById('status-msg');
|
||||
|
||||
if (!query) {
|
||||
window.location.href = 'index.html';
|
||||
return;
|
||||
}
|
||||
|
||||
const searchEngines = {
|
||||
'google': 'https://www.google.com/search?q=',
|
||||
'bing': 'https://www.bing.com/search?q=',
|
||||
'duckduckgo': 'https://duckduckgo.com/?q=',
|
||||
'seznam': 'https://search.seznam.cz/?q='
|
||||
};
|
||||
|
||||
const targetUrl = (searchEngines[engine] || searchEngines['google']) + encodeURIComponent(query);
|
||||
|
||||
// Pomocná funkce pro čekání
|
||||
const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
|
||||
|
||||
// Funkce pro přesun kurzoru
|
||||
const moveCursorTo = (element, offsetX = 0, offsetY = 0) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
// Přesun do středu elementu + offset
|
||||
const top = rect.top + (rect.height / 2) + offsetY;
|
||||
const left = rect.left + (rect.width / 2) + offsetX;
|
||||
|
||||
cursor.style.top = `${top}px`;
|
||||
cursor.style.left = `${left}px`;
|
||||
};
|
||||
|
||||
// Hlavní sekvence animace
|
||||
const runAnimation = async () => {
|
||||
await wait(1000);
|
||||
statusMsg.textContent = 'Step 1: Move to search field...';
|
||||
|
||||
// 1. Přesun kurzoru na input (offset trochu doleva)
|
||||
cursor.style.transition = 'all 1s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
moveCursorTo(inputField, -100, 0);
|
||||
|
||||
await wait(1200);
|
||||
|
||||
// Simulace kliknutí do inputu
|
||||
inputField.style.borderColor = '#4285f4';
|
||||
inputField.style.boxShadow = '0 0 0 1px #4285f4';
|
||||
statusMsg.textContent = 'Step 2: Typing...';
|
||||
await wait(500);
|
||||
|
||||
// 2. Psaní textu
|
||||
cursor.style.transition = 'all 0.1s linear'; // pro psaní není potřeba dlouhá animace kurzoru, ale může se jemně třást
|
||||
for (let i = 0; i < query.length; i++) {
|
||||
inputField.value += query.charAt(i);
|
||||
// Malý náhodný pohyb kurzoru při psaní
|
||||
moveCursorTo(inputField, -100 + (i * 2), (Math.random() * 4) - 2);
|
||||
await wait(100 + Math.random() * 100); // Náhodná rychlost psaní (100-200ms)
|
||||
}
|
||||
|
||||
await wait(500);
|
||||
inputField.style.borderColor = '#dfe1e5';
|
||||
inputField.style.boxShadow = 'none';
|
||||
|
||||
// 3. Přesun kurzoru na tlačítko "Vyhledat"
|
||||
statusMsg.textContent = 'Step 3: Click the button...';
|
||||
cursor.style.transition = 'all 1s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||
moveCursorTo(searchBtn);
|
||||
|
||||
await wait(1200);
|
||||
|
||||
// 4. Simulace hover a kliknutí na tlačítko
|
||||
searchBtn.classList.add('active');
|
||||
cursor.style.transform = 'scale(0.9)'; // efekt stisknutí
|
||||
|
||||
await wait(300);
|
||||
|
||||
searchBtn.classList.remove('active');
|
||||
cursor.style.transform = 'scale(1)';
|
||||
statusMsg.textContent = 'Redirecting...';
|
||||
|
||||
await wait(500);
|
||||
|
||||
// 5. Přesměrování
|
||||
window.location.href = targetUrl;
|
||||
};
|
||||
|
||||
// Spuštění animace
|
||||
runAnimation();
|
||||
});
|
||||
@@ -0,0 +1,280 @@
|
||||
:root {
|
||||
--primary: #4F46E5;
|
||||
--primary-hover: #4338CA;
|
||||
--bg-gradient-start: #0f172a;
|
||||
--bg-gradient-end: #1e1b4b;
|
||||
--glass-bg: rgba(255, 255, 255, 0.05);
|
||||
--glass-border: rgba(255, 255, 255, 0.1);
|
||||
--text-main: #f8fafc;
|
||||
--text-muted: #94a3b8;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));
|
||||
color: var(--text-main);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(to right, #818cf8, #c084fc);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Glassmorphism Container */
|
||||
.container {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 1.5rem;
|
||||
padding: 3rem;
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
input[type="text"], select {
|
||||
width: 100%;
|
||||
padding: 1rem 1.25rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 0.75rem;
|
||||
color: var(--text-main);
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="text"]:focus, select:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 1rem center;
|
||||
background-size: 1.5em;
|
||||
}
|
||||
|
||||
select option {
|
||||
background: var(--bg-gradient-end);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Result Section */
|
||||
.result-section {
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--glass-border);
|
||||
display: none;
|
||||
animation: fadeIn 0.5s ease;
|
||||
}
|
||||
|
||||
.result-section.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.link-container {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.link-container input {
|
||||
flex: 1;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: auto;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Animation Styles (for search.html) */
|
||||
.search-mockup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mockup-logo {
|
||||
width: 250px;
|
||||
height: 80px;
|
||||
margin-bottom: 2rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
border-radius: 2rem;
|
||||
padding-left: 3rem;
|
||||
background: white;
|
||||
color: #1f2937;
|
||||
border: 1px solid #e5e7eb;
|
||||
pointer-events: none; /* Prevent manual interaction */
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #9ca3af;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.search-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #f8f9fa;
|
||||
color: #3c4043;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
cursor: default;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.search-btn.active {
|
||||
border-color: #dadce0;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.1);
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* The Cursor */
|
||||
#fake-cursor {
|
||||
position: fixed;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 80%;
|
||||
left: 80%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), top 0.8s cubic-bezier(0.25, 1, 0.5, 1), left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
|
||||
}
|
||||
|
||||
#fake-cursor.typing {
|
||||
/* When typing, cursor is stationary, but we might want a small pulse effect, though not necessary */
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Decorational Orbs */
|
||||
.orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
z-index: 1;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.orb-1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: #4f46e5;
|
||||
top: -100px;
|
||||
left: -100px;
|
||||
animation: float 10s infinite ease-in-out alternate;
|
||||
}
|
||||
|
||||
.orb-2 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: #c084fc;
|
||||
bottom: -150px;
|
||||
right: -100px;
|
||||
animation: float 12s infinite ease-in-out alternate-reverse;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(50px, 50px); }
|
||||
}
|
||||
Reference in New Issue
Block a user