Adding version2 of the website xplr

3 years ago · 8bac4cf92a
parent 347b9625aa
commit 8bac4cf92a
8 changed files with 136 additions and 0 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
--- a/assets/version2_icons/disc_logo.png
+++ b/assets/version2_icons/disc_logo.png
--- a/assets/version2_icons/document_logo.jpg
+++ b/assets/version2_icons/document_logo.jpg
--- a/assets/version2_icons/document_logo.png
+++ b/assets/version2_icons/document_logo.png
--- a/assets/version2_icons/pr_logo.png
+++ b/assets/version2_icons/pr_logo.png
--- a/assets/version2_icons/release_logo.png
+++ b/assets/version2_icons/release_logo.png
--- a/docs/version2/index.html
+++ b/docs/version2/index.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="../../assets/icon/xplr64.png">
+
+    <link rel="stylesheet" href="style.css">
+
+
+    <title>xplr</title>
+</head>
+<body>
+
+        <h1>xplr</h1>
+
+        <div class="main-page">
+            <div class="para">
+                <p> <span style="font-size: 4rem;">A</span> hackable, minimal, fast TUI file explorer</p><br>
+                <p class="more"><a href="https://github.com/sayanarijit/xplr" target="_blank">Learn more</a></p>
+            </div>
+            <div class="main-video">
+                <img src="https://s3.gifyu.com/images/xplr-0.5.0.gif" alt="" width="100%">
+            </div>
+        </div>
+
+        <div class="links">
+            <a href="https://xplr.dev/en/" target="_blank"><div class="linkCad mrgL">
+                <img src="../../assets/version2_icons/document_logo.png" alt="" width="35%">
+                <p>Documentation</p>
+            </div></a>
+            <a href="https://github.com/sayanarijit/xplr" target="_blank"><div class="linkCad mrgR">
+                <img src="../../assets/version2_icons/pr_logo.png" alt="" width="40%">
+                <p>Project Repository</p>
+            </div></a>
+            <a href="https://github.com/sayanarijit/xplr/releases" target="_blank"><div class="linkCad mrgL">
+                <img src="../../assets/version2_icons/release_logo.png" alt="" width="35%">
+                <p>Releases</p>
+            </div></a>
+            <a href="https://discord.com/invite/JmasSPCcz3" target="_blank"><div class="linkCad mrgR">
+                <img src="../../assets/version2_icons/disc_logo.png" alt="" width="40%">
+                <p>Discord</p>
+            </div></a>
+        </div>
+
+</body>
+</html>
--- a/docs/version2/style.css
+++ b/docs/version2/style.css
@ -0,0 +1,85 @@
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
+
+*{
+    padding: 0;
+    margin: 0;
+}
+
+
+body{
+    color: #2d3436;
+}
+
+
+h1{
+    padding-left: 5px;
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 3.5rem;
+    padding-top: 3vh;
+    padding-left: 4rem;
+}
+
+.main-page{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    background-color: #dfe6e9;
+    margin-top: 3vh;
+    min-height: 87vh;
+}
+
+.para{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 2rem;
+    color: rgba(0, 0, 0, 0.9);
+}
+.para .more a{
+    font-size:1.5rem;
+    color: #636e72;
+}
+
+.main-video{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.main-video img{
+    margin-right: 2rem;
+}
+
+.links{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 2rem;
+    margin: 5rem 0;
+}
+.links .linkCad{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 40vh;
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
+    color: #2d3436;
+    font-family: sans-serif;
+    cursor: pointer;
+}
+.links .linkCad:hover{
+    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2);
+}
+.links a{
+    text-decoration: none;
+}
+.links .linkCad p{
+    padding-top: 2rem;
+    font-weight: 600;
+}
+.mrgL{
+    margin-left: 60%;
+}
+.mrgR{
+    margin-right: 60%;
+}