Website stuff

app/controllers/application_controller.rb

@@ -2,4 +2,6 @@
 
 class ApplicationController < ActionController::Base
   def home; end
+  def privacy; end
+  def terms; end
 end

app/views/application/home.html.erb

@@ -32,28 +32,30 @@
 <section id="how-it-works" class="">
 
   <div class="container mx-auto max-w-screen-xl p-4 py-24 ">
-    <p class="text-lg text-gray-600 font-bold sm:text-2xl mb-4 uppercase">How It Works</p>
-    <h2 class="text-3xl font-semibold sm:text-5xl">Share data in 3 steps</h2>
+
+    <%= render "components/section_title",
+    title: "Share data in three steps",
+    subtitle: "How it works" %>
 
     <div
       class="
         py-16 grid grid-cols-1 gap-8 items-center justify-between md:grid-cols-4
       "
     >
-      <%= render "components/how_it_works_step" do |partial| %>
+      <%= render "components/step" do |partial| %>
         <% partial.step "01" %>
         <% partial.title "Upload" %>
 
         <% partial.content do %>
           Upload some data via our
-          <%= link_to("Web UI", new_path, class: link_class) %>
+          <%= render "components/link", name: "Web UI", url: new_path %>
           or use your favorite command line client. Specify how long data
           should be kept and how often it can be accessed. You'll receive
           unique and secure link to access your data.
         <% end %>
       <% end %>
 
-      <%= render "components/how_it_works_step" do |partial| %>
+      <%= render "components/step" do |partial| %>
         <% partial.step "02" %>
         <% partial.title "Download" %>
 
@@ -63,7 +65,7 @@
         <% end %>
       <% end %>
 
-      <%= render "components/how_it_works_step" do |partial| %>
+      <%= render "components/step" do |partial| %>
         <% partial.step "03" %>
         <% partial.title "Incinerate" %>
 
@@ -77,20 +79,167 @@
   </div>
 </section>
 
+<section class="">
+  <div
+    class="
+      container mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16
+    "
+  >
+    <div class="max-w-xl">
+      <%= render "components/section_title",
+      title: "What Makes Us Special",
+      subtitle: "Why Data Dead Drop" %>
+
+      <p class="mt-4">
+        There are so many file sharing tools out there. Why should you use this
+        one? I think Data Dead Drop is a bit special. Here is why:
+      </p>
+    </div>
+
+    <div
+      class="
+        mt-8 grid grid-cols-1 gap-8 md:mt-16 md:grid-cols-2 md:gap-12 lg:grid-cols-2
+      "
+    >
+      <%= render "components/feature",
+      title: "Anonymity",
+      text: "Data Dead Drop requires no sign-up. There are no cookies, and none of your data is ever collected, processed or sold." do |partial| %>
+        <% partial.icon do %>
+          <%= inline_svg "eye-off.svg" %>
+        <% end %>
+      <% end %>
+
+      <%= render "components/feature",
+        title: "Automation" do |partial| %>
+        <% partial.icon do %>
+          <%= inline_svg "server.svg" %>
+        <% end %>
+        <% partial.text do %>
+          Data Dead Drop is built with machines and automation in mind. No need
+          for browsers, just bring your favorite command line client. We
+          recommend
+          <%= render "components/link", name: "Curl", url: "https://curl.se/" %>
+          or
+          <%= render "components/link", name: "HTTpie", url: "https://httpie.io/" %>.
+        <% end %>
+      <% end %>
+
+      <%= render "components/feature",
+      title: "Security" do |partial| %>
+        <% partial.icon do %>
+          <%= inline_svg "shield.svg" %>
+        <% end %>
+        <% partial.text do %>
+          Your data is safe by design. Secure links are generated using the
+          <%= render "components/link",
+          name: "Diceware algorithm",
+          url: "https://en.wikipedia.org/wiki/Diceware" %>, making unauthorized access impossible. Uploaded data is fully
+          encrypted, we couldn't take a peek even if we wanted to.
+        <% end %>
+      <% end %>
+
+      <%= render "components/feature",
+        title: "Self-Destruction", 
+        text: "Once uploaded your data will be destroyed sooner rather than later. Per default anything you upload can only be accessed once. Even data that's never accessed will be deleted after a short time." do |partial| %>
+        <% partial.icon do %>
+          <%= inline_svg "trash.svg" %>
+        <% end %>
+      <% end %>
+
+      <%= render "components/feature",
+      title: "Free",
+      text: "Data Dead Drop is completely free, as in beer, forever. You can give us money, but you don't have to." do |partial| %>
+        <% partial.icon do %>
+          <%= inline_svg "dollar-sign.svg" %>
+        <% end %>
+      <% end %>
+
+      <%= render "components/feature",
+      title: "Open Source" do |partial| %>
+        <% partial.icon do %>
+          <%= inline_svg "github.svg" %>
+        <% end %>
+
+        <% partial.text do %>
+          Don't believe our claims? That's fine. You can read the source code
+          for this product on
+          <%= render "components/link",
+          name: "GitHub",
+          url: "https://github.com/hschne/data-dead-drop" %>. Data Dead Drop is built with love using
+          <%= render "components/link", name: "Ruby on Rails", url: "https://rubyonrails.org/" %>.
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</section>
+
 <section id="faq" class="container mx-auto max-w-screen-xl py-32 px-4">
   <h2 class="text-3xl font-extrabold mb-8 sm:text-5xl">FAQ</h2>
 
