543x.com - Crypto Panic Index: Neutral

<html><head><base href="https://HowAreYouFeeling.today/"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>How Are You Feeling Today?</title><style>

body {

font-family: 'Roboto', Arial, sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

min-height: 100vh;

margin: 0;

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

padding: 20px;

color: #333;

}

h1 {

color: #2c3e50;

margin-bottom: 30px;

text-align: center;

font-size: 2.5em;

text-shadow: 2px 2px 4px rgba(0,0,0,0.1);

}

#smiley-container {

width: 300px;

height: 400px;

margin-bottom: 30px;

position: relative;

background: white;

border-radius: 20px;

box-shadow: 0 10px 20px rgba(0,0,0,0.1);

padding: 20px;

}

#smiley {

width: 100%;

height: 75%;

}

#body {

width: 100%;

height: 25%;

position: absolute;

bottom: 0;

}

.controls-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 25px;

max-width: 1200px;

background: rgba(255,255,255,0.8);

padding: 30px;

border-radius: 20px;

box-shadow: 0 10px 20px rgba(0,0,0,0.1);

}

.slider-container {

display: flex;

flex-direction: column;

align-items: center;

margin-bottom: 25px;

width: 200px;

background: white;

padding: 15px;

border-radius: 10px;

box-shadow: 0 5px 10px rgba(0,0,0,0.05);

transition: transform 0.3s ease;

}

.slider-container:hover {

transform: translateY(-5px);

}

.slider {

width: 100%;

margin-bottom: 10px;

-webkit-appearance: none;

appearance: none;

height: 5px;

background: #ddd;

outline: none;

border-radius: 5px;

}

.slider::-webkit-slider-thumb {

-webkit-appearance: none;

appearance: none;

width: 20px;

height: 20px;

background: #3498db;

cursor: pointer;

border-radius: 50%;

transition: background 0.3s ease;

}

.slider::-webkit-slider-thumb:hover {

background: #2980b9;

}

.mood-label {

display: flex;

justify-content: space-between;

width: 100%;

margin-top: 5px;

color: #666;

font-size: 0.9em;

}

.slider-label {

font-weight: bold;

margin-bottom: 10px;

color: #2c3e50;

font-size: 1.1em;

}

.color-picker {

margin-top: 10px;

-webkit-appearance: none;

border: none;

width: 50px;

height: 50px;

border-radius: 50%;

cursor: pointer;

}

.color-picker::-webkit-color-swatch-wrapper {

padding: 0;

}

.color-picker::-webkit-color-swatch {

border: none;

border-radius: 50%;

}

.checkbox-container {

display: flex;

align-items: center;

margin-top: 15px;

}

.checkbox-container label {

margin-left: 10px;

cursor: pointer;

}

.accessory-container {

display: flex;

flex-wrap: wrap;

gap: 10px;

margin-top: 15px;

}

.accessory-btn {

padding: 8px 15px;

background-color: #3498db;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

transition: background-color 0.3s ease;

}

.accessory-btn:hover {

background-color: #2980b9;

}

#crypto-panic {

font-size: 24px;

font-weight: bold;

margin-top: 20px;

text-align: center;

color: #2c3e50;

background: white;

padding: 15px;

border-radius: 10px;

box-shadow: 0 5px 10px rgba(0,0,0,0.05);

}

