feat: home page
This commit is contained in:
parent
5bec26593a
commit
014d53652e
229
website/html/description.html
Normal file
229
website/html/description.html
Normal file
@ -0,0 +1,229 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Icing</title>
|
||||||
|
<!-- <link rel="stylesheet" href="style.css"/> -->
|
||||||
|
<style>
|
||||||
|
/* Theme colors */
|
||||||
|
:root {
|
||||||
|
--primary-color: #000000; /* Green accent color */
|
||||||
|
--background-color: #f5f5f5; /* Light background */
|
||||||
|
--text-color: #333; /* Dark text */
|
||||||
|
--secondary-text-color: #777; /* Secondary text color */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base styles */
|
||||||
|
.content {
|
||||||
|
margin: 20px auto;
|
||||||
|
max-width: 900px;
|
||||||
|
padding: 40px;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-family: 'Open Sans', Arial, sans-serif;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 2.5em;
|
||||||
|
color: var(--primary-color);
|
||||||
|
margin-bottom: 30px;
|
||||||
|
text-align: center;
|
||||||
|
animation: fadeInDown 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 1.8em;
|
||||||
|
color: var(--primary-color);
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
animation: fadeInLeft 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title::after {
|
||||||
|
content: '';
|
||||||
|
width: 50px;
|
||||||
|
height: 3px;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
position: absolute;
|
||||||
|
bottom: -10px;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, li {
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 1.1em;
|
||||||
|
animation: fadeIn 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin-left: 20px;
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.features ul li {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-list {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-list li {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link-container {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 40px;
|
||||||
|
animation: fadeInUp 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-weight: bold;
|
||||||
|
border: 2px solid var(--primary-color);
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: background-color 0.3s, color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link:hover {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInDown {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-20px);
|
||||||
|
} to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInLeft {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-20px);
|
||||||
|
} to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
} to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
} to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.content {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, li {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.content {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 1.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, li {
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--primary-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="description" class="content">
|
||||||
|
<h1 class="title">Project Description</h1>
|
||||||
|
|
||||||
|
<div class="project-overview">
|
||||||
|
<h2 class="section-title">What is Icing?</h2>
|
||||||
|
<p>
|
||||||
|
Icing is a simple, lightweight, and efficient dialer designed to replace your everyday phone app. It ensures end-to-end encryption of telephone communications by implementing a home-made, analogic-based voice encryption. Inspired by SRTP (Secure Real-time Transport Protocol), using ECDH (Elliptic Curve Diffie-Hellman).
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="features">
|
||||||
|
<h2 class="section-title">Key Features</h2>
|
||||||
|
<ul>
|
||||||
|
<li><strong>End-to-End Encryption:</strong> Secure your calls with robust encryption protocols.</li>
|
||||||
|
<li><strong>Transparent:</strong> If your peer doesn't use Icing, the call remains completely normal.</li>
|
||||||
|
<li><strong>Analogic-based:</strong> An open-source, exportable, protocol that <strong>works without internet.</strong></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="how-it-works">
|
||||||
|
<h2 class="section-title">How It Works</h2>
|
||||||
|
<p>
|
||||||
|
Icing generates a cryptographic key pair for you. Share your public key with a neat QR code.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
During a call between two Icing users, voices are encrypted, compressed, and transmitted via the telephone network using the Icing Acoustic Protocol.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="team">
|
||||||
|
<h2 class="section-title">Our Team</h2>
|
||||||
|
<p>
|
||||||
|
We are a team of five dedicated individuals working on this solution:
|
||||||
|
</p>
|
||||||
|
<ul class="team-list">
|
||||||
|
<li><a href="https://github.com/AlexisDanlos/" target="_blank">Alexis Danlos</a></li>
|
||||||
|
<li><a href="https://github.com/AustralEpitech/" target="_blank">AustralEpitech</a></li>
|
||||||
|
<li><a href="https://github.com/Bartoszkk/" target="_blank">Bartoszkk</a></li>
|
||||||
|
<li><a href="https://github.com/FlorianGRIFFON/" target="_blank">Florian GRIFFON</a></li>
|
||||||
|
<li><a href="https://github.com/STCB/" target="_blank">STCB</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,229 +1,31 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<style>
|
||||||
<title>Icing</title>
|
.centered {
|
||||||
<!-- <link rel="stylesheet" href="style.css"/> -->
|
display: flex;
|
||||||
<style>
|
justify-content: center;
|
||||||
/* Theme colors */
|
align-items: center;
|
||||||
:root {
|
height: 100vh;
|
||||||
--primary-color: #000000; /* Green accent color */
|
font-size: 3em;
|
||||||
--background-color: #f5f5f5; /* Light background */
|
margin: 0;
|
||||||
--text-color: #333; /* Dark text */
|
|
||||||
--secondary-text-color: #777; /* Secondary text color */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Base styles */
|
|
||||||
.content {
|
|
||||||
margin: 20px auto;
|
|
||||||
max-width: 900px;
|
|
||||||
padding: 40px;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
color: var(--text-color);
|
|
||||||
border-radius: 8px;
|
|
||||||
font-family: 'Open Sans', Arial, sans-serif;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 2.5em;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 30px;
|
|
||||||
text-align: center;
|
|
||||||
animation: fadeInDown 1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.8em;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-top: 40px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
position: relative;
|
|
||||||
animation: fadeInLeft 1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title::after {
|
|
||||||
content: '';
|
|
||||||
width: 50px;
|
|
||||||
height: 3px;
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
position: absolute;
|
|
||||||
bottom: -10px;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
p, li {
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: 1.1em;
|
|
||||||
animation: fadeIn 1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin-left: 20px;
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.features ul li {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-list {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-list li {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-link-container {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 40px;
|
|
||||||
animation: fadeInUp 1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-link {
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--primary-color);
|
|
||||||
font-weight: bold;
|
|
||||||
border: 2px solid var(--primary-color);
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
transition: background-color 0.3s, color 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-link:hover {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeInDown {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-20px);
|
|
||||||
} to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeInLeft {
|
.no-underline {
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-20px);
|
|
||||||
} to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeInUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px);
|
|
||||||
} to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
} to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive Design */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.content {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
p, li {
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.content {
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 1.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
p, li {
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="description" class="content">
|
<div id="home">
|
||||||
<h1 class="title">Project Description</h1>
|
<h1 class="centered">
|
||||||
|
<router-link to="/description" class="no-underline">ICING</router-link>
|
||||||
<div class="project-overview">
|
</h1>
|
||||||
<h2 class="section-title">What is Icing?</h2>
|
</div>
|
||||||
<p>
|
|
||||||
Icing is a simple, lightweight, and efficient dialer designed to replace your everyday phone app. It ensures end-to-end encryption of telephone communications by implementing a home-made, analogic-based voice encryption. Inspired by SRTP (Secure Real-time Transport Protocol), using ECDH (Elliptic Curve Diffie-Hellman).
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="features">
|
|
||||||
<h2 class="section-title">Key Features</h2>
|
|
||||||
<ul>
|
|
||||||
<li><strong>End-to-End Encryption:</strong> Secure your calls with robust encryption protocols.</li>
|
|
||||||
<li><strong>Transparent:</strong> If your peer doesn't use Icing, the call remains completely normal.</li>
|
|
||||||
<li><strong>Analogic-based:</strong> An open-source, exportable, protocol that <strong>works without internet.</strong></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="how-it-works">
|
|
||||||
<h2 class="section-title">How It Works</h2>
|
|
||||||
<p>
|
|
||||||
Icing generates a cryptographic key pair for you. Share your public key with a neat QR code.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
During a call between two Icing users, voices are encrypted, compressed, and transmitted via the telephone network using the Icing Acoustic Protocol.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="team">
|
|
||||||
<h2 class="section-title">Our Team</h2>
|
|
||||||
<p>
|
|
||||||
We are a team of five dedicated individuals working on this solution:
|
|
||||||
</p>
|
|
||||||
<ul class="team-list">
|
|
||||||
<li><a href="https://github.com/AlexisDanlos/" target="_blank">Alexis Danlos</a></li>
|
|
||||||
<li><a href="https://github.com/AustralEpitech/" target="_blank">AustralEpitech</a></li>
|
|
||||||
<li><a href="https://github.com/Bartoszkk/" target="_blank">Bartoszkk</a></li>
|
|
||||||
<li><a href="https://github.com/FlorianGRIFFON/" target="_blank">Florian GRIFFON</a></li>
|
|
||||||
<li><a href="https://github.com/STCB/" target="_blank">STCB</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user