Webleb - UI Elements - Google Classroom UI

HTML CSS JS

<!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>

Preview

Open Advanced Editor Full Screen