This commit is contained in:
vincent.md 2023-03-15 15:53:04 -04:00
parent 15a899d2a3
commit 0716c5187b
54 changed files with 5019 additions and 2 deletions

7
403.php Normal file
View File

@ -0,0 +1,7 @@
<?php
$language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
echo($language);
$accept = ['fr', 'en'];
$language = in_array($language, $accept) ? $language : 'fr';
header("location:/pages/{$language}/err/403.html");
?>

7
404.php Normal file
View File

@ -0,0 +1,7 @@
<?php
$language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
echo($language);
$accept = ['fr', 'en'];
$language = in_array($language, $accept) ? $language : 'fr';
header("location:/pages/{$language}/err/404.html");
?>

7
500.php Normal file
View File

@ -0,0 +1,7 @@
<?php
$language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
echo($language);
$accept = ['fr', 'en'];
$language = in_array($language, $accept) ? $language : 'fr';
header("location:/pages/{$language}/err/500.html");
?>

View File

@ -1,3 +1,3 @@
# TeleQom.org # teleqom.org
TeleQom.org website (https://teleqom.org) TeleQom's Official Website https://teleqom.org

View File

@ -0,0 +1,30 @@
ErrorDocument 400 /err.php
ErrorDocument 401 /err.php
ErrorDocument 402 /err.php
ErrorDocument 403 /403.php
ErrorDocument 404 /404.php
ErrorDocument 405 /err.php
ErrorDocument 406 /err.php
ErrorDocument 407 /err.php
ErrorDocument 408 /err.php
ErrorDocument 409 /err.php
ErrorDocument 410 /err.php
ErrorDocument 411 /err.php
ErrorDocument 412 /err.php
ErrorDocument 413 /err.php
ErrorDocument 414 /err.php
ErrorDocument 415 /err.php
ErrorDocument 416 /err.php
ErrorDocument 417 /err.php
ErrorDocument 422 /err.php
ErrorDocument 423 /err.php
ErrorDocument 424 /err.php
ErrorDocument 500 /500.php
ErrorDocument 501 /err.php
ErrorDocument 502 /err.php
ErrorDocument 503 /err.php
ErrorDocument 504 /err.php
ErrorDocument 505 /err.php
ErrorDocument 506 /err.php
ErrorDocument 507 /err.php
ErrorDocument 510 /err.php

View File

@ -0,0 +1,3 @@
<?php
$pdo=new PDO("mysql:host=ADRESS_TO_HOST;dbname=DATABASE_NAME", "DATABASE_USER", "DATABASE_USER_PASSWORD");
?>

View File

@ -0,0 +1,6 @@
<?php
$_ENV['newsletter_url_fr'] ='';
$_ENV['newsletter_url_en'] ='';
?>

View File

@ -0,0 +1,4 @@
@import "/css/utils/base.css";
@import "/css/utils/buttons.css";
@import "/css/sections/nav.css";
@import "/css/sections/message.css";

View File

@ -0,0 +1,9 @@
@import "/css/utils/base.css";
@import "/css/utils/buttons.css";
@import "/css/utils/forms.css";
@import "/css/sections/nav.css";
@import "/css/sections/intro.css";
@import "/css/sections/products.css";
@import "/css/sections/call-to-action.css";
@import "/css/sections/footer.css";

4
css/pages/errors.css Normal file
View File

@ -0,0 +1,4 @@
@import "/css/utils/base.css";
@import "/css/utils/buttons.css";
@import "/css/sections/nav.css";
@import "/css/sections/message.css";

11
css/pages/index.css Normal file
View File

@ -0,0 +1,11 @@
@import "/css/utils/base.css";
@import "/css/utils/buttons.css";
@import "/css/utils/forms.css";
@import "/css/sections/nav.css";
@import "/css/sections/welcome.css";
@import "/css/sections/about.css";
@import "/css/sections/services.css";
@import "/css/sections/projects.css";
@import "/css/sections/contact.css";
@import "/css/sections/footer.css";

View File

@ -0,0 +1,9 @@
@import "/css/utils/base.css";
@import "/css/utils/buttons.css";
@import "/css/utils/forms.css";
@import "/css/sections/nav.css";
@import "/css/sections/intro.css";
@import "/css/sections/products.css";
@import "/css/sections/call-to-action.css";
@import "/css/sections/footer.css";

9
css/pages/repairs.css Normal file
View File

@ -0,0 +1,9 @@
@import "/css/utils/base.css";
@import "/css/utils/buttons.css";
@import "/css/utils/forms.css";
@import "/css/sections/nav.css";
@import "/css/sections/intro.css";
@import "/css/sections/products.css";
@import "/css/sections/call-to-action.css";
@import "/css/sections/footer.css";

25
css/sections/about.css Normal file
View File

@ -0,0 +1,25 @@
.about {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.about h2 {
margin-bottom: 5rem;
}
.about div {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 2rem;
text-align: center;
max-width: 80%;
}
.about h3 {
margin-bottom: 2rem;
text-decoration: 0.2rem solid var(--item-color-1) underline;
}

View File

@ -0,0 +1,12 @@
#call-to-action {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--background-color-2);
}
#call-to-action .description {
margin:2rem;
}

53
css/sections/contact.css Normal file
View File

@ -0,0 +1,53 @@
#contact {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--background-color-2);
}
#contact h2 {
margin-bottom: 5rem;
}
#contact-form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 80%;
}
#contact input[type=text], #contact input[type=email] {
width: 100%;
max-width: 25rem;
}
#contact textarea {
width: 100%;
}
.contact-radio-container {
display: flex;
flex-direction: row;
}
.contact-radio-item {
display: flex;
flex-direction: column;
margin:1rem;
}
#contact label {
margin-bottom:0.5rem;
}
#contact h4 {
margin-top:2rem;
}
@media only screen and (max-width: 500px) {
#contact-form {
width: 90%;
}
}

71
css/sections/footer.css Normal file
View File

@ -0,0 +1,71 @@
footer {
padding: 2rem;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-wrap: wrap;
}
footer h5 {
font-size: 1rem;
}
footer .newsletter {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
footer .newsletter p {
font-size: 0.8rem;
}
footer .newsletter form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
footer input[type=email] {
background-color: var(--background-color-2);
width: 100%;
}
footer .newsletter .btn {
font-size: 1rem;
}
footer .wrapper {
display: flex;
align-items: center;
justify-content: center;
margin: 2rem;
}
footer img {
margin:0.5rem;
height: 2rem;
border-radius: 0.5rem;
}
.footer-language-div a {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 900px) {
footer .section-container{
flex-direction: column;
}
footer .newsletter p {
margin: 0.5rem;
}
}

26
css/sections/intro.css Normal file
View File

@ -0,0 +1,26 @@
#intro {
margin-top: var(--nav-height);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
#intro h2 {
max-width: 80%;
margin-bottom: 5rem;
}
#intro p {
max-width: 80%;
margin-bottom: 1rem;
}
@media only screen and (max-width: 500px) {
#intro p {
max-width: 90%;
}
}

27
css/sections/message.css Normal file
View File

@ -0,0 +1,27 @@
#message {
margin:2rem auto;
max-width: 900px;
}
#message .wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
padding: 2rem;
}
#message h2 {
margin: 2rem;
}
#message h4 {
margin: 1rem;
}
#message .btn {
margin: 2rem;
}

168
css/sections/nav.css Normal file
View File

@ -0,0 +1,168 @@
nav {
position: fixed;
top: 0;
width: 100%;
background-color: var(--background-color-1);
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
height: var(--nav-height);
left: 50%;
transform: translatex(-50%);
max-width: var(--max-display-size);
box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
}
.logo {
justify-content: center;
align-items: center;
display: flex;
}
nav img {
width: 3.5rem;
height: 3.5rem;
margin-left: 1rem;
margin-right: 1rem;
}
nav ul {
position: absolute;
left: 50%;
transform: translatex(-50%);
display: flex;
align-items: center;
justify-content: center;
}
nav ul li {
display: inline-block;
}
nav ul li a:hover {
background-color: var(--item-color-1);
}
#mobile-navbar-btn {
display: none;
}
#navbar-action-btn {
margin-right: 1rem;
}
#mobile-nav-action-btn a,
#navbar-action-btn a {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#mobile-nav-action-btn img,
#navbar-action-btn img {
height: 3.5rem;
width: 3.5rem;
}
#mobile-nav-action-btn {
display: none;
}
#navbar-menu-btn {
display: none;
}
#menu-btn-close,
#menu-btn-open {
display: none;
cursor: pointer;
}
#menu-btn-close img,
#menu-btn-open img {
width: 2.8rem;
height: 2.8rem;
}
#qonsole-btn {
display: none;
}
@media only screen and (max-width: 1200px) {
.logo {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
#nav-list {
width: 100%;
height: calc(100vh - var(--nav-height));
flex-direction: column;
justify-content: space-evenly;
transition: all 0.5s;
left: -100%;
top: var(--nav-height);
background: rgb(17, 26, 39, 0.8);
transform: none;
}
#nav-list li {
margin: 0.5rem 0;
}
#nav-list li a {
font-size: 2rem;
}
#mobile-nav-action-btn {
display: unset;
}
#navbar-action-btn {
display: none;
}
#menu-btn-open {
display: block;
}
#menu-btn-close {
display: none;
}
#navbar-menu-btn:checked~#nav-list {
left: 0;
}
#navbar-menu-btn:checked~#menu-btn-close {
display: block;
}
#navbar-menu-btn:checked~#menu-btn-open {
display: none;
}
.mobile-nav-action-btn {
display: inline-block;
}
}
@media only screen and (max-width: 500px) {
.logo img {
height: 3rem;
width: 3rem;
margin-right: 0.5rem;
}
.logo h2 {
font-size: 2rem;
}
}
@media only screen and (max-width: 375px) {
}

164
css/sections/products.css Normal file
View File

@ -0,0 +1,164 @@
.products {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: var(--background-color-2);
}
.products.alt {
background-color: var(--background-color-1);
}
.products .explanation {
margin-bottom: 5rem;
max-width: 80%;
}
.products h2 {
margin-bottom: 5rem;
}
.products .wrapper {
display: flex;
align-items: flex-start;
justify-content: center;
flex-flow: row wrap;
}
.product {
text-align: center;
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
max-width: 30rem;
padding: 2rem;
margin: 2rem;
border-radius: 1rem;
box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
background-color: var(--background-color-1);
}
.product.alt {
background-color: var(--item-color-2);
}
.product .img-container {
height: 8rem;
width: 8rem;
margin: 2rem;
}
.product img {
height: 8rem;
width: 8rem;
}
.product h4 {
display: inline-block;
border-radius: 0.5rem;
padding: 0.5rem;
background-color: var(--text-color-1);
color: var(--item-color-1);
box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
}
.product .description {
margin: 1rem;
}
hr {
border: 0.2rem dotted var(--item-color-1);
border-radius: 0.5rem;
width: 100%;
}
.product h5 {
margin-bottom: 1rem;
}
.product .includes {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 1rem;
}
.product .includes .includes-items {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.product .includes p {
border-radius: 0.5rem;
padding: 0.5rem;
margin: 0.5rem;
display: inline-block;
border-radius: 0.3rem;
box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
background: var(--background-color-2);
}
.product .includes p.alt {
background-color: var(--background-color-2);
}
.product .qontribution {
padding: 1rem;
}
.product .btn {
margin: 2rem 1rem 1rem 1rem;
}
span.green {
color: var(--background-color-success-1);
}
.products.alt {
background-color: var(--background-color-1);
}
.products.alt .product {
background-color: var(--background-color-2);
}
.products.alt .includes-items p{
background-color: var(--background-color-1);
}
.product .includes-items p.green {
background-color: var(--background-color-success-1);
}
.product .includes-items p.yellow {
background-color: var(--background-color-warning-1);
}
.product .includes-items p.red {
background-color: var(--background-color-danger-1);
}
.product .includes-items p.blue {
background-color: var(--item-color-1);
}
@media only screen and (max-width: 500px) {
.product {
margin: 1.5rem 0.5rem;
padding: 2rem 1rem;
}
.products .explanation {
max-width: 90%;
}
}

72
css/sections/projects.css Normal file
View File

@ -0,0 +1,72 @@
.projects {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.projects h2 {
margin-bottom: 5rem;
}
.projects .overview {
padding: 0 2rem;
}
.projects .wrapper {
display: flex;
align-items: flex-start;
justify-content: center;
flex-flow: row wrap;
margin: 2.5rem 0;
}
.projects .project {
display: flex;
text-align: center;
flex-direction: column;
align-items: center;
max-width: 25rem;
padding: 2rem;
margin: 1.5rem;
border-radius: 1rem;
box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
background-color: var(--background-color-2);
}
.projects .project img {
width: 8rem;
height: 8rem;
}
.projects .project h4 {
margin: 1.3rem;
}
.projects .project .description {
margin: 1rem 0;
}
.project p.status {
margin: 1rem;
padding: 0.5rem;
border-radius: 0.5rem;
box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
}
.project p.status.hold {
background-color: var(--background-color-danger-2);
}
.project p.status.dev {
background-color: var(--background-color-warning-2);
}
.project p.status.test {
background-color: var(--background-color-warning-1);
}
.project p.status.prod {
background-color: var(--background-color-success-1);
}

66
css/sections/services.css Normal file
View File

@ -0,0 +1,66 @@
.services {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--background-color-2);
}
.services h2 {
margin-bottom: 5rem;
}
.services .service {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
max-width: 70%;
padding: 2rem;
margin: 2rem 0;
border-radius: 1rem;
background: var(--background-color-1);
box-shadow: 0.1rem 0.1rem 0.5rem 0.1rem var(--box-shadow);
}
.services .service img {
width: 5rem;
height: 5rem;
margin: 1rem;
}
.services .service .service-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.services .service .service-content p {
margin: 2rem;
}
.services .service h3 {
margin-bottom: 1rem;
}
@media only screen and (max-width: 1200px) {
.services .service {
flex-direction: column;
text-align: center;
padding: 2rem 0.5rem;
max-width: 80%;
}
.services .service .service-content {
padding: 0.5rem;
}
}
@media only screen and (max-width: 500px) {
.services .service {
max-width: 90%;
}
}

54
css/sections/welcome.css Normal file
View File

@ -0,0 +1,54 @@
#welcome {
margin-top: var(--nav-height);
padding: 0;
background: url("/media/images/welcome-background-1080p.jpg") center;
background-size: cover;
height: calc(100vh - var(--nav-height));
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
#welcome-logo {
height: 15rem;
width: 15rem;
}
#welcome h1 {
margin-right: 20%;
padding: 2rem;
}
#welcome h4 {
margin: 0 0 0 20%;
}
#scroll-down {
position: absolute;
bottom: 2rem;
width: 3rem;
height: 2rem;
}
#scroll-down img {
width: 3rem;
}
@media only screen and (max-width: 1280px) {
#welcome .container {
background: url("/media/images/welcome-background-720p.jpg") center;
}
#welcome h4 {
margin: 2rem;
}
#welcome h1 {
margin: 0;
}
}
@media only screen and (max-width: 500px) {
#welcome .container {
background: url("/media/images/welcome-background-mobile.jpg") center;
}
}