-  <%= render partial: "components/faq_item",
-  locals: {
-    headline: "Lorem ipsum dolor sit amet",
-    content:
-      "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, sapiente animi! Accusantium inventore sunt ipsam? Molestiae voluptatum deleniti quia rerum reiciendis omnis. Sequi, repudiandae. Debitis earum eligendi neque architecto vel?",
-  } %>
-
-  <%= render partial: "components/faq_item",
-  locals: {
-    headline: "Lorem ipsum dolor sit amet",
-    content:
-      "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, sapiente animi! Accusantium inventore sunt ipsam? Molestiae voluptatum deleniti quia rerum reiciendis omnis. Sequi, repudiandae. Debitis earum eligendi neque architecto vel?",
-  } %>
+  <div class=" divide-y divide-gray-100">
+    <%= render "components/faq",
+    title: "Is my data really, really secure?" do |partial| %>
+      <% partial.content do %>
+        The short answer is
+        <strong>yes</strong>. The long answer is that we use an encrypted AWS bucket to store your
+        data at rest. Secure links are generated with
+        <% render "components/link",
+        name: "the diceware algorithm",
+        url: "https://en.wikipedia.org/wiki/Diceware" %>
+        using three words. In theory these links are guessable. With really
+        powerful hardware you could guess a given link in
+        <% render "components/link",
+        name: "about nine days",
+        url:
+          "https://blog.1password.com/posts/2013/1password-hashcat-strong-master-passwords/hashcat-crack-times.png" %>
+        - that is without ignoring network latency. In practice, it is highly
+        unlikely to guess a given link.
+      <% end %>
+    <% end %>
+
+    <%= render "components/faq",
+    title: "Who is this for?" do |partial| %>
+      <% partial.content do %>
+        Data Dead Drop was created to easily exchange keys or secrets between
+        independent computer systems. However, it would be useful for anyone
+        who requires anonymous, quick and secure data sharing that can't be
+        traced. Keep in mind that this service is not to be used for long term
+        storage, there are different services for that.
+      <% end %>
+    <% end %>
+
+    <%= render "components/faq",
+    title: "Can I upload anything?" do |partial| %>
+      <% partial.content do %>
+        We limit the size of uploads to 1MB. By uploading data you agree to our
+        terms and conditions. Data Dead Drop reserveres the right to delete any
+        data that is deemed illegal or inappropriate and take steps to block
+        users who upload such data.
+      <% end %>
+    <% end %>
+
+    <%= render "components/faq",
+    title: "Where can I report issues or leave feedback?" do |partial| %>
+      <% partial.content do %>
+        Head over to
+        <%= render "components/link",
+        name: "GitHub",
+        url: "https://github.com/hschne/data-dead-drop" %>
+        to report an issue or send an
+        <a href="mailto:[email protected]">Email</a>.
+      <% end %>
+    <% end %>
+
+    <%= render "components/faq",
+    title: "I think this is useful, can I give you money?" do |partial| %>
+      <% partial.content do %>
+        Data Dead Drop is cheap to run, thanks to utilizing a lean stack based
+        on SQlite and Ruby on Rails. Still, I appreciate the gesture. There are
+        currently no paid plans for using Data Dead Drop, but feel free to
+        <%= render "components/link",
+        name: "buy me a coffee",
+        url: "https://www.buymeacoffee.com/hschne" %>.
+      <% end %>
+    <% end %>
+  </div>
 </section>

app/views/application/privacy.html

@@ -0,0 +1,7 @@
+<section id="faq" class="prose container mx-auto max-w-screen-xl py-32 px-4">
+  <h1>Privacy Policy</h1>
+  <p>
+    This app collects no private data, period. Your data will not be used in any
+    way, because we won't have it.
+  </p>
+</section>

