Landing pages UI

assets/css/app.css

@@ -2,11 +2,24 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;500;700&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@100..800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');
 /* This file is for your main application CSS */
 .solved-height {
   padding: 0;
   margin: 0;
   height: 100vh;
   height: var(--doc-height);
 }
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}

assets/js/app.js

@@ -21,9 +21,11 @@ import 'phoenix_html'
 import { Socket } from 'phoenix'
 import { LiveSocket } from 'phoenix_live_view'
 import topbar from '../vendor/topbar'
-import CopyHook from './hooks/copy_hook.js'
+import AsciinemaHook from './hooks/asciinema_hook'
+import CopyHook from './hooks/copy_hook'
 
 const Hooks = {
+  AsciinemaHook,
   CopyHook,
 }
 

assets/js/hooks/asciinema_hook.js

@@ -0,0 +1,9 @@
+export default {
+  mounted() {
+    const id = this.el.dataset.asciicast
+    const script = document.createElement('script')
+    script.id = `asciicast-${id}`
+    script.src = `https://asciinema.org/a/${id}.js`
+    this.el.appendChild(script)
+  },
+}

assets/js/hooks/copy_hook.js

@@ -1,12 +1,22 @@
 export default {
   mounted() {
-    this.el.addEventListener('click', () => {
-      var copyText = document.getElementById('tool-installation').innerText
+    const copyContainer = this.el
+    const copyElement = document.getElementById('copy-icon')
+    const copyConfirmationElement = document.getElementById('copied-icon')
+
+    copyContainer.addEventListener('click', (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+
+      const copyText = document.getElementById('tool-installation').innerText
       navigator.clipboard.writeText(copyText)
-      copyBtn = document.getElementById('copy')
-      copyBtn.innerHTML = 'Copied'
-      copyBtn.setAttribute('disabled', '')
-      copyBtn.classList.add('bg-[#9887FF]')
+      copyElement.classList.add('hidden')
+      copyConfirmationElement.classList.remove('hidden')
+
+      setTimeout(() => {
+        copyConfirmationElement.classList.add('hidden')
+        copyElement.classList.remove('hidden')
+      }, 600)
     })
   },
 }

assets/tailwind.config.js

@@ -16,12 +16,21 @@ module.exports = {
       // => @media (min-width: 1240px) { ... }
     },
     extend: {
+      boxShadow: {
+        custom: '0 4px 10px rgba(194, 184, 255, 0.5)',
+      },
       fontSize: {
         md: '15px',
       },
       fontFamily: {
         montserrat: ['Montserrat', 'sans-serif'],
       },
+      fontFamily: {
+        pixelify: ['Pixelify Sans', 'sans-serif'],
+      },
+      fontFamily: {
+        martian: ['Martian Mono', 'sans-serif'],
+      },
       colors: {
         brand: '#FD4F00',
         indigo: {

fly.toml

@@ -35,4 +35,4 @@ timeout = "5s"
 [[vm]]
 cpu_kind = "shared"
 cpus = 1
-memory_mb = 256
+memory_mb = 512

lib/phx_tools_web.ex

@@ -72,7 +72,6 @@ defmodule PhxToolsWeb do
     quote do
       use Phoenix.Component
 
-      alias PhxToolsWeb.Components.SharedComponents
       alias PhxToolsWeb.SeoMetaTagComponent
 
       # Import convenience functions from controllers

lib/phx_tools_web/components/core_components.ex

@@ -21,33 +21,6 @@ defmodule PhxToolsWeb.CoreComponents do
   @type rendered :: Rendered.t()
   @type selector :: String.t()
 
-  @doc """
-  Renders a card for being able to select OS
-  """
-  attr :id, :string, required: true
-  attr :class, :list
-  attr :href, :string, required: true
-  attr :os_icon, :string, required: true
-  attr :os_name, :string, required: true
-
-  @spec os_link_card(assigns()) :: rendered()
-  def os_link_card(assigns) do
-    ~H"""
-    <.link patch={@href}>
-      <div
-        id={@id}
-        class={[
-          "block border-[2px] border-[#5337FF] py-2 rounded-md cursor-pointer hover:bg-indigo-850",
-          @class
-        ]}
-      >
-        <img src={@os_icon} />
-        <h1 class="text-white text-center"><%= @os_name %></h1>
-      </div>
-    </.link>
-    """
-  end
-
   @doc """
   Renders flash notices.
 

lib/phx_tools_web/components/layouts/root.html.heex

@@ -9,6 +9,7 @@
       <%= assigns[:page_title] || "PhxTools" %>
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
+    <link rel="preconnect" href="https://asciinema.org/" />
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
     <script
@@ -19,13 +20,7 @@
     </script>
   </head>
 
-  <body class="font-montserrat bg-[#110B33]">
-    <div class="relative flex items-center justify-center lg:mb-[22px] md:mb-[33px] sm:mb-[35px] mt-[5%] px-[30%]">
-      <.link target="_blank" href="https://optimum.ba">
-        <SharedComponents.optimum_logo />
-      </.link>
-    </div>
-
+  <body class="bg-[#110A33] mx-auto  sm:px-2 md:px-7  lg:w-9/12 sm:py-8">
     <%= @inner_content %>
   </body>
 </html>

lib/phx_tools_web/live/live_session_helper.ex

@@ -13,7 +13,7 @@ defmodule PhxToolsWeb.LiveSessionHelper do
         %{"operating_system" => "Linux"}
 
       "Mac" ->
-        %{"operating_system" => "Mac"}
+        %{"operating_system" => "macOS"}
 
       _other ->
         %{"operating_system" => operating_system}