Webleb - UI Elements

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>

CSS

JS

Metehan

Recommended