<!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>