123
css/utils/base.css Normal file
View File

@ -0,0 +1,123 @@
/* FONTS IMPORT */
@font-face {
font-family: Ubuntu;
src: url("/media/fonts/Ubuntu-Bold.ttf");
font-display: swap;
}
/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
text-decoration: none;
font-family: Ubuntu, sans-serif;
scroll-behavior: smooth;
}
:root {
/* Display Sizes */
--mobile-size: 500px;
--tablet-size: 900px;
--desktop-size: 1920px;
--max-display-size: 1920px;
/* Background Colors */
--background-color-1: #171a21;
--background-color-2: #1e222b;
--background-color-3: #333947;
--background-color-success-1: #1dad24;
--background-color-success-2: #16851c;
--background-color-warning-1: #a4a700;
--background-color-warning-2: #898b00;
--background-color-danger-1: #c90c0c;
--background-color-danger-2: #960b0b;
/* Item Colors */
--item-color-1: #5791FF;
--item-color-2: #3c64ad;
--item-color-3: #333947;
/* Text Colors */
--text-color-1: #eee;
--text-color-2: var(--item-color-1);
/* btn Color */
--btn-color-1: #5791FF;
--btn-color-1-hover: #3c64ad;
--btn-color-2: unset;
--btn-color-2-hover: #5791FF;
--btn-disabled: #3d414b;
/* Boxes */
--box-shadow: #0c0e11;
--border-radius: 0.5rem;
/* Custom */
--nav-height: 5rem;
}
html {
color: var(--text-color-1);
background-color: var(--background-color-1);
scroll-padding-top: var(--nav-height);
}
body {
max-width: var(--max-display-size);
margin: 0 auto;
text-align: center;
}
a {
color: var(--text-color-1);
text-decoration: none;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 2rem;
}
h4 {
font-size: 1.5rem;
}
h5 {
font-size: 1.3rem;
}
p {
line-height: 1.7rem;
}
/* SECTIONS */
section {
padding: 5rem 0 5rem 0;
}
/* CUSTOM */
span {
color: var(--text-color-2);
}
.link {
text-decoration: underline;
color: var(--text-color-2);
}

64
css/utils/buttons.css Normal file
View File

@ -0,0 +1,64 @@
.btn {
color: var(--text-color-1);
cursor: pointer;
font-size: 1.3rem;
padding: 0.6rem 0.7rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: all 0.2s linear 0s;
box-shadow: 0.1rem 0.1rem 0.3rem 0.1rem var(--box-shadow);
margin: 0.5rem;
}
.btn-1 {
color: var(--text-color-1);
background-color: var(--btn-color-1);
}
.btn-1:hover {
background-color: var(--btn-color-1-hover);
}
.btn-2 {
color: var(--text-color-1);
background-color: var(--btn-color-2);
box-shadow: none;
}
.btn-2:hover {
background-color: var(--item-color-1);
box-shadow: 0.1rem 0.1rem 0.3rem 0.1rem var(--box-shadow);
}
.btn-success {
background-color: #1dad24;
}
.btn-success:hover {
background-color: #16851c;
}
.btn-warning {
background-color: #a4a700;
}
.btn-warning:hover {
background-color: #898b00;
}
.btn-danger {
background-color: #c90c0c;
}
.btn-danger:hover {
background-color: #960b0b;
}
.btn:disabled {
background-color: var(--background-color-3);
box-shadow: none;
}

19
css/utils/forms.css Normal file
View File

@ -0,0 +1,19 @@
input[type=text],input[type=email],textarea {
padding: 0.5rem;
margin: 1rem;
border-radius: 0.5rem;
border: none;
background-color: var(--background-color-1);
color: var(--text-color-1);
font-size: 1.2rem;
outline-color: var(--item-color-1);
box-shadow: 0.05rem 0.05rem 0.1rem 0.05rem var(--box-shadow);
}
input:focus {
outline-color: var(--item-color-1);
}
.catch {
display: none;
}

7
err.php Normal file
View File

@ -0,0 +1,7 @@
<?php
$language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
echo($language);
$accept = ['fr', 'en'];
$language = in_array($language, $accept) ? $language : 'fr';
header("location:/pages/{$language}/err/general.html");
?>

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 238 KiB

7
index.php Normal file
View File

@ -0,0 +1,7 @@
<?php
$language = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
echo($language);
$accept = ['fr', 'en'];
$language = in_array($language, $accept) ? $language : 'fr';
header("location:/pages/{$language}/index.html");
?>

View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en-CA">
<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">
<meta name='robots' content='noindex,follow' />
<title>Success! | Confirmation Page</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/confirmation.css"/>
</head>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/en/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
</ul>
</nav>
</header>
<body>
<!-- Bypass FOUC on firefox -->
<script>0</script>
<section id="message">
<div class="wrapper">
<h2>It's done!</h2>
<h4>Your request was transmitted successfully</h4>
<h4>You may close this page or go back to the home page</h4>
<a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
</div>
</section>
</body>
</html>

52
pages/en/err/403.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en-CA">
<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">
<meta name='robots' content='noindex,follow' />
<title>Oups (403) | Forbidden Error Page</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/errors.css" />
</head>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/en/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
</ul>
</nav>
</header>
<body>
<!-- Bypass FOUC on firefox -->
<script>0</script>
<section id="message">
<div class="wrapper">
<h2>Oups (403)</h2>
<h4>
A
<a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes" target="_blank"
rel="noreferrer noopener" class="link">403</a>
error means that this section is not available to the web server
</h4>
<h4>You may close this page or go back to the home page</h4>
<a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
</div>
</section>
</body>
</html>

52
pages/en/err/404.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en-CA">
<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">
<meta name='robots' content='noindex,follow' />
<title>Oups (404) | Page Not Found Error</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/errors.css" />
</head>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/en/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
</ul>
</nav>
</header>
<body>
<!-- Bypass FOUC on firefox -->
<script>0</script>
<section id="message">
<div class="wrapper">
<h2>Oups (404)</h2>
<h4>
A
<a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes" target="_blank"
rel="noreferrer noopener" class="link">404</a>
error means that our server could not find the page you were looking for
</h4>
<h4>You may close this page or go back to the home page</h4>
<a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
</div>
</section>
</body>
</html>

54
pages/en/err/500.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en-CA">
<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">
<meta name='robots' content='noindex,follow' />
<title>Oups (500) | Internal Server Error</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/errors.css" />
</head>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/en/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
</ul>
</nav>
</header>
<body>
<!-- Bypass FOUC on firefox -->
<script>0</script>
<section id="message">
<div class="wrapper">
<h2>Oups (500)</h2>
<h4>
A
<a href="https://en.wikipedia.org/wiki/List_of_HTTP_status_codes" target="_blank"
rel="noreferrer noopener" class="link">500</a>
error means that our server encountered an internal error. We apologize for the inconvenience. This
server may be undergoing maintenance. If the problem persists<br />
<a href="/pages/en/index.html#contact" class="link">Contact Us</a>
</h4>
<h4>You may close this page or go back to the home page</h4>
<a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
</div>
</section>
</body>
</html>

48
pages/en/err/contact.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en-CA">
<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">
<meta name='robots' content='noindex,follow' />
<title>Oups | Contact Form Error</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/errors.css" />
</head>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/en/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
</ul>
</nav>
</header>
<body>
<!-- Bypass FOUC on firefox -->
<script>0</script>
<section id="message">
<div class="wrapper">
<h2>Oups</h2>
<h4>An error occured while sending your message, please try again later. We apologize for the inconvenience.</h4>
<h4>If the problem persists, call us at <br/> 1 (833) PRJ-TL<span>Q</span>M</h4>
<h4>You may close this page or go back to the home page</h4>
<a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
</div>
</section>
</body>
</html>

51
pages/en/err/general.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en-CA">
<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">
<meta name='robots' content='noindex,follow' />
<title>Oups | Unexpected Error Occured</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/errors.css" />
</head>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/en/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="/pages/en/index.html">Home</a></li>
</ul>
</nav>
</header>
<body>
<!-- Bypass FOUC on firefox -->
<script>0</script>
<section id="message">
<div class="wrapper">
<h2>Oups</h2>
<h4>
An unexpected error occurred... Please try again later. We apologize for the inconvenience. This server
may be undergoing maintenance. If the problem persists<br />
<a href="/pages/en/index.html#contact" class="link">Contact Us</a>
</h4>
<h4>You may close this page or go back to the home page</h4>
<a href="/pages/en/index.html" class="btn btn-1">Back to Home Page</a>
</div>
</section>
</body>
</html>

292
pages/en/index.html Normal file
View File

@ -0,0 +1,292 @@
<!DOCTYPE html>
<html lang="en-CA">
<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>The TeleQom Project | Home</title>
<meta name="description"
content="The TeleQom Project is a Québec non-profit that offers paid services to fund its multiple Free/Libre Software projects" />
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/index.css" />
</head>
<body>
<!-- FOUC -->
<script>0</script>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="#top" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="#about">About</a></li>
<li><a class="btn btn-2" href="#services">Services</a></li>
<li><a class="btn btn-2" href="#projects">Projects</a></li>
<li><a class="btn btn-2" href="#contact">Contact</a></li>
<li><a class="btn btn-2" href="/pages/fr/index.html">FR</a></li>
</ul>
<div id="qonsole-btn">
<a href="https://qonsole.teleqom.org"><img src="/media/images/qonsole.png" alt="Qonsole"></a>
</div>
</nav>
</header>
<section id="welcome">
<h1>
The Tele<span>Q</span>om Project
</h1>
<h4>
Telecommunications with <span>Québec</span>'s Values
</h4>
<a href="#about" id="scroll-down">
<img src="/media/images/down.png" alt="Icone defilement">
</a>
</section>
<section class="about" id="about">
<h2>About Us</h2>
<div>
<h3>
What is Tele<span>Q</span>om?
</h3>
<p>
The Tele<span>Q</span>om Project, a Québec non-profit, is an ideal. We are attempting to restore ethics and
morals within the applications all of us use on a daily basis. From your favorite social platform, online
shopping, email or even messaging, almost all of them contain spying software. Robots read your emails and
your messages, some even listen to you talk. In our opinion, this is unacceptable and should be illegal but
you accepted these terms before using those applications and devices and that is why the law is powerless at
the moment. Since we don't have viable alternatives, we follow these technology giants with bad intentions. It
is in response to this severe lack of humanity that Tele<span>Q</span>om was born.
</p>
</div>
<div>
<h3>
Libre Software
</h3>
<p>
Tele<span>Q</span>om embraces a philosophy that has been around for quite some
time, we use only Libre/Free Software. To make it simple, a program is much like a food recipe. Libre
Software grants the public access to it's source code (the recipe, that we call our <a
href="https://qode.teleqom.org" target="_blank" rel="noreferrer noopener" class="link">Qode</a>) to audit
and discover security flaws, modify or improve with the only condition of sharing back what was improved.
Proprietary software on the other hand, is the complete opposite. They hide how it works, and forbid auditing
their source code. It is obviously much harder to discover what it truly does with your information.
</p>
</div>
<div>
<h3>
The Real Difference
</h3>
<p>
Our projects are designed in such a way that it is impossible for us to spy on you. What you do in your private
life does not concern us. Proprietary artifical intelligence programs can already anticipate your behavior,
modifiy your habits and the way you think by simply using this data that we all think harmless. Companies like
<a href="https://en.wikipedia.org/wiki/Facebook%E2%80%93Cambridge_Analytica_data_scandal" target="_blank"
rel="noreferrer noopener" class="link">Cambridge Analytica</a> already interfered in the United-States
elections, and this is only the beginning. <a href="https://en.wikipedia.org/wiki/Pegasus_(spyware)"
target="_blank" rel="noreferrer noopener" class="link">Pegasus</a> gives unlimited access to those willing
to pay to the complete virtual life of anyone with the help of flaws in software. It is now urgent to get rid
of those chains, and that is where Tele<span>Q</span>om comes in.
</p>
</div>
<div>
<h3>
Telecommunication
</h3>
<p>
It's not pretty when you take a closer look at how these big corporations use us. But instead of admitting
defeat, we chose to remedy this situation with whatever freedom we still have left. We will start by securing
our telecommunications (email, social, messaging, videoconference and telephone). Then, <span>Q</span>ommerce
will help fund the infrastructure and development of our projects. Finally, a voting application, called
Politi<span>Q</span> that will give the power back to the people. Keep in mind, Tele<span>Q</span>om does not
sell your data and is a non-profit, so donations are necessary to its survival. We do what we can to offer our
projects for free, but it is not easy. All profits generated by the following services are invested in the
development of our projects!
</p>
</div>
</section>
<section class="services" id="services">
<h2>Our Services</h2>
<div class="service">
<img src="/media/images/code.png" alt="code logo">
<div class="service-content">
<h4>Development</h4>
<p>A web site, a mobile application, an online shopping application, name it. Tele<span>Q</span>om uses Libre
Software as much as possible to build your project. This results in an application that respects its users,
is safer, more stable and much cheaper.</p>
<a class="btn btn-1" href="/pages/en/services/development.html">More</a>
</div>
</div>
<div class="service">
<img src="/media/images/repair.png" alt="repair logo">
<div class="service-content">
<h4>Repairs</h4>
<p>In the same way, we love to give your devices a second life. Broken phone display? Laptop not holding
charge? Computer doesn't start or is slower than before? We can fix all of that!</p>
<a class="btn btn-1" href="/pages/en/services/repairs.html">More</a>
</div>
</div>
<div class="service">
<img src="/media/images/support.png" alt="support logo">
<div class="service-content">
<h4>Support</h4>
<p>Paid support is also available for most technology related issues you may be facing. At
Tele<span>Q</span>om, we like to play around with techonology a lot. Could be your wi-fi network, your browser
is
out-of-date, you can't update apps on your phone, anything IT really. Just reach out to us, we might be able
to help you! :)</p>
<a class="btn btn-1" href="#contact">Contact</a>
</div>
</div>
<div class="service">
<img src="/media/images/installation.png" alt="installation logo">
<div class="service-content">
<h4>Installation</h4>
<p>It is now possible to replace most proprietary malware with Libre Software. Your computer's operating
system can be replaced by a GNU/Linux such as <a href="https://www.linuxmint.com/" target="_blank"
rel="noreferrer noopener" class="link">Linux Mint</a>. A selection of mobile devices are supported by <a
href="https://grapheneos.org/" target="_blank" rel="noreferrer noopener" class="link">GrapheneOS</a>, and
it will be possible to switch to a completely Libre alternative like the <a
href="https://puri.sm/products/librem-5/" target="_blank" rel="noreferrer noopener" class="link">Librem
5</a> or the <a href="https://www.pine64.org/pinephonepro/" target="_blank" rel="noreferrer noopener"
class="link">Pine Phone</a>. <a href="https://www.libreoffice.org/" target="_blank"
rel="noreferrer noopener" class="link">Libre Office</a> is a great alternative for all types of documents.
For image manipulation, <a href="https://www.gimp.org/" target="_blank" rel="noreferrer noopener"
class="link">GIMP</a> is also a great choice.</p>
<a class="btn btn-1" href="/pages/en/services/installation.html">More</a>
</div>
</div>
</section>
<section class="projects" id="projects">
<h2>Our Projets</h2>
<p class="overview">The following projects are or will be available from your <span>Q</span>onsole. Come
back later to see if the Status of your favorite project changed!</p>
<div class="wrapper">
<div class="project">
<img src="/media/images/qonsole.png" alt="Qonsole Logo">
<h4><span>Q</span>onsole</h4>
<p class="description">The main dashboard where you can access all of your applications. The
<span>Q</span>onsole is in charge of displaying all your apps in the same location, in a uniform and simple
way.
</p>
<p class="status dev">In Development</p>
</div>
<div class="project">
<img src="/media/images/disq.png" alt="DisQ Logo">
<h4>Dis<span>Q</span></h4>
<p class="description">This is where you store all your data, it's your personal hard drive but
hosted on an external server. All accessible only by you, the server can not see your data.</p>
<p class="status dev">In Development</p>
</div>
<div class="project">
<img src="/media/images/interqom.png" alt="InterQom Logo">
<h4>Inter<span>Q</span>om</h4>
<p class="description">Inter<span>Q</span>om is the sane alternative to other social networks.
Your conversations are entirely private and even we don't have access to your data.</p>
<p class="status hold">On Hold</p>
</div>
<div class="project">
<img src="/media/images/qommerce.png" alt="Qommerce Logo">
<h4><span>Q</span>ommerce</h4>
<p class="description">The center of exchange and online commerce. Local businesses and
individuals can share the fruit of their labour. We will accept cryptocurrencies as well as regular Canadian
money.</p>
<p class="status hold">On Hold</p>
</div>
<div class="project">
<img src="/media/images/qonvo.png" alt="Qonvo Logo">
<h4><span>Q</span>onvo</h4>
<p class="description">Instant messaging is the easiest way we have to communicate with one
another. This project includes audio and video calls, all encrypted from you to your recipients.</p>
<p class="status hold">On Hold</p>
</div>
<div class="project">
<img src="/media/images/qourrier.png" alt="Qourrier Logo">
<h4><span>Q</span>ourrier</h4>
<p class="description">The portal to access your emails, from your <span>Q</span>onsole. Emails
between users are fully encrypted and we support most providers.</p>
<p class="status hold">On Hold</p>
</div>
<div class="project">
<img src="/media/images/politiq.png" alt="PolitiQ Logo">
<h4>Politi<span>Q</span></h4>
<p class="description">Tele<span>Q</span>om is a round table where all Quebecers are invited. Your
opinion will finally be heard in the government. The real democracy at your fingertips!</p>
<p class="status hold">On Hold</p>
</div>
<div class="project">
<img src="/media/images/qontact.png" alt="Qontact Logo">
<h4><span>Q</span>ontact</h4>
<p class="description">The good old address book. Here you store your contact information, email,
phone, <span>Q</span>onvo or Inter<span>Q</span>om identifier, and more.</p>
<p class="status hold">On Hold</p>
</div>
<div class="project">
<img src="/media/images/qalendrier.png" alt="Qalendrier Logo">
<h4><span>Q</span>alendrier</h4>
<p class="description">We all need a calendar. Here you can manage your personal or professional
life, schedule an appointment with another user and even see your future events on Inter<span>Q</span>om.
</p>
<p class="status hold">On Hold</p>
</div>
<div class="project">
<img src="/media/images/qable.png" alt="Qable Logo">
<h4><span>Q</span>able</h4>
<p class="description">The audio and video content delivery platform, which uses <a
href="https://en.wikipedia.org/wiki/BitTorrent" target="_blank" rel="noreferrer noopener"
class="link">Torrent</a> technology to lighten the load on the servers and therefore the resulting costs.
The more people watching it, the faster it gets!</p>
<p class="status hold">On Hold</p>
</div>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<form action="/php/contact.php" method="get" id="contact-form">
<input type="text" name="contact-language" value="en" hidden>
<input type="text" name="contact-name" placeholder="Name" id="contact-first-name" required>
<input type="email" name="contact-email" placeholder="Email" id="contact-email" required>
<input class="catch" type="email" name="contact-email-2" placeholder="Email" id="contact-email-2">
<textarea name="contact-message" id="contact-message" placeholder="Message..." cols="30" rows="10" required></textarea>
<input class="btn btn-1" type="submit" value="Send">
</form>
</section>
<footer>
<div class="newsletter">
<h5>Subscribe!</h5>
<p>We only send important news</p>
<form action="/php/newsletter.php" method="get">
<input type="text" name="newsletter-language" value="en" hidden>
<input type="email" name="newsletter-email" placeholder="Email" required id="newsletter-email">
<input class="catch" type="email" name="newsletter-email-2" placeholder="Email" id="newsletter-email-2">
<input type="submit" class="btn btn-1" value="Subscribe">
</form>
</div>
<div class="wrapper">
<a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
src="/media/images/git-white.png"></a>
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/CC-64.png">
</a>
<a href="https://www.torproject.org/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/onion-64.png">
</a>
<a href="/pages/fr/index.html">
<img src="/media/images/quebec.png" alt="Français Québec">
</a>
</div>
</footer>
</body>
</html>

