<html><head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.fear-greed-container {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
width: 400px;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.3s ease;
}
.fear-greed-container:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}
.emoji {
font-size: 72px;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.content {
width: 100%;
}
.content-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.title {
font-size: 18px;
color: #333;
font-weight: 700;
}
.index-value {
font-size: 18px;
font-weight: 700;
color: #333;
}
.progress-bar {
width: 100%;
height: 12px;
background: linear-gradient(to right, #ff4136, #ffdc00, #2ecc40);
border-radius: 6px;
position: relative;
overflow: hidden;
}
.progress-indicator {
width: 20px;
height: 20px;
background-color: white;
border: 3px solid #333;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#sentiment {
font-weight: 300;
font-style: italic;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="fear-greed-container">
<div class="emoji" id="emoji">😐</div>
<div class="content">
<div class="content-row">
<span class="title">Fear & Greed Index</span>
<span class="index-value"><span id="sentiment"></span> <span id="indexValue"></span></span>
</div>
<div class="content-row">
<div class="progress-bar">
<div class="progress-indicator" id="indicator"></div>
</div>
</div>
</div>
</div>
<script>
function updateEmoji(value) {
const emoji = document.getElementById('emoji');
if (value <= 20) {
emoji.textContent = '😨'; // Extreme Fear
} else if (value <= 40) {
emoji.textContent = '😟'; // Fear
} else if (value <= 60) {
emoji.textContent = '😐'; // Neutral
} else if (value <= 80) {
emoji.textContent = '😊'; // Greed
} else {
emoji.textContent = '🤑'; // Extreme Greed
}
}
function updateColors(value) {
const container = document.querySelector('.fear-greed-container');
if (value <= 20) {
container.style.boxShadow = '0 10px 30px rgba(255, 65, 54, 0.3)';
} else if (value <= 40) {
container.style.boxShadow = '0 10px 30px rgba(255, 220, 0, 0.3)';
} else if (value <= 60) {
container.style.boxShadow = '0 10px 30px rgba(0, 116, 217, 0.3)';
} else if (value <= 80) {
container.style.boxShadow = '0 10px 30px rgba(46, 204, 64, 0.3)';
} else {
container.style.boxShadow = '0 10px 30px rgba(57, 204, 204, 0.3)';
}
}
fetch('https://api.alternative.me/fng/?limit=1')
.then(response => response.json())
.then(data => {
const value = parseInt(data.data[0].value);
const sentiment = data.data[0].value_classification;
document.getElementById('indexValue').textContent = value;
document.getElementById('sentiment').textContent = sentiment;
document.getElementById('indicator').style.left = value + '%';
updateEmoji(value);
updateColors(value);
})
.catch(error => console.error('Error:', error));
// Add subtle animation
setInterval(() => {
const emoji = document.getElementById('emoji');
emoji.style.transform = 'scale(1.1)';
setTimeout(() => {
emoji.style.transform = 'scale(1)';
}, 200);
}, 3000);
</script>
</body></html>
