pluto-landing/index.html at main · zeondev/pluto-landing · 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
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pluto</title>
    <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=Inter:wght@400;500;600&amp;display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <script>
      // loading indicator
      window.addEventListener("DOMContentLoaded", () => {
        const loader = document.createElement("div");
        loader.classList.add("loader");
        loader.innerHTML = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1114_2788)"><path d="M44.3563 24C46.3687 24 48.0283 22.3595 47.7239 20.3703C47.4328 18.4675 46.9131 16.6022 46.1731 14.8156C44.967 11.9038 43.1992 9.25804 40.9706 7.02944C38.742 4.80083 36.0962 3.033 33.1844 1.82689C30.2726 0.620778 27.1517 -1.37766e-07 24 0C20.8483 1.37766e-07 17.7274 0.620779 14.8156 1.82689C11.9038 3.033 9.25804 4.80083 7.02944 7.02944C4.80083 9.25804 3.033 11.9038 1.82689 14.8156C1.08686 16.6022 0.56719 18.4675 0.276061 20.3703C-0.0282817 22.3595 1.63132 24 3.64366 24C5.656 24 7.24768 22.3498 7.68294 20.3851C7.89306 19.4367 8.18597 18.5061 8.55949 17.6043C9.39938 15.5767 10.6304 13.7343 12.1823 12.1823C13.7343 10.6304 15.5767 9.39939 17.6043 8.55949C19.632 7.7196 21.8053 7.28732 24 7.28732C26.1947 7.28732 28.368 7.7196 30.3957 8.55949C32.4233 9.39939 34.2657 10.6304 35.8176 12.1823C37.3696 13.7343 38.6006 15.5767 39.4405 17.6043C39.814 18.5061 40.1069 19.4367 40.3171 20.3851C40.7523 22.3498 42.344 24 44.3563 24Z" fill="url(#paint0_linear_1114_2788)"/></g><defs><linearGradient id="paint0_linear_1114_2788" x1="0" y1="24" x2="48" y2="24" gradientUnits="userSpaceOnUse"><stop stop-opacity="0"/><stop offset="1" stop-color="white"/></linearGradient><clipPath id="clip0_1114_2788"><rect width="48" height="48" fill="white"/></clipPath></defs></svg>`;
        document.body.appendChild(loader);
        document.querySelector('meta[name="theme-color"]').remove();
      });
      window.addEventListener("load", () => {
        const loader = document.querySelector(".loader");
        loader.remove();
      });
    </script>
    <meta
      property="og:title"
      content="Pluto • The web OS that runs in your browser."
    />
    <meta
      property="og:description"
      content="Welcome to Pluto, a “web operating system” focused on productivity, security and privacy."
    />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="https://pluto.zeon.dev" />
    <meta
      property="og:image"
      content="https://pluto.zeon.dev/assets/images/banner.png"
    />
    <meta name="twitter:site" content="My Website" />
    <meta
      name="twitter:title"
      content="Pluto • The web OS that runs in your browser."
    />
    <meta
      name="twitter:description"
      content="Welcome to Pluto, a “web operating system” focused on productivity, security and privacy."
    />
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:image:src"
      content="https://pluto.zeon.dev/assets/images/banner.png"
    />
    <meta name="theme-color" content="#6c9dff" />
    <meta name="darkreader-lock" />
  </head>

  <body>
    <nav class="navbar">
      <div class="left">
        <a href class="logo">
          <em>pluto</em>
        </a>
      </div>
      <div class="right">
        <a href="/" class="selected">Home</a>
        <a href="/faq.html">FAQ</a>
        <a href="/browsertesting.html">Tester</a>
        <a href="https://pluto-app.zeon.dev">Try it</a>
      </div>
      <div class="menu-toggle">Toggle</div>
    </nav>
    <article class="sections-container">
      <section class="section">
        <div class="center">
          <h1 class="big">
            The <span class="t">web OS</span> that runs in your browser.
          </h1>
          <p class="semi-big">
            Welcome to Pluto, a &ldquo;web operating system&rdquo; focused on
            productivity, security and privacy.
          </p>
          <a href="https://pluto-app.zeon.dev" class="btn primary"
            >Get Started</a
          >
        </div>
      </section>
      <section class="section">
        <div class="mw">
          <h2 class="big">Simple setup</h2>
          <p class="semi-big">
            Pluto has a quick and simple out of box experience.
            <br />
            This will make your first experience with Pluto as smooth as
            possible.
          </p>
        </div>
        <img src="./assets/images/oobe.png" style="border-radius: 4px" />
      </section>
      <section class="section">
        <div class="mw">
          <h2 class="big">Full customization</h2>
          <p class="semi-big">
            Pluto is customizable to your needs.
            <br />
            You can change the look and feel of Pluto to match your preference.
          </p>
        </div>
        <img src="./assets/images/fullcustomization.png" />
      </section>
      <section class="section">
        <div class="mw">
          <h2 class="big">Privacy first</h2>
          <p class="semi-big">
            Pluto is designed with privacy in mind.
            <br />
            We do not track you or your data.
            <br />
            Your files stay all on-device and don't reach a cloud server.
          </p>
        </div>
        <img src="./assets/images/security.png" />
      </section>
      <section class="section">
        <div class="mw">
          <h2 class="big">Optional online service</h2>
          <p class="semi-big">
            Unlike our competitors, you don't need to log in to an account to
            use Pluto.
            <br />
            All of the features in first-party apps work without an account.
            <br />
          </p>
        </div>
        <img src="./assets/images/optionalaccount.png" />
        <span class="midsmall"
          >* Third party apps may require a logged in account to access more
          features.</span
        >
      </section>
      <section class="section">
        <div class="mw">
          <h2 class="big">Built for developers</h2>
          <p class="semi-big">
            Developers can easily make apps for Pluto in just minutes!
            <br />
            No need to memorize the APIs, there is built-in documentation for
            you!
          </p>
        </div>
        <img src="./assets/images/developers.png" />
      </section>
      <section class="section">
        <div class="mw">
          <h2 class="big" style="text-align: left">Testimonials</h2>
          <p class="semi-big" style="text-align: left">
            &ldquo;This is so awesome!&rdquo;
            <br />
            &ndash; Ayanbadin
            <br /><br />
            &ldquo;Looks great, runs great, very big future ahead!&rdquo;<br />&ndash;
            Charles Welland <br /><br />
            &ldquo;Really cool project, I like the UI and all the features it
            has.&rdquo;
            <br />&ndash; Zilth <br /><br />
            &ldquo;I've used Pluto for multiple of my projects, I've used them
            as software props when it comes to video projects. Developing an app
            is very easy - getting an idea from head to code is very neat as you
            do it in one environment only. I've once used just Pluto to listen
            to my favorite artists and code my next project - and it's a game
            changer not breaking the immersion of a system like this.&rdquo;
            <br />&ndash; SkySorcerer<br /><br />&ldquo;A nice and really fast
            open source web project.&rdquo;<br />&mdash; quintenvandamme
            <br /><br />
          </p>
        </div>
      </section>
      <section class="section">
        <div class="center">
          <h1 class="big">What are you waiting for?</h1>
          <p class="semi-big">Try out Pluto today!</p>
          <a href="https://pluto-app.zeon.dev" class="btn primary"
            >Get Started</a
          >
        </div>
      </section>
      <footer class="footer">
        <p class="semi-big">
          &copy; <a href="https://zeon.dev">zeon.dev</a> 2024 &mdash; All rights
          reserved.
        </p>
      </footer>
    </article>
  </body>
</html>