Skip to content

Add Responsive Code Editor Layout with Dark Theme #47

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adityai0 merged 1 commit into from
Jul 22, 2025
Merged

Add Responsive Code Editor Layout with Dark Theme #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
270 changes: 258 additions & 12 deletions editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,266 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Editor - CodeClip</title>
<link rel="stylesheet" href="./styles/themes.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Editor Layout</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" xintegrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Bootstrap Icons CDN for checkmark -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<style>
/* Custom CSS Variables for the new theme */
:root {
--cc-bg-primary: #000000; /* Black background */
--cc-panel-bg: #1a1a1a; /* Dark gray for panels */
--cc-text-light: #f8f9fa; /* Light text */
--cc-text-secondary: #adb5bd; /* Secondary text */
--cc-grabber-bg: #333333; /* Darker grabber */
--cc-heading-challenge: #4FC3F7; /* Light blue for challenge heading */
--cc-heading-code: #69F0AE; /* Light green for code heading */
--cc-heading-output: #FF8A65; /* Light orange for output heading */
--cc-code-area-bg: #121212; /* Very dark gray for code/output areas */
--cc-btn-primary: #007bff; /* Standard Bootstrap primary blue */
--cc-btn-success: #28a745; /* Standard Bootstrap success green */
--cc-btn-warning: #ffc107; /* Standard Bootstrap warning yellow */
--cc-btn-info: #17a2b8; /* Standard Bootstrap info cyan */
}

/* Apply custom variables */
body {
background-color: var(--cc-bg-primary);
color: var(--cc-text-light);
font-family: "Inter", sans-serif;
overflow: hidden; /* Prevent body scroll due to resizing */
}
a{
text-decoration: none;
color:white
}
.grid-container {
display: grid;
/* Updated: Horizontal split with three columns */
grid-template-rows: 1fr;
grid-template-columns: 1fr 8px 2fr 8px 1fr; /* Columns for panels and grabbers */
height: 100vh;
width: 100vw;
overflow: hidden; /* Prevent content overflow during resize */
}

.panel {
overflow:scroll; /* Allow content to scroll within panels */
padding: 1rem;
display: flex;
flex-direction: column;
border-radius: 0.5rem; /* Rounded corners for panels */
background-color: var(--cc-panel-bg); /* Custom panel background */
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important; /* Darker shadow */
}

.grabber {
/* Updated: Vertical grabbers for horizontal resizing */
width: 8px;
height: 100%;
cursor: ew-resize; /* East-west resize cursor */
background-color: var(--cc-grabber-bg); /* Custom grabber background */
z-index: 10; /* Ensure grabbers are above panel content */
transition: background-color 0.2s ease;
border-radius: 0.25rem; /* Slightly rounded grabbers */
}

.grabber:hover {
background-color: #a0aec0; /* Lighter gray on hover (can be adjusted) */
}

/* Specific text colors for headings */
.text-challenge-heading { color: var(--cc-heading-challenge) !important; }
.text-code-heading { color: var(--cc-heading-code) !important; }
.text-output-heading { color: var(--cc-heading-output) !important; }

/* Code editor and output area background */
#code-editor, #output-area {
background-color: var(--cc-code-area-bg) !important;
color: var(--cc-text-light) !important; /* Ensure text is light */
border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
}

/* Adjust Bootstrap button styles for the dark theme */
.btn-custom-blue {
background-color: #007bff; /* A shade of blue similar to the image's button */
border-color: #007bff;
color: white;
transition: background-color 0.2s ease, border-color 0.2s ease;
padding-bottom: 10px;
}
.btn-custom-blue:hover {
background-color: #0056b3;
border-color: #0056b3;
}

