<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews!</title>
</head>
<body class="page page-longread light-theme">
<header class="page-header">
<div class="container">
<a class="header-logo" href="index.html">
<img src="img/main-logo.svg" width="67" height="29" alt="Logotipo del portal FlashNews!">
</a>
<a href="subscription.html" class="subscription-link">Suscripción</a>
<button class="theme-button" type="button">Cambiar tema</button>
</div>
</header>
<main class="index-main">
<div class="controls">
<div class="container">
<div class="color-filters">
<label>Color del texto:
<select class="filter color-setting" name="font-color">
<option value="inherit" selected>Predeterminado</option>
<option value="black">Negro</option>
<option value="white">Blanco</option>
<option value="ghostwhite">Gris claro</option>
<option value="pink">Rosa</option>
<option value="darkred">Rojo oscuro</option>
<option value="darkorange">Naranja</option>
<option value="saddlebrown">Marrón</option>
<option value="gold">Dorado</option>
<option value="greenyellow">Verde lima</option>
<option value="forestgreen">Verde</option>
<option value="aquamarine">Aguamarina</option>
<option value="lightskyblue">Azul cielo</option>
<option value="lightsteelblue">Azul grisáceo</option>
<option value="darkblue">Azul oscuro</option>
<option value="indigo">Índigo</option>
<option value="mediumpurple">Violeta</option>
<option value="purple">Púrpura</option>
</select>
</label>
<label>Color del fondo:
<select class="filter background-setting" name="background-color">
<option value="inherit" selected>Predeterminado</option>
<option value="black">Negro</option>
<option value="white">Blanco</option>
<option value="ghostwhite">Gris claro</option>
<option value="pink">Rosa</option>
<option value="darkred">Rojo oscuro</option>
<option value="darkorange">Naranja</option>
<option value="saddlebrown">Marrón</option>
<option value="gold">Dorado</option>
<option value="greenyellow">Verde lima</option>
<option value="forestgreen">Verde</option>
<option value="aquamarine">Aguamarina</option>
<option value="lightskyblue">Azul cielo</option>
<option value="lightsteelblue">Azul grisáceo</option>
<option value="darkblue">Azul oscuro</option>
<option value="indigo">Índigo</option>
<option value="mediumpurple">Violeta</option>
<option value="purple">Púrpura</option>
</select>
</label>
</div>
<label>Tamaño del texto (<output class="pixels">14</output>px)
<input class="size-setting" type="range" min="8" max="48" step="1" value="14">
</label>
</div>
</div>
<article class="longread">
<div class="container">
<h1>Para qué sirven los algoritmos</h1>
<p>La palabra algoritmo asusta a muchas personas: parece algo complicado, pero en realidad es un conjunto completo de instrucciones. También usas algoritmos en la vida diaria, por ejemplo, cuando sigues una receta, utilizas un navegador para ir del punto A al punto B o resuelves una ecuación cuadrática.</p>
<p>Cuando quienes programan hablan de algoritmos, suelen referirse a soluciones conocidas para problemas habituales. Muchos algoritmos se inventaron antes que las computadoras: por ejemplo, el algoritmo de ordenamiento por dígitos se patentó en Estados Unidos en el siglo XIX para procesar los datos de un censo de población.</p>
<p>Un mismo problema puede resolverse con distintos algoritmos. Imagina que necesitas encontrar un elemento en una lista. Supongamos que es una lista de productos de una tienda en línea y alguien escribe en el filtro el nombre de un producto que empieza con «E». ¿Cómo lo encuentras?</p>
<p>Si la lista está ordenada alfabéticamente, puedes usar la búsqueda binaria: miras en la mitad de la lista y encuentras, por ejemplo, un producto cuyo nombre empieza con «K». Como la lista está ordenada y «E» va antes que «K», sabes que el producto que buscas está en la mitad izquierda. Tomas esa mitad y repites el procedimiento.</p>
<p>Si la lista no está ordenada, conviene una búsqueda secuencial: recorres los elementos desde el principio hasta encontrar el que te interesa. En el peor caso tendrás que revisarlos todos, pero podrás estimar de antemano cuánto tiempo tomará la búsqueda.</p>
<p>Elige el algoritmo según el problema. Identifica con qué datos trabajas y parte de ahí.</p>
</div>
</article>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<a class="footer-logo">
<img src="img/white-logo.svg" alt="Logotipo del portal FlashNews!">
</a>
</div>
</footer>
<script src="themes.js"></script>
<script src="read-mode.js"></script>
</body>
</html>
/* Estilos del artículo largo */
.controls {
padding: 16px 0 6px;
overflow-x: hidden;
}
.controls label {
font-size: 14px;
line-height: 24px;
margin-bottom: 14px;
}
.color-filters {
display: flex;
margin-right: -20px;
}
.color-filters label {
display: flex;
flex-direction: column;
flex-grow: 1;
margin-right: 20px;
}
.color-filters .filter {
margin-top: 4px;
}
.controls .filter {
margin-left: 0;
}
.longread {
min-height: calc(100vh - 237px);
padding-bottom: 1em;
font-size: 14px;
}
.longread h1 {
margin: 1em 0 0.6em;
line-height: 1.2;
}
.longread p {
margin: 0 0 0.8em;
line-height: 1.6;
}
/* Control de rango compatible sin scripts */
.size-setting {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
width: 100%;
height: 10px;
margin-top: 8px;
padding: 2px 0;
border-radius: 5px;
outline-offset: 0;
}
.size-setting::-webkit-slider-thumb {
box-sizing: border-box;
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
}
.size-setting::-moz-range-thumb {
box-sizing: border-box;
-moz-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
}
.size-setting::-ms-thumb {
box-sizing: border-box;
width: 20px;
height: 20px;
border-radius: 50%;
}
/* Temas de color */
.page-longread.light-theme {
background-color: #ffffff;
color: #333333;
}
.light-theme .controls {
background-color: #eae9f2;
}
.light-theme .size-setting {
background-color: #ffffff;
box-shadow: inset 0 0 0 1px #b6aaff;
outline-color: #b6aaff;
}
.light-theme .size-setting::-webkit-slider-thumb {
background-color: #ffffff;
border: 5px solid #6653d9;
}
.light-theme .size-setting::-moz-range-thumb {
background-color: #ffffff;
border: 5px solid #6653d9;
}
.light-theme .size-setting::-ms-thumb {
background-color: #ffffff;
border: 5px solid #6653d9;
}
.light-theme .size-setting::-webkit-slider-thumb:active {
background-color: #6653d9;
}
.light-theme .size-setting::-moz-range-thumb:active {
background-color: #6653d9;
}
.light-theme .size-setting::-ms-thumb:active {
background-color: #6653d9;
}
.page-longread.dark-theme {
background-color: #0a0910;
color: #f2f2f2;
}
.dark-theme .controls {
background-color: #17161a;
}
.dark-theme .size-setting {
background-color: #0a0910;
box-shadow: inset 0 0 0 1px #473c8d;
outline-color: #6653d9;
}
.dark-theme .size-setting::-webkit-slider-thumb {
background-color: #0a0910;
border: 5px solid #9484f2;
}
.dark-theme .size-setting::-moz-range-thumb {
background-color: #0a0910;
border: 5px solid #9484f2;
}
.dark-theme .size-setting::-ms-thumb {
background-color: #0a0910;
border: 5px solid #9484f2;
}
.dark-theme .size-setting::-webkit-slider-thumb:active {
background-color: #9484f2;
}
.dark-theme .size-setting::-moz-range-thumb:active {
background-color: #9484f2;
}
.dark-theme .size-setting::-ms-thumb:active {
background-color: #9484f2;
}
let page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};