Hugging Face's logo

Spaces:
Verbaflo
/
jinja2_playground
Running

App Files Community
KilloWatts commited on
Commit
5aaf373
·
verified ·
1 Parent(s): 8d7ff4f

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +125 -19
index.html CHANGED
@@ -1,19 +1,125 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Live Jinja Parser (Python/Pyodide)</title>
7
+
8
+ <script src="https://cdn.jsdelivr.net/pyodide/v0.25.1/full/pyodide.js"></script>
9
+
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.css">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/theme/material-darker.min.css">
12
+
13
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.js"></script>
14
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/jinja2/jinja2.min.js"></script>
15
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/javascript/javascript.min.js"></script>
16
+
17
+ <!-- Markdown and Mermaid libraries -->
18
+ <script src="https://cdn.jsdelivr.net/npm/marked@11.1.0/marked.min.js"></script>
19
+ <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
20
+
21
+ <link rel="stylesheet" href="style.css">
22
+ </head>
23
+ <body class="dark-mode">
24
+
25
+ <div class="loading-overlay" id="loading-overlay"></div>
26
+ <div id="loader">Loading Python Environment...</div>
27
+
28
+ <header class="main-header">
29
+ <h1>Live Jinja Parser (Pyodide) 🐍</h1>
30
+ <div class="theme-toggle-container">
31
+ <span class="theme-label">Light Mode</span>
32
+ <label class="theme-switch">
33
+ <input type="checkbox" id="theme-toggle">
34
+ <span class="theme-slider"></span>
35
+ </label>
36
+ </div>
37
+ </header>
38
+
39
+ <div class="resizable-container" id="main-container">
40
+ <div class="resizable-left-panel" id="left-panel">
41
+ <div class="pane resizable-template-pane" id="template-pane">
42
+ <div class="pane-header">
43
+ <h2>Jinja Template</h2>
44
+ <div class="header-controls">
45
+ <button class="header-btn" id="copy-template-btn">Copy Template</button>
46
+ <div class="control-group">
47
+ <span class="control-label">Text Wrap</span>
48
+ <label class="switch">
49
+ <input type="checkbox" id="text-wrap-toggle" checked>
50
+ <span class="slider"></span>
51
+ </label>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ <textarea id="jinja-template"></textarea>
56
+ </div>
57
+ <div class="resize-handle resize-handle-horizontal" id="horizontal-resize"></div>
58
+ <div class="pane resizable-variables-pane" id="variables-pane">
59
+ <div class="pane-header">
60
+ <h2 id="variables-header">Variables (JSON)</h2>
61
+ <div class="header-controls">
62
+ <button class="header-btn" id="extract-variables-header">Extract Variables</button>
63
+ <button class="mode-switch" id="toggle-mode">Switch to Form Mode</button>
64
+ </div>
65
+ </div>
66
+ <textarea id="variables"></textarea>
67
+ <div id="variables-form" style="display: none; padding: 15px; overflow-y: auto; flex-grow: 1;"></div>
68
+ </div>
69
+ </div>
70
+ <div class="resize-handle resize-handle-vertical" id="vertical-resize"></div>
71
+ <div class="resizable-right-panel" id="right-panel">
72
+ <div class="pane" id="output-pane">
73
+ <div class="pane-header">
74
+ <h2>Output</h2>
75
+ <div class="header-controls">
76
+ <div class="control-group">
77
+ <span class="control-label">Auto Rerender</span>
78
+ <label class="switch">
79
+ <input type="checkbox" id="auto-rerender-toggle" checked>
80
+ <span class="slider"></span>
81
+ </label>
82
+ </div>
83
+ <button class="rerender-btn" id="manual-rerender" disabled>Rerender</button>
84
+ </div>
85
+ </div>
86
+ <div class="output-content">
87
+ <pre id="output"></pre>
88
+ <div id="markdown-output" class="markdown-content" style="display: none;"></div>
89
+ </div>
90
+ <div class="pane-footer">
91
+ <div class="footer-controls-left">
92
+ <div class="control-group">
93
+ <span class="control-label">Markdown</span>
94
+ <label class="switch">
95
+ <input type="checkbox" id="markdown-toggle">
96
+ <span class="slider"></span>
97
+ </label>
98
+ </div>
99
+ <div class="control-group">
100
+ <span class="control-label">Mermaid</span>
101
+ <label class="switch">
102
+ <input type="checkbox" id="mermaid-toggle">
103
+ <span class="slider"></span>
104
+ </label>
105
+ </div>
106
+ <div class="control-group">
107
+ <span class="control-label">Whitespace</span>
108
+ <label class="switch">
109
+ <input type="checkbox" id="show-whitespace-toggle">
110
+ <span class="slider"></span>
111
+ </label>
112
+ </div>
113
+ </div>
114
+ <div class="footer-controls-right">
115
+ <button class="header-btn" id="copy-output-btn">Copy Output</button>
116
+ </div>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <script src="script.js"></script>
123
+
124
+ </body>
125
+ </html>