WIP: redo the web UI #6

Draft
everypizza1 wants to merge 5 commits from unknown repository into main
2 changed files with 165 additions and 157 deletions
Showing only changes of commit 581b804b85 - Show all commits

View File

@ -13,90 +13,111 @@
<div
class="bg-gray-900 h-screen flex flex-col items-center justify-center text-white"
>
<h1 class="h-14 bg-linear-65 from-purple-500 to-pink-500 text-6xl font-bold text-transparent bg-clip-text">Amnezichat</h1>
<p>
Anti-forensic and secure messaging. Download it now and get
started. Intended for secure chats that <span class="bg-gradient-to-r from-pink-200 to-transparent inline-block text-transparent bg-clip-text">disappear when you're
done.</span>
</p>
<br />
<a
href="#download"
class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-6 rounded-full transition duration-300 text-2xl m-5"
>Download Now</a
<h1
class="h-14 bg-linear-65 from-purple-500 to-pink-500 text-6xl font-bold text-transparent bg-clip-text"
>
Amnezichat
</h1>
<p>
Anti-forensic and secure messaging. Download it now and get
started. Intended for secure chats that
<span
class="bg-gradient-to-r from-pink-200 to-transparent inline-block text-transparent bg-clip-text"
>disappear when you're done.</span
>
<br />
<br />
<!-- Main Links -->
<div class="main-links">
<a
href="https://github.com/umutcamliyurt/Amnezichat"
target="_blank"
class="bg-blue-300 hover:bg-blue-400 text-gray-900 py-2 px-6 rounded-full transition duration-300"
>Source Code</a
>
<a
href="http://aqfyl6g24k44oyes3n35nrnlhdfvdwfvi4a7umjalu4dcstuzkxft4id.onion"
target="_blank"
class="bg-blue-300 hover:bg-blue-400 text-gray-900 py-2 px-6 rounded-full transition duration-300"
>Onionsite</a
>
<a
href="http://epmrgx35crapamcxlpggowr7vg3fbxosmkow66konjomn4nlphda.b32.i2p"
target="_blank"
class="bg-blue-300 hover:bg-blue-400 text-gray-900 py-2 px-6 rounded-full transition duration-300"
>Eepsite</a
>
<a
href="https://github.com/umutcamliyurt/Amnezichat?tab=readme-ov-file#donate-to-support-development-of-this-project"
class="bg-blue-300 hover:bg-blue-400 text-gray-900 py-2 px-6 rounded-full transition duration-300"
>Donate Monero</a
>
</div>
<br />
<!-- Privacy and Terms -->
<details id="terms-of-service-section" class="pt-3">
<summary class="bg-gray-950 p-3 rounded-lg cursor-pointer shadow">Terms of Service</summary>
<p>
By using Amnezichat, you agree to the following
terms:
</p>
<ul>
<li>Use for lawful purposes only.</li>
<li>Do not share illegal content.</li>
<li>Respect others while using the platform.</li>
</ul>
<p>
Amnezichat reserves the right to modify or
discontinue the service without notice.
</p>
<small class="text-gray-500">
We can't actually enforce these. Please keep them
in mind though.
</small>
<p>Contact: nemesisuks@protonmail.com</p>
</details>
</p>
<br />
<a
href="#download"
class="bg-linear-65 from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-500 text-white font-semibold py-2 px-6 rounded-full transition duration-300 text-2xl m-5"
>Download Now</a
>
<br />
<br />
<!-- Main Links -->
<br />
<!-- Privacy and Terms -->
<details id="terms-of-service-section" class="pt-3">
<summary
class="bg-gray-950 p-3 rounded-lg cursor-pointer shadow"
>
Terms of Service
</summary>
<p>By using Amnezichat, you agree to the following terms:</p>
<ul>
<li>Use for lawful purposes only.</li>
<li>Do not share illegal content.</li>
<li>Respect others while using the platform.</li>
</ul>
<p>
Amnezichat reserves the right to modify or discontinue the
service without notice.
</p>
<small class="text-gray-500">
We can't actually enforce these. Please keep them in mind
though.
</small>
<p>Contact: nemesisuks@protonmail.com</p>
</details>
<details class="pt-3">
<summary class="bg-gray-950 p-3 rounded-lg cursor-pointer shadow">Privacy Policy</summary>
<p>We value your privacy:</p>
<ul>
<li>
No personal information or chat logs are stored.
</li>
<li>Messages are <span class="text-green-400">encrypted</span> and <span class="text-green-400">temporary</span>.</li>
</ul>
</details>
</div>
<details class="pt-3 pb-3">
<summary
class="bg-gray-950 p-3 rounded-lg cursor-pointer shadow"
>
Privacy Policy
</summary>
<p>We value your privacy:</p>
<ul>
<li>No personal information or chat logs are stored.</li>
<li>
Messages are
<span class="text-green-400">encrypted</span> and
<span class="text-green-400">temporary</span>.
</li>
</ul>
</details>
<br />
<!-- Main Links -->
<div class="main-links">
<a
href="https://github.com/umutcamliyurt/Amnezichat"
target="_blank"
class="bg-blue-300 hover:bg-blue-400 text-gray-900 py-2 px-6 rounded-full transition duration-300"
>Source Code</a
>
<a
href="http://aqfyl6g24k44oyes3n35nrnlhdfvdwfvi4a7umjalu4dcstuzkxft4id.onion"
target="_blank"
class="bg-blue-300 hover:bg-blue-400 text-gray-900 py-2 px-6 rounded-full transition duration-300"
>Onionsite</a
>
<a
href="http://epmrgx35crapamcxlpggowr7vg3fbxosmkow66konjomn4nlphda.b32.i2p"
target="_blank"
class="bg-blue-300 hover:bg-blue-400 text-gray-900 py-2 px-6 rounded-full transition duration-300"
>Eepsite</a
>
<a
href="https://github.com/umutcamliyurt/Amnezichat?tab=readme-ov-file#donate-to-support-development-of-this-project"
class="bg-blue-300 hover:bg-blue-400 text-gray-900 py-2 px-6 rounded-full transition duration-300"
>Donate Monero</a
>
</div>
</div>
<div id="download" class="modal">
<div class="modal-content">
<a href="#" class="close-button">&times;</a>
<h2>Installation Instructions</h2>
<div
id="download"
class="bg-gray-900 h-screen flex flex-col items-center justify-center text-white"
>
<div class="modal-content">
<h2
class="bg-linear-65 from-purple-500 to-pink-500 text-2xl font-bold text-transparent bg-clip-text"
>
Installation Instructions
</h2>
<h3>Build it Yourself</h3>
<pre>
<h3>Build it Yourself</h3>
<pre>
sudo apt update
sudo apt install curl build-essential git tor xterm
sudo systemctl enable --now tor.service
@ -106,22 +127,21 @@ cd Amnezichat/client/
cargo build --release
cargo run --release
</pre
>
>
<h3>Or:</h3>
<a
href="/static/Amnezichat-x86_64.AppImage"
class="download-button"
download
>Download AppImage</a
>
<a
href="/static/Amnezichat-x86_64.deb"
class="download-button"
download
>Download .deb Package</a
>
</div>
<h3 class="pb-3">Or:</h3>
<a
href="/static/Amnezichat-x86_64.AppImage"
class="bg-blue-300 hover:bg-blue-400 text-gray-900 py-2 px-6 rounded-full transition duration-300"
download
>Download AppImage</a
>
<a
href="/static/Amnezichat-x86_64.deb"
class="bg-blue-300 hover:bg-blue-400 text-gray-900 py-2 px-6 rounded-full transition duration-300"
download
>Download .deb Package</a
>
</div>
</div>
</body>

View File

@ -230,12 +230,6 @@
.m-5 {
margin: calc(var(--spacing) * 5);
}
.m-10 {
margin: calc(var(--spacing) * 10);
}
.m-auto {
margin: auto;
}
.block {
display: block;
}
@ -299,13 +293,6 @@
.justify-center {
justify-content: center;
}
.space-y-2 {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
}
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
@ -320,10 +307,6 @@
.rounded-lg {
border-radius: var(--radius-lg);
}
.rounded-t-lg {
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
}
.border {
border-style: var(--tw-border-style);
border-width: 1px;
@ -334,9 +317,6 @@
.bg-blue-500 {
background-color: var(--color-blue-500);
}
.bg-gray-100 {
background-color: var(--color-gray-100);
}
.bg-gray-900 {
background-color: var(--color-gray-900);
}
@ -354,8 +334,12 @@
--tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-green-500 {
--tw-gradient-from: var(--color-green-500);
.from-blue-300 {
--tw-gradient-from: var(--color-blue-300);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-blue-500 {
--tw-gradient-from: var(--color-blue-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.from-pink-200 {
@ -366,13 +350,12 @@
--tw-gradient-from: var(--color-purple-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.via-indigo-400 {
--tw-gradient-via: var(--color-indigo-400);
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
.to-blue-400 {
--tw-gradient-to: var(--color-blue-400);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-indigo-600 {
--tw-gradient-to: var(--color-indigo-600);
.to-blue-600 {
--tw-gradient-to: var(--color-blue-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-pink-500 {
@ -407,6 +390,9 @@
.pt-3 {
padding-top: calc(var(--spacing) * 3);
}
.pb-3 {
padding-bottom: calc(var(--spacing) * 3);
}
.text-2xl {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
@ -423,12 +409,6 @@
--tw-font-weight: var(--font-weight-semibold);
font-weight: var(--font-weight-semibold);
}
.text-black {
color: var(--color-black);
}
.text-gray-200 {
color: var(--color-gray-200);
}
.text-gray-500 {
color: var(--color-gray-500);
}
@ -498,26 +478,46 @@
}
}
}
.sm\:flex-row {
@media (width >= 40rem) {
flex-direction: row;
}
}
.sm\:space-y-0 {
@media (width >= 40rem) {
:where(& > :not(:last-child)) {
--tw-space-y-reverse: 0;
margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
.hover\:bg-linear-65 {
&:hover {
@media (hover: hover) {
--tw-gradient-position: 65deg;
@supports (background-image: linear-gradient(in lab, red, red)) {
--tw-gradient-position: 65deg in oklab;
}
background-image: linear-gradient(var(--tw-gradient-stops));
}
}
}
.sm\:space-x-2 {
@media (width >= 40rem) {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
.hover\:from-blue-300 {
&:hover {
@media (hover: hover) {
--tw-gradient-from: var(--color-blue-300);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}
.hover\:from-blue-600 {
&:hover {
@media (hover: hover) {
--tw-gradient-from: var(--color-blue-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}
.hover\:to-blue-400 {
&:hover {
@media (hover: hover) {
--tw-gradient-to: var(--color-blue-400);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}
.hover\:to-blue-500 {
&:hover {
@media (hover: hover) {
--tw-gradient-to: var(--color-blue-500);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
}
@ -542,11 +542,6 @@
syntax: "*";
inherits: false;
}
@property --tw-space-y-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@property --tw-border-style {
syntax: "*";
inherits: false;
@ -745,11 +740,6 @@
syntax: "*";
inherits: false;
}
@property --tw-space-x-reverse {
syntax: "*";
inherits: false;
initial-value: 0;
}
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
@ -758,7 +748,6 @@
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-space-y-reverse: 0;
--tw-border-style: solid;
--tw-gradient-position: initial;
--tw-gradient-from: #0000;
@ -804,7 +793,6 @@
--tw-drop-shadow-alpha: 100%;
--tw-drop-shadow-size: initial;
--tw-duration: initial;
--tw-space-x-reverse: 0;
}
}
}