HTML/CSS - </The_Programmers_Trading_Card_Game> V.9.0.0 Online Editor and JavaScript Compiler

html

<!-- All AI distributed pictures are...
I take my time for longer and various design steps (Info's in the footer) and they  w e r e at first most of the work here (especially after using a trillion prompts and corrections, combining them and linking them, so...() => ;<|} (More to come) -->
<!--This Project is still on, but it actually got problems with the Imgbb-updates so HALF OF THE LINKS FOR THE PICTURES, aswell as SOME OTHER FEATURES are inactive for different reasons. I'm actually working on to build up my own server, because this project get's way bigger thsn exspected and I'm 'trying out some options for the meantime. -->
<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Konan">    
    <title>The Programmers Trading Card Game</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
</head>
<body>
    <h1>&lt;/The Programmers Trading Card Game&gt;</h1>
    <div id="data-source-signs" class="ibb-signs"><img id="ibb-dcu" class="ibb-logo" src="https://i.ibb.co/yW6nKLM/Screenshot-20241217-142834-Brave.jpg" alt="file-Fq-Gn-QLoik-No-TFiqubfhu-S2sj" border="0" /> <img id="ibb-dcw" class="ibb-logo" src="https://i.ibb.co/NYX2TCL/Screenshot-20241217-142709-Brave.jpg" alt="file-Fq-Gn-QLoik-No-TFiqubfhu-S2sj" border="0" /> <img id="ibb-dcg" class="ibb-logo" src="https://i.ibb.co/KrXx6vR/Screenshot-20241217-142904-Brave.jpg" alt="file-Fq-Gn-QLoik-No-TFiqubfhu-S2sj" border="0" /> <img id="ibb-dcr" class="ibb-logo" src="https://i.ibb.co/1ngVYrV/Screenshot-20241217-142743-Brave.jpg" alt="file-Fq-Gn-QLoik-No-TFiqubfhu-S2sj" border="0" /> <img id="ibb-dcb" class="ibb-logo" src="https://i.ibb.co/CvHW0QN/Screenshot-20241217-142535-Brave.jpg" alt="file-Fq-Gn-QLoik-No-TFiqubfhu-S2sj" border="0" /></div>
    <div id="main-pic-container">
        <img id="main-pic" class="main-game-pic" alt="The_Programmers_Card_Game_Logo" src="https://i.ibb.co/vJMtkLw/file-Fq-Gn-QLoik-No-TFiqubfhu-S2sj.webp" border="0">
    </div>
    <p id="intro">        
        This programmer card game "gamma" test is just a starting code that allows you to draw the first programming cards. Click the button to draw a card from the deck.
    </p>
    <button id="drawCard" class="draw-button">Draw Programmer Card From Deck To Visit</button>
    <p>Click "Draw Card" to get a new card!  </p>
   <div id="cardContainer"></div>

css

* {
    box-sizing: border-box;
    margin: 0.02345rem;
    padding: 0.04675rem;
}
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Courier Prime", serif, "Arial Black", fantasy;
    text-align: center;
}
h1, h4 {
    margin: 9.75px;
    padding: 6.85px;
    font-family: cursive, serif;
    text-decoration: underline double #9ff4bd;
    text-shadow: 12px 12px 5px #565656;
}
img.ibb-logo {
    position: inherit;
    margin: 0.45rem -0.3375rem 0.45rem -0.3375rem;
    height: 1.345rem;
    width: 1.225rem;  
}

document.addEventListener('DOMContentLoaded', function () {
class Card {
    constructor(name, type, category, cost, image, skill = null, powerUp = null) {
        this.name = name;
        this.type = type;
        this.category = category;
        this.cost = cost;
        this.image = image;
        this.skill = skill;
        this.powerUp = powerUp;
    }
}
class CreatureCard extends Card {
    constructor(name, type, category, cost, attack, defense, skill, image, powerUp = null) {
        super(name, type, category, cost, image, skill, powerUp);
        this.attack = attack;
        this.defense = defense;
    }
}
class PlaneswalkerCard extends Card {
    constructor(name, type, category, cost, startingDataPoints, planeswalkerSkills, specialSkill, image) {
        super(name, type, category, cost, image, specialSkill);
        this.startingDataPoints = startingDataPoints;
        this.planeswalkerSkills = planeswalkerSkills;
    }
}

BROWSER

Console