This commit is contained in:
zyqunix 2025-06-12 10:50:46 +02:00
parent 92ffac4fe0
commit 4332e78411
3 changed files with 20 additions and 17 deletions

View file

@ -9,14 +9,14 @@
</head> </head>
<body> <body>
<h1>Base64 Encoder/Decoder</h1> <h1>Base64 Encoder/Decoder</h1>
<div class="card"> <div class="cards">
<h2>Base64 Encoder</h2> <h2>Base64 Encoder</h2>
<textarea id="encodeInput" rows="5" cols="50" placeholder="Enter text to encode"></textarea> <textarea id="encodeInput" rows="5" cols="50" placeholder="Enter text to encode"></textarea>
<textarea id="encodeOutput" rows="5" cols="50" readonly placeholder="Encoded Base64 result"></textarea> <textarea id="encodeOutput" rows="5" cols="50" readonly placeholder="Encoded Base64 result"></textarea>
<button id="encode">Encode</button> <button id="encode">Encode</button>
</div> </div>
<div class="card"> <div class="cards">
<h2>Base64 Decoder</h2> <h2>Base64 Decoder</h2>
<textarea id="decodeInput" rows="5" cols="50" placeholder="Enter Base64 to decode"></textarea> <textarea id="decodeInput" rows="5" cols="50" placeholder="Enter Base64 to decode"></textarea>
<textarea id="decodeOutput" rows="5" cols="50" readonly placeholder="Decoded result"></textarea> <textarea id="decodeOutput" rows="5" cols="50" readonly placeholder="Decoded result"></textarea>

View file

@ -4,10 +4,14 @@ div {
margin-bottom: 50px; margin-bottom: 50px;
} }
.cards {
text-align: center;
}
textarea { textarea {
resize: none; resize: none;
background-color: #2a2a2a; background-color: var(--surface1);
color: #f0f0f0; color: var(--white);
border: 2px solid #2c2c2c; border: 2px solid #2c2c2c;
margin-bottom: 25px; margin-bottom: 25px;
border-radius: 5px; border-radius: 5px;
@ -15,23 +19,22 @@ textarea {
} }
textarea[readonly] { textarea[readonly] {
background-color: #282828; background-color: var(--surface0);
color: #999; color: var(--text);
} }
button { button {
margin: 5px 0 50px 0; margin: 5px 0 50px 0;
width: 50%; width: 50%;
height: 15%; height: 15%;
background-color: #2a2a2a; color: var(--white);
color: #f0f0f0;
border: 2px solid #2c2c2c;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
font-size: 16px; font-size: 16px;
background-color: var(--pastel-violet);
border: none;
} }
button:hover { button:hover {
background-color: #2c2c2c; background-color: var(--mauve);
border: 2px solid #2e2e2e; }
}

View file

@ -26,14 +26,14 @@
--blue: #89b4fa; --blue: #89b4fa;
--lavender: #b4befe; --lavender: #b4befe;
--text: #cdd6f4; --text: #cdd6f4;
--subtext1: #bac2de;
--subtext0: #a6adc8; --subtext0: #a6adc8;
--overlay2: #9399b2; --subtext1: #bac2de;
--overlay1: #7f849c;
--overlay0: #6c7086; --overlay0: #6c7086;
--surface2: #585b70; --overlay1: #7f849c;
--surface1: #45475a; --overlay2: #9399b2;
--surface0: #313244; --surface0: #313244;
--surface1: #45475a;
--surface2: #585b70;
--base: #1e1e2e; --base: #1e1e2e;
--mantle: #181825; --mantle: #181825;
--crust: #11111b; --crust: #11111b;