-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
176 lines (163 loc) · 8.82 KB
/
index.html
File metadata and controls
176 lines (163 loc) · 8.82 KB
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP Portfolio | Paras Gupta</title>
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://parasgupta-bca.github.io/PHP-Programs/">
<meta property="og:title" content="PHP Portfolio | Paras Gupta">
<meta property="og:description"
content="Interactive PHP Code Repository & Portfolio. Browse, run, and explore PHP programs directly in your browser.">
<meta property="og:image" content="https://parasgupta-bca.github.io/PHP-Programs/og-image.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://parasgupta-bca.github.io/PHP-Programs/">
<meta property="twitter:title" content="PHP Portfolio | Paras Gupta">
<meta property="twitter:description"
content="Interactive PHP Code Repository & Portfolio. Browse, run, and explore PHP programs directly in your browser.">
<meta property="twitter:image" content="https://parasgupta-bca.github.io/PHP-Programs/og-image.png">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
rel="stylesheet">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
<link rel="manifest" href="favicon_io/site.webmanifest">
<link rel="icon" href="favicon_io/favicon.ico">
<!-- Ionicons -->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<!-- PrismJS for Syntax Highlighting -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app-container">
<div class="sidebar-overlay" id="sidebar-overlay"></div>
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-header">
<div class="logo">
<ion-icon name="logo-github"></ion-icon>
<span>PHP Repos</span>
</div>
<p class="subtitle">@ParasGupta-BCA</p>
</div>
<div class="file-list-container">
<div
style="display: flex; justify-content: space-between; align-items: center; padding: 0 20px 10px 25px;">
<h3 style="padding: 0;">Explorer</h3>
<button id="refresh-files" class="icon-btn" title="Refresh File List">
<ion-icon name="refresh-outline"></ion-icon>
</button>
</div>
<!-- Search Bar -->
<div class="search-wrapper">
<div class="search-box">
<ion-icon name="search-outline"></ion-icon>
<input type="text" id="file-search" placeholder="Search programs..." autocomplete="off">
<button id="clear-search" class="clear-btn" title="Clear search" style="display: none;">
<ion-icon name="close-circle"></ion-icon>
</button>
</div>
</div>
<ul id="file-list" class="file-list">
<!-- Files will be injected here -->
<div class="loading-spinner">
<div class="spinner"></div>
</div>
</ul>
</div>
<div class="sidebar-footer">
<a href="https://github.com/ParasGupta-BCA/PHP-Programs" target="_blank" class="github-link">
<ion-icon name="logo-github"></ion-icon> Open Repository
</a>
<p class="copyright">
Made with <ion-icon name="heart" class="heart-icon"></ion-icon> by <a
href="https://github.com/ParasGupta-BCA" target="_blank">Paras Gupta</a>
</p>
</div>
</aside>
<!-- Main Content -->
<main class="main-editor">
<!-- Top Bar -->
<div class="top-bar">
<button id="sidebar-toggle" class="icon-btn sidebar-toggle">
<ion-icon name="menu-outline"></ion-icon>
</button>
<div class="current-file">
<ion-icon name="document-text-outline"></ion-icon>
<span id="current-filename">Select a file to view</span>
</div>
<div class="actions">
<button id="copy-btn" class="icon-btn" title="Copy Code" disabled style="margin-right: 5px;">
<ion-icon name="copy-outline"></ion-icon>
</button>
<button id="run-btn" class="btn btn-primary" disabled>
<ion-icon name="play"></ion-icon> Run Code
</button>
<span class="badge">PHP 8.2</span>
</div>
</div>
<!-- Code Editor Area -->
<div class="editor-container" id="editor-container">
<div class="zoom-controls" style="position: sticky; top: 15px; right: 15px; float: right; display: flex; align-items: center; gap: 8px; background: rgba(22, 27, 34, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 4px 10px; border-radius: 20px; border: 1px solid var(--glass-border); box-shadow: var(--shadow-md); z-index: 5; margin-left: 10px; margin-bottom: 10px;">
<button id="zoom-out-btn" class="icon-btn" title="Zoom Out" disabled style="padding: 2px;">
<ion-icon name="remove-outline"></ion-icon>
</button>
<span id="zoom-level" style="font-size: 0.75rem; font-family: var(--font-mono); color: var(--text-main); min-width: 35px; text-align: center;">100%</span>
<button id="zoom-in-btn" class="icon-btn" title="Zoom In" disabled style="padding: 2px;">
<ion-icon name="add-outline"></ion-icon>
</button>
</div>
<pre><code id="code-display" class="language-php">// Select a file from the sidebar to view code...</code></pre>
</div>
<!-- Resizer Handle -->
<div id="resizer" class="resizer">
<div class="resizer-handle"></div>
</div>
<!-- Terminal/Output Area -->
<div class="terminal-container" id="terminal-container">
<div class="terminal-header">
<div class="window-controls">
<span class="dot red"></span>
<span class="dot yellow"></span>
<span class="dot green"></span>
</div>
<span class="terminal-title"><ion-icon name="terminal-outline"></ion-icon> Terminal Output</span>
<button id="clear-console" class="icon-btn" title="Clear Console"><ion-icon
name="trash-outline"></ion-icon></button>
</div>
<div class="terminal-body">
<iframe id="output-frame" title="Output" sandbox="allow-scripts allow-same-origin"></iframe>
</div>
</div>
</main>
</div>
<!-- Prism JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup-templating.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-php.min.js"></script>
<script src="script.js?v=2.1"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js')
.then((registration) => {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
})
.catch((error) => {
console.error('ServiceWorker registration failed: ', error);
});
});
}
</script>
</body>
</html>