app/views/components/_faq_item.html.erb → app/views/components/_faq.html.erb

@@ -1,10 +1,10 @@
-<details class="group [&_summary::-webkit-details-marker]:hidden">
+<details class="group [&_summary::-webkit-details-marker]:hidden py-4">
   <summary
     class="
       flex cursor-pointer items-center justify-between gap-1.5 rounded-lg py-4
     "
   >
-    <h2 class="font-medium"><%= headline %></h2>
+    <h2 class="font-medium"><%= partial.title %></h2>
 
     <svg
       class="h-5 w-5 shrink-0 transition duration-300 group-open:-rotate-180"
@@ -22,7 +22,7 @@
     </svg>
   </summary>
 
-  <p class="mt-4 sm:px-4 leading-relaxed">
-    <%= content %>
+  <p class="mt-4 leading-relaxed">
+    <%= partial.content %>
   </p>
 </details>

app/views/components/_feature.html.erb

@@ -0,0 +1,15 @@
+<div class="flex items-start gap-4">
+  <span class="shrink-0 rounded-lg bg-gray-800 text-white p-4">
+    <%= partial.icon %>
+  </span>
+
+  <div>
+    <h2 class="text-lg font-bold">
+      <%= partial.title %>
+    </h2>
+
+    <p class="mt-1 text-sm">
+      <%= partial.text %>
+    </p>
+  </div>
+</div>

app/views/components/_link.html.erb

@@ -0,0 +1 @@
+<%= link_to(name, url, class: link_class) %>

app/views/components/_section_title.html.erb

@@ -0,0 +1,2 @@
+<p class="text-lg text-gray-600 font-bold sm:text-2xl mb-4 uppercase"><%= subtitle %></p>
+<%= render "components/title", text: title %>

app/views/components/_title.html.erb

@@ -0,0 +1 @@
+<h2 class="text-3xl font-semibold sm:text-5xl"><%= text %></h2>

app/views/layouts/application.html.erb

@@ -45,15 +45,81 @@
       <%= yield %>
     </main>
 
-    <footer class="bg-gray-50">
-      <div class="mx-auto max-w-screen-xl py-8 sm:px-6 lg:px-8">
-        <div class="sm:flex sm:items-center sm:justify-between">
-          <div class="flex justify-center sm:justify-start">
-          </div>
-
-          <p class="mt-4 text-center text-sm text-gray-500 lg:mt-0 lg:text-right">
-            Copyright &copy; 2023. All rights reserved.
-          </p>
+    <footer class="bg-gray-50 border-t border-gray-100 ">
+      <div class="mx-auto max-w-screen-xl mt-12 py-6 p-4">
+        <div class="text-center sm:flex sm:justify-between sm:text-left">
+          <p class="mt-4 text-sm text-gray-500 sm:order-first sm:mt-0">&copy;
+            <script>document.write(/\d{4}/.exec(Date())[0])</script>
+            <noscript>2023</noscript>
+            Hans Schnedlitz</p>
+
+          <ul
+            class="
+              mt-8 sm:mt-0 flex flex-wrap justify-center gap-4 text-xs lg:justify-end
+            "
+          >
+            <li>
+              <a href="#" class="text-gray-500 transition hover:opacity-75">
+                Terms & Conditions
+              </a>
+            </li>
+
+            <li>
+              <a href="/privacy" class="text-gray-500 transition hover:opacity-75">
+                Privacy Policy
+              </a>
+            </li>
+          </ul>
+
+          <ul class="mt-8 flex justify-center gap-6 sm:mt-0 lg:justify-end">
+            <li>
+              <a
+                href="/"
+                rel="noreferrer"
+                target="_blank"
+                class="text-gray-700 transition hover:opacity-75"
+              >
+                <span class="sr-only">Mastodon</span>
+                <%= inline_svg "mastodon.svg", class: "h-6 w-6" %>
+              </a>
+            </li>
+
+            <li>
+              <a
+                href="https://twitter.com/hschnedlitz"
+                rel="noreferrer"
+                target="_blank"
+                class="text-gray-700 transition hover:opacity-75"
+              >
+                <span class="sr-only">Twitter</span>
+
+                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path
+                    d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"
+                  />
+                </svg>
+              </a>
+            </li>
+
+            <li>
+              <a
+                href="https://github.com/hschne/data-dead-drop"
+                rel="noreferrer"
+                target="_blank"
+                class="text-gray-700 transition hover:opacity-75"
+              >
+                <span class="sr-only">GitHub</span>
+
+                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path
+                    fill-rule="evenodd"
+                    d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </a>
+            </li>
+          </ul>
         </div>
       </div>
     </footer>