View File

@ -0,0 +1,367 @@
<!DOCTYPE html>
<html lang="en-CA">
<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>The TeleQom Project | Development Services</title>
<meta name="description" content="TeleQom's development services include Libre websites, mobile apps, e-commerce like OpenCart and Content Management Systems like Wordpress"/>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/development.css"/>
</head>
<body>
<!-- FOUC -->
<script>0</script>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/en/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="#websites">Websites</a></li>
<li><a class="btn btn-2" href="#e-commerce">E-commerce</a></li>
<li><a class="btn btn-2" href="#cms">CMS</a></li>
<li><a class="btn btn-2" href="#other">Other</a></li>
<li><a class="btn btn-2" href="/pages/fr/services/developpement.html">FR</a></li>
<li>
<div id="mobile-nav-action-btn">
<a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
</div>
</li>
</ul>
<div id="navbar-action-btn">
<a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
</div>
</nav>
</header>
<section id="intro">
<h2>Development Services</h2>
<p>
We offer various development services that could help you start or improve your project. At Tele<span>Q</span>om,
we prefer a more humane approach. Whenever you are ready, contact us and we will offer you the best option according to your needs.
Oh and don't forget, all profits generated are invested in our multiple Libre Software Projects! By choosing us, you help yourself and the community :)
</p>
</section>
<section class="products" id="websites">
<h2>Websites</h2>
<p class="explanation">
Websites are a very simple way of appearing online. They allow your business to be searched for on the internet and you can share some of your products and leave your contact information there. You may explain what your business or organization does and give a rough idea of why you exist. This site is one example of a simple basic Website!
</p>
<div class="wrapper">
<div class="product">
<div>
<h4>Website - Basic</h4>
<p class="description">Simple Website, perfect for professionnals, construction companies, etc </p>
</div>
<hr>
<div class="includes">
<h5>Package</h5>
<div class="includes-items">
<p>Tele<span>Q</span>om Template<br>- OR -<br>Your Bootstrap 5 Template</p>
<p>Developer: <span class="green">3 Hours</span></p>
</div>
</div>
<hr>
<div class="includes">
<h5><span>Q</span>ube Micro</h5>
<div class="includes-items">
<p>1GB</p>
<p>5 Emails</p>
<p>HTTPS</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Package: <span class="green">100$</span></p>
<p>Hosting (<span>Q</span>ube): <span class="green">60$ / Year</span></p>
</div>
</div>
<div class="product">
<div>
<h4>Website - Complete</h4>
<p class="description">A professionnal website, with many useful features</p>
</div>
<hr>
<div class="includes">
<h5>Package</h5>
<div class="includes-items">
<p>Tele<span>Q</span>om Template<br>- OR -<br>Your Bootstrap 5 Template</p>
<p>Developer: <span class="green">5 Hours</span></p>
<p>Newsletter</p>
<p>Contact Form</p>
</div>
</div>
<hr>
<div class="includes">
<h5><span>Q</span>ube Mini</h5>
<div class="includes-items">
<p>5GB</p>
<p>25 Emails</p>
<p>cPanel</p>
<p>Database</p>
<p>HTTPS</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Package: <span class="green">250$</span></p>
<p>Hosting (<span>Q</span>ube): <span class="green">150$</span> / Year</p>
</div>
</div>
<div class="product">
<div>
<h4>Website - Custom</h4>
<p class="description">Custom development tailored to your needs. Great if you just need the website and prefer to manage your hosting, image cropping and everything else yourself</p>
</div>
<hr>
<div class="includes">
<div class="includes-items">
<p>Built to Order</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Developer: <span class="green">50$ / Hour</span></p>
</div>
</div>
</div>
</section>
<section class="products alt" id="e-commerce">
<h2>E-Commerce</h2>
<p class="explanation">
E-commerce Libre Software applications are the best to keep your online presence at a low cost.
They are used and maintained by thousands which results in feature rich yet stable platforms.
<span>Q</span>ommerce will be linked to all platforms listed below through installable plugins so you may get increased visibility!
</p>
<div class="wrapper">
<div class="product bg">
<div>
<h4>OpenCart</h4>
<p class="description">Simple OpenCart shop, perfect for beginners and small businesses. Tele<span>Q</span>om's Bouti<span>Q</span> is an OpenCart instance</p>
</div>
<hr>
<div class="includes">
<div class="includes-items">
<p>Developer: <span class="green">3 Hours</span></p>
</div>
</div>
<hr>
<div class="includes">
<h5><span>Q</span>ube Mini</h5>
<div class="includes-items">
<p>5GB</p>
<p>25 Emails</p>
<p>cPanel</p>
<p>Database</p>
<p>HTTPS</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Package: <span class="green">150$</span></p>
<p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
</div>
</div>
<div class="product bg-2">
<div>
<h4>WooCommerce</h4>
<p class="description">A modified Wordpress instance that becomes a fully featured e-commerce solution</p>
</div>
<hr>
<div class="includes">
<div class="includes-items">
<p>Developer: <span class="green">3 Hours</span></p>
</div>
</div>
<hr>
<div class="includes">
<h5><span>Q</span>ube Mini</h5>
<div class="includes-items">
<p>5GB</p>
<p>25 Emails</p>
<p>cPanel</p>
<p>Database</p>
<p>HTTPS</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Package: <span class="green">200$</span></p>
<p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
</div>
</div>
</div>
</section>
<section class="products" id="cms">
<h2>CMS</h2>
<p class="explanation">
Content Management Systems are very useful if you plan on changing the content often.
It allows you to customize everything yourself with little to no programming experience and thus saving in development costs.
The downside is that it does require a small degree of technical knowledge and it may get harder for you to maintain later on, resulting in a bad experience for your users.
Tele<span>Q</span>om does offer paid support if you find yourself blocked by something, so it is still a great way to kickstart your project.
</p>
<div class="wrapper">
<div class="product">
<div>
<h4>Wordpress</h4>
<p class="description">Simple Wordpress installation with everything you need to start blogging</p>
</div>
<hr>
<div class="includes">
<h5><span>Q</span>ube Mini</h5>
<div class="includes-items">
<p>5GB</p>
<p>25 Emails</p>
<p>cPanel</p>
<p>Database</p>
<p>HTTPS</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Package: <span class="green">50$</span></p>
<p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
</div>
</div>
<div class="product">
<div>
<h4>Drupal</h4>
<p class="description">Drupal is another Libre Software CMS that can kickstart your project</p>
</div>
<hr>
<div class="includes">
<h5><span>Q</span>ube Mini</h5>
<div class="includes-items">
<p>5GB</p>
<p>25 Emails</p>
<p>cPanel</p>
<p>Database</p>
<p>HTTPS</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Package: <span class="green">50$</span></p>
<p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
</div>
</div>
<div class="product">
<div>
<h4>Joomla</h4>
<p class="description">Another popular Libre Software content management system</p>
</div>
<hr>
<div class="includes">
<h5><span>Q</span>ube Mini</h5>
<div class="includes-items">
<p>5GB</p>
<p>25 Emails</p>
<p>cPanel</p>
<p>Database</p>
<p>HTTPS</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Package: <span class="green">50$</span></p>
<p>Hosting (<span>Q</span>ube): <span class="green">150$ / Year</span></p>
</div>
</div>
</div>
</section>
<section class="products alt" id="other">
<h2>Other</h2>
<p class="explanation">
Items in this category don't have a price list as they are not "one size fits most" solutions.
Everything is possible of course, but costs cannot be estimated before we know exactly what you wish to accomplish
</p>
<div class="wrapper">
<div class="product">
<div>
<h4>Web Applications</h4>
<p class="description">
Say you have this great idea of starting your own podcast distribution platform.
This would fall under the Web App category as it will require a fully customized database, interface and many more elements
</p>
</div>
</div>
<div class="product">
<div>
<h4>IoT</h4>
<p class="description">
IoT or Internet of Things includes all smaller gadgets and gizmos like sensors and gauges.
An automated animal feeder or temperature sensors, it's IoT
</p>
</div>
</div>
<div class="product">
<div>
<h4>Mobile Apps</h4>
<p class="description">
Tele<span>Q</span>om does offer mobile apps development, although we would advise going the Progressive Web App route.
PWAs offer a wide range of fonctionnalities and work with most web applications and devices.
If you already have a website or E-commerce shop, configuration and addtionnal costs are minimal compared to native applications, although sometimes a native application may be required
</p>
</div>
</div>
</div>
</section>
<section id="call-to-action">
<h2>Ready?</h2>
<p class="description">
Find some information confusing or ready to take the next steps? Time to contact us! Don't worry, we can help you make the ethical decision :)
</p>
<a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
</section>
<footer>
<div class="newsletter">
<h5>Subscribe!</h5>
<p>We only send important news</p>
<form action="/php/newsletter.php" method="get">
<input type="text" name="newsletter-language" value="en" hidden>
<input type="email" name="newsletter-email" placeholder="Email" required id="newsletter-email">
<input class="catch" type="email" name="newsletter-email-2" placeholder="Email" id="newsletter-email-2">
<input type="submit" class="btn btn-1" value="Subscribe">
</form>
</div>
<div class="wrapper">
<a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
src="/media/images/git-white.png"></a>
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/CC-64.png">
</a>
<a href="https://www.torproject.org/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/onion-64.png">
</a>
<a href="/pages/fr/services/developpement.html">
<img src="/media/images/quebec.png" alt="Français Québec">
</a>
</div>
</footer>
</body>
</html>

View File

