Gauss Toplamı Keşif Aracı /* * KAPSÜLLENMİŞ CSS (ENCAPSULATED CSS) * Host web sitesinin stillerini bozmamak için tüm sınıflar '.gauss-widget-container' ile sınırlandırılmıştır. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); .gauss-widget-container { font-family: 'Inter', sans-serif; background-color: #FFFFFF; max-width: 900px; margin: 20px auto; padding: 30px 20px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); color: #333333; box-sizing: border-box; position: relative; overflow: hidden; border: 2px solid #f0f0f0; } .gauss-widget-container * { box-sizing: border-box; } .gauss-widget-container .gw-header { text-align: center; margin-bottom: 24px; } .gauss-widget-container .gw-title { font-size: 24px; font-weight: 700; color: #0198B9; margin: 0 0 10px 0; padding: 0; line-height: 1.2; } .gauss-widget-container .gw-subtitle { font-size: 15px; color: #666666; margin: 0; } .gauss-widget-container .gw-controls { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 40px; flex-wrap: wrap; } .gauss-widget-container .gw-input-group { display: flex; align-items: center; gap: 10px; } .gauss-widget-container .gw-label { font-weight: 600; font-size: 16px; color: #7473BC; } .gauss-widget-container .gw-input { width: 70px; padding: 10px; font-size: 16px; font-weight: 600; text-align: center; border: 2px solid #0198B9; border-radius: 8px; outline: none; color: #333333; transition: all 0.2s ease; } .gauss-widget-container .gw-input:focus { border-color: #F98155; box-shadow: 0 0 0 3px rgba(249, 129, 85, 0.2); } .gauss-widget-container .gw-button { background-color: #0198B9; color: #FFFFFF; border: none; padding: 12px 24px; font-size: 16px; font-weight: 600; border-radius: 8px; cursor: pointer; transition: background-color 0.3s, transform 0.1s; box-shadow: 0 4px 6px rgba(1, 152, 185, 0.3); } .gauss-widget-container .gw-button:hover { background-color: #017a95; transform: translateY(-2px); } .gauss-widget-container .gw-button:active { transform: translateY(0); } .gauss-widget-container .gw-button:disabled { background-color: #cccccc; cursor: not-allowed; transform: none; box-shadow: none; } .gauss-widget-container .gw-visualization { position: relative; min-height: 250px; margin: 20px 0 40px 0; display: flex; justify-content: center; align-items: flex-start; } .gauss-widget-container .gw-numbers-container { display: flex; justify-content: center; align-items: center; width: 100%; padding: 0 10px; position: relative; z-index: 2; } .gauss-widget-container .gw-number-box { display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; margin: 0 4px; background-color: #f5f5f5; border: 2px solid #e0e0e0; border-radius: 50%; font-weight: 700; font-size: 14px; color: #555555; transition: all 0.5s ease; position: relative; user-select: none; } /* Responsive ayarlar: Ekran küçüldüğünde sayı kutularını daralt */ @media (max-width: 600px) { .gauss-widget-container .gw-number-box { width: 28px; height: 28px; margin: 0 2px; font-size: 12px; } .gauss-widget-container .gw-visualization { min-height: 200px; } } .gauss-widget-container .gw-svg-layer { position: absolute; top: 20px; /* Sayıların altından başlaması için */ left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; } .gauss-widget-container .gw-path { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0.8; /* Animasyon JS ile eklenecek */ } .gauss-widget-container .gw-feedback-box { text-align: center; min-height: 60px; margin-bottom: 20px; font-size: 18px; font-weight: 600; transition: opacity 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; } .gauss-widget-container .gw-pair-badge { display: inline-block; padding: 6px 12px; border-radius: 20px; color: #ffffff; margin-top: 8px; font-size: 16px; animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; } .gauss-widget-container .gw-conclusion { background-color: #fcfcfc; border: 2px dashed #0198B9; border-radius: 12px; padding: 20px; text-align: center; display: none; animation: fadeIn 0.8s ease forwards; } .gauss-widget-container .gw-conclusion-title { color: #0198B9; font-size: 20px; font-weight: 700; margin: 0 0 15px 0; } .gauss-widget-container .gw-formula-step { font-size: 16px; margin-bottom: 10px; color: #444444; } .gauss-widget-container .gw-final-result { font-size: 24px; font-weight: 700; color: #F98155; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eeeeee; } @keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .gauss-widget-container .gw-highlight { font-weight: bold; } Gauss Toplamı Keşif Aracı 1'den n'e kadar olan sayıları hızlıca toplamanın bir sırrı var! Birlikte keşfedelim. n Değeri: Topla / Eşleştir 🚀 Başlamak için n değerini seçin ve butona tıklayın. (Maks: 20) Sonuç ve Kural: n(n+1) / 2
Scott Ajans