File size: 8,040 Bytes
d03c1cb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feature Catalog - JCode Evolution Tracker</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-violet-900">
    <custom-navbar></custom-navbar>
    
    <main class="container mx-auto px-4 py-8">
        <div class="text-center mb-12">
            <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">
            Feature Catalog
            </h1>
            <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                Comprehensive overview of all major features implemented in JCode Visual Builder
            </p>
        </div>

        <!-- Feature Categories -->
        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
            <!-- Core Development -->
            <div class="feature-card bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">
                <div class="flex items-center gap-3 mb-4">
                    <i data-feather="code" class="text-primary"></i>
                    <h2 class="text-xl font-semibold text-white">Core Development</h2>
                </div>
                <ul class="space-y-3 text-gray-300">
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Visual Debugger
                    </li>
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Variable Browser
                    </li>
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Expression Builder
                    </li>
                </ul>
            </div>

            <!-- File System -->
            <div class="feature-card bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">
                <div class="flex items-center gap-3 mb-4">
                    <i data-feather="folder" class="text-secondary"></i>
                    <h2 class="text-xl font-semibold text-white">File System</h2>
                </div>
                <ul class="space-y-3 text-gray-300">
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Hierarchical File Browser
                    </li>
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Text Editor
                    </li>
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Drag & Drop File Management
                    </li>
                </ul>
            </div>

            <!-- UI/UX -->
            <div class="feature-card bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">
                <div class="flex items-center gap-3 mb-4">
                    <i data-feather="layout" class="text-purple-400"></i>
                    <h2 class="text-xl font-semibold text-white">UI/UX Enhancements</h2>
                </div>
                <ul class="space-y-3 text-gray-300">
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Dark Theme
                    </li>
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Tabbed Interface
                    </li>
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Color-coded Commands
                    </li>
                </ul>
            </div>

            <!-- Utility Blocks -->
            <div class="feature-card bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">
                <div class="flex items-center gap-3 mb-4">
                    <i data-feather="tool" class="text-orange-400"></i>
                    <h2 class="text-xl font-semibold text-white">Utility Blocks</h2>
                </div>
                <ul class="space-y-3 text-gray-300">
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        String Operations
                    </li>
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Array Manipulation
                    </li>
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Math Functions
                    </li>
                </ul>
            </div>

            <!-- Advanced Features -->
            <div class="feature-card bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">
                <div class="flex items-center gap-3 mb-4">
                    <i data-feather="zap" class="text-yellow-400"></i>
                    <h2 class="text-xl font-semibold text-white">Advanced Features</h2>
                </div>
                <ul class="space-y-3 text-gray-300">
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Function Call Graphs
                    </li>
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Comment Blocks
                    </li>
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Modular Programming
                    </li>
                </ul>
            </div>

            <!-- Bug Fixes -->
            <div class="feature-card bg-white/10 backdrop-blur-lg rounded-xl p-6 border border-white/20">
                <div class="flex items-center gap-3 mb-4">
                    <i data-feather="shield" class="text-red-400"></i>
                    <h2 class="text-xl font-semibold text-white">Bug Fixes</h2>
                </div>
                <ul class="space-y-3 text-gray-300">
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Scope Management
                    </li>
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Variable Handling
                    </li>
                    <li class="flex items-center gap-2">
                        <i data-feather="check" class="text-green-400 w-4 h-4"></i>
                        Expression Evaluation
                    </li>
                </ul>
            </div>
        </div>
    </main>

    <custom-footer></custom-footer>

    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script>feather.replace();</script>
</body>
</html>