flutter-code-viewer-web/index.html at main · Ritesh-9004/flutter-code-viewer-web · 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
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Flutter Code Viewer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description"
        content="A lightweight web-based Flutter code viewer for quickly inspecting project structure and code files with zero setup." />

    <meta name="author" content="Ritesh" />
    <meta name="keywords" content="flutter project viewer, flutter code viewer web, dart code viewer, online flutter IDE, view flutter code, flutter web viewer, flutter code explorer, no install flutter viewer, flutter project online view (readonly)" />

    <meta name="theme-color" content="#1e1e1e" />

    <!-- Prism.js: Syntax Highlighting -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-dart.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-kotlin.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-groovy.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"
        defer></script>

    <!-- Markdown rendering -->
    <script src="https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js" defer></script>
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css" />

    <!-- Devicon icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@master/devicon.min.css" />

    <!-- Font Awesome & Flaticon UIcons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
    <link rel="stylesheet"
        href="https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css" />
    <link rel="stylesheet"
        href="https://cdn-uicons.flaticon.com/uicons-regular-straight/css/uicons-regular-straight.css" />
    <link rel="stylesheet" href="https://cdn-uicons.flaticon.com/uicons-bold-rounded/css/uicons-bold-rounded.css" />

    <link rel="stylesheet" href="https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css" />

    <link rel="preconnect" href="https://cdn-uicons.flaticon.com">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">

    <!-- Excel file support -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js" defer></script>

    <!--  custom CSS and viewer logic -->
    <link rel="stylesheet" href="style.css" />
    <script src="viewer.js" defer></script>

<body>
    <!-- Ribbon bar -->
    <div id="ribbon">
        <!-- Left tabs -->
        <div id="ribbon-left">
            <div id="toggleExplorer" class="tab" onclick="toggleSidebar()" title="Show/Hide Sidebar">
                <i class="fas fa-bars"></i>
            </div>

            <div class="tab dropdown">File
                <div class="menu">
                    <div onclick="pickFiles()">Open Project Folder</div>
                    <div onclick="closeFolder()"> Close Folder</div>

                </div>
            </div>
            <!--View tab-->
            <div class="tab dropdown">View
                <div class="menu">
                    <div onclick="increaseFont()"> Zoom In</div>
                    <div onclick="decreaseFont()">Zoom Out</div>
                    <div onclick="toggleSidebar()"> Toggle Sidebar</div>
                    <div onclick="toggleLineNumbers()"> Toggle Line Numbers</div>

                </div>
            </div>
            <!--GO Tab-->
            <div class="tab dropdown">Go
                <div class="menu">
                    <div onclick="showGoToFileModal()">Go to File...</div>
                    <div onclick="showGoToLineModal()">Go to Line...</div>
                </div>
            </div>

            <!-- Go to File (Modal) -->
            <div id="goToFileModal" class="modal">
                <div class="modal-content">
                    <input type="text" id="goToFileInput" placeholder="Type file name..." autofocus spellcheck="false"
                        autocomplete="off" />
                    <div id="fileSuggestions"></div>
                </div>
            </div>
            <!--Go to line Modal-->
            <div id="goToLineModal" class="modal">
                <div class="modal-content">
                    <input type="number" id="goToLineInput" placeholder="Enter line number" autofocus spellcheck="false"
                        autocomplete="off" />
                </div>
            </div>

        </div>


        <!-- Right-aligned tools -->
        <div id="ribbon-tools">
            <!--Search Box-->
            <div id="searchBoxContainer" style="margin-left: auto; padding-right: 10px;">
                <input id="searchInput" type="text" placeholder="Search..." oninput="handleSearch()" autocomplete="off"
                    spellcheck="false" style="padding: 4px 8px; border-radius: 4px; border: none;" />
                <button onclick="highlightPrevMatch()" title="Previous Match">
                    <i class="fi fi-rr-arrow-small-left"></i>
                </button>
                <button onclick="highlightNextMatch()" title="Next Match">
                    <i class="fi fi-rr-arrow-small-right"></i>
                </button>
            </div>
            <button onclick="increaseFont()" title="Zoom In">
                <i class="fi fi-rr-plus"></i>
            </button>
            <button onclick="decreaseFont()" title="Zoom Out">
                <i class="fi fi-sr-minus"></i>
            </button>
            <button onclick="resetFont()" title="Reset Font">
                <i class="fi fi-rr-refresh"></i>
            </button>

        </div>

    </div>

    <!-- Main container -->
    <div id="container">
        <div id="sidebar">
            <div id="fileList"></div>
        </div>

        <div id="main">
            <div id="header">Flutter Code Viewer</div>
            <div id="viewer">
                <div class="placeholder">
                    <img src="https://cdn-icons-png.flaticon.com/512/2991/2991106.png" class="placeholder-icon"
                        alt="Folder icon" />
                    <p>Load a project folder to begin.</p>
                </div>
            </div>
        </div>
    </div>
    <!--Global Search BOx(modal)-->
    <div id="globalSearchModal" class="modal" style="display: none;">
        <div class="modal-content">
            <input type="text" id="globalSearchInput" placeholder="Global Search..." spellcheck="false"
                autocomplete="off" />


            <div id="globalSearchResults"></div>
        </div>
    </div>
<div id="loadingSpinner" class="spinner-overlay" style="display: none;">
  <div class="spinner" role="status" aria-label="Loading"></div>
  <div id="loadingProgress">Loading... 0%</div>
</div>

</body>


</html>