@ -0,0 +1,650 @@
<!DOCTYPE html>
<html lang="en-CA">
<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>The TeleQom Project | Installation Service</title>
<meta name="description"
content="The TeleQom Project offers an installation service to install Libre Software operating systems and applications of all sorts. Take a look!" />
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/installation.css" />
</head>
<body>
<!-- FOUC -->
<script>0</script>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/en/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="#os">OS</a></li>
<li><a class="btn btn-2" href="#apps">Apps</a></li>
<li><a class="btn btn-2" href="/pages/fr/services/installation.html">FR</a></li>
<li>
<div id="mobile-nav-action-btn">
<a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
</div>
</li>
</ul>
<div id="navbar-action-btn">
<a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
</div>
</nav>
</header>
<section id="intro">
<h2>Installation Services</h2>
<p>
Proprietary software has become a serious threat to freedom as we know it. We need to make the move to Libre
Software (Open, community written, transparent code recipes, shareable and user controlled software).
Tele<span>Q</span>om's devices and private servers run only Libre Software, so you can too! This is very
important, as it will determine how future generations will live. Here is not the place to discuss such matters,
but replacing software that spies on you and others around you is a very good place to start!
Note that all those are Libre Software, you can install them yourself free of charge if you so desire.
The Qontribution we ask is only to cover the employee's salary that will install it for you and to fund our projects.
</p>
</section>
<section class="products" id="os">
<h2>Operating Systems</h2>
<p class="explanation">
What is that? Well, <a href="https://en.wikipedia.org/wiki/Operating_system" target="_blank"
rel="noreferrer noopener" class="link">Operating Systems</a>, or OS for short, are a group of software that
interacts with the hardware on your device. It is the most complex piece of code running on your machine, and a
compromised OS can spy and do whatever it wants with applications running on your system.
We recommend taking a look at <a href="https://www.whonix.org/wiki/Host_Operating_System_Selection"
target="_blank" rel="noreferrer noopener" class="link">this page from the Whonix Project</a>, a well known
security and privacy oriented project, as to why to choose a GNU/Linux as your OS.
The few listed here are only the tip of the iceberg, many more exist!
</p>
<div class="wrapper">
<div class="product">
<div class="img-container">
<img src="/media/images/linux-mint-96.png" alt="Linux Mint Logo">
</div>
<h4>Linux Mint</h4>
<p class="description">
Linux Mint, just like Ubuntu (its parent) has proprietary compatibility which makes it an ideal choice for
beginners moving away from a commercial OS.
Its default Desktop Environment (Cinnamon) is very close to Windows in terms of general layout. This is our
first choice for beginners moving away from Windows 10
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p class="green">Level: Beginner</p>
<p>Desktop: Cinnamon</p>
<p>Similar: Windows</p>
<p>Packages: Debian (.deb)</p>
<p class="yellow">Libre: Almost</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">50$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://linuxmint.com/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/ubuntu-logo32.png" alt="Ubuntu Logo">
</div>
<h4>Ubuntu</h4>
<p class="description">
Ubuntu &reg; stands for "Humanity" and is exctly that, a more humane approach to operating systems. It is
supported by a company called Canonical &trade; famous (or infamous) in the Linux universe. Just like Linux Mint, it is
more flexible as to what software you can install so perfect for beginners. This one uses the GNOME Desktop
Environment, which can be tweaked to look very much like a MacOS
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p class="green">Level: Beginner</p>
<p>Desktop: GNOME</p>
<p>Similar: MacOS</p>
<p>Packages: Debian (.deb)</p>
<p class="yellow">Libre: Almost</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">50$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://ubuntu.com/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/debian-128.png" alt="Debian Logo">
</div>
<h4>Debian</h4>
<p class="description">
The next step is the parent to both Linux Mint and Ubuntu, Debian. Debian is known for its stability, security
and freedom. Here nothing stops you from installing proprietary software, but it isn't there by default. It is
our Distribution of choice here at Tele<span>Q</span>om.
Debian comes with images of most major Desktop Environments, so it can look like any commercial OS
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p class="yellow">Level: Intermediate</p>
<p>Desktop: GNOME</p>
<p>Similar: Any</p>
<p>Packages: Debian (.deb)</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">50$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.debian.org/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/Qubes.png" alt="Qubes Logo">
</div>
<h4>Qubes</h4>
<p class="description">
This one differs from the others as it is not an operating system but a hypervisor that launches small
containerized operating systems within it. It has a steeper learning curve than the others, but can run all of
them within it. It does require more technical knowledge and better hardware
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p class="red">Level: Advanced</p>
<p>Desktop: XFCE</p>
<p>Similar: Nothing</p>
<p>Packages: Debian, RedHat</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">50$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.qubes-os.org/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
</div>
</section>
<section class="products alt" id="apps">
<h2>Applications</h2>
<p class="explanation">
Now this could be a huge section. The Linux universe has so many Libre Applications, it's impossible to list them
all here. We will focus on what most people use on a daily basis. Here we go!
</p>
<div class="wrapper">
<div class="product">
<div class="img-container">
<img src="/media/images/libreoffice.png" alt="LibreOffice Logo">
</div>
<h4>Libre Office</h4>
<p class="description">
Libre office is the first choice in terms of office applications. It has a word compatible text editor,
excel compatible spreadsheet editor and much more
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p>Similar: Office Suite</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.libreoffice.org/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/gimp.png" alt="GIMP Logo">
</div>
<h4>GIMP</h4>
<p class="description">
GIMP stands for GNU Image Manipulation Program and does pretty much everything in terms of image alteration.
It includes so many fonctionnalities, you may feel a little overwhelmed at first
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p>Similar: PhotoShop</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.gimp.org/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/Inkscape.png" alt="Inkscape Logo">
</div>
<h4>Inkscape</h4>
<p class="description">
Another very popular image manipulation program. Plays nice with vector SVG images and other formats
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p>Similar: PhotoShop</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://inkscape.org/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/blender.png" alt="Blender Logo">
</div>
<h4>Blender</h4>
<p class="description">
Blender is one of the most used application in the world for 3D modeling, animation and much more
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p>Similar: Cinema 4D, SolidWorks</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.blender.org/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/Firefox.png" alt="Firefox Logo">
</div>
<h4>Firefox</h4>
<p class="description">
Your proprietary internet browser is most likely the most privacy invading software on your computer.
Firefox is an old, very well known, stable, well supported, feature rich, privacy and freedom advocating
internet browser. It is our first choice!
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p>Similar: Chrome, Edge</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.mozilla.org/en-CA/firefox/" target="_blank"
rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/Chromium.png" alt="Chromium Logo">
</div>
<h4>Chromium</h4>
<p class="description">
Chromium is the open source core of both Chrome and Edge browsers. It is stripped of all privacy invading
software but retains most of its features
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p>Similar: Chrome, Edge</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.chromium.org/Home/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/codium.png" alt="Codium Logo">
</div>
<h4>Codium</h4>
<p class="description">
Codium or VSCodium is the Libre version of the popular code editor, now microsoft supported and telemetry
(another word for spying) infested Visual Studio Code. It is stripped of everything proprietary and freely
available. We use it on a daily basis here at Tele<span>Q</span>om
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p>Similar: VSCode, JetBrains</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://vscodium.com/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/Rhythmbox.png" alt="Rhythmbox Logo">
</div>
<h4>Rhythmbox</h4>
<p class="description">
A universal audio player. Plays podcasts or local audio files, everything you need in a music application
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p>Similar: iTunes, WMP</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://wiki.gnome.org/Apps/Rhythmbox/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/vlc.png" alt="VLC Logo">
</div>
<h4>VLC Player</h4>
<p class="description">
Don't let the cone fool you, it is not under construction! This is a great Libre Software media player,
awesome for videos and music alike
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p>Similar: iTunes, WMP</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.videolan.org/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/mattermost.png" alt="Mattermost Logo">
</div>
<h4>Mattermost</h4>
<p class="description">
Mattermost is just like an IRC channel with a very nice user interface. Used mainly for team chats, task and
projects management, it is very feature rich
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p>Similar: Slack, Teams</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://mattermost.com/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/transmission.png" alt="Transmission Logo">
</div>
<h4>Transmission</h4>
<p class="description">
A simple Libre BitTorrent client to share files over the internet. It is the ultimate community expression
in software. It is best at sharing large files, as it increases in speed for each connected user. You can
download most Linux Distributions with Transmission, it is faster!
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p>Similar: uTorrent, Vuze</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://transmissionbt.com/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/signal.png" alt="Signal Logo">
</div>
<h4>Signal</h4>
<p class="description">
Signal is a state of the art mobile (and now linux too) application for instant messaging. Unlike the
upcoming <span>Q</span>onvo Project, it requires a mobile device with a phone number to setup but it is
still the best out there at the moment
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p>Similar: WhatsApp, iMessage</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://signal.org/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/Audacity.png" alt="Audacity Logo">
</div>
<h4>Audacity</h4>
<p class="description">
Ever wanted to crop an audio file? Or perhaps only change the audio format? Audacity is a full fledged audio
manipulation application that is easy to use
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p>Similar: Garage Band, Audition</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.audacityteam.org/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/OpenShot.png" alt="OpenShot Logo">
</div>
<h4>OpenShot</h4>
<p class="description">
Video editing made simple. Transitions, effects, audio, name it. You can do pretty much anything with this
software and its user interface is just plain and easy to understand
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p>Similar: Premiere, Final Cut</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.openshot.org/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
</div>
</section>
<section id="call-to-action">
<h2>Ready?</h2>
<p class="description">
Find some information confusing or ready to take the next steps? Time to contact us! Don't worry, we can help you make the ethical decision :)
</p>
<a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
</section>
<footer>
<div class="newsletter">
<h5>Subscribe!</h5>
<p>We only send important news</p>
<form action="/php/newsletter.php" method="get">
<input type="text" name="newsletter-language" value="en" hidden>
<input type="email" name="newsletter-email" placeholder="Email" required id="newsletter-email">
<input class="catch" type="email" name="newsletter-email-2" placeholder="Email" id="newsletter-email-2">
<input type="submit" class="btn btn-1" value="Subscribe">
</form>
</div>
<div class="wrapper">
<a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
src="/media/images/git-white.png"></a>
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/CC-64.png">
</a>
<a href="https://www.torproject.org/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/onion-64.png">
</a>
<a href="/pages/fr/services/installation.html">
<img src="/media/images/quebec.png" alt="Français Québec">
</a>
</div>
</footer>
</body>
</html>

View File

@ -0,0 +1,273 @@
<!DOCTYPE html>
<html lang="en-CA">
<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>The TeleQom Project | Repairs Service</title>
<meta name="description"
content="The TeleQom Project offers low cost repairs for your cellphone or computer. If you need new hardware though, here is a list of ethical suppliers!" />
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/repairs.css" />
</head>
<body>
<!-- FOUC -->
<script>0</script>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/en/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="#top">Repairs</a></li>
<li><a class="btn btn-2" href="#phones">Phones</a></li>
<li><a class="btn btn-2" href="#computers">Computers</a></li>
<li><a class="btn btn-2" href="/pages/fr/services/reparation.html">FR</a></li>
<li>
<div id="mobile-nav-action-btn">
<a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
</div>
</li>
</ul>
<div id="navbar-action-btn">
<a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
</div>
</nav>
</header>
<section id="intro">
<h2>Repair Services</h2>
<p>
Ok, so you broke your display? No problem, we can probably fix it.
Most computers can be opened easily and parts replaced for a fraction of the price of a new computer.
You can bring your own parts, or leave the shopping to us. We can source pretty much any part, new or used.
"Ok, so you can fix anything, how about my intelligent washing machine?" you might ask. Well, no we don't fix washing machines.
We also <span>DO NOT FIX APPLE DEVICES</span>. For more information or to start the repair procedure, contact us.
</p>
<p>
If you find yourself in need of new hardware, we have put together a small list of ethical suppliers for you. None of them are affiliated with us, but they do share our moral standards. We apologize in advance, none of them sell intelligent washing machines...
</p>
</section>
<section class="products" id="phones">
<h2>Phones</h2>
<p class="explanation">
This is a domain where Libre Software is only beginning to show its face. While Linux is at the core of the
<a class="link" href="https://source.android.com/" target="_blank" rel="noreferrer noopener">Android Open Source Project</a>,
with the amount of proprietary and spying software added on top of it by Google before it makes it to your phone disqualifies it.
Some distributions have been around for some time, and Ubuntu even tried to launch an Ubuntu Phone with little
success. We are now seeing an increased interest in Libre Phones that respect its users, so we recommend you
keep an eye on the following
</p>
<div class="wrapper">
<div class="product">
<div class="img-container">
<img src="/media/images/nitrophone-128.png" alt="NitroPhone Logo">
</div>
<h4>NitroPhone</h4>
<p class="description">
The NitroPhone is a first choice in terms of compatibility with your Android applications. They have
multiple versions and they all run GrapheneOS, a security focused, Libre, google stripped Android
distribution
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p class="yellow">Level: Intermediate</p>
<p>OS: GrapheneOS</p>
<p>OS Family: Android</p>
<p class="yellow">Libre: Almost</p>
</div>
</div>
<hr>
<a class="btn btn-1" href="https://www.nitrokey.com/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/pinephone-128.png" alt="PinePhone Logo">
</div>
<h4>PinePhone</h4>
<p class="description">
The PinePhone is a low cost community driven phone. It is still under heavy development and is currently
not comparable to Android. We believe it could be the first affordable fully featured Linux phone, but not
yet
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p class="red">Level: Advanced</p>
<p>OS: Mobian, PostmarketOS, etc</p>
<p>OS Family: GNU/Linux</p>
<p class="yellow">Libre: Almost</p>
</div>
</div>
<hr>
<a class="btn btn-1" href="https://www.pine64.org/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/librem5-128.png" alt="Purism Logo">
</div>
<h4>Librem 5</h4>
<p class="description">
Purism is a pioneer in the Linux phone market with the Librem 5. They invest heavily in the development of
the Linux phone ecosystem. It is available for purchase on their website, but again we do not think it is
production ready yet
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p class="red">Level: Advanced</p>
<p>OS: PureOS, other</p>
<p>OS Family: GNU/Linux</p>
<p class="green">Libre: Yes</p>
</div>
</div>
<hr>
<a class="btn btn-1" href="https://puri.sm/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
</div>
</section>
<section class="products alt" id="computers">
<h2>Computers</h2>
<p class="explanation">
Many companies already exist that manufacture freedom respecting devices that you can buy if you are in need of
a new computer.
This is not a complete list, but we have chosen a few popular options for you to pick from.
It is important to mention that Libre BIOS and Hardware is just as important as all the rest. We keep a close
eye on the <a class="link" href="https://riscv.org/" target="_blank" rel="noreferrer noopener">RISC-V CPU</a>,
as it could very well replace mobile CPUs in the near future
</p>
<div class="wrapper">
<div class="product">
<div class="img-container">
<img src="/media/images/system76.png" alt="System76 Logo">
</div>
<h4>System76</h4>
<p class="description">
A company that has been around for a long time. They offer devices that run coreboot as their BIOS and
their computers come with PopOS!, an Ubuntu derived distribution supported by System76. You can't go wrong
here. Laptops, desktops, servers, they have everything you need
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p class="green">Level: Beginner</p>
<p>OS: PopOS! (Ubuntu based)</p>
<p>Products: Server, PC, Laptop</p>
<p class="yellow">Libre: Almost</p>
</div>
</div>
<hr>
<a class="btn btn-1" href="https://system76.com/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/purism-128.png" alt="Purism Logo">
</div>
<h4>Purism</h4>
<p class="description">
Purism is a corporation "with social purpose". They build freedom respecting laptops and desktops with
modern hardware like intel CPUs, but a little more focused on privacy and security. Pureboot is also a
great security feature
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p class="green">Level: Beginner</p>
<p>OS: PureOS</p>
<p>Products: Server, PC, Laptop</p>
<p class="yellow">Libre: Almost</p>
</div>
</div>
<hr>
<a class="btn btn-1" href="https://puri.sm/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/raptor-128.png" alt="Raptor Logo">
</div>
<h4>Raptor</h4>
<p class="description">
Here is where it gets serious. This company managed to build a computer with both Libre Software and
Hardware (including the IBM Power9 open CPU), meaning every bit of code running on the machine is
auditable. This is the end goal of the Libre Software mouvement. Unfortunately, it comes at a price...
</p>
<hr>
<div class="includes">
<h5>Details</h5>
<div class="includes-items">
<p class="red">Level: Advanced</p>
<p class="red">OS: User installed</p>
<p>Products: Desktop, Server</p>
<p class="blue">Libre: Ultimate</p>
</div>
</div>
<hr>
<a class="btn btn-1" href="https://www.raptorcs.com/TALOSII/" target="_blank" rel="noreferrer noopener">Website</a>
</div>
</div>
</section>
<section id="call-to-action">
<h2>Ready?</h2>
<p class="description">
Do you hesitate between repairing your computer or buying a new one? Get in touch with us, we will help you make the right choice :)
</p>
<a class="btn btn-1" href="/pages/en/index.html#contact">Contact</a>
</section>
<footer>
<div class="newsletter">
<h5>Subscribe!</h5>
<p>We only send important news</p>
<form action="/php/newsletter.php" method="get">
<input type="text" name="newsletter-language" value="en" hidden>
<input type="email" name="newsletter-email" placeholder="Email" required id="newsletter-email">
<input class="catch" type="email" name="newsletter-email-2" placeholder="Email" id="newsletter-email-2">
<input type="submit" class="btn btn-1" value="Subscribe">
</form>
</div>
<div class="wrapper">
<a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
src="/media/images/git-white.png"></a>
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/CC-64.png">
</a>
<a href="https://www.torproject.org/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/onion-64.png">
</a>
<a href="/pages/fr/services/reparation.html">
<img src="/media/images/quebec.png" alt="Français Québec">
</a>
</div>
</footer>
</body>
</html>