.btn-custom-orange {
background-color: #fd7e14; /* A shade of orange */
border-color: #fd7e14;
color: white;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn-custom-orange:hover {
background-color: #e66a00;
border-color: #e66a00;
}

</style>
</head>
<body>
<main>
<h1>Editor Page</h1>
<p>This is another page to verify that theme preference persists across pages.</p>
</main>
<body class="bg-dark text-light">
<div class="header-grid-item pt-3">
<button class="btn btn-outline-light btn-sm rounded-pill px-3" onclick="alert('Navigating to homepage...')">
<a href="/index.html"><i class="bi bi-arrow-left me-2"></i>Back to Homepage</a>
</button>
</div>
<div id="grid-container" class="grid-container">

<!-- Left Panel: Challenge Description -->
<div id="left-panel" class="panel m-2">
<h2 class="h4 mb-3 text-challenge-heading">Challenge Description</h2>
<div class="text-secondary flex-grow-1">
<p>Welcome to the coding challenge! Your task is to implement a function that reverses a given string. Consider edge cases such as empty strings or strings with special characters.</p>
<h3 class="h5 mt-4 text-primary">Requirements:</h3>
<ul class="list-unstyled ms-4">
<li><i class="bi bi-check-circle-fill text-success me-2"></i>The function should accept one argument: a string.</li>
<li><i class="bi bi-check-circle-fill text-success me-2"></i>It should return the reversed string.</li>
<li><i class="bi bi-check-circle-fill text-success me-2"></i>The solution must be efficient (e.g., O(n) time complexity).</li>
</ul>
<h3 class="h5 mt-4 text-primary">Example:</h3>
<pre class="bg-dark p-3 rounded text-light-emphasis"><code>
function reverseString(str) {
// Your code here
}

// Example usage:
// reverseString("hello") should return "olleh"
</code></pre>
<p class="mt-4">Good luck! If you encounter any issues, refer to the documentation or seek hints.</p>
</div>
</div>

<!-- Grabber between left and center panels -->
<div id="grabber-1" class="grabber"></div>

<!-- Center Panel: Code Editor -->
<div id="center-panel" class="panel m-2 pb-5">
<h2 class="h4 mb-3 text-code-heading">Code Editor</h2>
<textarea id="code-editor" class="form-control flex-grow-1 p-3 rounded resize-none"
placeholder="Write your code here...">
function reverseString(str) {
// Implement your solution here
return str.split('').reverse().join('');
}
</textarea>
<button class="btn btn-custom-blue mt-4 px-4 py-2 rounded shadow">
Run Code
</button>
</div>

<!-- Grabber between center and right panels -->
<div id="grabber-2" class="grabber"></div>

<!-- Right Panel: Output/Test Results -->
<div id="right-panel" class="panel m-2 pb-5">
<h2 class="h4 mb-3 text-output-heading">Output / Test Results</h2>
<div id="output-area" class="flex-grow-1 p-3 rounded overflow-auto">
<p class="text-muted">Click "Run Code" to see output here.</p>
<pre class="mt-2 text-sm"><code>
// Example Test Case:
// Input: "hello"
// Expected Output: "olleh"
// Actual Output: (will appear here)

// Test Case 2:
// Input: ""
// Expected Output: ""
// Actual Output: (will appear here)
</code></pre>
</div>
<button class="btn btn-custom-orange mt-4 px-4 py-2 rounded shadow">
Run Tests
</button>
</div>
</div>

<!-- Bootstrap JS CDN (optional, for components that need JS) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" xintegrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const gridContainer = document.getElementById('grid-container');
const grabber1 = document.getElementById('grabber-1');
const grabber2 = document.getElementById('grabber-2');

// Function to handle resizing logic
const handleResize = (e, grabber) => {
let startX = e.clientX || (e.touches && e.touches[0].clientX); // Changed to startX for horizontal resize
let initialGridTemplateColumns = gridContainer.style.gridTemplateColumns || '1fr 8px 2fr 8px 1fr'; // Changed to columns

const onMouseMove = (moveEvent) => {
const currentX = moveEvent.clientX || (moveEvent.touches && moveEvent.touches[0].clientX); // Changed to currentX
const deltaX = currentX - startX; // Changed to deltaX

const columns = initialGridTemplateColumns.split(' ').map(s => s.trim()); // Changed to columns
let col1Width, col2Width, col3Width; // Changed to col widths

if (grabber === grabber1) {
// Resizing left and center panels
col1Width = parseFloat(columns[0].replace('fr', ''));
col2Width = parseFloat(columns[2].replace('fr', ''));

const newCol1Width = Math.max(0.1, col1Width + (deltaX / window.innerWidth) * 4); // Adjust multiplier for sensitivity
const newCol2Width = Math.max(0.1, col2Width - (deltaX / window.innerWidth) * 4);

gridContainer.style.gridTemplateColumns = `${newCol1Width}fr 8px ${newCol2Width}fr 8px ${columns[4]}`;
} else if (grabber === grabber2) {
// Resizing center and right panels
col2Width = parseFloat(columns[2].replace('fr', ''));
col3Width = parseFloat(columns[4].replace('fr', ''));

const newCol2Width = Math.max(0.1, col2Width + (deltaX / window.innerWidth) * 4);
const newCol3Width = Math.max(0.1, col3Width - (deltaX / window.innerWidth) * 4);

gridContainer.style.gridTemplateColumns = `${columns[0]} 8px ${newCol2Width}fr 8px ${newCol3Width}fr`;
}
};

const onMouseUp = () => {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('touchmove', onMouseMove);
document.removeEventListener('touchend', onMouseUp);
document.body.style.userSelect = ''; // Re-enable text selection
document.body.style.cursor = ''; // Reset cursor
};

// Add event listeners for mouse and touch
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
document.addEventListener('touchmove', onMouseMove, { passive: false }); // Use passive: false for touchmove
document.addEventListener('touchend', onMouseUp);
document.body.style.userSelect = 'none'; // Disable text selection during resize
document.body.style.cursor = 'ew-resize'; // Change cursor during resize
};

<!-- Same theme toggle text at bottom-right -->
<p id="theme-toggle">Toggle Theme</p>
// Mouse events for grabber 1
grabber1.addEventListener('mousedown', (e) => {
handleResize(e, grabber1);
});
grabber1.addEventListener('touchstart', (e) => {
handleResize(e, grabber1);
});

<script src="./scripts/theme.js"></script>
// Mouse events for grabber 2
grabber2.addEventListener('mousedown', (e) => {
handleResize(e, grabber2);
});
grabber2.addEventListener('touchstart', (e) => {
handleResize(e, grabber2);
});
});
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<ul class="nav__list">
<li><a href="#" class="nav__link">Home</a></li>
<li><a href="#" class="nav__link">Challenges</a></li>
<li><a href="#" class="nav__link">Editor</a></li>
<li><a href="/editor.html" class="nav__link">Editor</a></li>
<li><a href="#" class="nav__link">Profile</a></li>
</ul>
</nav>
Expand Down
Loading