Add pitch #7
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>
|
||||
<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);
|
||||
}
|
||||
<style>
|
||||
.centered {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
font-size: 3em;
|
||||
margin: 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);
|
||||
.no-underline {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</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>
|
||||
<div id="home">
|
||||
<h1 class="centered">
|
||||
<router-link to="/description" class="no-underline">ICING</router-link>
|
||||
</h1>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user