View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="fr-CA">
<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">
<meta name='robots' content='noindex,follow' />
<title>Succès! | Page de Confirmation</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/errors.css"/>
</head>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/fr/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="/pages/fr/index.html">Accueil</a></li>
</ul>
</nav>
</header>
<body>
<!-- Bypass FOUC on firefox -->
<script>0</script>
<section id="message">
<div class="wrapper">
<h2>C'est fait!</h2>
<h4>Votre requête a été transmise avec succès</h4>
<h4>Vous pouvez fermer cette fenêtre ou retourner à l'Accueil</h4>
<a href="/pages/fr/index.html" class="btn btn-1">Retour à l'Accueil</a>
</div>
</section>
</body>
</html>

52
pages/fr/err/403.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="fr-CA">
<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">
<meta name='robots' content='noindex,follow' />
<title>Oups (403) | Page d'Accès Refusé</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/errors.css" />
</head>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/fr/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="/pages/fr/index.html">Accueil</a></li>
</ul>
</nav>
</header>
<body>
<!-- Bypass FOUC on firefox -->
<script>0</script>
<section id="message">
<div class="wrapper">
<h2>Oups (403)</h2>
<h4>
Une erreur
<a href="https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP" target="_blank"
rel="noreferrer noopener" class="link">403</a>
signifie que cette section n'est pas accessible au serveur web
</h4>
<h4>Vous pouvez fermer cette fenêtre ou retourner à l'Accueil</h4>
<a href="/pages/fr/index.html" class="btn btn-1">Retour à l'Accueil</a>
</div>
</section>
</body>
</html>

51
pages/fr/err/404.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="fr-CA">
<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">
<meta name='robots' content='noindex,follow' />
<title>Oups (404) | Erreur de Page Introuvable</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/errors.css" />
</head>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/fr/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="/pages/fr/index.html">Accueil</a></li>
</ul>
</nav>
</header>
<body>
<!-- Bypass FOUC on firefox -->
<script>0</script>
<section id="message">
<div class="wrapper">
<h2>Oups (404)</h2>
<h4>Une erreur
<a href="https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP" target="_blank"
rel="noreferrer noopener" class="link">404</a>
signifie que notre serveur ne trouve pas la page que vous avez demandé
</h4>
<h4>Vous pouvez fermer cette fenêtre ou retourner à l'Accueil</h4>
<a href="/pages/fr/index.html" class="btn btn-1">Retour à l'Accueil</a>
</div>
</section>
</body>
</html>

54
pages/fr/err/500.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="fr-CA">
<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">
<meta name='robots' content='noindex,follow' />
<title>Oups (500) | Erreur Interne du Serveur</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/errors.css" />
</head>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/fr/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="/pages/fr/index.html">Accueil</a></li>
</ul>
</nav>
</header>
<body>
<!-- Bypass FOUC on firefox -->
<script>0</script>
<section id="message">
<div class="wrapper">
<h2>Oups (500)</h2>
<h4>
Une erreur
<a href="https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP" target="_blank" rel="noreferrer noopener"
class="link">500</a>
signifie que notre serveur a rencontré une faute interne, nous nous excusons de cet inconvénient. Il est
possible que ce serveur soit en maintenance. Si le problème persiste<br />
<a href="/pages/fr/index.html#contact" class="link">Contactez-Nous</a>
</h4>
<h4>Vous pouvez fermer cette fenêtre ou retourner à l'Accueil</h4>
<a href="/pages/fr/index.html" class="btn btn-1">Retour à l'Accueil</a>
</div>
</section>
</body>
</html>

48
pages/fr/err/contact.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="fr-CA">
<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">
<meta name='robots' content='noindex,follow' />
<title>Oups | Erreur du Formulaire de Contact</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/errors.css" />
</head>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/fr/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="/pages/fr/index.html">Accueil</a></li>
</ul>
</nav>
</header>
<body>
<!-- Bypass FOUC on firefox -->
<script>0</script>
<section id="message">
<div class="wrapper">
<h2>Oups</h2>
<h4>Une erreur est survenue lors de l'envoi de votre message, s'il vous plaît réessayez plus tard. Nous nous excusons de cet inconvénient.</h4>
<h4>Si le problème persiste, appelez-nous au <br/>1 (833) PRJ-TL<span>Q</span>M</h4>
<h4>Vous pouvez fermer cette fenêtre ou retourner à l'Accueil</h4>
<a href="/pages/fr/index.html" class="btn btn-1">Retour à l'Accueil</a>
</div>
</section>
</body>
</html>

51
pages/fr/err/general.html Normal file
View File

@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="fr-CA">
<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">
<meta name='robots' content='noindex,follow' />
<title>Oups | Erreur du Formulaire de Contact</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/errors.css" />
</head>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/fr/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="/pages/fr/index.html">Accueil</a></li>
</ul>
</nav>
</header>
<body>
<!-- Bypass FOUC on firefox -->
<script>0</script>
<section id="message">
<div class="wrapper">
<h2>Oups</h2>
<h4>
Une erreur imprévue est survenue... S'il vous plaît, réessayez plus tard. Nous nous excusons de cet
inconvénient. Il est possible que ce serveur soit en maintenance. Si le problème persiste<br />
<a href="/pages/fr/index.html#contact" class="link">Contactez-Nous</a>
</h4>
<h4>Vous pouvez fermer cette fenêtre ou retourner à l'Accueil</h4>
<a href="/pages/fr/index.html" class="btn btn-1">Retour à l'Accueil</a>
</div>
</section>
</body>
</html>

327
pages/fr/index.html Normal file
View File

@ -0,0 +1,327 @@
<!DOCTYPE html>
<html lang="fr-CA">
<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>Le Projet TeleQom | Accueil</title>
<meta name="description" content="TeleQom est un organsime à but non-lucratif Québécois qui offre des
services informatiques pour financer ses nombreux projets de Logiciels Libres" />
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/index.css" />
</head>
<body>
<!-- FOUC -->
<script>0</script>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="#top" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="#apropos">À Propos</a></li>
<li><a class="btn btn-2" href="#services">Services</a></li>
<li><a class="btn btn-2" href="#projets">Projets</a></li>
<li><a class="btn btn-2" href="#contact">Contact</a></li>
<li><a class="btn btn-2" href="/pages/en/index.html">EN</a></li>
</ul>
<div id="qonsole-btn">
<a href="https://qonsole.teleqom.org"><img src="/media/images/qonsole.png" alt="Qonsole"></a>
</div>
</nav>
</header>
<section id="welcome">
<h1 class="welcome-title">
Le Projet Tele<span>Q</span>om
</h1>
<h4 class="welcome-text">
La Télécommunication aux Valeurs <span>Québécoises</span>
</h4>
<a href="#apropos" id="scroll-down">
<img src="/media/images/down.png" alt="Icone defilement">
</a>
</section>
<section class="about" id="apropos">
<h2>À Propos</h2>
<div>
<h3>
Tele<span>Q</span>om, c'est quoi?
</h3>
<p>
Le Projet Tele<span>Q</span>om, organisme à but non-lucratif Québécois, est un idéal. Nous cherchons à
restaurer les valeurs éthiques et morales dans les applications que nous utilisons tous quotidiennement. Que
ce soit votre plateforme sociale, de commerce en ligne, de courriel ou même de messagerie, tous ou presque
contiennent aujourd'hui des logiciels espions. Des robots lisent vos courriels et vos messages, et ils vous
écoutent même parler. C'est à notre avis inacceptable voir illégal mais vous avez accepté ces termes à la mise
en marche de vos appareils et services, c'est pourquoi la loi est impuissante actuellement. Faute
d'alternative, nous suivons tous ces géants des technologies aux mauvaises intentions. C'est en réponse à ces
graves manquements d'humanité que Tele<span>Q</span>om est né.
</p>
</div>
<div>
<h3>
Logiciels Libres
</h3>
<p>
Chez Tele<span>Q</span>om, nos projets embrassent une philosophie qui existe déjà
depuis longtemps, ils sont constitués uniquement de Logiciels Libres. De façon simple, un programme est un peu
comme une recette de cuisine. Un Logiciel Libre donne un accès complet au code source (la recette, que nous
appelons chez Tele<span>Q</span>om notre <a href="https://qode.teleqom.org" target="_blank"
rel="noreferrer noopener" class="link">Qode</a>) et la permission de l'auditer pour découvrir des failles de
sécurité, le modifier ou l'améliorer avec la seule condition de rendre également publique ce qui a été
amélioré. Les logiciels de type propriétaire par contre, c'est tout à fait le contraire. Ils dissimulent le
fonctionnement, et interdisent la vérification de leur code source. Il est donc très difficile d'identifier ce
que ce dernier fait vraiment de vos informations.
</p>
</div>
<div>
<h3>
La Véritable Différence
</h3>
<p>
Nos projets sont conçus de manière à ce qu'il nous soit impossible de vous espionner. Ce que vous faites dans
votre vie ne nous concerne pas. Des logiciels propriétaires d'intelligence artificielle peuvent prévoir vos
comportements, modifier vos habitudes et votre pensée juste avec ces données que nous croyons tous
innoffensives. Des compagnies comme <a
href="https://fr.wikipedia.org/wiki/Scandale_Facebook-Cambridge_Analytica" target="_blank"
rel="noreferrer noopener" class="link">Cambridge Analytica</a> ont déjà interféré dans les élections aux
États-Unis, et ce n'est que le début. <a href="https://fr.wikipedia.org/wiki/Pegasus_(logiciel_espion)"
target="_blank" rel="noreferrer noopener" class="link">Pegasus</a> donne accès aux plus fortunés à la vie
virtuelle complète de n'importe qui, à l'aide de failles de sécurité dans les logiciels. Il est donc impératif
de se débarasser de ses chaînes, et c'est ici que Tele<span>Q</span>om entre en ligne de compte.
</p>
</div>
<div>
<h3>
La Télécommunication
</h3>
<p>
Ce n'est pas joli quand on regarde de plus près comment ces grandes corporations nous utilisent. Mais plutôt
que de baisser les bras, nous avons décidé d'y remédier avec le peu de liberté qu'il nous reste. Nous
commencerons par purifier les télécommunications (courriel, social, messagerie, vidéoconférence et téléphone).
Par la suite, <span>Q</span>ommerce, qui servira aussi à subventionner l'infrastructure et le développement de
nos projets. Et enfin, une application de vote, baptisée Politi<span>Q</span>, qui redonnera le pouvoir au
peuple. N'oubliez pas, Tele<span>Q</span>om ne vend pas vos données et est un organisme à but non-lucratif, il
est donc nécessaire à sa survie de recevoir des dons et des subventions. Nous faisons notre possible pour
offrir ces projets gratuitement, mais ce n'est certainement pas évident. Les profits générés par les services
suivants sont tous investis dans le développement de nos projets!
</p>
</div>
</section>
<section class="services" id="services">
<h2>Nos Services</h2>
<div class="service">
<img src="/media/images/code.png" alt="code logo">
<div class="service-content">
<h4>Développement</h4>
<p>
Un site web, une application mobile, une application de commerce en ligne, peu importe.
Tele<span>Q</span>om se sert autant que possible de Logiciels Libres pour construire votre projet. Ceci
résulte en une application qui respecte ses utilisateurs, est plus sécuritaire, plus stable et beaucoup
moins dispendieuse.
</p>
<a class="btn btn-1" href="/pages/fr/services/developpement.html">Plus</a>
</div>
</div>
<div class="service">
<img src="/media/images/repair.png" alt="repair logo">
<div class="service-content">
<h4>Réparation</h4>
<p>
Toujours dans la même optique, nous aimons donner une deuxième vie à votre matériel. Écran brisée? Votre
batterie
de portable de charge plus? Votre ordinateur ne démarre plus ou est devenu lent? Nous pouvons régler ça!
</p>
<a class="btn btn-1" href="/pages/fr/services/reparation.html">Plus</a>
</div>
</div>
<div class="service">
<img src="/media/images/support.png" alt="support logo">
<div class="service-content">
<h4>Soutien</h4>
<p>
Du soutien technique payant est disponible pour la plupart des troubles informatiques que vous aurez.
Chez Tele<span>Q</span>om, nous aimons nous amuser avec la technologie. Que ce soit votre réseau wi-fi,
votre navigateur a besoin d'une mise à jour, vous ne pouvez plus mettre à jour vos Apps sur votre téléphone,
peu importe. Contactez-nous, il est possible que nous puissions vous aider! :)
</p>
<a class="btn btn-1" href="#contact">Contact</a>
</div>
</div>
<div class="service">
<img src="/media/images/installation.png" alt="installation logo">
<div class="service-content">
<h4>Installation</h4>
<p>
Il est maintenant possible de remplacer la plupart des logiciels propriétaires malveillants par des
Logiciels Libres. Votre système d'exploitation d'ordinateur peut être remplacé par un GNU/Linux tel que <a
href="https://www.linuxmint.com/" target="_blank" rel="noreferrer noopener" class="link">Linux Mint</a>.
Certains téléphones cellulaires sont supportés par <a href="https://grapheneos.org/" target="_blank"
rel="noreferrer noopener" class="link">GrapheneOS</a>, et il sera possible de passer à un téléphone Libre
tel que le <a href="https://puri.sm/products/librem-5/" target="_blank" rel="noreferrer noopener"
class="link">Librem 5</a> ou bien le <a href="https://www.pine64.org/pinephonepro/" target="_blank"
rel="noreferrer noopener" class="link">Pine Phone</a>. <a href="https://fr.libreoffice.org/" target="_blank"
rel="noreferrer noopener" class="link">Libre Office</a> est une excellente alternative
pour vos documents de tout genre. Pour le traitement d'image, <a href="https://www.gimp.org/" target="_blank"
rel="noreferrer noopener" class="link">GIMP</a> est souvent même un premier choix!
</p>
<a class="btn btn-1" href="/pages/fr/services/installation.html">Plus</a>
</div>
</div>
</section>
<section class="projects" id="projets">
<h2>Nos Projets</h2>
<p class="overview">Les projets suivants sont ou seront disponibles à partir de votre
<span>Q</span>onsole. Repassez voir plus tard si le Statut de votre projet préféré a
changé!
</p>
<div class="wrapper">
<div class="project">
<img src="/media/images/qonsole.png" alt="Qonsole Logo">
<h4><span>Q</span>onsole</h4>
<p class="description">
Le tableau de bord principal d'où vous accédez à toutes vos applications. La <span>Q</span>onsole est en
charge de vous afficher le tout en un même endroit, de façon uniforme et simple.
</p>
<p>
<p class="status dev">En Développement</p>
</p>
</div>
<div class="project">
<img src="/media/images/disq.png" alt="DisQ Logo">
<h4>Dis<span>Q</span></h4>
<p class="description">
C'est ici que vous storez toutes vos données, c'est votre disque dur personnel mais hébergé sur un serveur
externe. Le tout accessible seulement par vous, le serveur ne peut voir vos données.
</p>
<p>
<p class="status dev">En Développement</p>
</p>
</div>
<div class="project">
<img src="/media/images/interqom.png" alt="InterQom Logo">
<h4>Inter<span>Q</span>om</h4>
<p class="description">
Inter<span>Q</span>om est le remplacement sain aux alternatives de réseaux sociaux. Vos conversations sont
entièrement privées et même nous n'avons pas accès à vos données.
</p>
<p class="status hold">En Attente</p>
</div>
<div class="project">
<img src="/media/images/qommerce.png" alt="Qommerce Logo">
<h4><span>Q</span>ommerce</h4>
<p class="description">
La centrale de l'échange et du commerce en ligne. Commerces locaux et particuliers s'y retrouvent pour
partager le fruit de leur labeur. Acceptant la cryptomonnaie ainsi que l'argent Canadien.
</p>
<p class="status hold">En Attente</p>
</div>
<div class="project">
<img src="/media/images/qonvo.png" alt="Qonvo Logo">
<h4><span>Q</span>onvo</h4>
<p class="description">
La messagerie instantanée est la façon la plus simple de communiquer avec nos compatriotes. Ce projet
inclus les appels audio et vidéo, le tout chiffré de vous à vos destinataires.
</p>
<p class="status hold">En Attente</p>
</div>
<div class="project">
<img src="/media/images/qourrier.png" alt="Qourrier Logo">
<h4><span>Q</span>ourrier</h4>
<p class="description">
Le portail d'accès à vos courriels, à partir de votre <span>Q</span>onsole. Les courriels entre
utilisateurs sont entièrement chiffrés et nous supportons la plupart des fournisseurs.
</p>
<p class="status hold">En Attente</p>
</div>
<div class="project">
<img src="/media/images/politiq.png" alt="PolitiQ Logo">
<h4>Politi<span>Q</span></h4>
<p class="description">
Tele<span>Q</span>om est une table ronde où tous les Québécois sont invités, votre opinion sera enfin
entendue auprès du gouvernement. La réelle démocratie à portée de clavier!
</p>
<p class="status hold">En Attente</p>
</div>
<div class="project">
<img src="/media/images/qontact.png" alt="Qontact Logo">
<h4><span>Q</span>ontact</h4>
<p class="description">
Le bon vieux carnet d'adresse. Ici vous storez vos informations de contact, courriel, téléphone,
identifiants de <span>Q</span>onvo ou Inter<span>Q</span>om, et plus encore.
</p>
<p class="status hold">En Attente</p>
</div>
<div class="project">
<img src="/media/images/qalendrier.png" alt="Qalendrier Logo">
<h4><span>Q</span>alendrier</h4>
<p class="description">
On a tous besoin d'un calendrier. Ici vous pouvez gérer votre vie personnelle ou professionnelle, céduler
un rendez-vous avec un autre utilisateur et même voir vos événements sur Inter<span>Q</span>om.
</p>
<p class="status hold">En Attente</p>
</div>
<div class="project">
<img src="/media/images/qable.png" alt="Qable Logo">
<h4><span>Q</span>able</h4>
<p class="description">
Une plateforme de diffusion de contenu audio ou vidéo, qui utilise la technologie de <a
href="https://fr.wikipedia.org/wiki/BitTorrent" target="_blank" rel="noreferrer noopener"
class="link">Torrent</a> pour alléger la charge sur les serveurs et donc les frais qui en découlent. Plus
il y a d'utilisateurs, plus c'est rapide!
</p>
<p class="status hold">En Attente</p>
</div>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<form action="/php/contact.php" method="get" id="contact-form">
<input type="text" name="contact-language" value="fr" hidden>
<input type="text" name="contact-name" placeholder="Nom" id="contact-first-name" required>
<input type="email" name="contact-email" placeholder="Courriel" id="contact-email" required>
<input class="catch" type="email" name="contact-email-2" placeholder="Courriel" id="contact-email-2">
<textarea name="contact-message" id="contact-message" placeholder="Message..." cols="30" rows="10" required></textarea>
<input class="btn btn-1" type="submit" value="Envoyer">
</form>
</section>
<footer>
<div class="newsletter">
<h5>Abonnez-vous!</h5>
<p>Nous vous enverrons seulement les nouvelles importantes</p>
<form action="/php/newsletter.php" method="get">
<input type="text" name="newsletter-language" value="fr" hidden>
<input type="email" name="newsletter-email" placeholder="Courriel" required id="newsletter-email">
<input class="catch" type="email" name="newsletter-email-2" placeholder="Courriel" id="newsletter-email-2">
<input type="submit" class="btn btn-1" value="S'abonner">
</form>
</div>
<div class="wrapper">
<a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
src="/media/images/git-white.png"></a>
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/CC-64.png">
</a>
<a href="https://www.torproject.org/fr/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/onion-64.png">
</a>
<a href="/pages/en/index.html">
<img src="/media/images/canada.png" alt="English Canada">
</a>
</div>
</footer>
</body>
</html>

