CALCULADORA GIRALISMO ABSTRACTA
- samuel gaitan
- 29 ene
- 4 Min. de lectura
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora 3D con Formas</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
font-family: Arial, sans-serif;
perspective: 1000px;
overflow: hidden;
}
.stars {
position: fixed;
width: 100%;
height: 100%;
background: transparent;
animation: animateStars 50s linear infinite;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
}
@keyframes animateStars {
from { transform: translateY(0); }
to { transform: translateY(-100vh); }
}
width: 320px;
padding: 25px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
z-index: 1;
}
#display {
width: 100%;
height: 50px;
margin-bottom: 15px;
font-size: 24px;
text-align: right;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
button {
padding: 15px;
font-size: 20px;
border: none;
background: rgba(255, 255, 255, 0.15);
color: white;
cursor: pointer;
border-radius: 8px;
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
button:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
#shape-container {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
perspective: 2000px;
}
.shape {
width: 150px;
height: 150px;
position: relative;
transform-style: preserve-3d;
animation: rotate 8s infinite linear;
}
@keyframes rotate {
from { transform: rotateX(30deg) rotateY(0); }
to { transform: rotateX(30deg) rotateY(360deg); }
}
/* Estilos para el cubo */
.cube {
position: relative;
transform-style: preserve-3d;
width: 100%;
height: 100%;
display: none;
}
.cube.active {
display: block;
}
.cube-face {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
backface-visibility: visible;
}
/* Estilos para la esfera */
.sphere {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.5));
box-shadow: inset 0 0 50px rgba(255,255,255,0.5);
display: none;
}
.sphere.active {
display: block;
}
/* Estilos para el cono */
.cone {
position: relative;
width: 100%;
height: 100%;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.5));
display: none;
}
.cone.active {
display: block;
}
/* Estilos para el cilindro */
.cylinder {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.5));
border-radius: 50px;
display: none;
}
.cylinder.active {
display: block;
}
#shape-select {
width: 100%;
padding: 10px;
margin-top: 10px;
background: rgba(0, 0, 0, 0.8);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
font-size: 16px;
}
#shape-select option {
background: #000;
color: white;
}
</style>
</head>
<body>
<div class="stars"></div>
<div id="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="appendOperator('+')">+</button>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="appendOperator('-')">-</button>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="appendOperator('*')">×</button>
<button onclick="appendNumber('0')">0</button>
<button onclick="appendNumber('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendOperator('/')">/</button>
</div>
<button onclick="clearDisplay()" style="width: 100%; margin-top: 8px;">Clear</button>
<select id="shape-select" onchange="changeShape()">
<option value="cube">Cubo</option>
<option value="sphere">Esfera</option>
<option value="cone">Cono</option>
<option value="cylinder">Cilindro</option>
</select>
</div>
<div id="shape-container">
<div class="shape">
<!-- Cubo -->
<div class="cube active">
<div class="cube-face front"></div>
<div class="cube-face back"></div>
<div class="cube-face right"></div>
<div class="cube-face left"></div>
<div class="cube-face top"></div>
<div class="cube-face bottom"></div>
</div>
<!-- Esfera -->
<div class="sphere"></div>
<!-- Cono -->
<div class="cone"></div>
<!-- Cilindro -->
<div class="cylinder"></div>
</div>
</div>
<script>
// Crear estrellas con brillo
const starsContainer = document.querySelector('.stars');
for (let i = 0; i < 200; i++) {
const star = document.createElement('div');
star.className = 'star';
star.style.left = Math.random() * 100 + '%';
star.style.top = Math.random() * 100 + '%';
star.style.animationDelay = Math.random() * 5 + 's';
starsContainer.appendChild(star);
}
let currentNumber = '';
let firstNumber = null;
let operator = null;
const display = document.getElementById('display');
const shape = document.querySelector('.shape');
// Colores vibrantes con degradados
const colors = {
};
function appendNumber(num) {
currentNumber += num;
display.value = currentNumber;
}
function appendOperator(op) {
if (currentNumber !== '') {
if (firstNumber === null) {
firstNumber = parseFloat(currentNumber);
operator = op;
currentNumber = '';
}
}
}
function clearDisplay() {
display.value = '';
currentNumber = '';
firstNumber = null;
operator = null;
updateShape(0);
}
function calculate() {
if (currentNumber !== '' && firstNumber !== null && operator) {
const secondNumber = parseFloat(currentNumber);
let result;
switch (operator) {
case '+': result = firstNumber + secondNumber; break;
case '-': result = firstNumber - secondNumber; break;
case '*': result = firstNumber * secondNumber; break;
case '/': result = firstNumber / secondNumber; break;
}
display.value = result;
updateShape(result);
currentNumber = result.toString();
firstNumber = null;
operator = null;
}
}
function changeShape() {
const selectedShape = document.getElementById('shape-select').value;
const shapes = ['cube', 'sphere', 'cone', 'cylinder'];
shapes.forEach(shape => {
const element = document.querySelector(`.${shape}`);
element.classList.remove('active');
});
document.querySelector(`.${selectedShape}`).classList.add('active');
updateShape(currentNumber ? parseFloat(currentNumber) : 0);
}
function updateShape(value = 0) {
const lastDigit = Math.abs(value).toString().slice(-1);
const gradient = colors[lastDigit] || colors['0'];
const selectedShape = document.getElementById('shape-select').value;
// Ajustar tamaño basado en el resultado
const size = Math.min(Math.abs(value) * 10 + 100, 250);
shape.style.width = `${size}px`;
shape.style.height = `${size}px`;
// Aplicar colores según la forma seleccionada
if (selectedShape === 'cube') {
const faces = document.querySelectorAll('.cube-face');
faces.forEach(face => {
face.style.background = gradient;
face.style.opacity = '0.9';
face.style.boxShadow = `inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 15px ${gradient.split(',')[0].slice(25)}`;
});
const depth = size/2;
document.querySelector('.front').style.transform = `translateZ(${depth}px)`;
document.querySelector('.back').style.transform = `translateZ(-${depth}px) rotateY(180deg)`;
document.querySelector('.right').style.transform = `translateX(${depth}px) rotateY(90deg)`;
document.querySelector('.left').style.transform = `translateX(-${depth}px) rotateY(-90deg)`;
document.querySelector('.top').style.transform = `translateY(-${depth}px) rotateX(90deg)`;
document.querySelector('.bottom').style.transform = `translateY(${depth}px) rotateX(-90deg)`;
} else {
const element = document.querySelector(`.${selectedShape}`);
element.style.background = gradient;
element.style.boxShadow = `inset 0 0 50px rgba(255,255,255,0.5), 0 0 15px ${gradient.split(',')[0].slice(25)}`;
}
}
// Inicializar forma
updateShape(0);
</script>
</body>
</html>
Comentarios