Adds website

lettier · Mar 17, 2018 · e315757 · e315757
1 parent 0eb83a7
commit e315757
Show file tree

Hide file tree

Showing 24 changed files with 963 additions and 259 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,10 +3,10 @@
 *.stack*
 .upload_docs_to_hackage
 dist/*
-docs/*
+haddock/*
 cabal.sandbox.config
 *gui.glade~
 *~
 Gifcurry-*-docs*
 
-!docs/.gitkeep
+!haddock/.gitkeep
diff --git a/README.md b/README.md
@@ -28,7 +28,7 @@ Is Gifcurry another Electron app? No way! Gifcurry is 100% #electronfree.
 No need to download more RAM, Gifcurry is light as a feather.
 Run it all day, run it all year—you'll never notice.
 
-I know what your thinkin', "Gifcurry is just FFMpeg and ImageMagick," but you'd be wrong.
+I know what your're thinkin', "Gifcurry is just FFMpeg and ImageMagick," but you'd be wrong.
 Gifcurry hides all the goofy details so you can concentrate on what matters—the almighty GIF.
 Making GIFs with Gifcurry is fun so try it out!
 

diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/gifcurry-logo.svg b/docs/gifcurry-logo.svg
diff --git a/docs/gifcurry-video.mp4 b/docs/gifcurry-video.mp4
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<!--Copyright 2018 David Lettier -->
+<!--lettier.com-->
+<html>
+  <head>
+    <title>Gifcurry - lettier.com</title>
+    <meta charset="utf-8">
+
+    <meta property="og:url"          content="https://lettier.github.io/gifcurry">
+    <meta property="og:type"         content="website">
+    <meta property="og:title"        content="Gifcurry - lettier.com">
+    <meta property="og:description"  content="Gifcurry is your open source video to GIF maker built with Haskell.">
+
+    <meta property="og:image"        content="https://lettier.github.io/gifcurry/screenshot.png">
+    <meta property="og:image:type"   content="image/png">
+    <meta property="og:image:width"  content="1920">
+    <meta property="og:image:height" content="1200">
+
+    <meta property="og:video"        content="gifcurry-video.mp4">
+    <meta property="og:video:type"   content="video/mp4">
+    <meta property="og:video:width"  content="1000">
+    <meta property="og:video:height" content="436">
+
+    <meta itemprop="name"            content="Gifcurry - lettier.com">
+    <meta itemprop="description"     content="Gifcurry is your open source video to GIF maker built with Haskell.">
+    <meta itemprop="image"           content="https://lettier.github.io/gifcurry/screenshot.png">
+
+    <meta name="description"         content="Gifcurry is your open source video to GIF maker built with Haskell.">
+    <meta name="image"               content="https://lettier.github.io/gifcurry/screenshot.png">
+    <meta name="viewport"            content="width=device-width, initial-scale=1">
+    <meta name="keywords"            content="gif, video, ffmpeg, imagemagick, giphy, imgur, gifcurry, haskell, gtk, gstreamer">
+    <meta name="author"              content="David Lettier">
+    <meta name="copyright"           content="Copyright 2018 David Lettier">
+
+    <meta name="og:title"            content="Gifcurry - lettier.com">
+    <meta name="og:description"      content="Gifcurry is your open source video to GIF maker built with Haskell.">
+    <meta name="og:image"            content="https://lettier.github.io/gifcurry/screenshot.png">
+    <meta name="og:url"              content="https://lettier.github.io/gifcurry">
+    <meta name="og:site_name"        content="Gifcurry - lettier.com">
+    <meta name="og:locale"           content="en_us">
+    <meta name="og:video"            content="gifcurry-video.mp4">
+    <meta name="og:type"             content="website">
+
+    <link rel="stylesheet" type="text/css"  href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
+    <link rel="stylesheet" type="text/css"  href="style.css">
+    <link rel="stylesheet"                  href="https://fonts.googleapis.com/css?family=Roboto" >
+    <link rel="stylesheet"                  href="https://cdn.jsdelivr.net/npm/[email protected]/css/fontisto/fontisto.min.css">
+    <link rel="icon"                        href="favicon.ico?v=1.0">
+  </head>
+  <body>
+    <div class="video-header">
+      <div class="video-container">
+        <video class= "video" autoplay loop muted>
+          <source src="gifcurry-video.mp4" type="video/mp4">
+        </video>
+        <div class="video-overlay">
+          <div class="container height-100-percent">
+            <table class="logo-wrapper">
+              <tr>
+                <td>
+                  <div class="columns">
+                    <div class="column has-text-centered">
+                      <img class="logo" src="gifcurry-logo.svg">
+                    </div>
+                    <div class="column border-left-white center-text-vertical is-hidden-mobile">
+                      <div class="has-text-white is-size-3">
+                        Your open source video to GIF maker built with Haskell.
+                      </div>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section">
+      <div class="container">
+        <div class="columns has-text-white is-size-1 is-size-3-mobile">
+          <div class="column is-2 has-text-left-mobile has-text-right-tablet is-hidden-mobile">
+            <i class="fi fi-question"></i>
+          </div>
+          <div class="column border-left-white center-text-vertical">
+            <h2 class="">
+              What is Gifcurry?
+            </h2>
+          </div>
+        </div>
+        <div class="columns has-text-light">
+          <div class="column is-2"></div>
+          <div class="column is-4">
+            <p class="is-size-4">
+              Gifcurry is an open-source, video-to-GIF maker.
+              It's built with Haskell and works on Linux,
+              Mac, and most likely Windows.
+              There is both a graphical and command line interface.
+            </p>
+          </div>
+          <div class="column is-4">
+            <img src="screenshot-clip-0.png">
+          </div>
+        </div>
+        <div class="columns has-text-white is-size-1 is-size-3-mobile">
+          <div class="column is-2 has-text-left-mobile has-text-right-tablet is-hidden-mobile">
+            <i class="fi fi-spinner-cog"></i>
+          </div>
+          <div class="column border-left-white center-text-vertical">
+            <h2 class="">
+              What can Gifcurry do?
+            </h2>
+          </div>
+        </div>
+        <div class="columns has-text-light">
+          <div class="column is-2"></div>
+          <div class="column is-4">
+            <p class="is-size-4">
+              Gifcurry takes your videos and makes them into GIFs.
+              You can crop, trim, seek, add text, pick a font,
+              alter the duration, change the size, set the quality,
+              and save your creation as a GIF or a video.
+            </p>
+          </div>
+          <div class="column is-4">
+            <img src="screenshot-clip-1.png">
+          </div>
+        </div>
+        <div class="columns has-text-white is-size-1 is-size-3-mobile">
+          <div class="column is-2 has-text-left-mobile has-text-right-tablet is-hidden-mobile">
+            <i class="fi fi-download"></i>
+          </div>
+          <div class="column border-left-white center-text-vertical">
+            <h2 class="">
+              Where can I download Gifcurry?
+            </h2>
+          </div>
+        </div>
+        <div class="columns has-text-light">
+          <div class="column is-2"></div>
+          <div class="column is-4 is-size-4">
+            <p>
+              Before you download Gifcurry, make sure your machine has
+              <a href="https://www.gtk.org/download/">GTK+</a>,
+              <a href="https://gstreamer.freedesktop.org/download/">GStreamer</a>,
+              <a href="https://www.ffmpeg.org/download.html">FFMpeg</a>, and
+              <a href="https://www.imagemagick.org/script/download.php">ImageMagick</a>.
+            <p>
+              Linux users can download the
+              <a href="https://github.com/lettier/gifcurry/releases/download/3.0.0.0/gifcurry-3.0.0.0-x86_64.AppImage">AppImage</a> or
+              the <a href="https://github.com/lettier/gifcurry/releases/download/3.0.0.0/gifcurry-linux-3.0.0.0.tar.gz">prebuilt binaries</a>.
+              If you'd rather install it, you can do so via
+              <a href="https://aur.archlinux.org/packages/gifcurry/">pacman</a> (Arch)
+              or
+              <a href="https://snapcraft.io/gifcurry/">snap</a>.
+              If you're really courageous, you can build it from
+              <a href="https://github.com/lettier/gifcurry">source</a>.
+            </p>
+            <p>
+              For Mac users, head over to the
+              <a href="https://github.com/lettier/gifcurry#i-use-mac">read me page</a>
+              and follow the instructions. Eventually those instructions will become a
+              Homebrew formula so installing Gifcurry on the Mac will be super easy.
+            </p>
+            <p>
+              Gifcurry hasn't been tested on Windows yet but there's no reason it shouldn't work.
+              If you know how to build Haskell programs, go to the
+              <a href="https://github.com/lettier/gifcurry#im-a-haskell-developer">read me page</a>
+              and follow the instructions.
+              Please let me know if you get it to run.
+            </p>
+          </div>
+          <div class="column is-4">
+            <img src="screenshot-clip-2.png">
+          </div>
+        </div>
+        <div class="columns has-text-white is-size-1 is-size-3-mobile">
+          <div class="column is-2 has-text-left-mobile has-text-right-tablet is-hidden-mobile">
+            <i class="fi fi-bug"></i>
+          </div>
+          <div class="column border-left-white center-text-vertical">
+            <h2 class="">
+              Where can I get help?
+            </h2>
+          </div>
+        </div>
+        <div class="columns has-text-light">
+          <div class="column is-2"></div>
+          <div class="column is-4 is-size-4">
+            <p>
+              Found a bug?
+              Need a feature?
+              Can't install it?
+              No worries.
+              Point your browser to the <a href="https://github.com/lettier/gifcurry/issues">issues page</a>.
+            </p>
+          </div>
+          <div class="column is-4 is-hidden-mobile">
+            <img src="screenshot-clip-3.png">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section">
+      <div class="container">
+        <div class="columns">
+          <div class="column is-1 is-hidden-mobile"></div>
+          <div class="column has-text-white is-5 is-size-5">
+            <p>
+              Copyright 2018 David Lettier
+              <br>
+              <a href="https://www.lettier.com/">lettier.com</a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/docs/screenshot-clip-0.png b/docs/screenshot-clip-0.png
diff --git a/docs/screenshot-clip-1.png b/docs/screenshot-clip-1.png
diff --git a/docs/screenshot-clip-2.png b/docs/screenshot-clip-2.png
diff --git a/docs/screenshot-clip-3.png b/docs/screenshot-clip-3.png
diff --git a/docs/screenshot.png b/docs/screenshot.png
diff --git a/docs/style.css b/docs/style.css
@@ -0,0 +1,88 @@
+/*
+Copyright 2018 David Lettier
+lettier.com
+*/
+
+html, body {
+  background-color: #5294e2;
+  font-family: "Roboto", sans-serif;
+}
+
+p {
+  margin-bottom: 20px;
+}
+
+a, a:hover, a:visited {
+  color: white;
+  text-decoration: underline;
+}
+
+div > p:first-child {
+  margin-top: 20px;
+}
+
+.video-header {
+}
+
+.video-container {
+  position: relative;
+  top: 0;
+  bottom: 0;
+  width :100%;
+}
+
+.video {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  height: auto;
+}
+
+.video-overlay {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(30, 62, 101, 0.83);
+}
+
+.logo-wrapper {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.logo-wrapper td {
+  vertical-align: middle;
+  text-align: left;
+}
+
+@media (max-width: 1023px) {
+  .logo {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
+.height-100-percent {
+  height: 100%;
+}
+
+.fi-border {
+  border-color: white;
+}
+
+.border-left-white {
+  border-left: 2px solid white;
+}
+
+.center-text-vertical {
+  display: flex;
+  align-items: center;
+}
diff --git a/docs/.gitkeep → haddock/.gitkeep b/docs/.gitkeep → haddock/.gitkeep
diff --git a/icon/icon-1.svg → icon/icon-1-0.svg b/icon/icon-1.svg → icon/icon-1-0.svg