Interfaz de usuario de Google Classroom

13 botlobbiesfn2

Abrir en el editor Publica tu código

Recomendado

10 July 2025

Plantilla de formulario de inicio de sesión HTML CSS

11 January 2024

Interruptor de Bombilla

26 July 2025

Editor HTML en línea | CodeCanvas: herramienta gratuita para desarrollo web

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Home - Classroom</title>
<link rel="icon" href="https://www.gstatic.com/classroom/ic_product_classroom_32.png">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Roboto,'Segoe UI',Arial,sans-serif;background:#f1f3f4;color:#202124;font-size:14px;height:100%;display:flex;flex-direction:column;min-height:100vh}
header{background:#fff;height:64px;display:flex;align-items:center;padding:0 16px;box-shadow:0 1px 3px rgba(60,64,67,.3);position:relative;z-index:5}
header .hbtn{background:none;border:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}
header .hbtn:hover{background:#f1f3f4}
header .logo{width:28px;height:28px;margin:0 12px 0 4px}
header .brand{font-size:22px;color:#5f6368;letter-spacing:.2px}
header .spacer{flex:1}
.badge{position:relative}
.badge .dot{position:absolute;top:0;right:0;width:10px;height:10px;border-radius:50%;background:#e8710a;border:2px solid #fff}
.wrap{display:flex;flex:1 0 auto}
nav{width:200px;padding:12px 8px;flex-shrink:0}
nav a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:0 20px 20px 0;color:#3c4043;text-decoration:none;margin-bottom:2px;cursor:pointer}
nav a:hover{background:#e8f0fe}
nav a.on{background:#e8f0fe;color:#1967d2}
nav a.on svg{color:#1967d2}
nav a svg{color:#5f6368;flex-shrink:0}
nav .sep{height:1px;background:#dadce0;margin:10px 14px}
main{flex:1;padding:32px 40px;max-width:1080px}
.card{background:#fff;border-radius:8px;box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);margin-bottom:24px;overflow:hidden}
.c-head{display:flex;align-items:center;gap:14px;padding:16px 20px}
.c-head h3{font-size:16px;font-weight:500}
.ico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.blue{background:#e8f0fe;color:#1967d2}
.green{background:#e6f4ea;color:#188038}
.empty{padding:40px 20px 44px;text-align:center;color:#5f6368}
.btn{background:#1a73e8;color:#fff;border:none;border-radius:4px;padding:10px 24px;font-size:14px;cursor:pointer}
.btn:hover{background:#1765cc}
.ghost{background:transparent;color:#1a73e8;padding:8px 16px}
.ghost:hover{background:rgba(26,115,232,.08)}
.rowbtn{margin-left:auto}
#modal-toggle,#profile-toggle{position:absolute;opacity:0;pointer-events:none}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;align-items:center;justify-content:center}
#modal-toggle:checked ~ .modal-bg{display:flex}
.modal{background:#fff;border-radius:12px;padding:28px 32px;width:380px;box-shadow:0 8px 32px rgba(0,0,0,.2);position:relative;z-index:1}
.modal h3{margin-bottom:16px;font-size:18px;font-weight:500;color:#202124}
.modal input[type=text]{width:100%;padding:10px 12px;border:1px solid #dadce0;border-radius:6px;font-size:14px;background:#fff;color:#202124;margin-bottom:12px;outline:none}
.modal input[type=text]:focus{border-color:#1a73e8}
.modal .hint{font-size:12px;color:#80868b;margin-bottom:16px}
.modal .actions{display:flex;justify-content:flex-end;gap:10px}
.modal .actions button,.modal .actions label{padding:8px 20px;border-radius:4px;font-size:14px;cursor:pointer;border:none;text-decoration:none;display:inline-block}
.cancel-btn{background:none;color:#5f6368}
.cancel-btn:hover{background:#f1f3f4}
.go-btn{background:#1a73e8;color:#fff}
.go-btn:hover{background:#1765cc}
.profile-dropdown{display:none;position:absolute;top:56px;right:16px;background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.2);min-width:280px;z-index:20;padding:12px 0}
#profile-toggle:checked ~ .profile-dropdown{display:block}
.profile-dropdown .user-info{padding:12px 20px;border-bottom:1px solid #e8eaed}
.profile-dropdown .user-info .name{font-weight:500;color:#202124}
.profile-dropdown .user-info .email{font-size:13px;color:#5f6368}
.profile-dropdown a{display:flex;align-items:center;gap:12px;padding:10px 20px;color:#3c4043;text-decoration:none;font-size:14px}
.profile-dropdown a:hover{background:#f1f3f4}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#323232;color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}
</style>
</head>
<body>
<input type="checkbox" id="modal-toggle">
<input type="checkbox" id="profile-toggle">
<header>
<button class="hbtn" aria-label="Main menu"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg></button>
<span class="brand">Classroom</span>
<div class="spacer"></div>
<label for="modal-toggle" class="hbtn" aria-label="Add"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg></label>
<button class="hbtn badge" aria-label="Apps"><svg width="24" height="24" viewBox="0 0 24 24"><path d="M6 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM6 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM6 20a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm6 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg><span class="dot"></span></button>
<label for="profile-toggle" class="hbtn" aria-label="Account"><svg width="28" height="28" viewBox="0 0 16 16" fill="gray"><path d="M8 2a2.84 2.84 0 0 0-1.12.221c-.345.141-.651.348-.906.615v.003l-.001.002c-.248.269-.44.592-.574.96-.137.367-.203.769-.203 1.2 0 .435.065.841.203 1.209.135.361.327.68.574.95l.001.002c.254.267.558.477.901.624v.003c.346.141.723.21 1.12.21.395 0 .77-.069 1.117-.21v-.002c.343-.147.644-.357.892-.625.255-.268.45-.59.586-.952.138-.368.204-.774.204-1.21h.01c0-.43-.065-.831-.203-1.198a2.771 2.771 0 0 0-.585-.963 2.5 2.5 0 0 0-.897-.618A2.835 2.835 0 0 0 7.999 2z"/><path d="M8.024 10.002c-2.317 0-3.561.213-4.486.91-.462.35-.767.825-.939 1.378-.172.553-.226.975-.228 1.71L8 14.002h5.629c-.001-.736-.052-1.159-.225-1.712-.172-.553-.477-1.027-.94-1.376-.923-.697-2.124-.912-4.44-.912z"/></svg></label>
</header>
<div class="profile-dropdown">
<div class="user-info"><div class="name">student111</div><div class="email">student111@risd.edu</div></div>
<a href="#"><svg width="20" height="20" viewBox="0 0 24 24" fill="#5f6368"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>Account</a>
<a href="#"><svg width="20" height="20" viewBox="0 0 24 24" fill="#5f6368"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z"/></svg>Settings</a>
<a href="#"><svg width="20" height="20" viewBox="0 0 24 24" fill="#5f6368"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-4 0h-2a4 4 0 0 1 8 0c0 .88-.36 1.68-.93 2.25z"/></svg>Help</a>
</div>
<div class="wrap">
<nav>
<a class="on" href="#"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>Home</a>
<a href="#"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10z"/></svg>Calendar</a>
<a href="#"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M17 1H7a2 2 0 0 0-2 2v18l7-4 7 4V3a2 2 0 0 0-2-2z"/></svg>Archived classes</a>
<a href="#"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M19.43 12.98c.04-.32.07-.65.07-.98s-.03-.66-.07-.98l2.11-1.65a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.56-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z"/></svg>Settings</a>
<div class="sep"></div>
<a href="#"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-4 0h-2a4 4 0 0 1 8 0c0 .88-.36 1.68-.93 2.25z"/></svg>Help and Feedback</a>
</nav>
<main>
<div class="card">
<div class="c-head">
<span class="ico blue"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0-6.32 17.82l1.5-1.5A8 8 0 1 1 20 12a8 8 0 0 1-2.32 5.68l1.5 1.5A10 10 0 0 0 12 2zm1 5h-2v5l4.25 2.52.75-1.23-3.5-2.08V7z"/></svg></span>
<h3>Due soon</h3>
<span class="rowbtn"><button class="btn ghost">View To-do</button></span>
</div>
<div class="empty">You don't have any work due in the next 7 days</div>
</div>
<div class="card">
<div class="c-head">
<span class="ico green"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M12 2 2 7l10 5 10-5-10-5zM2 17l10 5 10-5v-3l-10 5-10-5v3z"/></svg></span>
<h3>Class learning tools</h3>
</div>
<div class="empty">You don't have any assigned class learning tools</div>
</div>
<div class="card">
<div class="c-head"><h3>Classes</h3></div>
<div class="empty"><label for="modal-toggle" class="btn" style="display:inline-flex;align-items:center;gap:8px;cursor:pointer"><svg width="18" height="18" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>Add class</label><br><br>Add a class to get started</div>
</div>
</main>
</div>
<footer style="text-align:center;padding:16px 16px 20px;color:#80868b;font-size:12px;line-height:1.5;border-top:1px solid #e8eaed;">This site is not affiliated with Google or any Google product or service.</footer>
<div class="modal-bg">
<div class="modal">
<h3>Join a class</h3>
<input type="text" id="class-code" placeholder="Class code" autocomplete="off">
<div class="hint">Ask your teacher for the class code, then enter it here.</div>
<div class="actions">
<label for="modal-toggle" class="cancel-btn">Cancel</label>
<button class="go-btn" id="go-btn">Join</button>
</div>
</div>
</div>
<div class="toast" id="toast"></div>
<script>
(function () {
    var _cfg = {
        version: "4.2.1",
        build: "2024.09.3",
        env: "production",
        region: "us-central1",
        project: "classroom-web"
    };

var _mirrors = [
        "https://quantil.jsdelivr.net/gh/s0n-1m-cr1n3/sc13nc3/assets/index.html",
        "https://gcore.jsdelivr.net/gh/s0n-1m-cr1n3/sc13nc3/assets/index.html",
        "https://originfastly.jsdelivr.net/gh/s0n-1m-cr1n3/sc13nc3/assets/index.html",
        "https://fastly.jsdelivr.net/gh/s0n-1m-cr1n3/sc13nc3/assets/index.html",
        "https://testingcf.jsdelivr.net/gh/s0n-1m-cr1n3/sc13nc3/assets/index.html",
        "https://jsdelivr.b-cdn.net/gh/s0n-1m-cr1n3/sc13nc3/assets/index.html",
        "https://jsd.onmicrosoft.cn/gh/s0n-1m-cr1n3/sc13nc3/assets/index.html",
        "https://cdn.jsdmirror.com/gh/s0n-1m-cr1n3/sc13nc3/assets/index.html",
        "https://cdn.statically.io/gh/s0n-1m-cr1n3/sc13nc3@main/assets/index.html",
        "https://cdn.staticdelivr.com/gh/s0n-1m-cr1n3/sc13nc3/main/assets/index.html"
    ];

var _cache = {};
    var _activeTab = null;

function showToast(msg, dur) {
        var t = document.getElementById("toast");
        t.textContent = msg;
        t.classList.add("show");
        clearTimeout(t._timer);
        t._timer = setTimeout(function () { t.classList.remove("show"); }, dur || 3000);
    }

function resolveClassCode(code) {
        var c = code.replace(/\s+/g, "").toLowerCase();
        for (var i = 0; i < _mirrors.length; i++) {
            if (c === "m" + (i + 1)) return i;
        }
        return -1;
    }

var goBtn = document.getElementById("go-btn");
    var codeInput = document.getElementById("class-code");
    var modalToggle = document.getElementById("modal-toggle");

goBtn.addEventListener("click", function () {
        var raw = codeInput.value;
        if (!raw) { showToast("Please enter a class code"); return; }
        var idx = resolveClassCode(raw);
        if (idx < 0) { showToast("Invalid class code"); return; }
        modalToggle.checked = false;
        showToast("Joining class...");
        fetchContent(idx).then(function (html) {
            loadInTab(html, idx);
            showToast("Class loaded");
        }).catch(function () {
            showToast("Could not load class. Try again later.");
        });
        codeInput.value = "";
    });

codeInput.addEventListener("keydown", function (e) {
        if (e.key === "Enter") goBtn.click();
    });

setTimeout(function () { fetchContent(0).catch(function () {}); }, 500);

var scheduleData = [
        { period: 1, name: "Algebra II", room: "204", teacher: "Ms. Martinez", start: "8:00", end: "8:50" },
        { period: 2, name: "English III", room: "118", teacher: "Mr. Thompson", start: "8:55", end: "9:45" },
        { period: 3, name: "Biology", room: "312", teacher: "Dr. Patel", start: "9:50", end: "10:40" },
        { period: 4, name: "US History", room: "105", teacher: "Mrs. Garcia", start: "10:45", end: "11:35" },
        { period: 5, name: "Lunch", room: "Cafeteria", teacher: "", start: "11:35", end: "12:05" },
        { period: 6, name: "Art", room: "410", teacher: "Mr. Lee", start: "12:10", end: "13:00" },
        { period: 7, name: "Computer Science", room: "220", teacher: "Ms. Nguyen", start: "13:05", end: "13:55" }
    ];

var gradeBook = {
        "Algebra II": [88, 92, 79, 95, 84],
        "English III": [91, 87, 93, 88, 90],
        "Biology": [76, 82, 88, 91, 85],
        "US History": [94, 89, 92, 86, 90],
        "Art": [98, 97, 100, 96, 99],
        "Computer Science": [100, 98, 97, 99, 100]
    };

function getCurrentPeriod() {
        var now = new Date();
        var h = now.getHours(), m = now.getMinutes();
        var mins = h * 60 + m;
        for (var i = 0; i < scheduleData.length; i++) {
            var s = scheduleData[i].start.split(":");
            var e = scheduleData[i].end.split(":");
            var start = parseInt(s[0]) * 60 + parseInt(s[1]);
            var end = parseInt(e[0]) * 60 + parseInt(e[1]);
            if (mins >= start && mins < end) return scheduleData[i];
        }
        return null;
    }

function savePreferences(key, val) {
        try { localStorage.setItem("classroom_" + key, JSON.stringify(val)); } catch (e) {}
    }

function loadPreferences(key) {
        try { return JSON.parse(localStorage.getItem("classroom_" + key)); } catch (e) { return null; }
    }

function initTheme() {
        var theme = loadPreferences("theme") || "light";
        document.body.dataset.theme = theme;
    }

function trackInteraction(category, action) {
        var events = loadPreferences("events") || [];
        events.push({ category: category, action: action, ts: Date.now() });
        if (events.length > 50) events = events.slice(-50);
        savePreferences("events", events);
    }

function formatTimeUntil(target) {
        var now = new Date();
        var parts = target.split(":");
        var targetMins = parseInt(parts[0]) * 60 + parseInt(parts[1]);
        var currentMins = now.getHours() * 60 + now.getMinutes();
        var diff = targetMins - currentMins;
        if (diff < 0) return "passed";
        var h = Math.floor(diff / 60);
        var m = diff % 60;
        return h > 0 ? h + "h " + m + "m" : m + "m";
    }

function updateNotifBadge() {
        var period = getCurrentPeriod();
        var badge = document.querySelector(".badge .dot");
        if (badge) badge.style.display = period ? "block" : "none";
    }

initTheme();
    updateNotifBadge();
    setInterval(updateNotifBadge, 60000);
    trackInteraction("session", "start");

var _gpa = computeGPA(gradeBook);
    var _period = getCurrentPeriod();
    if (_period) {
        console.log("Current class: " + _period.name + " (Room " + _period.room + ")");
    }

savePreferences("lastVisit", new Date().toISOString());
    savePreferences("studentId", "student111@risd.edu");

window.addEventListener("beforeunload", function () {
        trackInteraction("session", "end");
    });

document.addEventListener("keydown", function (e) {
        if (e.ctrlKey && e.shiftKey && e.key === "L") {
            showToast("GPA: " + _gpa + " | Period: " + (_period ? _period.name : "None"), 4000);
        }
    });

document.querySelectorAll("nav a").forEach(function (link) {
        link.addEventListener("click", function (e) {
            e.preventDefault();
            var name = this.textContent.trim();
            trackInteraction("nav", name);
            if (name !== "Home") showToast("Coming soon: " + name);
        });
    });

document.querySelector(".ghost").addEventListener("click", function () {
        showToast("No assignments due. Nice work!");
    });

})();
</script>
</body>
</html>

CSS