View File

@ -0,0 +1,384 @@
<!DOCTYPE html>
<html lang="fr-CA">
<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>Le Project TeleQom | Services de Développement</title>
<meta name="description" content="Les services de développement de TeleQom inclus le développement de Logiciel Libres de site web, d'application mobiles , de commerces en ligne tel qu'OpenCart et de Plateforme de Gestion de Contenu tel que Wordpress"/>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/development.css"/>
</head>
<body>
<!-- FOUC -->
<script>0</script>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/fr/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="#sites-web">Sites Web</a></li>
<li><a class="btn btn-2" href="#e-commerce">E-commerce</a></li>
<li><a class="btn btn-2" href="#cms">CMS</a></li>
<li><a class="btn btn-2" href="#autres">Autres</a></li>
<li><a class="btn btn-2" href="/pages/en/services/developpement.html">EN</a></li>
<li>
<div id="mobile-nav-action-btn">
<a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
</div>
</li>
</ul>
<div id="navbar-action-btn">
<a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
</div>
</nav>
</header>
<section id="intro">
<h2>Services de Développement</h2>
<p>
Nous offrons plusieurs services de développement qui pourraient vous aider à démarrer ou améliorer votre projet.
Chez Tele<span>Q</span>om,
nous préférons une approche plus humaine. Lorsque vous vous sentirez prêt, contactez-nous et nous vous
offrirons la meilleure option selon vos besoins.
Oh et n'oubliez pas, tous les profits générés sont investis dans nos projets de Logiciels Libres! En nous
choisissant, vous vous aidez vous même ainsi que la communauté :)
</p>
</section>
<section class="products" id="sites-web">
<h2>Sites Web</h2>
<p class="explanation">
Les sites web sont une façon simple d'apparaître en ligne. Ils vous permettent d'être trouvé par les moteurs de recherche. Vous pouvez y partager quelques produits et y laisser vos informations de contact. Vous pouvez expliquer ce que votre entreprise ou organisme fait et donner une idée générale de pourquoi elle existe. Ce site est un exemple d'un site web de base!
</p>
<div class="wrapper">
<div class="product">
<div>
<h4>Site Web - Base</h4>
<p class="description">Site web simple, parfait pour les professionnels, les compagnies de construction, etc </p>
</div>
<hr>
<div class="includes">
<h5>Ensemble</h5>
<div class="includes-items">
<p>Modèle Tele<span>Q</span>om<br>- OU -<br>Votre Modèle Bootstrap 5</p>
<p>Développeur: <span class="green">3 Heures</span></p>
</div>
</div>
<hr>
<div class="includes">
<h5><span>Q</span>ube Micro</h5>
<div class="includes-items">
<p>1GB</p>
<p>5 Courriels</p>
<p>HTTPS</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Ensemble: <span class="green">100$</span></p>
<p>Hébergement (<span>Q</span>ube): <span class="green">60$ / An</span></p>
</div>
</div>
<div class="product">
<div>
<h4>Site Web - Complet</h4>
<p class="description">Un site professionnel, avec plusieurs fonctionnalités utiles</p>
</div>
<hr>
<div class="includes">
<h5>Ensemble</h5>
<div class="includes-items">
<p>Modèle Tele<span>Q</span>om<br>- OU -<br>Votre Modèle Bootstrap 5</p>
<p>Développeur: <span class="green">5 Heures</span></p>
<p>Infolettre</p>
<p>Formulaire Contact</p>
</div>
</div>
<hr>
<div class="includes">
<h5><span>Q</span>ube Mini</h5>
<div class="includes-items">
<p>5GB</p>
<p>25 Courriels</p>
<p>cPanel</p>
<p>Base de Données</p>
<p>HTTPS</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Ensemble: <span class="green">250$</span></p>
<p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
</div>
</div>
<div class="product">
<div>
<h4>Site Web - Personnalisé</h4>
<p class="description">Du développement entièrement personnalisé. Super si vous ne désirez que le site web et préférez gérer votre hébergement, formattage d'image et tout le reste vous même.</p>
</div>
<hr>
<div class="includes">
<div class="includes-items">
<p>Adapté à vos besoin</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Développeur: <span class="green">50$ / Heure</span></p>
</div>
</div>
</div>
</section>
<section class="products alt" id="e-commerce">
<h2>E-Commerce</h2>
<p class="explanation">
Les plateformes de commerce en ligne Libres sont les meilleures pour réduire les coûts de votre commerce en ligne.
Elles sont utilisées et maintenues par des milliers de personnes ce qui résulte en une plateforme stable et sécurisée.
<span>Q</span>ommerce pourra être connectée aux applications suivantes grâce à un "plugin" pour vous offrir une
meilleure visibilité!
</p>
<div class="wrapper">
<div class="product bg">
<div>
<h4>OpenCart</h4>
<p class="description">
Commerce OpenCart simple, excellent pour tout type de commerce.
La Bouti<span>Q</span> Tele<span>Q</span>om est une instance OpenCart
</p>
</div>
<hr>
<div class="includes">
<div class="includes-items">
<p>Développeur: <span class="green">3 Heures</span></p>
</div>
</div>
<hr>
<div class="includes">
<h5><span>Q</span>ube Mini</h5>
<div class="includes-items">
<p>5GB</p>
<p>25 Courriels</p>
<p>cPanel</p>
<p>Base de Données</p>
<p>HTTPS</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Ensemble: <span class="green">150$</span></p>
<p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
</div>
</div>
<div class="product bg-2">
<div>
<h4>WooCommerce</h4>
<p class="description">Une instance Wordpress modifiée afin de devenir un commerce en ligne complet</p>
</div>
<hr>
<div class="includes">
<div class="includes-items">
<p>Développeur: <span class="green">3 Heures</span></p>
</div>
</div>
<hr>
<div class="includes">
<h5><span>Q</span>ube Mini</h5>
<div class="includes-items">
<p>5GB</p>
<p>25 Courriels</p>
<p>cPanel</p>
<p>Base de Données</p>
<p>HTTPS</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Ensemble: <span class="green">200$</span></p>
<p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
</div>
</div>
</div>
</section>
<section class="products" id="cms">
<h2>CMS</h2>
<p class="explanation">
Une plateforme de gestion de contenu, en anglais "Content Management System" ou CMS, est utile si vous planifiez
changer votre contenu régulièrement.
Elle vous permet de personnaliser vous-même votre site avec aucune expérience en programmation (ou presque), ce
qui vous permet de réaliser des économies en frais de développement. Toutefois, elle requiert tout de même un
minimum de connaissance technique et peut devenir plus difficile à maintenir à long terme, résultant en une
mauvaise
expérience pour vos clients.
Tele<span>Q</span>om offre tout de même du support payant si vous vous retrouvez bloqué, c'est donc quand même
une
excellente façon de démarrer votre projet.
</p>
<div class="wrapper">
<div class="product">
<div>
<h4>Wordpress</h4>
<p class="description">Installation de base de votre instance Wordpress avec tout ce dont vous avez besoin</p>
</div>
<hr>
<div class="includes">
<h5><span>Q</span>ube Mini</h5>
<div class="includes-items">
<p>5GB</p>
<p>25 Courriels</p>
<p>cPanel</p>
<p>Base de Données</p>
<p>HTTPS</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Ensemble: <span class="green">50$</span></p>
<p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
</div>
</div>
<div class="product">
<div>
<h4>Drupal</h4>
<p class="description">Drupal est une autre plateforme CMS Libre qui vous aidera à démarrer</p>
</div>
<hr>
<div class="includes">
<h5><span>Q</span>ube Mini</h5>
<div class="includes-items">
<p>5GB</p>
<p>25 Courriels</p>
<p>cPanel</p>
<p>Base de Données</p>
<p>HTTPS</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Ensemble: <span class="green">50$</span></p>
<p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
</div>
</div>
<div class="product">
<div>
<h4>Joomla</h4>
<p class="description">Joomla aussi est une autre solution CMS Libre populaire</p>
</div>
<hr>
<div class="includes">
<h5><span>Q</span>ube Mini</h5>
<div class="includes-items">
<p>5GB</p>
<p>25 Courriels</p>
<p>cPanel</p>
<p>Base de Données</p>
<p>HTTPS</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>Ensemble: <span class="green">50$</span></p>
<p>Hébergement (<span>Q</span>ube): <span class="green">150$ / An</span></p>
</div>
</div>
</div>
</section>
<section class="products alt" id="autres">
<h2>Autres</h2>
<p class="explanation">
Les items dans cette catégorie n'ont pas de prix puisqu'il est impossible d'estimer avant d'avoir vu
l'étendu de votre projet. Tout est possible bien sûr, toutefois vous devrez entrer en contact avec nous pour une
évaluation
</p>
<div class="wrapper">
<div class="product">
<div>
<h4>Applications Web</h4>
<p class="description">
Vous avez donc une excellente idée de plateforme de distribution de Podcast. Ce serait donc une
Application Web puisqu'elle requiert une base de données et plusieurs éléments entièrement personnalisés
</p>
</div>
</div>
<div class="product">
<div>
<h4>IoT</h4>
<p class="description">
IoT, de l'anglais Internet of Things comprend tous les petits appareils tel que des capteurs et jauges.
Une machine qui alimente les animaux ou des capteurs de température, c'est du IoT
</p>
</div>
</div>
<div class="product">
<div>
<h4>App Mobile</h4>
<p class="description">
Tele<span>Q</span>om offre le développement d'App Mobile, toutefois nous vous recommandons de choisir la
voie de l'Application Web Progressive.
Une PWA offre la plupart des fonctionnalités d'une App "Native" et fonctionne sur la grande majorité des
appareils mobile. La configuration est minime si vous avez déjà un site web dans la plupart des cas.
Il est toutefois possible qu'une App "Native" soit requise pour votre projet
</p>
</div>
</div>
</div>
</section>
<section id="call-to-action">
<h2>Prêt?</h2>
<p class="description">
Vous trouvez certaines informations complexes ou vous êtes prêt pour les prochaines étapes? C'est le moment de
nous contacter! Soyez sans crainte, nous vous aiderons à prendre la décision éthique :)
</p>
<a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
</section>
<footer>
<div class="newsletter">
<h5>Abonnez-vous!</h5>
<p>Nous vous enverrons seulement les nouvelles importantes</p>
<form action="/php/newsletter.php" method="get">
<input type="text" name="newsletter-language" value="fr" hidden>
<input type="email" name="newsletter-email" placeholder="Courriel" required id="newsletter-email">
<input class="catch" type="email" name="newsletter-email-2" placeholder="Courriel id="newsletter-email-2">
<input type="submit" class="btn btn-1" value="S'abonner">
</form>
</div>
<div class="wrapper">
<a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
src="/media/images/git-white.png"></a>
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/CC-64.png">
</a>
<a href="https://www.torproject.org/fr/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/onion-64.png">
</a>
<a href="/pages/en/services/development.html">
<img src="/media/images/canada.png" alt="English Canada">
</a>
</div>
</footer>
</body>
</html>