@media (max-width: 768px) {

.controls-container {

padding: 20px;

}

.slider-container {

width: 100%;

}

</style></head><body>

<h1>How are you feeling today?</h1>

<defs>

</radialGradient>

</defs>

</g>

</g>

</svg>

</svg>

</div>

<div class="slider-label">Mouth</div>

<span>Happy</span>

<span>Neutral</span>

</div>

<div class="slider-label">Eyebrows</div>

<span>Concave</span>

<span>Neutral</span>

<span>Convex</span>

</div>

<span>Small</span>

<span>Medium</span>

<span>Large</span>

</div>

<div class="slider-label">Face Color</div>

</div>

<div class="slider-label">Eye Color</div>

</div>

<div class="slider-label">Eyebrow Thickness</div>

<span>Medium</span>

<span>Thick</span>

</div>

<span>Small</span>

<span>Medium</span>

<span>Large</span>

</div>

<div class="slider-label">Face Roundness</div>

<span>Round</span>

<span>Very Round</span>

</div>

<div class="slider-label">Blush Intensity</div>

<span>Strong</span>

</div>

<div class="slider-label">Eye Spacing</div>

<span>Close</span>

<span>Normal</span>

</div>

<div class="slider-label">Eyebrow Height</div>

<span>Normal</span>

</div>

<div class="slider-label">Mouth Width</div>

<span>Narrow</span>

<span>Normal</span>

</div>

<div class="slider-label">Nose Color</div>

</div>

<div class="slider-label">Blush Color</div>

</div>

<div class="slider-label">Body Color</div>

</div>

<label for="gradient-toggle">Use Gradient</label>

</div>

<div class="slider-label">Accessories</div>

<button id="glasses-toggle" class="accessory-btn">Glasses</button>

</div>

<div class="slider-label">Crypto Panic Index</div>

<span>Neutral</span>

<span>Greed</span>

</div>

const face = document.getElementById('face');

const mouthPath = document.getElementById('mouth');

const leftEyebrowGroup = document.getElementById('leftEyebrowGroup');

const rightEyebrowGroup = document.getElementById('rightEyebrowGroup');

const leftEyebrow = document.getElementById('leftEyebrow');

const rightEyebrow = document.getElementById('rightEyebrow');

const leftEye = document.getElementById('leftEye');

const rightEye = document.getElementById('rightEye');

const nose = document.getElementById('nose');

const blushLeft = document.getElementById('blush-left');

const blushRight = document.getElementById('blush-right');

const faceGradient = document.getElementById('faceGradient');

const hat = document.getElementById('hat');

const glasses = document.getElementById('glasses');

const shirt = document.getElementById('shirt');

const cryptoSymbol = document.getElementById('crypto-symbol');

const cryptoPanicDisplay = document.getElementById('crypto-panic');

const moodSlider = document.getElementById('mood-slider');

const eyebrowSlider = document.getElementById('eyebrow-slider');

const eyeSizeSlider = document.getElementById('eye-size-slider');

const faceColorPicker = document.getElementById('face-color-picker');

const eyeColorPicker = document.getElementById('eye-color-picker');

const eyebrowThicknessSlider = document.getElementById('eyebrow-thickness-slider');

const noseSizeSlider = document.getElementById('nose-size-slider');

const faceRoundnessSlider = document.getElementById('face-roundness-slider');

const blushIntensitySlider = document.getElementById('blush-intensity-slider');

const eyeSpacingSlider = document.getElementById('eye-spacing-slider');

const eyebrowHeightSlider = document.getElementById('eyebrow-height-slider');

const mouthWidthSlider = document.getElementById('mouth-width-slider');

const noseColorPicker = document.getElementById('nose-color-picker');

const blushColorPicker = document.getElementById('blush-color-picker');

const bodyColorPicker = document.getElementById('body-color-picker');

const gradientToggle = document.getElementById('gradient-toggle');

const hatToggle = document.getElementById('hat-toggle');

const glassesToggle = document.getElementById('glasses-toggle');

const cryptoPanicSlider = document.getElementById('crypto-panic-slider');

function updateMouth(value) {

const normalizedValue = (value - 50) / 50;

const mouthCurve = normalizedValue * 15;

const width = parseInt(mouthWidthSlider.value);

mouthPath.setAttribute('d', `M${50 - width/2} 65 Q50 ${65 - mouthCurve} ${50 + width/2} 65`);

}

function updateEyebrows(value) {

const normalizedValue = (value - 50) / 50;

const eyebrowRotation = normalizedValue * 20;

leftEyebrowGroup.setAttribute('transform', `rotate(${-eyebrowRotation}, 35, ${eyebrowHeightSlider.value})`);

rightEyebrowGroup.setAttribute('transform', `rotate(${eyebrowRotation}, 65, ${eyebrowHeightSlider.value})`);

}

function updateEyeSize(value) {

leftEye.setAttribute('r', value);

rightEye.setAttribute('r', value);

}

function updateFaceColor(value) {

face.setAttribute('fill', gradientToggle.checked ? 'url(#faceGradient)' : value);

faceGradient.querySelector('stop:first-child').style.stopColor = value;

faceGradient.querySelector('stop:last-child').style.stopColor = adjustColor(value, -30);

}

function updateEyeColor(value) {

leftEye.setAttribute('fill', value);

rightEye.setAttribute('fill', value);

}

function updateEyebrowThickness(value) {

leftEyebrow.setAttribute('stroke-width', value);

rightEyebrow.setAttribute('stroke-width', value);

}

function updateNoseSize(value) {

const noseWidth = 4 * value;

const noseHeight = 10 * value;

nose.setAttribute('d', `M${50 - noseWidth/2} 45 Q50 ${45 + noseHeight} ${50 + noseWidth/2} 45`);

nose.setAttribute('stroke-width', value);

}

function updateFaceRoundness(value) {

face.setAttribute('r', value);

}

function updateBlushIntensity(value) {

blushLeft.setAttribute('opacity', value);

blushRight.setAttribute('opacity', value);

}

function updateEyeSpacing(value) {

leftEye.setAttribute('cx', value);

rightEye.setAttribute('cx', 100 - value);

leftEyebrowGroup.setAttribute('transform', `translate(${value - 35}, 0) ${leftEyebrowGroup.getAttribute('transform')}`);

rightEyebrowGroup.setAttribute('transform', `translate(${100 - value - 65}, 0) ${rightEyebrowGroup.getAttribute('transform')}`);

}

function updateEyebrowHeight(value) {

leftEyebrow.setAttribute('d', `M25 ${value} L45 ${value}`);

rightEyebrow.setAttribute('d', `M55 ${value} L75 ${value}`);

updateEyebrows(eyebrowSlider.value);

}

function updateMouthWidth(value) {

updateMouth(moodSlider.value);

}

function updateNoseColor(value) {

nose.setAttribute('stroke', value);

}

function updateBlushColor(value) {

blushLeft.setAttribute('fill', value);

blushRight.setAttribute('fill', value);

}

function updateBodyColor(value) {

shirt.setAttribute('fill', value);

}

function adjustColor(color, amount) {

return '#' + color.replace(/^#/, '').replace(/../g, color => ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));

}

function toggleAccessory(accessory) {

accessory.style.display = accessory.style.display === 'none' ? 'block' : 'none';

}

function updateCryptoPanic(value) {

let panicText;

let symbolColor;

if (value < 20) {

panicText = "Extreme Fear";

symbolColor = "#FF0000";

} else if (value < 40) {

panicText = "Fear";

symbolColor = "#FFA500";

} else if (value < 60) {

panicText = "Neutral";

symbolColor = "#FFFF00";

} else if (value < 80) {

panicText = "Greed";

symbolColor = "#90EE90";

} else {

panicText = "Extreme Greed";

symbolColor = "#008000";

}

cryptoPanicDisplay.textContent = `Crypto Panic Index: ${panicText}`;

cryptoSymbol.setAttribute('fill', symbolColor);

cryptoSymbol.style.display = 'block';

}

moodSlider.addEventListener('input', (e) => updateMouth(e.target.value));

eyebrowSlider.addEventListener('input', (e) => updateEyebrows(e.target.value));

eyeSizeSlider.addEventListener('input', (e) => updateEyeSize(e.target.value));

faceColorPicker.addEventListener('input', (e) => updateFaceColor(e.target.value));

eyeColorPicker.addEventListener('input', (e) => updateEyeColor(e.target.value));

eyebrowThicknessSlider.addEventListener('input', (e) => updateEyebrowThickness(e.target.value));

noseSizeSlider.addEventListener('input', (e) => updateNoseSize(e.target.value));

faceRoundnessSlider.addEventListener('input', (e) => updateFaceRoundness(e.target.value));

blushIntensitySlider.addEventListener('input', (e) => updateBlushIntensity(e.target.value));

eyeSpacingSlider.addEventListener('input', (e) => updateEyeSpacing(e.target.value));

eyebrowHeightSlider.addEventListener('input', (e) => updateEyebrowHeight(e.target.value));

mouthWidthSlider.addEventListener('input', (e) => updateMouthWidth(e.target.value));

noseColorPicker.addEventListener('input', (e) => updateNoseColor(e.target.value));

blushColorPicker.addEventListener('input', (e) => updateBlushColor(e.target.value));

bodyColorPicker.addEventListener('input', (e) => updateBodyColor(e.target.value));

gradientToggle.addEventListener('change', () => updateFaceColor(faceColorPicker.value));

hatToggle.addEventListener('click', () => toggleAccessory(hat));

glassesToggle.addEventListener('click', () => toggleAccessory(glasses));

cryptoPanicSlider.addEventListener('input', (e) => updateCryptoPanic(e.target.value));

// Initialize all controls

updateMouth(50);

updateEyebrows(50);

updateEyeSize(5);

updateFaceColor('#FFEB3B');

updateEyeColor('#333333');

updateEyebrowThickness(3);

updateNoseSize(1);

updateFaceRoundness(45);

updateBlushIntensity(0);

updateEyeSpacing(35);

updateEyebrowHeight(30);

updateMouthWidth(50);

updateNoseColor('#333333');

updateBlushColor('#FF9999');

updateBodyColor('#4CAF50');

updateCryptoPanic(50);

</script>

</body></html>

BTC Bitcoin: A Peer-to-Peer Electronic Cash System

🌐 📄 🐱 ✖️ 🗨️ 📝 🔗 🔍

USDT USD-pegged stablecoin for blockchain transactions

🌐 📄 🐱 ✖️ 🗨️

ETH decentralized platform for smart contracts & DApps

🌐 📄 🐱 ✖️ 🗨️ 🤖 📝 🔗 💻 🔍

BNB Native cryptocurrency of the Binance platform

🌐 🐱 ✖️ 🗨️ 💻

BUSD Binance USD stablecoin pegged to the US dollar

🌐 📄 🐱 ✖️ 🗨️

PEPE Rare digital collectibles on the blockchain

🌐 📄 🐱 ✖️ 🗨️ 💲 🔍

⬅️ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 ➡️