Skip to content

Commit 6cf56a1

Browse files
mrmushtaqmrmushtaq
committed
Web Engineering Project - Live Code Editor
0 parents  commit 6cf56a1

3 files changed

Lines changed: 1322 additions & 0 deletions

File tree

‎Index.html‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
<!DOCTYPE html>
2+
<html lang="en"><head>
3+
<meta charset="UTF-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<title>CodePlay - Live Code Editor</title>
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9+
<link rel="stylesheet" href="style.css">
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
11+
12+
</head>
13+
<body>
14+
<div class="container">
15+
<header>
16+
<div class="logo">
17+
<div class="logo-icon">{"</>"}</div>
18+
<h1>CodePlay - Live Code Editor</h1>
19+
</div>
20+
<div class="header-controls">
21+
<button class="btn btn-primary" id="runBtn">
22+
<span>▶️</span> Run Code
23+
</button>
24+
<button class="btn btn-secondary" id="saveBtn">
25+
<span>💾</span> Save
26+
</button>
27+
<button class="btn btn-success" id="shareBtn">
28+
<span>🔗</span> Share
29+
</button>
30+
<button class="btn btn-danger" id="resetBtn">
31+
<span>🔄</span> Reset
32+
</button>
33+
</div>
34+
</header>
35+
36+
<div class="main-content">
37+
<div class="editor-panel">
38+
<div class="tabs">
39+
<div class="tab active" data-tab="html">
40+
HTML
41+
<span class="tab-badge hidden" id="html-badge"></span>
42+
</div>
43+
<div class="tab" data-tab="css">
44+
CSS
45+
<span class="tab-badge hidden" id="css-badge"></span>
46+
</div>
47+
<div class="tab" data-tab="js">
48+
JavaScript
49+
<span class="tab-badge hidden" id="js-badge"></span>
50+
</div>
51+
</div>
52+
<div class="panel-header">
53+
<div class="panel-title" id="currentFile">
54+
<span>📄</span> index.html
55+
</div>
56+
<div class="panel-controls">
57+
<select class="theme-selector" id="themeSelector">
58+
<option value="monokai">Dark Theme</option>
59+
<option value="default">White Theme</option>
60+
</select>
61+
<select class="font-size-selector" id="fontSizeSelector">
62+
<option value="12">12px</option>
63+
<option value="14" selected>14px</option>
64+
<option value="16">16px</option>
65+
<option value="18">18px</option>
66+
<option value="20">20px</option>
67+
</select>
68+
</div>
69+
</div>
70+
<div class="editor-container">
71+
<textarea id="htmlEditor"></textarea>
72+
<textarea id="cssEditor"></textarea>
73+
<textarea id="jsEditor"></textarea>
74+
</div>
75+
</div>
76+
77+
<div class="resize-handle" id="resizeHandle">
78+
<!-- Resize handle visual indicator -->
79+
</div>
80+
81+
<div class="preview-panel">
82+
<div class="panel-header">
83+
<div class="panel-title">
84+
<span>👁️</span> Console Output
85+
</div>
86+
<div class="panel-controls">
87+
<button class="btn btn-secondary" id="clearConsoleBtn">
88+
<span>🗑️</span> Clear Console
89+
</button>
90+
</div>
91+
</div>
92+
<iframe class="preview-container" id="previewFrame" title="Code Preview"></iframe>
93+
<div class="console">
94+
<div class="console-header">
95+
<div class="console-title"></div>
96+
<div class="console-stats">
97+
<span id="consoleErrorCount" class="text-error hidden">0 errors</span>
98+
<span id="consoleWarningCount" class="text-warning hidden">0 warnings</span>
99+
</div>
100+
</div>
101+
<div class="console-content" id="consoleContent">
102+
<!-- Console messages will appear here -->
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
108+
<div class="status-bar">
109+
<div class="status-info">
110+
<div class="status-item">
111+
<span>📁</span>
112+
<span id="currentFileName">index.html</span>
113+
</div>
114+
<div class="status-item">
115+
<span>📏</span>
116+
<span id="lineCount">Line 1, Column 1</span>
117+
</div>
118+
<div class="status-item">
119+
<span>💾</span>
120+
<span id="saveStatus">All changes saved</span>
121+
</div>
122+
</div>
123+
<div id="status">Ready - CodePlay Live Editor v2.0</div>
124+
</div>
125+
126+
<!-- Share Modal -->
127+
<div class="modal-overlay" id="shareModal">
128+
<div class="share-modal">
129+
<div class="modal-header">
130+
<div class="modal-title">Share Your Code</div>
131+
<button class="close-modal" id="closeModal">&times;</button>
132+
</div>
133+
<div class="modal-body">
134+
<div class="share-url-container">
135+
<input type="text" class="share-url" id="shareUrl" readonly>
136+
<button class="copy-url-btn" id="copyUrlBtn">Copy</button>
137+
</div>
138+
<div class="share-platforms">
139+
140+
<div class="share-btn twitter" data-platform="twitter">
141+
<div class="share-icon"><i class="fab fa-twitter"></i></div>
142+
<div class="share-label">Twitter</div>
143+
</div>
144+
<div class="share-btn linkedin" data-platform="linkedin">
145+
<div class="share-icon"><i class="fab fa-linkedin-in"></i></div>
146+
<div class="share-label">LinkedIn</div>
147+
</div>
148+
<div class="share-btn email" data-platform="email">
149+
<div class="share-icon"><i class="fas fa-envelope"></i></div>
150+
<div class="share-label">Email</div>
151+
</div>
152+
<div class="share-btn github" data-platform="github">
153+
<div class="share-icon"><i class="fab fa-github"></i></div>
154+
<div class="share-label">GitHub</div>
155+
</div>
156+
</div>
157+
</div>
158+
</div>
159+
</div>
160+
</div>
161+
162+
<!-- External Libraries -->
163+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
164+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script>
165+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/css/css.min.js"></script>
166+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
167+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.js"></script>
168+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/material.min.js"></script>
169+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/solarized.min.js"></script>
170+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/night.min.js"></script>
171+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/matchbrackets.min.js"></script>
172+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/closebrackets.min.js"></script>
173+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/closetag.min.js"></script>
174+
175+
<!-- Main Application Script -->
176+
<script src="script.js"></script></body>
177+
</html>

0 commit comments

Comments
 (0)