View File

@ -0,0 +1,660 @@
<!DOCTYPE html>
<html lang="fr-CA">
<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>Le Projet TeleQom | Service d'Installation</title>
<meta name="description"
content="Le Projet TeleQom offre un service d'installation de Logiciels Libres. Nous installons des systèmes d'exploitation et des apps de tout genres. Venez voir!" />
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/installation.css" />
</head>
<body>
<!-- FOUC -->
<script>0</script>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/fr/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="#os">OS</a></li>
<li><a class="btn btn-2" href="#apps">Apps</a></li>
<li><a class="btn btn-2" href="/pages/en/services/installation.html">EN</a></li>
<li>
<div id="mobile-nav-action-btn">
<a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
</div>
</li>
</ul>
<div id="navbar-action-btn">
<a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
</div>
</nav>
</header>
<section id="intro">
<h2>Services d'Installation</h2>
<p>
Les logiciels propriétaires sont devenus une véritable menace pour nos droits et libertés. Nous devons nous
diriger vers les Logiciels Libres (ouverts, écrit par la communauté, recette de code transparente, partageable
et contrôlé par l'utilisateur). Nos ordinateurs et serveurs privés chez Tele<span>Q</span>om n'utilisent que des
Logiciels Libres, alors vous le pouvez aussi! Ces petites décisions impacterons sérieusement la vie des
générations futures. Ce n'est pas le bon endroit pour en discuter, mais remplacer les logiciels qui vous
espionnent vous et vos proches est un très bon point de départ! Notez que ces Logiciels Libres sont gratuits,
vous pouvez donc tout installer gratuitement vous-même si vous le voulez. La demande de Qontribution ne sert qu'à
couvrir les honoraires de notre employé qui l'installera pour vous, ainsi qu'à financer nos projets.
</p>
</section>
<section class="products" id="os">
<h2>Systèmes d'Exploitation</h2>
<p class="explanation">
C'est quoi? Un <a href="https://fr.wikipedia.org/wiki/Operating_system" target="_blank"
rel="noreferrer noopener" class="link">système d'exploitation</a>, aussi appelé un OS, est un regroupement de logiciels qui intéragissent
avec votre matériel (les composantes physiques de votre ordinateur). C'est sans doute la plus grande pièce de
code qui s'execute sur votre machine, et un OS corrompu peut vous espionner et faire ce qu'il veut de vos
données et applications sur votre système. Nous vous recommandons <a
href="https://www.whonix.org/wiki/Host_Operating_System_Selection" target="_blank" rel="noreferrer noopener"
class="link">cette page du Projet Whonix</a>, un project connu pour sa sécurité et son accent sur la vie
privée pour comprendre pourquoi GNU/Linux est un excellent choix. Voici quelques exemples, mais il en existe
beaucoup d'autres!
</p>
<div class="wrapper">
<div class="product">
<div class="img-container">
<img src="/media/images/linux-mint-96.png" alt="Linux Mint Logo">
</div>
<h4>Linux Mint</h4>
<p class="description">
Linux Mint, tout comme Ubuntu (son parent), est compatible avec plusieurs applications propriétaires ce
qui en fait un excellent choix pour débutant qui quitte les OS commerciaux. Son bureau ressemble
beaucoup à Windows en terme d'emplacement général. C'est notre premier choix pour ceux qui quittent Windows 10
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p class="green">Niveau: Débutant</p>
<p>Bureau: Cinnamon</p>
<p>Similaire: Windows</p>
<p>Paquets: Debian (.deb)</p>
<p class="yellow">Libre: Presque</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">50$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://linuxmint.com/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/ubuntu-logo32.png" alt="Ubuntu Logo">
</div>
<h4>Ubuntu</h4>
<p class="description">
Ubuntu &reg;, "Humanité" en langue Africaine, est une approche plus humaine d'un OS. Il est supporté
par Canonical &trade; qui est bien (ou mal) connu dans l'univers Linux. Tout comme Linux Mint, il est plus flexible
en terme des logiciels disponibles, donc parfait pour un débutant. Son bureau est GNOME, qui ressemble un
peu plus à MacOS
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p class="green">Niveau: Débutant</p>
<p>Bureau: GNOME</p>
<p>Similaire: MacOS</p>
<p>Paquets: Debian (.deb)</p>
<p class="yellow">Libre: Presque</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">50$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://ubuntu.com/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/debian-128.png" alt="Debian Logo">
</div>
<h4>Debian</h4>
<p class="description">
La prochaine étape est le parent d'Ubuntu et Linux Mint, Debian. Debian est connu pour sa stabilité, sa
sécurité et sa liberté. Ici rien ne vous empêche d'installer des logiciels propriétaire si vous le
désirez, mais ce n'est pas disponible par défaut. C'est notre distribution de choix chez
Tele<span>Q</span>om.
Debian vient également en plusieurs saveurs, il peut ressembler à n'importe quel OS commercial
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p class="yellow">Niveau: Intermédiaire</p>
<p>Bureau: GNOME</p>
<p>Similaire: Plusieurs</p>
<p>Paquets: Debian (.deb)</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">50$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.debian.org/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/Qubes.png" alt="Qubes Logo">
</div>
<h4>Qubes</h4>
<p class="description">
Celui-ci diffère des autres choix puisque ce n'est pas réellement un système d'exploitation, c'est plutôt
un environnement qui lance plusieurs OS à la fois afin de séparer vos tâches. Il est plus difficile à
apprendre que les autres, et demande plus de connaissances techniques et un meilleur ordinateur
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p class="red">Niveau: Avancé</p>
<p>Bureau: XFCE</p>
<p>Similaire: Rien</p>
<p>Paquets: Debian (.deb), RedHat (.rpm)</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">50$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.qubes-os.org/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
</div>
</section>
<section class="products alt" id="apps">
<h2>Applications</h2>
<p class="explanation">
Cette section pourrait être énorme. L'univers Linux comprends tellement de choix d'Applications, il est
impossible de tous les mentionner ici. Nous avons fait une liste de celles que la plupart des gens utilisent
quotidiennement. Allons-y!
</p>
<div class="wrapper">
<div class="product">
<div class="img-container">
<img src="/media/images/libreoffice.png" alt="LibreOffice Logo">
</div>
<h4>Libre Office</h4>
<p class="description">
Libre Office est un premier choix pour vos applications de bureau. Il contient un éditeur de text
compatible avec Word, un éditeur de feuille de calcul compatible avec Excel, et bien plus encore
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p>Similaire: Suite Office</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://fr.libreoffice.org/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/gimp.png" alt="GIMP Logo">
</div>
<h4>GIMP</h4>
<p class="description">
GIMP (Programme de Manipulation d'Image GNU) a la plupart des fonctionnalités que vous pouvez avoir de
besoin en ce qui a trait à la manipulation d'image. Il y a tellement d'options, il est possible que vous
vous sentiez un peu perdu au début
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p>Similaire: PhotoShop</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.gimp.org/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/Inkscape.png" alt="Inkscape Logo">
</div>
<h4>Inkscape</h4>
<p class="description">
Une autre application populaire pour le traitement d'image, compatible avec les SVG et plusieurs autres
formats
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p>Similaire: PhotoShop</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://inkscape.org/fr/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/blender.png" alt="Blender Logo">
</div>
<h4>Blender</h4>
<p class="description">
Blender est une des applications les plus utilisée dans le monde pour le modelage 3D, l'animation et plus
encore
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p>Similaire: Cinema 4D, SolidWorks</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.blender.org/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/Firefox.png" alt="Firefox Logo">
</div>
<h4>Firefox</h4>
<p class="description">
Votre navigateur internet propriétaire est probablement le pire logiciel espoin sur votre ordinateur.
Firefox est ancien, bien connu, stable bien supporté, plein de fonctionnalités et respecte la vie privée
et la liberté. C'est notre premier choix!
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p>Similaire: Chrome, Edge</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.mozilla.org/fr/firefox/" target="_blank"
rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/Chromium.png" alt="Chromium Logo">
</div>
<h4>Chromium</h4>
<p class="description">
Chromium est le coeur des navigateurs Chrome et Edge. Cette version ne contient pas de logiciel
propriétaire mais conserve tout de même ses fonctionnalités
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p>Similaire: Chrome, Edge</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.chromium.org/Home/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/codium.png" alt="Codium Logo">
</div>
<h4>Codium</h4>
<p class="description">
Codium ou VSCodium est la version Libre du populaire éditeur de code, appartenant maintenant à Microsoft
et équipé de télémétrie (un autre mot pour espionnage) qui se nomme Visual Studio Code. Cette version
contient uniquement la portion de Logiciel Libre. Nous l'utilisons quotidiennement chez
Tele<span>Q</span>om
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p>Similaire: VSCode, JetBrains</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://vscodium.com/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/Rhythmbox.png" alt="Rhythmbox Logo">
</div>
<h4>Rhythmbox</h4>
<p class="description">
Un lecteur audio universel. Il peut lire des podcasts ou des fichiers audio locaux, tous ce que vous avez
de besoin d'une application de musique
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p>Similaire: iTunes, WMP</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://wiki.gnome.org/Apps/Rhythmbox/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/vlc.png" alt="VLC Logo">
</div>
<h4>VLC Player</h4>
<p class="description">
Ne laissez pas le cône vous faire douter, cette application n'est pas en construction! C'est un
excellent lecteur média, autant audio que vidéo
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p>Similaire: iTunes, WMP</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.videolan.org/index.fr.html" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/mattermost.png" alt="Mattermost Logo">
</div>
<h4>Mattermost</h4>
<p class="description">
Mattermost est un logiciel IRC de chat avec un bel interface. Utilisé surtout pour les communications au
bureau ainsi que pour la productivité, il est rempli de fonctionnalités
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p>Similaire: Slack, Teams</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://mattermost.com/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/transmission.png" alt="Transmission Logo">
</div>
<h4>Transmission</h4>
<p class="description">
Un client BitTorrent Libre et simple pour partager des fichiers sur internet. C'est l'ultime expression de la
communauté en logiciel. Il est excellent dans le partage de gros fichiers puisqu'il devient plus
rapide plus il y a de personnes qui partage le fichier. Vous pouvez télécharger la plupart des
distributions Linux avec Transmission, c'est plus rapide!
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p>Similaire: uTorrent, Vuze</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://transmissionbt.com/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/signal.png" alt="Signal Logo">
</div>
<h4>Signal</h4>
<p class="description">
Signal est une application mobile (et maintenant Linux aussi) de pointe pour la messagerie directe.
Contrairement à notre projet Qonvo, elle nécessite un téléphone cellulaire avec un numéro de téléphone
valide mais c'est tout de même la meilleure en ce moment
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p>Similaire: WhatsApp, iMessage</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://signal.org/fr/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/Audacity.png" alt="Audacity Logo">
</div>
<h4>Audacity</h4>
<p class="description">
Vous avez déjà eu envie de couper un fichier audio? Ou simplement changer son format? Audacity peut tout
faire cela et est facile à utiliser
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p>Similaire: Garage Band, Audition</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.audacityteam.org/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/OpenShot.png" alt="OpenShot Logo">
</div>
<h4>OpenShot</h4>
<p class="description">
Éditeur de vidéo simple. Transitions, effets, audio, peu importe. Vous pouvez accomplir presque tout avec
cette application et son interface est facile à naviguer
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p>Similaire: Premiere, Final Cut</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<div class="qontribution">
<h5><span>Q</span>ontribution</h5>
<p>
Installation: <span class="green">20$</span>
</p>
</div>
<hr>
<a class="btn btn-1" href="https://www.openshot.org/fr/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
</div>
</section>
<section id="call-to-action">
<h2>Prêt?</h2>
<p class="description">
Vous trouvez certaines informations complexes ou vous êtes prêt pour les prochaines étapes? C'est le moment de
nous contacter! Soyez sans crainte, nous vous aiderons à prendre la décision éthique :)
</p>
<a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
</section>
<footer>
<div class="newsletter">
<h5>Abonnez-vous!</h5>
<p>Nous vous enverrons seulement les nouvelles importantes</p>
<form action="/php/newsletter.php" method="get">
<input type="text" name="newsletter-language" value="fr" hidden>
<input type="email" name="newsletter-email" placeholder="Courriel" required id="newsletter-email">
<input class="catch" type="email" name="newsletter-email-2" placeholder="Courriel" id="newsletter-email-2">
<input type="submit" class="btn btn-1" value="S'abonner">
</form>
</div>
<div class="wrapper">
<a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
src="/media/images/git-white.png"></a>
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/CC-64.png">
</a>
<a href="https://www.torproject.org/fr/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/onion-64.png">
</a>
<a href="/pages/en/services/installation.html">
<img src="/media/images/canada.png" alt="English Canada">
</a>
</div>
</footer>
</body>
</html>

View File

@ -0,0 +1,275 @@
<!DOCTYPE html>
<html lang="fr-CA">
<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>Le Projet TeleQom | Service de Réparation</title>
<meta name="description"
content="Le Projet TeleQom offre un service de réparation d'ordinateurs et de cellulaires à petit prix. Si toutefois vous avez besoin d'un nouvel ordinateur, voici une liste de vendeurs éthiques!" />
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/pages/repairs.css" />
</head>
<body>
<!-- FOUC -->
<script>0</script>
<header>
<nav>
<input type="checkbox" id="navbar-menu-btn" />
<label for="navbar-menu-btn" id="menu-btn-open">
<img src="/media/images/menu.png" alt="Menu Icon">
</label>
<label for="navbar-menu-btn" id="menu-btn-close">
<img src="/media/images/close.png" alt="Menu Icon">
</label>
<a href="/pages/fr/index.html" class="logo">
<img src="/media/images/logo.svg" alt="TeleQom Logo">
<h2>
Tele<span>Q</span>om
</h2>
</a>
<ul id="nav-list">
<li><a class="btn btn-2" href="#top">Réparation</a></li>
<li><a class="btn btn-2" href="#cellulaires">Cellulaires</a></li>
<li><a class="btn btn-2" href="#ordinateurs">Ordinateurs</a></li>
<li><a class="btn btn-2" href="/pages/en/services/repairs.html">EN</a></li>
<li>
<div id="mobile-nav-action-btn">
<a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
</div>
</li>
</ul>
<div id="navbar-action-btn">
<a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
</div>
</nav>
</header>
<section id="intro">
<h2>Service de Réparation</h2>
<p>
Donc vous avez brisé votre écran? Aucun problème, nous pouvons probablement le réparer.
La majorité des ordinateurs peuvent être ouverts facilement et leurs pièces remplacés pour une fraction du prix d'un nouvel ordinateur.
Vous pouvez apporter vos pièces, ou nous laisser s'occuper du magasinage. Nous pouvons nous procurer la plupart des pièces, neuves ou usagées.
"Super, donc vous pouvez réparer ma laveuse à linge intelligente alors?" certain nous demande. Et bien, non nous ne réparons pas les laveuses.
Aussi, nous <span>NE RÉPARONS PAS LES APPAREILS APPLE</span>. Pour plus d'informations ou pour débuter le processus de réparation, contactez-nous
</p>
<p>
Si vous avez besoin d'un nouvel ordinateur, nous avons mis une petite liste à votre disposition de vendeurs éthiques.
Aucun d'eux ne sont affiliés avec nous, mais ils partagent notre sens moral.
Nous nous excusons d'avance, aucun d'eux ne vendent de laveuse intelligente...
</p>
</section>
<section class="products" id="cellulaires">
<h2>Cellulaires</h2>
<p class="explanation">
Voici un domaine où les Logiciels Libres ne font que commencer à se montrer le bout du nez. Même si Linux est au
coeur du <a class="link" href="https://source.android.com/" target="_blank" rel="noreferrer noopener">Projet Android Open Source</a>,
avec la quantité de logiciels propriétaires et espions qui y sont ajoutés
par Google avant qu'il se rende à votre téléphone, il est disqualifié. Certaines distributions sont disponible
depuis un moment et Ubuntu a même tenté de lancer Ubuntu Touch avec peu de succès. Nous voyons de nos jours un
intérêt grandissant envers les téléphones cellulaires Libres qui respecte ses utilisateurs. Nous vous
recommandons donc de garder un oeil sur les suivants
</p>
<div class="wrapper">
<div class="product">
<div class="img-container">
<img src="/media/images/nitrophone-128.png" alt="NitroPhone Logo">
</div>
<h4>NitroPhone</h4>
<p class="description">
Le NitroPhone est un premier choix en terme de compatibilité avec les applications Android. NitroKey offre
plusieurs versions et ils ont tous GrapheneOS d'installé, un OS Android avec une emphase sur la sécurité
dénudé de tout logiciel propriétaire Google
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p class="yellow">Niveau: Intermédiaire</p>
<p>OS: GrapheneOS</p>
<p>Famille OS:: Android</p>
<p class="yellow">Libre: Presque</p>
</div>
</div>
<hr>
<a class="btn btn-1" href="https://www.nitrokey.com/fr" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/pinephone-128.png" alt="PinePhone Logo">
</div>
<h4>PinePhone</h4>
<p class="description">
Le PinePhone est un téléphone conçu par la communauté pour la communauté moins dispendieux. Par contre, il
est toujours en développement et actuellement incomparable à Android. Nous croyons qu'il pourrait bien
être le premier téléphone Linux à prix abordable, mais pas pour le moment
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p class="red">Niveau: Avancé</p>
<p>OS: Mobian, PostmarketOS, etc</p>
<p>Famille OS:: GNU/Linux</p>
<p class="yellow">Libre: Presque</p>
</div>
</div>
<hr>
<a class="btn btn-1" href="https://www.pine64.org/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/librem5-128.png" alt="Purism Logo">
</div>
<h4>Librem 5</h4>
<p class="description">
Purism est un pionnier dans le marché du matériel Libre avec son Librem 5. Ils investissent grandement
dans le développement de l'écosystème Linux mobile. Le librem 5 est disponible sur le site web de Purism,
mais nous ne croyons pas qu'il est prêt pour le grand publique pour le moment
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p class="red">Niveau: Avancé</p>
<p>OS: PureOS, other</p>
<p>Famille OS:: GNU/Linux</p>
<p class="green">Libre: Oui</p>
</div>
</div>
<hr>
<a class="btn btn-1" href="https://puri.sm/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
</div>
</section>
<section class="products alt" id="ordinateurs">
<h2>Ordinateurs</h2>
<p class="explanation">
Plusieurs compagnies qui fabriquent des appareils éthiques existent déjà pour vous procurer un nouvel ordinateur.
Ceci n'est pas une liste complète, mais nous avons sélectionné quelques options populaires pour vous. Il est
important de mentionner qu'un BIOS et du matériel Libre sont tout aussi important que le reste. Nous gardons un
oeil sur le <a class="link" href="https://riscv.org/" target="_blank" rel="noreferrer noopener">RISC-V CPU</a>
puisque nous le voyons devenir un standard dans les appareils mobiles
</p>
<div class="wrapper">
<div class="product">
<div class="img-container">
<img src="/media/images/system76.png" alt="System76 Logo">
</div>
<h4>System76</h4>
<p class="description">
Une entreprise qui est parmis nous depuis longtemps. Ils offrent des appareils avec Coreboot comme BIOS et
leur ordinateurs viennent avec PopOS!, un dérivé d'Ubuntu supporté par System76. Vous ne pouvez pas vous
tromper ici. Portables, serveurs, ordinateurs de bureau, ils ont tout
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p class="green">Niveau: Débutant</p>
<p>OS: PopOS! (Ubuntu based)</p>
<p>Produits: Serveur, PC, Portable</p>
<p class="yellow">Libre: Presque</p>
</div>
</div>
<hr>
<a class="btn btn-1" href="https://system76.com/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/purism-128.png" alt="Purism Logo">
</div>
<h4>Purism</h4>
<p class="description">
Purism est une corporation à raison sociale. Ils contruisent des portables et ordinateurs de bureau
éthiques avec du matériel dernier cri tel que des CPU intel, mais plus orienté sur la sécurité et la vie
privée. Pureboot est également une bonne fonctionnalité
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p class="green">Niveau: Débutant</p>
<p>OS: PureOS</p>
<p>Produits: Serveur, PC, Portable</p>
<p class="yellow">Libre: Presque</p>
</div>
</div>
<hr>
<a class="btn btn-1" href="https://puri.sm/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
<div class="product">
<div class="img-container">
<img src="/media/images/raptor-128.png" alt="Raptor Logo">
</div>
<h4>Raptor</h4>
<p class="description">
C'est ici que ça devient sérieux. Cette compagnie a réussi à fabriquer un ordinateur avec uniquement du
matériel et des logiciels Libres (incluant le CPU IBM Power9), ce qui veut dire que l'intégralité du code
qui s'exécute sur la machine est auditable. C'est le but ultime du mouvement Libre. Malheureusement, ça vient à un prix...
</p>
<hr>
<div class="includes">
<h5>Détails</h5>
<div class="includes-items">
<p class="red">Niveau: Avancé</p>
<p class="red">OS: Votre Choix</p>
<p>Produits: Serveur, PC</p>
<p class="blue">Libre: Ultime</p>
</div>
</div>
<hr>
<a class="btn btn-1" href="https://www.raptorcs.com/TALOSII/" target="_blank" rel="noreferrer noopener">Site Web</a>
</div>
</div>
</section>
<section id="call-to-action">
<h2>Prêt?</h2>
<p class="description">
Vous hésitez entre réparer votre ordinateur ou en acheter un nouveau? Contactez-nous, nous vous aiderons à faire le bon choix :)
</p>
<a class="btn btn-1" href="/pages/fr/index.html#contact">Contact</a>
</section>
<footer>
<div class="newsletter">
<h5>Abonnez-vous!</h5>
<p>Nous vous enverrons seulement les nouvelles importantes</p>
<form action="/php/newsletter.php" method="get">
<input type="text" name="newsletter-language" value="fr" hidden>
<input type="email" name="newsletter-email" placeholder="Courriel" required id="newsletter-email">
<input class="catch" type="email" name="newsletter-email-2" placeholder="Courriel" id="newsletter-email-2">
<input type="submit" class="btn btn-1" value="S'abonner">
</form>
</div>
<div class="wrapper">
<a href="https://qode.teleqom.org/TeleQom-Public/teleqom.org" target="_blank" rel="noreferrer noopener"><img
src="/media/images/git-white.png"></a>
<a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/CC-64.png">
</a>
<a href="https://www.torproject.org/fr/" target="_blank" rel="noreferrer noopener">
<img src="/media/images/onion-64.png">
</a>
<a href="/pages/en/services/repairs.html">
<img src="/media/images/canada.png" alt="English Canada">
</a>
</div>
</footer>
</body>
</html>

