-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
86 lines (77 loc) · 2.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interactive Code Editor</title>
<link rel="stylesheet" href="styles.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
<!-- Code editing functionality -->
<link rel="icon" type="png" href="/images_Folder/icon.png" />
</head>
<body>
<!-- Header for Home, Github Repo, How to Use, Code Example, and Dark mode -->
<header>
<div class="header-content">
<h1>Interactive Code Editor</h1>
<nav>
<a
href="https://github.com/CyberSphinxxx/Interactive_Code_Editor"
class="github-btn"
target="_blank"
>GitHub</a
>
<a href="How_To_Use_Folder/how_to_use.html" class="how-to-use-btn"
>How to Use</a
>
<a
href="Code_Example_Folder/code_examples.html"
class="how-to-use-btn"
>Code Examples</a
>
<button id="darkModeToggle">🌙 Dark Mode</button>
</nav>
</div>
</header>
<div class="container">
<h1>HTML, CSS & JavaScript Editor</h1>
<!-- Tab navigation for managing multiple code files -->
<div class="tab-container" id="tabContainer">
<button class="tab active" data-tab="1">
Tab 1
<span class="tab-close">×</span>
</button>
<button id="addTabBtn">+</button>
<!-- Button to add new tabs for additional code files -->
</div>
<!-- Code editor and preview output container -->
<div class="editor-container">
<div id="editor"></div>
<!-- Code editor area -->
<iframe id="preview"></iframe>
<!-- Live preview of the code -->
</div>
<!--Buttons Controls -->
<div class="button-container">
<button id="runBtn">Run Code</button>
<button id="startOverBtn">Example Code</button>
<button id="startFromScratchBtn">Start From Scratch</button>
<button id="fullScreenBtn">Full Screen</button>
<button id="downloadBtn">Download Code</button>
<button id="focusModeBtn">Full Focus Mode</button>
</div>
</div>
<!-- For background color picker -->
<div class="theme-picker">
<label for="bgColorPicker">Choose Background Color:</label>
<input type="color" id="bgColorPicker" name="bgColorPicker" />
<button id="resetColorBtn">Reset Background</button>
</div>
<!-- My Github profile -->
<a href="https://github.com/CyberSphinxxx" id="creator_name_link" target="_blank" >
<p id="creator_name">By: John Lemar L. Gonzales</p>
</a>
<!-- Javascript link -->
<script src="script.js"></script>
</body>
</html>