CodeSeen/index.html at main · Seen-Design-Lab/CodeSeen · GitHub

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
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CodeCraft Live</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/material-darker.min.css">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <div class="container">
            <div class="header">
                <h1>CodeCraft Live</h1>
                <div class="header-controls">
                    <label class="auto-run-label">
                        <input type="checkbox" id="autoRun">
                        Auto-Run
                    </label>
                    <button id="run">Run (Ctrl + S)</button>
                </div>
            </div>
            <div class="editor-container">
                <div class="editor-header">
                    <span class="language">HTML</span>
                    <button onclick="clearEditor('html')">Clear</button>
                </div>
                <div class="editor">
                    <textarea id="html-editor" placeholder="Enter HTML code here...">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;My Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello World!&lt;/h1&gt;
    &lt;p&gt;Start coding here...&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea>
                </div>
                <div class="editor-header">
                    <span class="language">CSS</span>
                    <button onclick="clearEditor('css')">Clear</button>
                </div>
                <div class="editor">
                    <textarea id="css-editor" placeholder="Enter CSS code here...">body {
    font-family: Arial, sans-serif;
    padding: 20px;
}

h1 {
    color: #007acc;
}</textarea>
                </div>
                <div class="editor-header">
                    <span class="language">JavaScript</span>
                    <button onclick="clearEditor('js')">Clear</button>
                </div>
                <div class="editor">
                    <textarea id="js-editor" placeholder="Enter JavaScript code here...">// Your JavaScript code here
document.querySelector('h1').addEventListener('click', () => {
    alert('Hello from JavaScript!');
});</textarea>
                </div>
            </div>
            <div class="preview">
                <iframe id="preview-frame"></iframe>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/css/css.min.js"></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/addon/edit/closetag.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/addon/edit/closebrackets.min.js"></script>
        <script src="editor.js"></script>
    </body>

</html>