Skip to content

Commit

Permalink
improve responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@Romelium
Romelium committed Dec 15, 2024
1 parent 7ee9f8b commit 089d473
Showing 1 changed file with 132 additions and 165 deletions.
297 changes: 132 additions & 165 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,194 +1,161 @@
<!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">
<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" />
<title>JavaScript Playground</title>
<style>
:root {
--primary-color: #007BFF;
--hover-color: #0056b3;
--success-color: #28a745;
--background-color: #f7f7f7;
--container-bg: #fff;
--border-color: #ddd;
--text-color: #333;
--input-bg: #f4f4f4;
--font-family: 'Arial', sans-serif;
--font-size-base: 16px;
--font-size-heading: 2.5rem;
}

body {
font-family: var(--font-family);
background-color: var(--background-color);
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
box-sizing: border-box;
color: var(--text-color);
}

header {
text-align: center;
padding: 20px;
width: 100%;
}

h1 {
color: var(--text-color);
font-size: clamp(1.5rem, 5vw, var(--font-size-heading));
margin: 0;
}

:root {
--primary-color: #007bff;
--hover-color: #0056b3;
--success-color: #28a745;
--background-color: #f7f7f7;
--container-bg: #fff;
--border-color: #ddd;
--text-color: #333;
--input-bg: #f4f4f4;
--font-family: "Arial", sans-serif;
}

body {
font-family: var(--font-family);
background-color: var(--background-color);
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100vh;
box-sizing: border-box;
}

header {
text-align: center;
padding: 10px;
width: 100%;
}

h1 {
color: var(--text-color);
font-size: clamp(1.5rem, 5vw, 2.5rem);
margin: 0;
}

.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
max-width: 900px;
margin: 0 auto;
padding: 15px;
background-color: var(--container-bg);
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
height: 100%; /* Ensures the container takes the full height */
box-sizing: border-box;
}

textarea {
width: 100%;
height: 100px; /* Make textarea smaller initially */
font-family: monospace;
font-size: 16px;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--input-bg);
margin-bottom: 10px;
resize: vertical; /* Allow vertical resizing */
box-sizing: border-box;
flex-grow: 1; /* Make it take available space */
}

button {
width: 100%;
padding: 10px;
background-color: var(--primary-color);
color: white;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
box-sizing: border-box;
transition: background-color 0.3s ease;
}

button:hover {
background-color: var(--hover-color);
}

.output {
margin-top: 10px;
padding: 15px;
background-color: var(--container-bg);
border: 1px solid var(--border-color);
border-radius: 4px;
min-height: 80px; /* Increased minimum height for better visibility */
font-family: monospace;
font-size: 14px;
white-space: pre-wrap;
color: var(--text-color);
overflow-y: auto;
max-height: 200px; /* Increased max height for larger output */
box-sizing: border-box;
}

.copy-btn {
margin-top: 10px;
background-color: var(--success-color);
width: auto;
padding: 8px 16px; /* Reduced padding for better sizing */
font-size: 14px; /* Smaller font size */
cursor: pointer;
}

@media (max-width: 768px) {
.container {
max-width: 900px;
margin: 30px auto;
padding: 20px;
background-color: var(--container-bg);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 100%;
box-sizing: border-box;
transition: box-shadow 0.3s ease;
}

.container:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
padding: 10px;
}

textarea {
width: 100%;
height: 200px;
font-family: monospace;
font-size: var(--font-size-base);
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--input-bg);
margin-bottom: 15px;
resize: none;
box-sizing: border-box;
outline: none;
transition: border-color 0.3s ease;
height: 120px; /* Slightly taller textarea for smaller devices */
}

textarea:focus {
border-color: var(--primary-color);
h1 {
font-size: clamp(
1.5rem,
8vw,
2.5rem
); /* Larger header for small devices */
}

button {
width: 100%;
padding: 10px;
background-color: var(--primary-color);
color: white;
font-size: var(--font-size-base);
border: none;
border-radius: 4px;
cursor: pointer;
box-sizing: border-box;
transition: background-color 0.3s ease, transform 0.2s ease;
}

button:hover {
background-color: var(--hover-color);
}

button:active {
transform: scale(0.98);
padding: 12px; /* Slightly larger buttons on mobile */
}

.output {
margin-top: 20px;
padding: 15px;
background-color: var(--container-bg);
border: 1px solid var(--border-color);
border-radius: 4px;
min-height: 50px;
font-family: monospace;
font-size: 14px;
white-space: pre-wrap;
color: var(--text-color);
overflow-y: auto;
max-height: 400px; /* Set a maximum height for the output box */
box-sizing: border-box;
max-height: 150px; /* Smaller output box for mobile */
}

.copy-btn {
margin-top: 10px;
background-color: var(--success-color);
width: auto;
padding: 8px 12px;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.copy-btn:hover {
background-color: #218838;
}

@media (max-width: 768px) {
.container {
padding: 15px;
}

h1 {
font-size: clamp(1.2rem, 4vw, 2rem);
}

textarea {
height: 150px;
font-size: 14px;
}

button {
font-size: 14px;
}

.output {
font-size: 12px;
}
}

@media (max-width: 480px) {
body {
padding: 10px;
}

.container {
padding: 10px;
}

textarea {
height: 120px;
}

button {
font-size: 14px;
}
font-size: 12px; /* Even smaller button on mobile */
padding: 6px 12px; /* Smaller button size */
}
}
</style>
</head>

</head>

<body>

<body>
<header>
<h1>JavaScript Playground</h1>
<h1>JavaScript Playground</h1>
</header>

<main class="container">
<textarea id="jsCode" placeholder="Write your JavaScript code here..."
aria-label="JavaScript code editor"></textarea>
<textarea id="jsCode" placeholder="Write your JavaScript code here..." aria-label="JavaScript code editor"></textarea>
<button id="runBtn" aria-label="Run JavaScript code">Run Code</button>
<button id="copyBtn" class="copy-btn" aria-label="Copy output">Copy Output</button>
<div id="output" class="output" role="region" aria-live="polite" aria-relevant="additions text"></div>
Expand Down

0 comments on commit 089d473

Please sign in to comment.