-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
156 lines (155 loc) · 5.3 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
<!DOCTYPE html>
<html>
<head>
<title>Overcast | Free secure internet chat</title>
<link href="../icon.png" rel="icon">
<link href="./style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free, secure peer-to-peer internet chat">
</head>
<body>
<nav class="transparent">
<a href="./" class="logo"><img src="./logo-nav.png"></a>
<div class="right">
<ul class="mobile-nav">
<li class="dropdown">
<!-- Will change later -->
<a href="#!">
<svg class="menu-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="menu-2" fill="#ffffff"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><circle cx="4" cy="12" r="1"/><rect x="7" y="11" width="14" height="2" rx=".94" ry=".94"/><rect x="3" y="16" width="18" height="2" rx=".94" ry=".94"/><rect x="3" y="6" width="18" height="2" rx=".94" ry=".94"/></g></g>
</svg></a>
<div class="dropdown-content">
<ul>
<li>
<a href="./help">Help</a>
</li>
<li>
<a href="#!">Community</a>
<ul>
<li>
<a href="./community-server">Community Server</a>
</li>
<li>
<a href="https://github.com/overcastchat">Overcast on Github</a>
</li>
<li>
<a href="https://github.com/overcastchat/translations">Translations</a>
</li>
</ul>
</li>
<li>
<a href="https://github.com/overcastchat/overcast/releases">Download</a>
</li>
</ul>
</div>
</li>
</ul>
<ul class="desktop-md-nav">
<li>
<a href="./help">Help</a>
</li>
<li class="dropdown">
<a href="#!">Community</a>
<div class="dropdown-content">
<ul>
<li>
<a href="./community-server">Community Server</a>
</li>
<li>
<a href="https://github.com/overcastchat">Overcast on Github</a>
</li>
<li>
<a href="https://github.com/overcastchat/translations">Translations</a>
</li>
</ul>
</div>
</li>
<li>
<a class="button" href="https://github.com/overcastchat/overcast/releases">Download</a>
</li>
</ul>
</div>
</nav>
<header>
<h1>Overcast</h1>
<p class="tagline">Free, secure peer-to-peer internet chat</p>
<img src="./chat.PNG">
</header>
<section>
<div class="container">
<h2>Why Overcast?</h2>
<div class="inline">
<div>
<img class="landing-icons" src="landing-icons/secure.svg">
<h3>Secure</h3>
<p>Since Overcast uses peer-to-peer, no chat data ever goes to the server. And with the app, you can even start your own server.</p>
</div>
<div>
<img class="landing-icons" src="landing-icons/free.svg">
<h3>Free</h3>
<p>Overcast is, and always will be free. And it's open surce too, check it out on Github!</p>
</div>
<div>
<img class="landing-icons" src="landing-icons/no-account.svg">
<h3>No Accounts</h3>
<p>You only need the app to create servers. Other people can go to your server's link, and chat from a web browser*.</p>
</div>
<div>
<img class="landing-icons" src="landing-icons/customisable.svg">
<h3>Customisable</h3>
<p>6 different themes to choose from. Custom themes coming soon!.</p>
</div>
</div>
<p>*Web chat is only supported in Chrome. In Firefox, messages can be recieved but not sent.</p>
</div>
</section>
<section class="dark">
<div class="container">
<h3>Ready to try it?</h3>
<a class="button" href="https://github.com/overcastchat/overcast/releases">Download Overcast</a>
<p>Version 0.0.1 | <a href="https://github.com/overcastchat/overcast/releases">Changelog</a></p>
</div>
</section>
<section>
<div class="container">
<h3>Contribute to Overcast</h3>
<p>Overcast is made by people like you.</p>
<p>You can help us build, debug, and translate Overcast!</p>
<div class="button-bar">
<a class="button" href="https://github.com/overcastchat">Overcast on Github</a>
<a href="https://github.com/overcastchat/translations" class="button">Translate Overcast</a>
</div>
</div>
</section>
<footer>
<ul class="right">
<li>
<a href="https://github.com/overcastchat/overcast/releases">Download</a>
</li>
<li>
<a href="./help">Help Center</a>
</li>
<li>
<a href="https://github.com/overcastchat/translations">Translation</a>
</li>
<li>
<a href="./community-server">Community Server</a>
</li>
<li>
<a href="https://github.com/overcastchat">Github</a>
</li>
</ul>
<p class="right">Brought to you by <a href="https://github.com/overcastchat/overcast/graphs/contributors">the Overcast contributers</a>. Powered by Electron and PeerJS. Landing page icons (partly modified) by <a href="https://tilda.cc">Tilda</a>.</p>
</footer>
<script>
var defaultNavClass = document.querySelector("nav").className;
window.addEventListener("scroll", function() {
if (window.scrollY > 10) {
document.querySelector("nav").className = "scrolled";
}
else {
document.querySelector("nav").className = defaultNavClass;
}
});
</script>
</body>
</html>