17
php/contact.php Normal file
View File

@ -0,0 +1,17 @@
<?php
$lang_folder = $_GET['contact-language']=="en"?"/pages/en/":"/pages/fr/";
if(!filter_var($_GET['contact-email'], FILTER_VALIDATE_EMAIL) || strlen($_GET['contact-message'])==0 || strlen($_GET['contact-name'])==0 || $_GET['contact-email-2'] != ""){
header("Location: ".$lang_folder."err/contact.html");
die();
}
$receiver_email = "info@teleqom.org";
$message = "Contact: ".$_GET['contact-name']."\nEmail: ".$_GET['contact-email']."\nMessage:\n".$_GET['contact-message'];
$headers = 'From: '.$receiver_email . "\r\n" .
'Reply-To: '.$_GET['contact-email'] . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($receiver_email,"Contact TeleQom.org",$message,$headers);
header("Location: ".$lang_folder."confirmation.html");
?>

25
php/newsletter.php Normal file
View File

@ -0,0 +1,25 @@
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/config/PRIVATE/NEWSLETTER.php';
$lang_folder = $_GET['newsletter-language']=="fr"?"/pages/fr/":"/pages/en/";
$contact_form_url = $_GET['newsletter-language']=="fr"?$_ENV['newsletter_url_fr']:$_ENV['newsletter_url_en'];
if(!str_contains($_GET['newsletter-email'], "@") || !str_contains($_GET['newsletter-email'], ".") || strlen($_GET['newsletter-email']) < 6 || $_GET['newsletter-email-2'] != "") {
header('Location: '.$lang_folder.'err/general.html');
die();
}
$ch = curl_init($contact_form_url);
curl_setopt($ch, CURLOPT_POSTFIELDS, urlencode('email').'='.urlencode($_GET['newsletter-email']));
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, false);
curl_exec($ch);
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if($httpcode==200){
header('Location: '.$lang_folder.'confirmation.html');
die();
}
header('Location: '.$lang_folder.'err/general.html');
?>

23
robots.txt Normal file
View File

@ -0,0 +1,23 @@
User-agent: *
Disallow: /pages/en/err/
Disallow: /pages/fr/err/
Disallow: /pages/fr/confirmation.html
Disallow: /pages/en/confirmation.html
Disallow: /404.php
Disallow: /403.shtml
Disallow: /403.php
Disallow: /500.php
Disallow: /err.php
Disallow: /error_log
Allow: /pages/fr/index.html
Allow: /pages/fr/services/developpement.html
Allow: /pages/fr/services/installation.html
Allow: /pages/fr/services/reparation.html
Allow: /pages/en/index.html
Allow: /pages/en/services/developement.html
Allow: /pages/en/services/installation.html
Allow: /pages/en/services/repairs.html
Sitemap: https://teleqom.org/sitemap.xml

59
sitemap.xml Normal file
View File

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://teleqom.org/pages/fr/index.html</loc>
<lastmod>2022-02-14T01:04:56+00:00</lastmod>
<priority>1.00</priority>
<xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/index.html" />
<xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/about.html" />
</url>
<url>
<loc>https://teleqom.org/pages/en/index.html</loc>
<lastmod>2022-02-14T01:04:56+00:00</lastmod>
<priority>0.80</priority>
<xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/about.html" />
<xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/index.html" />
</url>
<url>
<loc>https://teleqom.org/pages/en/services/installation.html</loc>
<lastmod>2022-02-14T01:04:56+00:00</lastmod>
<priority>0.80</priority>
<xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/services/installation.html" />
<xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/services/installation.html" />
</url>
<url>
<loc>https://teleqom.org/pages/fr/services/installation.html</loc>
<lastmod>2022-02-14T01:04:56+00:00</lastmod>
<priority>0.80</priority>
<xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/services/installation.html" />
<xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/services/installation.html" />
</url>
<url>
<loc>https://teleqom.org/pages/en/services/repairs.html</loc>
<lastmod>2022-02-14T01:04:56+00:00</lastmod>
<priority>0.80</priority>
<xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/services/repairs.html" />
<xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/services/reparation.html" />
</url>
<url>
<loc>https://teleqom.org/pages/fr/services/reparation.html</loc>
<lastmod>2022-02-14T01:04:56+00:00</lastmod>
<priority>0.80</priority>
<xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/services/reparation.html" />
<xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/services/repairs.html" />
</url>
<url>
<loc>https://teleqom.org/pages/en/services/development.html</loc>
<lastmod>2022-02-14T01:04:56+00:00</lastmod>
<priority>0.80</priority>
<xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/services/development.html" />
<xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/services/developpement.html" />
</url>
<url>
<loc>https://teleqom.org/pages/fr/services/developpement.html</loc>
<lastmod>2022-02-14T01:04:56+00:00</lastmod>
<priority>0.80</priority>
<xhtml:link rel="alternate" hreflang="fr-CA" href="https://teleqom.org/pages/fr/services/developpement.html" />
<xhtml:link rel="alternate" hreflang="en-CA" href="https://teleqom.org/pages/en/services/development.html" />
</url>
</urlset>