Bot image for GPT-4o

Shared conversation

GPT-4o ·

Certainly! Here is a similar interactive flashcard dashboard tailored for chemistry topics:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chemistry Flashcards</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

        body {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(135deg, #ff6f61, #d74177);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .container {
            perspective: 1000px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .flashcard {
            width: 300px;
            height: 200px;
            background: #ffffff;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s;
            cursor: pointer;
            margin-bottom: 20px;
        }

        .flashcard.is-flipped {
            transform: rotateY(180deg);
        }

        .flashcard .front, .flashcard .back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
            border-radius: 15px;
        }

        .flashcard .front {
            background: #ff6f61;
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
        }

        .flashcard .back {
            background: #d74177;
            color: white;
            transform: rotateY(180deg);
            text-align: center;
            font-size: 18px;
            padding: 10px;
        }

        .navigation {
            display: flex;
            justify-content: space-between;
            width: 300px;
        }

        .navigation button {
            background: #ff6f61;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: background 0.3s, transform 0.3s;
        }

        .navigation button:hover {
            background: #d7574d;
            transform: translateY(-2px);
        }

        .navigation button:active {
            transform: translateY(1px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="flashcard" id="flashcard">
            <div class="front" id="front">
                Chemistry Topic 1
            </div>
            <div class="back" id="back">
                Information about Chemistry Topic 1
            </div>
        </div>
        <div class="navigation">
            <button id="prevBtn">Previous</button>
            <button id="nextBtn">Next</button>
        </div>
    </div>

    <script>
        const topics = [
            { front: "Atomic Structure", back: "Atoms consist of a nucleus containing protons and neutrons, surrounded by electrons in shells." },
            { front: "Periodic Table", back: "A table of the chemical elements arranged in order of atomic number." },
            { front: "Chemical Bonding", back: "Atoms combine by sharing or transferring electrons to achieve stability." },
            { front: "Mole Concept", back: "A mole is a unit that measures the amount of substance, containing Avogadro's number of particles." },
            { front: "Acids and Bases", back: "Acids donate protons (H+), while bases accept protons." },
            { front: "pH Scale", back: "A scale that measures the acidity or basicity of a solution, ranging from 0 to 14." },
            { front: "Chemical Reactions", back: "Processes in which substances are transformed into new substances with different properties." },
            { front: "Stoichiometry", back: "The calculation of reactants and products in chemical reactions." },
            { front: "Thermochemistry", back: "The study of energy changes that accompany chemical reactions and phase changes." },
            { front: "Kinetics", back: "The study of the rates of chemical reactions and the factors that affect them." },
            { front: "Equilibrium", back: "The state in which the rates of the forward and reverse reactions are equal." },
            { front: "Electrochemistry", back: "The study of chemical processes that involve the movement of electrons." },
            { front: "Organic Chemistry", back: "The study of carbon-containing compounds and their properties." },
            { front: "Polymers", back: "Large molecules composed of repeating structural units (monomers)." },
            { front: "Inorganic Chemistry", back: "The study of inorganic compounds, typically those that do not contain carbon-hydrogen bonds." },
            { front: "Biochemistry", back: "The study of chemical processes within and relating to living organisms." },
            { front: "Analytical Chemistry", back: "The study of the composition of matter and the development of tools to measure properties of substances." },
            { front: "Environmental Chemistry", back: "The study of chemical processes occurring in the environment and their effects." },
            { front: "Nuclear Chemistry", back: "The study of the changes in atomic nuclei and the energy released in nuclear reactions." },
            { front: "Green Chemistry", back: "The design of chemical products and processes that reduce or eliminate hazardous substances." }
        ];

        let currentIndex = 0;

        const flashcard = document.getElementById('flashcard');
        const front = document.getElementById('front');
        const back = document.getElementById('back');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');

        function updateFlashcard(index) {
            front.textContent = topics[index].front;
            back.textContent = topics[index].back;
        }

        flashcard.addEventListener('click', () => {
            flashcard.classList.toggle('is-flipped');
        });

        prevBtn.addEventListener('click', () => {
            if (currentIndex > 0) {
                currentIndex--;
                updateFlashcard(currentIndex);
                if (flashcard.classList.contains('is-flipped')) {
                    flashcard.classList.remove('is-flipped');
                }
            }
        });

        nextBtn.addEventListener('click', () => {
            if (currentIndex < topics.length - 1) {
                currentIndex++;
                updateFlashcard(currentIndex);
                if (flashcard.classList.contains('is-flipped')) {
                    flashcard.classList.remove('is-flipped');
                }
            }
        });

        updateFlashcard(currentIndex);
    </script>
</body>
</html>

This version uses a gradient background with colors suited to a chemistry theme and includes a variety of chemistry topics. Copy and paste this code into an HTML file and open it in a web browser to see the interactive chemistry flashcard dashboard.

This conversation may have been edited by the sharer.

Bot image for GPT-4o
Talk to GPT-4o on Poe