Separado los contenidos de html, css y javascript en diferentes directorios \ Creado primera actividad de JavaScript

2026-01-02 16:43:42 +01:00
parent 7ecd35ca73
commit b9d16cd92b
91 changed files with 99 additions and 0 deletions
--- a/JavaScript/A01-SAD/assets/css/style.css
+++ b/JavaScript/A01-SAD/assets/css/style.css
@@ -0,0 +1,59 @@
+*
+{
+    box-sizing: border-box;
+}
+
+body 
+{
+    margin: 0;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    transition: background 0.2s ease, color 0.2s ease;
+}
+
+:root
+{
+    --bg: #ffffff;
+    --bg-secondary: #f5f5f5;
+    --text: #111111;
+    --text-muted: #555555;
+    --border: #e5e7eb;
+    --accent: #2563eb;
+}
+
+[data-theme="dark"] 
+{
+    --bg: #111827;
+    --bg-secondary: #1f2937;
+    --text: #e5e7eb;
+    --text-muted: #9ca3af;
+    --border: #374151;
+    --accent: #60a5fa;
+}
+
+.header
+{
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.content
+{
+    padding: 1rem;
+}
+
+.card
+{
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    padding: 1rem;
+    border-radius: 8px;
+}
+
+a 
+{
+    color: var(--accent);
+}
--- a/JavaScript/A01-SAD/assets/js/index.js
+++ b/JavaScript/A01-SAD/assets/js/index.js
@@ -0,0 +1,15 @@
+const root = document.documentElement;
+const toggleBtn = document.getElementById("theme-toggle");
+
+const savedTheme = localStorage.getItem("theme");
+if (savedTheme) {
+  root.dataset.theme = savedTheme;
+}
+
+toggleBtn.addEventListener("click", () => {
+  const current = root.dataset.theme;
+  const next = current === "dark" ? "light" : "dark";
+
+  root.dataset.theme = next;
+  localStorage.setItem("theme", next);
+});
--- a/JavaScript/A01-SAD/html.html
+++ b/JavaScript/A01-SAD/html.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Que se yo</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+
+</head>
+<body>
+    <header class="header">
+        <h1>Testing</h1>
+        <button id="theme-toggle">Cambiar tema</button>
+    </header>
+    
+    <main class="content">
+        <div class="card">
+            <h2>Titulo</h2>
+            <p>Lorem Ipsum dolor sit amet</p>
+            <a href="#">Enlace</a>
+        </div>
+    </main>
+    <script src="assets/js/index.js"></script>
+</body>
+</html>