Webleb - fragmentos de código

HTML

<!DOCTYPE html>

<head>

<title>Yapay Zeka Evrimi | Güç ve Gelişim</title>

<style>

:root {

--primary-color: #4361EE; /* Canlı mavi */

--secondary-color: #3A0CA3; /* Koyu mavi */

--light-bg: #F8F9FA; /* Açık arka plan */

--dark-text: #212529; /* Koyu metin */

--accent-color: #F72585; /* Canlı pembe */

--accent-secondary: #4CC9F0; /* Açık mavi */

--accent-tertiary: #7209B7; /* Mor */

--card-bg: rgba(255, 255, 255, 0.9); /* Hafif şeffaf kart */

--border-color: rgba(67, 97, 238, 0.2); /* Hafif mavi çerçeve */

--transition-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275);

}

body {

font-family: 'Inter', sans-serif;

background-color: var(--light-bg);

color: var(--dark-text);

line-height: 1.6;

scroll-behavior: smooth;

overflow-x: hidden;

}

h1, h2, h3, h4, h5, h6 {

font-family: 'Playfair Display', serif;

color: var(--dark-text);

}

/* Particles.js Background */

#particles-js {

position: fixed;

width: 100%;

height: 100%;

z-index: -1;

top: 0;

left: 0;

background: linear-gradient(135deg, #4CC9F0 0%, #4361EE 50%, #7209B7 100%);

}

/* Sticky Header */

.main-header.scrolled {

background-color: rgba(255, 255, 255, 0.95);

backdrop-filter: blur(12px);

box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);

padding-top: 0.75rem;

padding-bottom: 0.75rem;

}

/* Custom underline for nav links */

.nav-link::after {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background-color: var(--primary-color);

transition: width 0.3s var(--transition-timing);

}

.nav-link:hover::after, .nav-link.active::after {

width: 100%;

}

/* Typed.js Cursor */

.typed-cursor {

color: var(--primary-color) !important;

font-size: 1em;

opacity: 1;

animation: blink 0.7s infinite;

}

@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }

/* Enhanced Button Styles */

.btn-custom {

display: inline-block;

padding: 0.8rem 2.2rem;

font-size: 1.1rem;

font-weight: 700;

text-transform: uppercase;

border-radius: 50px;

transition: all 0.3s var(--transition-timing);

box-shadow: 0 5px 15px rgba(0,0,0,0.1);

border: 2px solid transparent;

}

.btn-primary-custom {

background-color: var(--primary-color);

color: white;

border-color: var(--primary-color);

}

.btn-primary-custom:hover {

background-color: var(--secondary-color);

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(67, 97, 238, 0.4);

border-color: var(--secondary-color);

}

.btn-secondary-custom {

background-color: transparent;

color: var(--primary-color);

border-color: var(--primary-color);

}

.btn-secondary-custom:hover {

background-color: var(--primary-color);

color: white;

transform: translateY(-5px);

box-shadow: 0 15px 30px rgba(67, 97, 238, 0.3);

border-color: var(--primary-color);

}

/* Timeline Styles */

.timeline {

position: relative;

max-width: 1200px;

margin: 0 auto;

}

.timeline::after {

content: '';

position: absolute;

width: 6px;

background-color: var(--primary-color);

top: 0;

bottom: 0;

left: 50%;

margin-left: -3px;

}

.timeline-container {

padding: 10px 40px;

position: relative;

background-color: inherit;

width: 50%;

}

.timeline-container::after {

content: '';

position: absolute;

width: 25px;

height: 25px;

right: -13px;

background-color: var(--accent-color);

border: 4px solid var(--primary-color);

top: 15px;

border-radius: 50%;

z-index: 1;

}

.left {

left: 0;

}

.right {

left: 50%;

}

.left::before {

content: " ";

height: 0;

position: absolute;

top: 22px;

width: 0;

z-index: 1;

right: 30px;

border: medium solid var(--card-bg);

border-width: 10px 0 10px 10px;

border-color: transparent transparent transparent var(--card-bg);

}

