-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
253 lines (216 loc) · 11.4 KB
/
index.html
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
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!DOCTYPE html>
<html lang="en">
<head>
<!-- General Meta Data Stuff -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#000000">
<meta name="msapplication-TileColor" content="#000000">
<meta property="og:type" content="website"/>
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="en_GB">
<meta property="og:locale:alternate" content="de_DE">
<!-- Title -->
<title>Codeface</title>
<meta name="twitter:title" content="Codeface"/>
<meta property="og:title" content="Codeface"/>
<meta property="og:site_name" content="Codeface"/>
<!-- Author -->
<meta name="author" content="Sebastian Fichtner"/>
<!-- Description -->
<meta name="description" content="See the Architecture of any Codebase"/>
<meta property="og:description" content="See the Architecture of any Codebase"/>
<!-- Keywords -->
<meta name="keywords" content="macOS, Swift, software architecture, app, codeface, codebase, code analysis, static code analysis, architecture analysis, software analytics"/>
<!-- Canonical Link -->
<link rel="canonical" href="https://codeface.io/index.html">
<meta property="og:url" content="https://codeface.io/index.html"/>
<!-- Image -->
<link rel="image_src" href="https://codeface.io/app/icon_1024.png">
<meta property="og:image" content="https://codeface.io/app/icon_1024.png"/>
<meta property="og:image:type" content="image/png"/>
<!-- CSS Files -->
<link rel="stylesheet" href="codeface.css">
<link rel="stylesheet" href="app/page_style.css">
<!-- Favicon (made with https://favicon.io) -->
<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">
</head>
<body>
<section id="codeface-navbar" class="codeface-bar">
<div>
<a id="logo" class="clickable-image" href="index.html">
<img style="height:30px" src="favicon_io/android-chrome-512x512.png"/>
</a>
<a class="left subtle-link" href="blog/index.html">Blog</a>
<a class="left subtle-link" href="documentation/index.html">Documentation</a>
<a class="left subtle-link hide-on-narrow-screens" href="index.html#contact">Contact</a>
<a id="call-to-action" class="hide-on-narrow-screens"
href="https://apps.apple.com/app/codeface/id1578175415"
target="_blank">
<img style="width:180px"
src="app/App_Store_Badge.svg"
title="Download Codeface for free from the Mac App Store"/>
</a>
</div>
</section>
<section>
<div>
<h1 style="margin-bottom: 40px">
<span>
<a href="https://apps.apple.com/app/codeface/id1578175415" target="_blank">
<img style="max-width:100px;margin-right:-5px"
src="app/icon_1024.png"
title="Codeface™ App"/></a>
<span style="vertical-align:34%">Codeface™</span>
</span>
</h1>
<h2>
See <nobr>the architecture</nobr> <nobr>of any codebase</nobr>
</h2>
<video style="width:100%;margin-bottom:60px;margin-top:10px"
controls
autoplay
loop>
<source src="app/videos/codeface_preview_cropped.mp4" type="video/mp4">
</video>
<div style="text-align:center;">
<a href="https://apps.apple.com/app/codeface/id1578175415"
target="_blank">
<img style="height:68px;display:inline-block;margin-bottom:-10px"
src="app/App_Store_Badge.svg"
title="Download Codeface™ for free from the Mac App Store">
</img>
</a>
</div>
</div>
</section>
<section id="vision">
<div>
<h1>Vision</h1>
<h2>
Understand, improve <nobr>and monitor</nobr> <nobr>your code</nobr>
</h2>
<a href="javascript:toggleLightMode('screen-shot-1')">
<div class="clickable-image" id="screen-shot-1" style="margin-bottom:10px">
<div style="padding-top:67.0608%;width:100%;"></div>
</div>
</a>
<div class="codeface-3-columns">
<div>
<h3>What?</h3>
Get a grip on any software project by visualizing its internal composition, dependencies and quality metrics.
<br><br>
Semantic zoom allows you to inspect all scopes at all levels – maintaining an overview as well as diving deep.
<br><br>
Topological ordering allows you to read a codebase along its control flow – from big picture to details.
</div>
<div>
<h3>Why?</h3>
Being able to switch from reading code to seeing architecture helps making better software faster.
<br><br>
You understand legacy code, notice red flags, onboard quickly, automate documentation, stay motivated, etc.
<br><br>
We ♡ software architecture since 1993 and know how communication and quality require visualization.
</div>
<div>
<h3>The Future</h3>
This journey is just beginning. There are loads of ideas and development directions to evolve Codeface™.
<br><br>
Imagine architectural suggestions, more layouts and metrics, real-time updates, a web dashboard, etc.
<br><br>
You may shape Codeface™ with your own big ideas and feedback. Just drop us a line: <a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
</section>
<section id="features">
<div>
<h1>Search</h1>
<h2>
Filter everything <nobr>by a search term</nobr>
</h2>
<a href="javascript:toggleLightMode('screen-shot-2')">
<div class="clickable-image" id="screen-shot-2" style="margin-bottom:20px">
<div style="padding-top:67.0608%;width:100%;"></div>
</div>
</a>
<h2>
And zone in on <nobr>the matching parts</nobr>
</h2>
<a href="javascript:toggleLightMode('screen-shot-3')">
<div class="clickable-image" id="screen-shot-3" style="margin-bottom:-40px">
<div style="padding-top:67.0608%;width:100%;"></div>
</div>
</a>
</div>
</section>
<section>
<div>
<h1>LSPService</h1>
<h2>
Analyze projects <nobr>of all languages</nobr> <nobr>via the <a href="https://microsoft.github.io/language-server-protocol/">LSP</a></nobr>
</h2>
<div class="codeface-3-columns">
<div>
<h3>1. Get LSPService</h3>
Download <a href="lspservice/index.html">LSPService</a>. It's a free open-source webservice that runs locally and empowers Codeface™ to understand any codebase.
</div>
<div>
<h3>2. Add Your Language</h3>
Add language support if you need more than Swift. LSPService just needs to know how to launch an <nobr><a href="https://langserver.org">LSP server</a></nobr> for a given language.
</div>
<div>
<h3>3. Restart Codeface™</h3>
Restart LSPService after its setup. Then restart Codeface™ and load a project. It will automatically detect LSPService and utilize it.
</div>
</div>
</div>
</section>
<section id="contact">
<div style="text-align:center;">
<a onclick="ga('send', 'event', 'button', 'click', 'top section');"
href="https://apps.apple.com/app/codeface/id1578175415"
target="_blank">
<img style="height:68px;display:inline-block;"
src="app/App_Store_Badge.svg"
title="Download Codeface™ for free from the Mac App Store"></a>
<br><br>
<h2 style="margin-bottom:0px;">Questions? Ideas? Bugs? -> <a href="mailto:[email protected]"><nobr>hello @ codeface.io</nobr></a></h2>
</div>
</section>
<section id="codeface-bottom-bar" class="codeface-bar">
<div>
<div class="bottom-bar-text-element" style="text-align: left;">
<a href="privacy-policy/index.html">
Codeface Privacy Policy
</a>
<span> • </span>
<a href="imprint/index.html">
Imprint
</a>
</div>
<div style="text-align: center; padding-top: 15px; padding-bottom: 15px">
<a href="https://github.com/codeface-io" target="_blank" style="display:block;height:32px">
<img src="social-icons/github.svg" style="width:32px;"/>
<span style="vertical-align:32%; margin-left: 5px">GitHub</span>
</a>
</div>
<div class="bottom-bar-text-element" style="text-align: right;">
Copyright © 2022 Sebastian Fichtner
</div>
</div>
</section>
</body>
<!-- Load scripts at the very end for performance -->
<script>
// Toggle Screenshots Between Light and Dark
function toggleLightMode(idString)
{
document.getElementById(idString).classList.toggle("light-mode");
//console.log(document.getElementById("screen-shot-1").classList);
}
</script>
</html>