-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #7 from vm-devr/new-page-style
Reimplemented AOT landing page
- Loading branch information
Showing
4 changed files
with
214 additions
and
95 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
| } |