.right::before {

content: " ";

height: 0;

position: absolute;

top: 22px;

width: 0;

z-index: 1;

left: 30px;

border: medium solid var(--card-bg);

border-width: 10px 10px 10px 0;

border-color: transparent var(--card-bg) transparent transparent;

}

.right::after {

left: -13px;

}

.timeline-content {

padding: 20px 30px;

background-color: var(--card-bg);

position: relative;

border-radius: 12px;

border: 1px solid var(--border-color);

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

}

/* Chart Container */

.chart-container {

background-color: var(--card-bg);

border-radius: 12px;

padding: 20px;

border: 1px solid var(--border-color);

margin-bottom: 30px;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

}

/* Animated Elements */

.animate-fadeIn {

animation: fadeIn 1s ease-in;

}

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

.animate-slideUp {

animation: slideUp 1s ease-out;

}

@keyframes slideUp {

from { transform: translateY(50px); opacity: 0; }

to { transform: translateY(0); opacity: 1; }

}

/* Process Cards */

.process-card {

background-color: var(--card-bg);

border-radius: 12px;

padding: 2rem;

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

height: 100%;

transition: all 0.3s ease;

position: relative;

z-index: 1;

overflow: hidden;

border: 1px solid var(--border-color);

}

.process-card:hover {

transform: translateY(-10px);

box-shadow: 0 15px 30px rgba(67, 97, 238, 0.15);

}

.process-icon {

width: 80px;

height: 80px;

background: linear-gradient(135deg, var(--accent-secondary), var(--primary-color));

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 1.5rem;

font-size: 2rem;

color: white;

box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);

}

/* Gradient Text */

