Changeset View
Changeset View
Standalone View
Standalone View
plasma-desktop-new.php
- This file was added.
1 | <?php | ||||
---|---|---|---|---|---|
2 | require('aether/config.php'); | ||||
3 | | ||||
4 | $pageConfig = array_merge($pageConfig, [ | ||||
5 | 'title' => "Plasma", | ||||
6 | 'section' => 'products', | ||||
7 | 'cssFile' => 'content/plasma-desktop/portal-new.css?version=0', | ||||
8 | 'description' => "Plasma is KDE's desktop environment. Simple by default, powerful when needed.", | ||||
9 | ]); | ||||
10 | | ||||
11 | require('aether/header.php'); | ||||
12 | | ||||
13 | ?> | ||||
14 | <main> | ||||
15 | <section class="container"> | ||||
16 | <div class="text-center"> | ||||
17 | <h1>Plasma is a Linux desktop</h1> | ||||
18 | <img src="/images/plasma.svg" width="64" height="64" class="mt-3 mb-3"> | ||||
19 | <p>Use Plasma to surf the web; keep in touch with colleagues, friends and family; manage your files, enjoy music and videos; and get creative and productive at work. Do it all in a beautiful environment that adapts to your needs, and with the safety, privacy-protection and peace of mind that the best Free Open Source Software has to offer.</p> | ||||
20 | <a href="https://community.kde.org/Distributions" class="learn-more breeze-button">Get Plasma here.</a><br /> | ||||
21 | </div> | ||||
22 | <img src="/products/plasma.png" alt="Plasma desktop inside a laptop." class="img-fluid mt-3 mb-3 pl-lg-5 pr-lg-5"> | ||||
23 | </section> | ||||
24 | | ||||
25 | <section id="plasma-last-release"> | ||||
26 | <div class="breeze-window"> | ||||
27 | <div class="kwin-shadow"> | ||||
28 | <div class="headerbar"> | ||||
29 | About Plasma 5.16 | ||||
30 | <img src="/content/plasma-desktop/window-minimize.svg" class="window-minimize" /> | ||||
31 | <img src="/content/plasma-desktop/window-maximize.svg" class="window-maximize" /> | ||||
32 | <img src="/content/plasma-desktop/window-close.svg" class="window-close" /> | ||||
33 | </div> | ||||
34 | <div class="view"> | ||||
35 | <h2>Latest release - Plasma 5.16</h2> | ||||
36 | <p>Featuring a improved login screen and lock screen, a completely rewritten notification system.</p> | ||||
37 | <a href="/announcements/plasma5.16.0" class="learn-more breeze-button">See announcements</a><br /> | ||||
38 | </div> | ||||
39 | </div> | ||||
40 | </div> | ||||
41 | </section> | ||||
42 | | ||||
43 | <section id="simple-by-default"> | ||||
44 | <div class="container"> | ||||
45 | <h2>Simple by default</h2> | ||||
46 | <p>Plasma was designed to be as easy as posible to be used. No need to learn shortcuts to be productive.</p> | ||||
47 | <ul class="nav justify-content-center nav-features" role="tablist"> | ||||
48 | <li class="nav-item"> | ||||
49 | <a class="nav-link active" href="#simple-by-default-launcher" data-toggle="tab" aria-selected="true" aria-controls="launcher" id="simple-by-default-launcher-control">Launcher</a> | ||||
50 | </li> | ||||
51 | <li class="nav-item"> | ||||
52 | <a class="nav-link" href="#simple-by-default-tray" data-toggle="tab" aria-selected="true" aria-controls="plasma widgets" id="simple-by-default-tray-control">System Tray</a> | ||||
53 | </li> | ||||
54 | <li class="nav-item"> | ||||
55 | <a class="nav-link" href="#simple-by-default-discover" data-toggle="tab" aria-selected="true" aria-controls="plasma widget" id="simple-by-default-discover-control">Discover</a> | ||||
56 | </li> | ||||
57 | </ul> | ||||
58 | </div> | ||||
59 | <div class="tab-content tab-content-feature pl-4 pr-4"> | ||||
60 | <div class="tab-pane active" id="simple-by-default-launcher" role="tabpanel" aria-labelledby="simple-by-default-launcher-control"> | ||||
61 | <img src="/products/plasma.png" alt="Plasma desktop inside a laptop." class="img-fluid mb-3"> | ||||
62 | <div class="container"> | ||||
63 | Start an application; bookmark favorite applications; .... .... Plasma Launcher .... ..... ... .. . | ||||
64 | </div> | ||||
65 | </div> | ||||
66 | <div class="tab-pane" id="simple-by-default-tray" role="tabpanel" aria-labelledby="simple-by-default-tray-control"> | ||||
67 | <div class="laptop-with-overlay"> | ||||
68 | <img class="laptop img-fluid mb-3" src="/content/plasma-desktop/laptop.png" alt="empty laptop with an overlay"> | ||||
69 | <div class="laptop-overlay"> | ||||
70 | <video class="img-fluid mb-3" src="/content/plasma-desktop/discover_1280x900_1500k.webm"></video> | ||||
71 | </div> | ||||
72 | </div> | ||||
73 | <div class="container"> | ||||
74 | <div class="text-center"> | ||||
75 | <button class="breeze-button d-none">Replay</button><br /> | ||||
76 | </div> | ||||
77 | Connect to your WIFI network; change the volume; switch to the next song; open an your usb stick. All these and a lot more directly from the system tray. | ||||
78 | </div> | ||||
79 | </div> | ||||
80 | <div class="tab-pane" id="simple-by-default-discover" role="tabpanel" aria-labelledby="Widget"> | ||||
81 | <div class="laptop-with-overlay"> | ||||
82 | <img class="laptop img-fluid mb-3" src="/content/plasma-desktop/laptop.png" alt="empty laptop with an overlay"> | ||||
83 | <div class="laptop-overlay"> | ||||
84 | <video class="img-fluid mb-3"> | ||||
85 | <source src="/content/plasma-desktop/discover_1280x900_1500k.webm" /> | ||||
86 | </video> | ||||
87 | </div> | ||||
88 | </div> | ||||
89 | <div class="container"> | ||||
90 | <div class="text-center"> | ||||
91 | <button class="breeze-button d-none">Replay</button><br /> | ||||
92 | </div> | ||||
93 | Discover lets you manage the applications installed in your computer. Updating, removing or installing an application is only one click away. Supports <a href="https://flatpak.org/">Flatpak</a>, <a href="https://snapcraft.io/store">SnapStore</a> and the application available in your Linux distribution. | ||||
94 | </div> | ||||
95 | </div> | ||||
96 | </div> | ||||
97 | </section> | ||||
98 | | ||||
99 | <section id="powerful-when-needed"> | ||||
100 | <div class="container"> | ||||
101 | <h2>Powerful when needed</h2> | ||||
102 | <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> | ||||
103 | <ul class="nav justify-content-center nav-features" role="tablist"> | ||||
104 | <li class="nav-item"> | ||||
105 | <a class="nav-link active" href="#simple-by-defaut-launcher" data-toggle="tab" aria-selected="true" aria-controls="launcher">KRunner</a> | ||||
106 | </li> | ||||
107 | <li class="nav-item"> | ||||
108 | <a class="nav-link" href="#simple-by-defaut-tray" data-toggle="tab" aria-selected="true" aria-controls="plasma widgets">System setting</a> | ||||
109 | </li> | ||||
110 | <li class="nav-item"> | ||||
111 | <a class="nav-link" href="#simple-by-defaut-" data-toggle="tab" aria-selected="true" aria-controls="plasma widget">?????????</a> | ||||
112 | </li> | ||||
113 | <li class="nav-item"> | ||||
114 | <a class="nav-link" href="#simple-by-defaut-" data-toggle="tab" aria-selected="true" aria-controls="plasma widget">?????????</a> | ||||
115 | </li> | ||||
116 | </ul> | ||||
117 | </div> | ||||
118 | <div class="tab-content tab-content-feature pl-4 pr-4"> | ||||
119 | <div class="tab-pane fade show active" id="simple-by-default-launcher" role="tabpanel" aria-labelledby="Launcher feature"> | ||||
120 | <img src="/content/plasma-desktop/laptop-red.png" alt="Plasma desktop inside a laptop." class="img-fluid mb-3"> | ||||
121 | <div class="container"> | ||||
122 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. | ||||
123 | </div> | ||||
124 | </div> | ||||
125 | </div> | ||||
126 | </section> | ||||
127 | | ||||
128 | <section id="plasma-configuration"> | ||||
129 | <div class="container"> | ||||
130 | <h2>Customizable</h2> | ||||
131 | <p>With Plasma the user is king. Not happy with the color, change it. Want to have the panel in the left border, move it.</p> | ||||
132 | <ul class="nav justify-content-center nav-features" role="tablist"> | ||||
133 | <li class="nav-item"> | ||||
134 | <a class="nav-link active" href="#plasma-configuration-dark" data-toggle="tab" aria-selected="true" aria-controls="launcher">Dark theme</a> | ||||
135 | </li> | ||||
136 | <li class="nav-item"> | ||||
137 | <a class="nav-link" href="#simple-by-defaut-tray" data-toggle="tab" aria-selected="true" aria-controls="plasma widgets">Latte Dock</a> | ||||
138 | </li> | ||||
139 | <li class="nav-item"> | ||||
140 | <a class="nav-link" href="#simple-by-defaut-" data-toggle="tab" aria-selected="true" aria-controls="plasma widget">Community extensions</a> | ||||
141 | </li> | ||||
142 | </ul> | ||||
143 | </div> | ||||
144 | <div class="tab-content tab-content-feature pl-4 pr-4"> | ||||
145 | <div class="tab-pane fade show active" id="simple-by-default-launcher" role="tabpanel" aria-labelledby="Launcher feature"> | ||||
146 | <div class="laptop-with-overlay"> | ||||
147 | <img class="laptop img-fluid mb-3" src="/content/plasma-desktop/laptop.png" alt="empty laptop with an overlay"> | ||||
148 | <div class="laptop-overlay"> | ||||
149 | <img class="img-fluid mb-3" src="/content/plasma-desktop/theme.png" /> | ||||
150 | </div> | ||||
151 | </div> | ||||
152 | <div class="container"> | ||||
153 | Want a dark theme ....... ...... . . .. | ||||
154 | </div> | ||||
155 | </div> | ||||
156 | </div> | ||||
157 | </section> | ||||
158 | | ||||
159 | <script> | ||||
160 | const tab_with_video = ['discover', 'tray']; | ||||
161 | | ||||
162 | // add autoplay for tabs video | ||||
163 | tab_with_video.forEach(function(tab) { | ||||
164 | const nav = document.getElementById(`simple-by-default-${tab}-control`); | ||||
165 | const video = document.querySelector(`#simple-by-default-${tab} video`); | ||||
166 | const button = document.querySelector(`#simple-by-default-${tab} button`); | ||||
167 | | ||||
168 | nav.addEventListener('click', function() { | ||||
169 | if (!button.classList.contains('d-none')) { | ||||
170 | button.classList.add('d-none'); | ||||
171 | } | ||||
172 | video.currentTime = 0; | ||||
173 | video.play(); | ||||
174 | }); | ||||
175 | | ||||
176 | video.addEventListener('ended', function() { | ||||
177 | if (button.classList.contains('d-none')) { | ||||
178 | button.classList.remove('d-none'); | ||||
179 | } | ||||
180 | }); | ||||
181 | | ||||
182 | button.addEventListener('click', function() { | ||||
183 | button.classList.add('d-none'); | ||||
184 | video.currentTime = 0; | ||||
185 | video.play(); | ||||
186 | }); | ||||
187 | }); | ||||
188 | | ||||
189 | /* | ||||
190 | let size_enum = Object.freeze({'small': '320x225_500k', "medium": '640x450_750k', 'large': '770x541_1000k'}) | ||||
191 | let size = size_enum.large; | ||||
192 | tab_with_video.forEach(function(tab) { | ||||
193 | const video_source = document.querySelector(`#simple-by-default-${tab} video source`); | ||||
194 | video_source.src = video_source.dataset.prefix + size + video_source.dataset.suffix; | ||||
195 | }); | ||||
196 | window.onresize = function() { | ||||
197 | window_width = window.innerWidth; | ||||
198 | let new_size = size; | ||||
199 | if (window_width < 768) { | ||||
200 | new_size = size_enum.small; | ||||
201 | } else if (window_width < 1020) { | ||||
202 | new_size = size_enum.medium; | ||||
203 | } else { | ||||
204 | new_size = size_enum.large; | ||||
205 | } | ||||
206 | if (size !== new_size) { | ||||
207 | size = new_size; | ||||
208 | // change video source | ||||
209 | tab_with_video.forEach(function(tab) { | ||||
210 | const video_source = document.querySelector(`#simple-by-default-${tab} video`); | ||||
211 | video_source.src = video_source.dataset.prefix + size + video_source.dataset.suffix; | ||||
212 | }); | ||||
213 | } | ||||
214 | }*/ | ||||
215 | | ||||
216 | </script> | ||||
217 | | ||||
218 | <?php | ||||
219 | require('aether/footer.php'); | ||||
220 | ?> |