commit 08232b80e78dd6f5421c3f55f4ee073a45237380 Author: Eduard Dlabal Date: Thu May 21 18:23:28 2026 +0200 first commit diff --git a/cursor.svg b/cursor.svg new file mode 100644 index 0000000..9e6e782 --- /dev/null +++ b/cursor.svg @@ -0,0 +1,4 @@ + diff --git a/index.html b/index.html new file mode 100644 index 0000000..b426b11 --- /dev/null +++ b/index.html @@ -0,0 +1,60 @@ + + + + + + Let Me Google That For You + + + + +

+ +

LMGTFY

Nechte mě to pro vás vyhledat...

+ + + +

+ Váš odkaz je připraven: +

+ + + +

+ + + + diff --git a/logo.svg b/logo.svg new file mode 100644 index 0000000..34ed7f4 Binary files /dev/null and b/logo.svg differ diff --git a/main.js b/main.js new file mode 100644 index 0000000..badfbab --- /dev/null +++ b/main.js @@ -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 = ` + + `; + 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'); + } + }); +}); diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..7e6fb38 --- /dev/null +++ b/readme.md @@ -0,0 +1,2 @@ +Test antigravity IDE. + diff --git a/search.html b/search.html new file mode 100644 index 0000000..888f27f --- /dev/null +++ b/search.html @@ -0,0 +1,166 @@ + + + + + + + Hledám to pro vás... + + + + + +

+ +

+ + +

+ +

Search by Google

I'm Feeling Lucky

+ +

Preparing search...

+ + + + + \ No newline at end of file diff --git a/search.js b/search.js new file mode 100644 index 0000000..36f5958 --- /dev/null +++ b/search.js @@ -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(); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..0361807 --- /dev/null +++ b/style.css @@ -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); } +}