top of page
Buscar

DIARIO GIRALISMO


ree

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 20px;

background-color: #f5f5f5;

}


.container {

max-width: 1200px;

margin: 0 auto;

background: white;

padding: 20px;

border-radius: 10px;

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

}


.tabs {

display: flex;

gap: 10px;

margin-bottom: 20px;

}


.tab {

padding: 10px 20px;

background: #e0e0e0;

border: none;

border-radius: 5px;

cursor: pointer;

}


.tab.active {

background: #2196F3;

color: white;

}


.diary-section, .landscape-section {

display: none;

}


.active-section {

display: block;

}


.diary-entry {

margin-bottom: 20px;

}


.entry-date {

width: 200px;

padding: 8px;

margin-bottom: 10px;

}


.entry-text {

width: 100%;

height: 200px;

padding: 10px;

margin-bottom: 10px;

border: 1px solid #ddd;

border-radius: 5px;

resize: vertical;

}


.entries-list {

margin-top: 20px;

max-height: 400px;

overflow-y: auto;

}


.saved-entry {

background: #f8f9fa;

padding: 15px;

margin-bottom: 10px;

border-radius: 5px;

border-left: 4px solid #2196F3;

}


.entry-header {

display: flex;

justify-content: space-between;

margin-bottom: 10px;

}


.button {

background: #2196F3;

color: white;

border: none;

padding: 10px 20px;

border-radius: 5px;

cursor: pointer;

}


.button:hover {

background: #1976D2;

}


.landscape-controls {

margin-bottom: 20px;

}


.canvas-container {

border: 1px solid #ddd;

border-radius: 5px;

overflow: hidden;

}


.color-palette {

display: flex;

gap: 10px;

margin: 10px 0;

}


.color-option {

width: 30px;

height: 30px;

border-radius: 50%;

cursor: pointer;

border: 2px solid transparent;

}


.color-option.active {

border-color: #2196F3;

}

</style>

</head>

<body>

<div class="container">

<div class="tabs">

<button class="tab active" onclick="switchTab('diary')">Diario</button>

<button class="tab" onclick="switchTab('landscape')">Generador de Paisajes</button>

</div>


<div id="diarySection" class="diary-section active-section">

<h2>Mi Diario Offline</h2>

<div class="diary-entry">

<input type="date" class="entry-date" id="entryDate">

<textarea class="entry-text" id="entryText" placeholder="Escribe tu entrada del día aquí..."></textarea>

<button class="button" onclick="saveEntry()">Guardar Entrada</button>

</div>

<div class="entries-list" id="entriesList"></div>

</div>


<div id="landscapeSection" class="landscape-section">

<h2>Generador de Paisajes</h2>

<div class="landscape-controls">

<button class="button" onclick="generateRandomLandscape()">Generar Nuevo Paisaje</button>

<div class="color-palette">

<div class="color-option" style="background: #87CEEB" onclick="setTheme('day')"></div>

<div class="color-option" style="background: #1A237E" onclick="setTheme('night')"></div>

<div class="color-option" style="background: #FF7043" onclick="setTheme('sunset')"></div>

</div>

</div>

<div class="canvas-container" id="canvasContainer">

<svg id="landscape" width="100%" height="400" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1000 400"></svg>

</div>

</div>

</div>


<script>

// Variables globales

let entries = [];

let currentTheme = 'day';

const themes = {

day: {

sky: '#87CEEB',

sun: '#FFD700',

mountains: ['#8B4513', '#A0522D'],

water: '#4682B4',

grass: '#90EE90'

},

night: {

sky: '#1A237E',

sun: '#FFFFFF',

mountains: ['#424242', '#616161'],

water: '#1A237E',

grass: '#1B5E20'

},

sunset: {

sky: '#FF7043',

sun: '#FFF176',

mountains: ['#5D4037', '#795548'],

water: '#FF7043',

grass: '#33691E'

}

};


// Funciones del diario

function switchTab(tab) {

document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));

document.querySelectorAll('.tab').forEach(t => {

if (t.textContent.toLowerCase().includes(tab)) {

t.classList.add('active');

}

});


document.querySelectorAll('.diary-section, .landscape-section').forEach(s => s.classList.remove('active-section'));

if (tab === 'diary') {

document.getElementById('diarySection').classList.add('active-section');

} else {

document.getElementById('landscapeSection').classList.add('active-section');

}

}


function saveEntry() {

const date = document.getElementById('entryDate').value;

const text = document.getElementById('entryText').value;

if (!date || !text) {

alert('Por favor completa todos los campos');

return;

}


entries.unshift({ date, text });

updateEntriesList();

document.getElementById('entryText').value = '';

}


function updateEntriesList() {

const list = document.getElementById('entriesList');

list.innerHTML = '';

entries.forEach(entry => {

const entryDiv = document.createElement('div');

entryDiv.className = 'saved-entry';

entryDiv.innerHTML = `

<div class="entry-header">

<strong>${new Date(entry.date).toLocaleDateString()}</strong>

</div>

<div>${entry.text}</div>

`;

list.appendChild(entryDiv);

});

}


// Funciones del generador de paisajes

function setTheme(theme) {

currentTheme = theme;

document.querySelectorAll('.color-option').forEach(option => {

option.classList.remove('active');

if (option.style.background.includes(themes[theme].sky)) {

option.classList.add('active');

}

});

generateRandomLandscape();

}


function generateRandomLandscape() {

const svg = document.getElementById('landscape');

const theme = themes[currentTheme];

// Limpiar SVG

svg.innerHTML = '';

// Fondo

addElement(svg, 'rect', {

width: '100%',

height: '100%',

fill: theme.sky

});


// Sol o luna

const sunX = Math.random() * 800 + 100;

const sunY = Math.random() * 100 + 50;

addElement(svg, 'circle', {

cx: sunX,

cy: sunY,

r: currentTheme === 'night' ? 20 : 40,

fill: theme.sun

});


// Montañas

for (let i = 0; i < 3; i++) {

const points = generateMountainPoints(i);

addElement(svg, 'path', {

d: points,

fill: theme.mountains[i % 2]

});

}


// Agua

addElement(svg, 'path', {

d: generateWaterPath(),

fill: theme.water,

opacity: '0.8'

});


// Hierba en primer plano

for (let i = 0; i < 50; i++) {

const x = Math.random() * 1000;

const y = 350 + Math.random() * 50;

addElement(svg, 'path', {

d: `M ${x} ${y} L ${x - 5} ${y - 15} M ${x} ${y} L ${x + 5} ${y - 15}`,

stroke: theme.grass,

'stroke-width': '2'

});

}

}


function addElement(svg, type, attributes) {

const elem = document.createElementNS('http://www.w3.org/2000/svg', type);

for (const [key, value] of Object.entries(attributes)) {

elem.setAttribute(key, value);

}

svg.appendChild(elem);

}


function generateMountainPoints(index) {

const baseHeight = 200 + Math.random() * 100;

const startX = -100 + (index * 300);

const points = `M ${startX} 400 L ${startX + 300} ${400 - baseHeight} L ${startX + 600} 400 Z`;

return points;

}


function generateWaterPath() {

let path = `M 0 300 `;

for (let i = 0; i < 10; i++) {

const x = i * 100;

const y = 300 + Math.sin(i) * 10;

path += `L ${x} ${y} `;

}

path += 'L 1000 300 L 1000 400 L 0 400 Z';

return path;

}


// Inicialización

document.getElementById('entryDate').valueAsDate = new Date();

generateRandomLandscape();

</script>

</body>

</html>


 
 
 

Comentarios

bottom of page