Windsurf, popredný AI-native editor pre vývojárov, predstavil novú verziu svojho IDE, ktorá prináša vstavaný prehliadač založený na Chromiu. Novinka umožňuje vývojárom priamo v prostredí editora Windsurf otvárať webové stránky, sledovať konzolu, DOM či obsah stránok a využívať tieto dáta ako kontext pre AI asistenta Cascade.
Vďaka tejto integrácii už nie je potrebné prepínať medzi oknami ani kopírovať odkazy – všetko prebieha v jednom rozhraní, pričom AI dokáže analyzovať aj externé stránky, dokumentáciu či GitHub issues.
Prehiadač spustíme kliknutím na ikonku v pravom hornom rohu okna Windsurf. Novú funkcionalitu som použil na vytvorenie efektu prepínača, ktorý som našiel na symfonycasts.com/pricing.
Pomocou niekoľkých promptov som dokázal vytvoriť vernú kópiu efektu prepínača. Keďže sa nešpecializujem na frontend, ušetrilo mi to veľa času.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Switch</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.toggle-container {
display: flex;
border-radius: 25px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
position: relative;
background-color: white;
padding: 2px;
}
.toggle-slider {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
background-color: #0056b3;
border-radius: 25px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 0;
}
.toggle-option {
padding: 10px 30px;
cursor: pointer;
transition: color 0.3s ease;
font-weight: 500;
font-size: 16px;
text-align: center;
min-width: 120px;
position: relative;
z-index: 1;
color: #0056b3;
background: transparent;
border: none;
}
.toggle-option:first-child {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.toggle-option:last-child {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.toggle-option.active {
color: white;
}
.toggle-option:not(.active) {
color: #0056b3;
}
.card {
position: absolute;
opacity: 0;
visibility: hidden;
margin-top: 20px;
padding: 20px;
border-radius: 8px;
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
max-width: 300px;
text-align: center;
transition: opacity 0.3s ease, visibility 0.3s ease;
width: 100%;
}
.card.active {
position: relative;
opacity: 1;
visibility: visible;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.cards-container {
position: relative;
min-height: 150px;
width: 100%;
margin-top: 20px;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="content">
<div class="toggle-container">
<div class="toggle-slider"></div>
<div class="toggle-option active" data-target="individual">Individual</div>
<div class="toggle-option" data-target="team">Team</div>
</div>
<div class="cards-container">
<div class="card active" id="individual-card">
<h2>Individual</h2>
<p>This is the individual view content.</p>
</div>
<div class="card" id="team-card">
<h2>Team</h2>
<p>This is the team view content.</p>
</div>
</div>
</div>
<script>
const options = document.querySelectorAll('.toggle-option');
const cards = document.querySelectorAll('.card');
const slider = document.querySelector('.toggle-slider');
options.forEach(option => {
option.addEventListener('click', () => {
// Remove active class from all options and cards
options.forEach(opt => opt.classList.remove('active'));
cards.forEach(card => card.classList.remove('active'));
// Add active class to clicked option
option.classList.add('active');
// Move the slider to the clicked option
const index = Array.from(options).indexOf(option);
slider.style.transform = `translateX(${index * 100}%)`;
// Show corresponding card immediately with smooth fade
const target = option.getAttribute('data-target');
document.getElementById(`${target}-card`).classList.add('active');
});
});
</script>
</body>
</html>
Windsurf tak prináša nástroj, ktorý má neobmedzené využitie vo vývoji, testovaní, dátovej analýze alebo v bezpečnosti. Na vygenerovanie kódu som využil ich popredný model SWE-1.
