Commit 837ff6df authored by Arjun Thekoot Harisankar's avatar Arjun Thekoot Harisankar 💻

Added Liquid features to enable expansion of Home Page easily as and when New...

Added Liquid features to enable expansion of Home Page easily as and when New Features are added to KDE Connect
parent 9a8498ab
......@@ -2,8 +2,101 @@
layout: default
css-include: css/main.css
sorted: 1
features:
- class_name: feature music
h1_class: music
h2_class: music-desc
h1_content: Music. Control on Phone.
h2_content: >
Listenening to your favourite album on your Desktop? Now control it from your phone.
image1: assets/img/music.png
linkref: https://userbase.kde.org/KDEConnect#Multimedia_Control_Receiver
- class_name: feature ring
h1_class: notifications
h2_class: notifications-desc
h1_content: Phone notifications. On your PC. Reply.
h2_content: >
Want to get Phone notifications on your PC while working on that latest project? Got a message from mom and want to reply without picking up your phone. Do it all with Connect.
linkref: https://userbase.kde.org/KDEConnect#Multimedia_Control_Receiver
image1: assets/img/Notifications.png
- class_name: feature command dark
h1_class: command
h2_class: command-desc
h1_content: Commands on PC. Run from other devices.
h2_content: >
Want to shut down? Lock your keyboard or mice? Run pre-defined commands from
your connected device or make and run your own commands. Your wish.
linkref: https://userbase.kde.org/KDEConnect#Run_Commands
image1: assets/img/command.png
- class_name: feature browse dark
h1_class: browse
h2_class: browse-desc
h1_content: Files and Links. Shared between devices.
h2_content: >
Want to share that album with photos from latest family trip , birthday
party or share the link to a cool shopping offer? Now do it easily. Browse
your phone files too.
linkref: https://userbase.kde.org/KDEConnect#Share_and_Receive
image1: assets/img/files.png
- class_name: feature ring
h1_class: ring
h2_class: ring-desc
h1_content: Ring your Phone. Know your Battery.
h2_content: >
Forgot where you kept your phone? It happens to all of us. Ring it and find
where it is. Also check your phones battery level from your Desktop. How
cool is that?
linkref: https://userbase.kde.org/KDEConnect#Ring_My_Phone
image1: assets/img/ring.png
- class_name: feature more dark
h1_class: more
h2_class: more-desc
h1_content: Presentation Remote. Virtual Trackpad. More.
linkref: https://userbase.kde.org/KDEConnect#Virtual_Input
image1: assets/img/more.png
h2_content: >
Forgot your presentation remote but have an important presentation to do?
Want to use your phone as a trackpad? We all have been in these situations
too. Connect can help out.   
Boxes:
- class_name: product-in plasma
h3_content: Plasma Integration
h4_content: >
Control Content on Browser. Tabs.Youtube.More.
linkref: https://community.kde.org/Plasma/Browser_Integration
image1: assets/img/plasmaint.png
- class_name: product-in plugin dark
h3_content: Plugins
h4_content: >
Make your Own Plugins and Build. Power to You.
linkref: https://userbase.kde.org/KDEConnect#Available_Plugins
image1: assets/img/plugin.png
- class_name: product-in OpenVpn
h3_content: OpenVPN Support
h4_content: >
Left home and want to run a command? Or want to give a presenassets/img/wiki.png
linkref: https://community.kde.org/KDEConnect#Running_KDE_Connect_over_OpenVPN
image1: assets/img/ovpn.png
- class_name: product-in wiki
h3_content: Wiki. Everything you Need.
h4_content: >
Documentation for Everything.
linkref: https://community.kde.org/KDEConnect
image1: assets/img/wiki.png
---
<!-- To Expand this page add the new feature on top with required attributes. Also add the required css for each class. -->
<!--HTML-->
<!-- Hero of the page. -->
<section class="feature main dark">
<h1 class="connect">KDE Connect</h1>
<h2 class="connect-desc">
......@@ -23,100 +116,26 @@ sorted: 1
</div>
<img class="img-fluid" src="assets/img/hero_main.png" />
</section>
<section class="feature music">
<h1 class="music">Music. Control on Phone.</h1>
<h2 class="music-desc">
Listenening to your favourite album on your Desktop? Now control it from
your phone.
</h2>
<div>
<a href="https://userbase.kde.org/KDEConnect#Multimedia_Control_Receiver">
<button class="btn btn-primary btn-lg learn" type="button">
Learn More
</button>
</a>
</div>
<img class="img-fluid" src="assets/img/music.png" />
</section>
<section class="feature ring">
<h1 class="notifications">Phone notifications. On your PC. Reply.</h1>
<h2 class="notifications-desc">
Want to get Phone notifications on your PC while working on that latest
project? Got a message from mom and want to reply without picking up your
phone. Do it all with Connect.
</h2>
<div>
<a href="https://userbase.kde.org/KDEConnect#Receive_Notifications">
<button class="btn btn-primary btn-lg learn" type="button">
Learn More
</button>
</a>
</div>
<img class="img-fluid" src="assets/img/Notifications.png" />
</section>
<section class="feature command dark">
<h1 class="command">Commands on PC. Run from other devices.</h1>
<h2 class="command-desc">
Want to shut down? Lock your keyboard or mice? Run pre-defined commands from
your connected device or make and run your own commands. Your wish.
</h2>
<div>
<a href="https://userbase.kde.org/KDEConnect#Run_Commands">
<button class="btn btn-primary btn-lg learn" type="button">
Learn More
</button>
</a>
</div>
<img class="img-fluid" src="assets/img/command.png" />
</section>
<section class="feature browse dark">
<h1 class="browse">Files and Links. Shared between devices.</h1>
<h2 class="browse-desc">
Want to share that album with photos from latest family trip , birthday
party or share the link to a cool shopping offer? Now do it easily. Browse
your phone files too.
</h2>
<div>
<a href="https://userbase.kde.org/KDEConnect#Share_and_Receive">
<button class="btn btn-primary btn-lg learn" type="button">
Learn More
</button>
</a>
</div>
<img class="img-fluid" src="assets/img/files.png" />
</section>
<section class="feature ring">
<h1 class="ring">Ring your Phone. Know your Battery.</h1>
<h2 class="ring-desc">
Forgot where you kept your phone? It happens to all of us. Ring it and find
where it is. Also check your phones battery level from your Desktop. How
cool is that?
</h2>
<div>
<a href="https://userbase.kde.org/KDEConnect#Ring_My_Phone">
<button class="btn btn-primary btn-lg learn" type="button">
Learn More
</button>
</a>
</div>
<img class="img-fluid" src="assets/img/ring.png" />
</section>
<section class="feature more dark">
<h1 class="more">Presentation Remote. Virtual Trackpad. More.</h1>
<h2 class="more-desc">
Forgot your presentation remote but have an important presentation to do?
Want to use your phone as a trackpad? We all have been in these situations
too. Connect can help out.&nbsp; &nbsp;
<!-- Loop that loops through features.-->
{% for feature in page.features %}
<section class="{{feature.class_name}}">
<h1 class="{{feature.h1_class}}">{{feature.h1_content}}</h1>
<h2 class="{{feature.h2_class}}">
{{feature.h2_content}}
</h2>
<div>
<a href="https://userbase.kde.org/KDEConnect#Virtual_Input">
<a href="{{feature.linkref}}">
<button class="btn btn-primary btn-lg learn" type="button">
Learn More
</button>
</a>
</div>
<img class="img-fluid" src="assets/img/more.png" />
<img class="img-fluid" src="{{feature.image1}}" />
</section>
{% endfor %}
<!-- Bottom Header-->
<section class="feature download bottom dark">
<h1 class="madebyyou">Made By You.</h1>
<h2 class="madebyyou-desc">
......@@ -136,67 +155,23 @@ sorted: 1
</div>
<img class="img-fluid" src="assets/img/madebyyou.png" />
</section>
<div class="row no-gutters grid">
<!-- Loop for Boxes. They can be added on the top. -->
{% for box in page.Boxes %}
<div class="col-md-6">
<div class="product-in plasma">
<h3>Plasma Integration</h3>
<h4>Control Content on Browser. Tabs.Youtube.More.</h4>
<div>
<a href="https://community.kde.org/Plasma/Browser_Integration">
<button class="btn btn-primary learn" type="button">
Get it for your browser.
</button>
</a>
</div>
<img class="img-fluid prodim" src="assets/img/plasmaint.png" />
</div>
</div>
<div class="col-md-6">
<div class="product-in plugin dark">
<h3>Plugins</h3>
<h4>Make your Own Plugins and Build. Power to You.</h4>
<div>
<a href="https://userbase.kde.org/KDEConnect#Available_Plugins">
<button class="btn btn-primary learn" type="button">
Learn More
</button>
</a>
</div>
<img class="img-fluid prodim" src="assets/img/plugin.png" />
</div>
</div>
<div class="col-md-6">
<div class="product-in OpenVpn">
<h3>OpenVPN Support</h3>
<h4>
Left home and want to run a command? Or want to give a presentation over
public wifi that doesn't allow devices to communicate? We got you
covered.
</h4>
<div>
<a
href="https://community.kde.org/KDEConnect#Running_KDE_Connect_over_OpenVPN"
>
<button class="btn btn-primary learn" type="button">
Learn More
</button>
</a>
</div>
<img class="img-fluid prodim" src="assets/img/ovpn.png" />
</div>
</div>
<div class="col-md-6">
<div class="product-in wiki">
<h3>Wiki. Everything you Need.</h3>
<h4>Documentation for Everything.</h4>
<div class="{{box.class_name}}">
<h3>{{box.h3_content}}</h3>
<h4>{{box.h4_content}}</h4>
<div>
<a href="https://community.kde.org/KDEConnect">
<a href="{{box.linkref}}">
<button class="btn btn-primary learn" type="button">
Visit WIki
Learn more
</button>
</a>
</div>
<img class="img-fluid prodim" src="assets/img/wiki.png" />
<img class="img-fluid prodim" src="{{box.image1}}" />
</div>
</div>
{% endfor %}
</div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment