Skip to content

Commit

Permalink
Reimplemented AOT landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
NatalyaTretyak committed May 19, 2020
1 parent 7369ea0 commit 483e3e2
Show file tree
Hide file tree
Showing 4 changed files with 214 additions and 95 deletions.
Binary file added back_photo.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
173 changes: 78 additions & 95 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,99 +1,82 @@
<!DOCTYPE html>

<html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
h3 {
font-family: "Fira Sans", sans-serif;
font-style: normal;
font-weight: 800;
color: #1d1d1d;
font-size: 20px;
line-height: 22px;
text-align: center;
}

div.dh3 {
font-family: "Fira Sans", sans-serif;
font-style: normal;
font-weight: 400;
color: #1d1d1d;
font-size: 14px;
line-height: 19px;
text-align: center;
}

div.dh2 {
font-family: "Fira Sans", sans-serif;
font-style: normal;
font-weight: 400;
color: #1d1d1d;
font-size: 10px;
line-height: 19px;
text-align: center;
}

a {
color: #6495ED;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

div {
border-radius: 5px;
padding: 5px;
}

div.footer{
position: fixed;
text-align: center;
bottom: 0px;
width: 100%;
}

body {
background:#EFFBEF;
}
</style>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="main.css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet"
/>
<title>Always On Top</title>
</head>

<body>
<h3>Always on Top application</h3>

<div class=dh3>
You have to download native Always On Top application before using browser extension (new extensions policy),<br />
please download the file from <a href="https://github.com/vm-devr/aot/releases/download/5.0/AOT.exe"> github repository</a> and run <i>AOT.exe</i> to install the app<br />
<b>After the installation do not remove or move AOT.exe or aot_manifest.json it has created!!</b><br /><br />
<b>You don't need to worry about the application:</b>
<ol>
<li>You might check it with whatever antivirus you have</li>
<li>Even the size of the file is so small you can't possibly put anything bad inside</li>
<li>And finally, you can build the app from scratch using its <A href='https://github.com/vm-devr/aot/blob/master/src.cpp'>source code</A></li>
</ol>
</div>


<br /><br /><br /><br />
<h3>Always on Top extension</h3>
<div class=dh3>
<a href="https://addons.mozilla.org/en-US/firefox/addon/always-on-top/">Firefox</a><br />
</div>

<div class=dh2>
<br/>
If you want to set Always on Top style for ANY window in your system, <a href="mailto:[email protected]?Subject=Global%20hotkey">contact me</a>
</div>

<div class="footer">
<h4>I aim to bring way more information and features to you and your donations are going to help me get there<br/>
Please <a href="mailto:[email protected]?Subject=Global%20hotkey">contact me</a> if you want to donate in any way</h4>
</div>


</body>

<body>
<div class="inner-container">
<div class="section-container">
<section class="section left-section">
<div class="app">
<div class="helper"></div>
<h1>Always on Top application</h1>
<p>
It is not possible to use Always On Top extension without native
application because of new extensions policy. Please download
Always On Top application from<br />
<a
href="https://github.com/vm-devr/aot/releases/download/5.0/AOT.exe"
>
github repository</a
><br />
and run <i>AOT.exe</i> to install the app
<br />
<b
>After the installation do not remove or move AOT.exe or
aot_manifest.json it has created!!</b
>
</p>
</div>
<div class="info">
<p>
<b>You shouldn't worry about the application:</b><br /><br />
You might check it with whatever antivirus you have<br />Even the
size of the file is so small you can't possibly put anything bad
inside<br />And finally, you can build the app from scratch using
its
<a href="https://github.com/vm-devr/aot/blob/master/src.cpp"
>source code</a
>
</p>
</div>
</section>
<section class="section right-section">
<div class="extension">
<h1>Always on Top extension</h1>
<p>
<a
href="https://addons.mozilla.org/en-US/firefox/addon/always-on-top/"
>Firefox</a
><br /><br /><br />
If you want to set Always on Top style for ANY window in your
system,
<a href="mailto:[email protected]?Subject=Global%20hotkey"
>contact me</a
>
</p>
</div>
<div class="pin"></div>
</section>
<div class="footer-section">
<p>
<b
>I aim to bring way more information and features to you and your
donations are going to help me get there<br />Please
<a href="mailto:[email protected]?Subject=Global%20hotkey"
>contact me</a
>
if you want to donate in any way</b
>
</p>
</div>
</div>
</div>
</body>
</html>
136 changes: 136 additions & 0 deletions main.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
* {
margin: 0;
padding: 0;
font-family: "Fira Sans", sans-serif;
}

h1 {
text-transform: uppercase;
padding-bottom: 1rem;
font-weight: 700;
}

p {
font-size: 15px;
line-height: 19px;
}

a {
color: #6495ed;
text-decoration: none;
}

.left-section {
grid-area: left-section;
}
.right-section {
grid-area: right-section;
}
.footer-section {
grid-area: footer-section;
}

.inner-container {
/* Photo by Martin Adams on Unsplash */
background: url(back_photo.jpg) no-repeat center center/cover;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
}

.section-container {
display: grid;
grid-template-areas:
"left-section right-section"
"footer-section footer-section";
width: 70%;
}

/* Application & Extention general style */
section {
text-align: center;
margin: 3rem 2rem;
border-radius: 5px;
}

/* Application & Extension Container */
.left-section,
.right-section {
display: grid;
grid-template-rows: repeat(2, 1fr);
height: 30rem;
}

.left-section {
background-color: #fff;
}

.right-section {
/* Photo by Jess Bailey on Unsplash */
background: url(pin.jpg) no-repeat center center/cover;
}

.left-section > .app {
padding: 1rem;
color: #000;
position: relative;
transition: all 1s;
z-index: 5;
}

.left-section > .app > .helper {
background-image: linear-gradient(
-125deg,
#5271c4 0%,
#b19fff 48%,
#eca1fe 100%
);
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 1;
transition: all 1s;
border-radius: 5px 5px 0 0;
}

.left-section > .info {
background: #fff;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
color: #000;
border-radius: 0 0 5px 5px;
}

.left-section:hover > .app > .helper {
opacity: 0;
}

.right-section:hover > .extension {
background-color: inherit;
color: #000;
}

/* Extension */
.right-section > .extension {
padding: 1rem;
color: #5271c4;
border-radius: 5px 5px 0 0;
transition: all 1s;
}

.right-section > .pin {
border-radius: 0 0 5px 5px;
}

/* Footer */
.footer-section {
text-align: center;
}
Binary file added pin.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 483e3e2

Please sign in to comment.