.gradient-text {

background: linear-gradient(135deg, var(--primary-color), var(--accent-color));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

/* Section Headers */

.section-header {

position: relative;

margin-bottom: 3rem;

}

.section-header::after {

content: '';

position: absolute;

bottom: -10px;

left: 50%;

transform: translateX(-50%);

width: 80px;

height: 4px;

background: linear-gradient(to right, var(--accent-secondary), var(--accent-color));

border-radius: 2px;

}

/* Responsive */

@media screen and (max-width: 768px) {

.timeline::after {

left: 31px;

}

.timeline-container {

width: 100%;

padding-left: 70px;

padding-right: 25px;

}

.timeline-container::before {

left: 60px;

border: medium solid var(--card-bg);

border-width: 10px 10px 10px 0;

border-color: transparent var(--card-bg) transparent transparent;

}

.left::after, .right::after {

left: 18px;

}

.right {

left: 0%;

}

</style>

</head>

AI<span class="gradient-text">Evrimi</span>

</a>

<a href="#home" class="nav-link text-lg font-medium text-[var(--dark-text)] hover:text-[var(--primary-color)] transition-colors duration-300 relative">Anasayfa</a>

<a href="#history" class="nav-link text-lg font-medium text-[var(--dark-text)] hover:text-[var(--primary-color)] transition-colors duration-300 relative">Tarihçe</a>

<a href="#evolution" class="nav-link text-lg font-medium text-[var(--dark-text)] hover:text-[var(--primary-color)] transition-colors duration-300 relative">Evrim</a>

<a href="#applications" class="nav-link text-lg font-medium text-[var(--dark-text)] hover:text-[var(--primary-color)] transition-colors duration-300 relative">Uygulamalar</a>

<a href="#data" class="nav-link text-lg font-medium text-[var(--dark-text)] hover:text-[var(--primary-color)] transition-colors duration-300 relative">Veri Analizi</a>

</nav>

</button>

</div>

<li><a href="#home" class="nav-link text-2xl font-semibold text-[var(--dark-text)] hover:text-[var(--primary-color)] transition-colors duration-300 py-2 block">Anasayfa</a></li>

<li><a href="#history" class="nav-link text-2xl font-semibold text-[var(--dark-text)] hover:text-[var(--primary-color)] transition-colors duration-300 py-2 block">Tarihçe</a></li>

<li><a href="#evolution" class="nav-link text-2xl font-semibold text-[var(--dark-text)] hover:text-[var(--primary-color)] transition-colors duration-300 py-2 block">Evrim</a></li>

<li><a href="#applications" class="nav-link text-2xl font-semibold text-[var(--dark-text)] hover:text-[var(--primary-color)] transition-colors duration-300 py-2 block">Uygulamalar</a></li>

<li><a href="#data" class="nav-link text-2xl font-semibold text-[var(--dark-text)] hover:text-[var(--primary-color)] transition-colors duration-300 py-2 block">Veri Analizi</a></li>

</ul>

</div>

</header>

<h4 class="text-xl md:text-2xl font-medium gradient-text mb-4">YAPAY ZEKANIN GÜCÜ</h4>

Gelecek <br> <span id="typed-text" class="gradient-text"></span>

</h1>

Yapay zeka, insanlık tarihinin en dönüştürücü teknolojilerinden biri olarak karşımızda. Bu platformda, yapay zekanın ortaya çıkışını, gelişimini ve günlük yaşamımızı nasıl şekillendirdiğini keşfedin.

</p>

Tarihçeyi Keşfet

</a>

Veri Analizi

</a>

</div>

</div>

</section>

Yapay Zeka Tarihçesi

</h2>

Yapay zeka fikri antik çağlara kadar uzanırken, modern yapay zeka 20. yüzyılın ortalarında doğdu. İşte yapay zekanın kilometre taşları:

</p>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-2">1950: Turing Testi</h3>

<p class="text-[var(--dark-text)]">Alan Turing, "Makineler Düşünebilir mi?" makalesini yayınlayarak Turing Testi'ni önerdi ve yapay zeka felsefesinin temellerini attı.</p>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-2">1956: Dartmouth Konferansı</h3>

<p class="text-[var(--dark-text)]">John McCarthy, Marvin Minsky, Claude Shannon ve Nathaniel Rochester tarafından düzenlenen konferansta "yapay zeka" terimi ilk kez kullanıldı.</p>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-2">1960'lar: İlk AI Programları</h3>

<p class="text-[var(--dark-text)]">ELIZA (ilk chatbot) ve SHRDLU (blok dünyası) gibi ilk yapay zeka programları geliştirildi ve doğal dil işleme alanında öncü çalışmalar yapıldı.</p>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-2">1980'ler: Uzman Sistemler</h3>

<p class="text-[var(--dark-text)]">Belirli alanlarda uzmanlaşmış bilgi tabanlı sistemler popüler hale geldi ve ticari uygulamalarda kullanılmaya başlandı.</p>

</div>

<p class="text-[var(--dark-text)]">IBM'in Deep Blue bilgisayarı, dünya satranç şampiyonu Garry Kasparov'u yendi ve yapay zekanın karmaşık problem çözme yeteneğini gösterdi.</p>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-2">2010'lar: Derin Öğrenme Devrimi</h3>

<p class="text-[var(--dark-text)]">Büyük veri, gelişmiş algoritmalar ve güçlü donanımlar sayesinde derin öğrenme patlaması yaşandı. Görüntü tanıma, doğal dil işleme ve otonom sistemlerde büyük ilerlemeler kaydedildi.</p>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-2">2020'ler: Büyük Dil Modelleri</h3>

<p class="text-[var(--dark-text)]">GPT-3, GPT-4 ve benzeri büyük dil modelleri, yapay zekanın yaratıcılık ve anlama yeteneklerinde devrim yarattı.</p>

</div>

</section>

Yapay Zeka Evrimi

</h2>

Yapay zeka, kural tabanlı sistemlerden öğrenen sistemlere doğru evrimleşti. İşte bu gelişimin ana aşamaları:

</p>

</div>

</div>

<h3 class="text-xl font-bold text-[var(--dark-text)] mb-4">Kural Tabanlı Sistemler</h3>

<p class="text-[var(--dark-text)]">İlk yapay zeka sistemleri, önceden tanımlanmış kurallara dayanıyordu. Belirli girdilere karşılık önceden programlanmış çıktılar üretiyorlardı.</p>

</div>

</div>

<h3 class="text-xl font-bold text-[var(--dark-text)] mb-4">Makine Öğrenmesi</h3>

<p class="text-[var(--dark-text)]">Sistemler veriden öğrenmeye başladı. Algoritmalar, veri desenlerini tanımlayarak tahminlerde bulunmayı ve kararlar almayı öğrendi.</p>

</div>

</div>

<h3 class="text-xl font-bold text-[var(--dark-text)] mb-4">Derin Öğrenme</h3>

<p class="text-[var(--dark-text)]">Çok katmanlı sinir ağları, karmaşık desenleri tanımlama yeteneği kazandı. Görüntü tanıma, doğal dil işleme ve ses tanıma alanlarında devrim yarattı.</p>

</div>

</div>

<h3 class="text-xl font-bold text-[var(--dark-text)] mb-4">Dönüştürücü Mimari</h3>

<p class="text-[var(--dark-text)]">Dikkat mekanizmaları ve dönüştürücü mimariler, büyük dil modellerinin gelişimini sağladı. GPT ve BERT gibi modeller, insan benzeri metin üretimi ve anlama yeteneği kazandı.</p>

</div>

<h3 class="text-3xl font-bold gradient-text mb-8">Yapay Zeka Gelişim Hızı</h3>

</div>

</section>

Yapay Zeka Uygulamaları

</h2>

Yapay zeka artık günlük hayatımızın her alanında yer alıyor. İşte yapay zekanın dönüştürdüğü başlıca sektörler:

</p>

</div>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">Sağlık</h3>

Teşhis sistemleri, ilaç keşfi, kişiselleştirilmiş tedaviler ve robotik cerrahi alanlarında yapay zeka devrim yaratıyor.

</p>

</div>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">Finans</h3>

Dolandırıcılık tespiti, algoritmik ticaret, risk yönetimi ve kişiselleştirilmiş finansal hizmetler yapay zeka ile dönüşüyor.

</p>

</div>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">Eğitim</h3>

Kişiselleştirilmiş öğrenme yolları, otomatik değerlendirme sistemleri ve akıllı öğretim asistanları eğitimi dönüştürüyor.

</p>

</div>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">Ulaşım</h3>

Otonom araçlar, trafik optimizasyonu, akıllı ulaşım sistemleri ve lojistik yönetimi yapay zeka ile yeniden şekilleniyor.

</p>

</div>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">Perakende</h3>

Kişiselleştirilmiş öneriler, envanter yönetimi, fiyat optimizasyonu ve sanal alışveriş asistanları tüketici deneyimini dönüştürüyor.

</p>

</div>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4">Enerji</h3>

Akıllı şebeke yönetimi, enerji talebi tahmini, yenilenebilir enerji optimizasyonu ve enerji verimliliği yapay zeka ile gelişiyor.

</p>

</div>

</section>

Yapay Zeka Veri Analizi

</h2>

Yapay zeka sektörünün büyümesi ve etkisi hakkında veriye dayalı analizler:

</p>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4 text-center">Yapay Zeka Pazar Büyümesi (Milyar $)</h3>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4 text-center">Sektörlere Göre Yapay Zeka Yatırımları</h3>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4 text-center">Yapay Zeka İş Gücü Talebi</h3>

</div>

<h3 class="text-2xl font-bold text-[var(--primary-color)] mb-4 text-center">Yapay Zeka Etik Endişeleri</h3>

</div>

<h3 class="text-3xl font-bold gradient-text mb-8">Yapay Zekanın Geleceği</h3>

Yapay zeka teknolojisi hızla gelişmeye devam ediyor. Önümüzdeki on yılda, yapay genel zeka (AGI) araştırmalarında önemli ilerlemeler bekleniyor. Aynı zamanda, yapay zeka etiği, yönetişim ve insan-AI işbirliği gibi konular giderek daha önemli hale gelecek.

</p>

<p>

Yapay zeka, insanlığın en karmaşık sorunlarına çözüm bulmada önemli bir araç haline gelirken, aynı zamanda sorumlu ve etik kullanımı konusunda da toplumsal bir diyalog gerektiriyor.

</p>

</div>

</section>

AI<span class="text-[var(--accent-secondary)]">Evrimi</span>

</a>

<li><a href="#home" class="text-white hover:text-[var(--accent-secondary)] transition-colors duration-300">Anasayfa</a></li>

<li><a href="#history" class="text-white hover:text-[var(--accent-secondary)] transition-colors duration-300">Tarihçe</a></li>

<li><a href="#evolution" class="text-white hover:text-[var(--accent-secondary)] transition-colors duration-300">Evrim</a></li>

<li><a href="#applications" class="text-white hover:text-[var(--accent-secondary)] transition-colors duration-300">Uygulamalar</a></li>

<li><a href="#data" class="text-white hover:text-[var(--accent-secondary)] transition-colors duration-300">Veri Analizi</a></li>

</ul>

</div>

</p>

</div>

</footer>

</button>

// Mobile Navigation Toggle

const hamburger = document.getElementById('hamburger-menu');

const mobileNav = document.getElementById('mobile-nav');

const mobileNavLinks = mobileNav.querySelectorAll('.nav-link');

hamburger.addEventListener('click', () => {

mobileNav.classList.toggle('right-[-100%]');

mobileNav.classList.toggle('right-0');

hamburger.classList.toggle('active');

});

mobileNavLinks.forEach(link => {

link.addEventListener('click', () => {

mobileNav.classList.remove('right-0');

mobileNav.classList.add('right-[-100%]');

hamburger.classList.remove('active');

});

// Sticky Header on Scroll

const mainHeader = document.querySelector('.main-header');

window.addEventListener('scroll', () => {

mainHeader.classList.toggle('scrolled', window.scrollY > 80);

});

// Scroll to Top Button

const scrollTopBtn = document.getElementById('scroll-top-btn');

window.addEventListener('scroll', () => {

if (window.pageYOffset > 500) {

scrollTopBtn.classList.add('opacity-100', 'visible');

} else {

scrollTopBtn.classList.remove('opacity-100', 'visible');

}

});

scrollTopBtn.addEventListener('click', () => {

window.scrollTo({

top: 0,

behavior: 'smooth'

});

// Typed.js Initialization for Hero Section

document.addEventListener('DOMContentLoaded', () => {

if (document.getElementById('typed-text')) {

new Typed("#typed-text", {

strings: ["Burada Başlıyor", "Yapay Zeka ile", "Geleceği Şekillendir"],

typeSpeed: 60,

backSpeed: 45,

loop: true,

showCursor: true,

cursorChar: '|',

});

}

});

// Smooth Scroll for Navigation Links & Active Link Highlighting

const navLinks = document.querySelectorAll('.nav-link');

const sections = document.querySelectorAll('section[id]');

const mainHeaderElement = document.querySelector('.main-header');

function smoothScrollAndHighlight(e) {

if (e.target.matches('a[href^="#"]')) {

e.preventDefault();

const targetId = e.target.getAttribute('href');

const targetElement = document.querySelector(targetId);

if (targetElement) {

const headerHeight = mainHeaderElement.offsetHeight;

const offsetPosition = targetElement.offsetTop - headerHeight - 20;

window.scrollTo({

top: offsetPosition,

behavior: 'smooth'

});

}

function highlightNavLink() {

let currentActiveSection = '';

const headerHeight = mainHeaderElement.offsetHeight;

sections.forEach(section => {

const sectionTop = section.offsetTop - headerHeight - 30;

const sectionHeight = section.clientHeight;

if (pageYOffset >= sectionTop && pageYOffset < sectionTop + sectionHeight) {

currentActiveSection = section.getAttribute('id');

}

});

navLinks.forEach(link => {

link.classList.remove('active');

if (link.getAttribute('href') === `#${currentActiveSection}`) {

link.classList.add('active');

} else if (currentActiveSection === '' && link.getAttribute('href') === '#home') {

link.classList.add('active');

}

});

}

document.addEventListener('DOMContentLoaded', () => {

document.querySelectorAll('nav a').forEach(link => {

link.addEventListener('click', smoothScrollAndHighlight);

});

highlightNavLink();

});

window.addEventListener('scroll', highlightNavLink);

// Particles.js Configuration

particlesJS("particles-js", {

"particles": {

"number": {

"value": 80,

"density": {

"enable": true,

"value_area": 800

}

},

"color": {

"value": "#4361EE"

},

"shape": {

"type": "circle",

"stroke": {

"width": 0,

"color": "#000000"

}

},

"opacity": {

"value": 0.5,

"random": false

},

"size": {

"value": 3,

"random": true

},

"line_linked": {

"enable": true,

"distance": 150,

"color": "#4361EE",

"opacity": 0.4,

"width": 1

},

"move": {

"enable": true,

"speed": 2,

"direction": "none",

"random": false,

"straight": false,

"out_mode": "out",

"bounce": false

}

},

"interactivity": {

"detect_on": "canvas",

"events": {

"onhover": {

"enable": true,

"mode": "grab"

},

"onclick": {

"enable": true,

"mode": "push"

},

"resize": true

},

"modes": {

"grab": {

"distance": 140,

"line_linked": {

"opacity": 1

}

},

"push": {

"particles_nb": 4

}

},

"retina_detect": true

});

// Charts Initialization

document.addEventListener('DOMContentLoaded', function() {

// Evolution Chart

const evolutionCtx = document.getElementById('evolutionChart').getContext('2d');

const evolutionChart = new Chart(evolutionCtx, {

type: 'line',

data: {

labels: ['1950', '1960', '1970', '1980', '1990', '2000', '2010', '2020'],

datasets: [{

label: 'Yapay Zeka Gelişim Hızı',

data: [10, 25, 40, 55, 65, 75, 85, 98],

borderColor: '#4361EE',

backgroundColor: 'rgba(67, 97, 238, 0.1)',

borderWidth: 3,

fill: true,

tension: 0.4

}]

},

options: {

responsive: true,

plugins: {

legend: {

labels: {

color: '#212529'

}

},

scales: {

y: {

beginAtZero: true,

max: 100,

ticks: {

color: '#212529'

},

grid: {

color: 'rgba(0, 0, 0, 0.1)'

}

},

x: {

ticks: {

color: '#212529'

},

grid: {

color: 'rgba(0, 0, 0, 0.1)'

}

});

// Market Growth Chart

const marketGrowthCtx = document.getElementById('marketGrowthChart').getContext('2d');

const marketGrowthChart = new Chart(marketGrowthCtx, {

type: 'bar',

data: {

labels: ['2015', '2017', '2019', '2021', '2023'],

datasets: [{

label: 'Küresel Yapay Zeka Pazarı (Milyar $)',

data: [5, 12, 28, 65, 142],

backgroundColor: [

'rgba(247, 37, 133, 0.7)',

'rgba(67, 97, 238, 0.7)',

'rgba(247, 37, 133, 0.7)',

'rgba(67, 97, 238, 0.7)',

'rgba(247, 37, 133, 0.7)'

],

borderColor: [

'rgba(247, 37, 133, 1)',

'rgba(67, 97, 238, 1)',

'rgba(247, 37, 133, 1)',

'rgba(67, 97, 238, 1)',

'rgba(247, 37, 133, 1)'

],

borderWidth: 1

}]

},

options: {

responsive: true,

plugins: {

legend: {

labels: {

color: '#212529'

}

},

scales: {

y: {

beginAtZero: true,

ticks: {

color: '#212529'

},

grid: {

color: 'rgba(0, 0, 0, 0.1)'

}

},

x: {

ticks: {

color: '#212529'

},

grid: {

color: 'rgba(0, 0, 0, 0.1)'

}

});

// Investment Chart

const investmentCtx = document.getElementById('investmentChart').getContext('2d');

const investmentChart = new Chart(investmentCtx, {

type: 'doughnut',

data: {

labels: ['Sağlık', 'Finans', 'Perakende', 'Otonom Araçlar', 'Diğer'],

datasets: [{

data: [25, 30, 15, 20, 10],

backgroundColor: [

'rgba(247, 37, 133, 0.7)',

'rgba(67, 97, 238, 0.7)',

'rgba(76, 201, 240, 0.7)',

'rgba(114, 9, 183, 0.7)',

'rgba(58, 12, 163, 0.7)'

],

borderColor: [

'rgba(247, 37, 133, 1)',

'rgba(67, 97, 238, 1)',

'rgba(76, 201, 240, 1)',

'rgba(114, 9, 183, 1)',

'rgba(58, 12, 163, 1)'

],

borderWidth: 1

}]

},

options: {

responsive: true,

plugins: {

legend: {

position: 'bottom',

labels: {

color: '#212529',

padding: 20

}

});

// Workforce Chart

const workforceCtx = document.getElementById('workforceChart').getContext('2d');

const workforceChart = new Chart(workforceCtx, {

type: 'line',

data: {

labels: ['2015', '2017', '2019', '2021', '2023'],

datasets: [{

label: 'Yapay Zeka Uzmanı İhtiyacı (Bin Kişi)',

data: [50, 120, 250, 450, 750],

borderColor: '#F72585',

backgroundColor: 'rgba(247, 37, 133, 0.1)',

borderWidth: 3,

fill: true,

tension: 0.4

}]

},

options: {

responsive: true,

plugins: {

legend: {

labels: {

color: '#212529'

}

},

scales: {

y: {

beginAtZero: true,

ticks: {

color: '#212529'

},

grid: {

color: 'rgba(0, 0, 0, 0.1)'

}

},

x: {

ticks: {

color: '#212529'

},

grid: {

color: 'rgba(0, 0, 0, 0.1)'

}

});

// Ethics Chart

const ethicsCtx = document.getElementById('ethicsChart').getContext('2d');

const ethicsChart = new Chart(ethicsCtx, {

type: 'bar',

data: {

labels: ['İş Kaybı', 'Gizlilik', 'Önyargı', 'Güvenlik', 'Sorumluluk'],

datasets: [{

label: 'Endişe Düzeyi (%)',

data: [75, 65, 60, 55, 50],

backgroundColor: 'rgba(67, 97, 238, 0.7)',

borderColor: 'rgba(67, 97, 238, 1)',

borderWidth: 1

}]

},

options: {

responsive: true,

plugins: {

legend: {

labels: {

color: '#212529'

}

},

scales: {

y: {

beginAtZero: true,

max: 100,

ticks: {

color: '#212529'

},

grid: {

color: 'rgba(0, 0, 0, 0.1)'

}

},

x: {

ticks: {

color: '#212529'

},

grid: {

color: 'rgba(0, 0, 0, 0.1)'

}

});

</script>

</body>

</html>

Metehan

Recomendado

Un código de Metehan

Un código de Metehan

Un código de Metehan

HTML

CSS

JS

Recomendado

Un código de Metehan

Un código de Metehan

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS