diff --git a/assets/css/app.css b/assets/css/app.css
index 24920cf..bbc55be 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1,5 +1,7 @@
/* This file is for your main application CSS */
-@import "./phoenix.css";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
/* Alerts and form errors used by phx.new */
.alert {
diff --git a/assets/js/app.js b/assets/js/app.js
index 8cc6a85..a35f60b 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -1,7 +1,6 @@
// We import the CSS which is extracted to its own file by esbuild.
// Remove this line if you add a your own CSS build pipeline (e.g postcss).
-import "alpinejs"
-
+import Alpine from "alpinejs"
// If you want to use Phoenix channels, run `mix help phx.gen.channel`
// to get started and then uncomment the line below.
@@ -52,3 +51,8 @@ liveSocket.connect()
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket
+
+Alpine.start()
+
+window.Alpine = Alpine
+
diff --git a/assets/package-lock.json b/assets/package-lock.json
index 99b268c..e1f95f7 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -8,6 +8,7 @@
"alpinejs": "^3.2.2"
},
"devDependencies": {
+ "@tailwindcss/forms": "^0.3.3",
"autoprefixer": "^10.2.0",
"postcss": "^8.3.5",
"postcss-import": "^14.0.2",
@@ -146,6 +147,18 @@
"node": ">= 8"
}
},
+ "node_modules/@tailwindcss/forms": {
+ "version": "0.3.3",
+ "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.3.3.tgz",
+ "integrity": "sha512-U8Fi/gq4mSuaLyLtFISwuDYzPB73YzgozjxOIHsK6NXgg/IWD1FLaHbFlWmurAMyy98O+ao74ksdQefsquBV1Q==",
+ "dev": true,
+ "dependencies": {
+ "mini-svg-data-uri": "^1.2.3"
+ },
+ "peerDependencies": {
+ "tailwindcss": ">=2.0.0"
+ }
+ },
"node_modules/@types/parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -943,6 +956,15 @@
"node": ">=8.6"
}
},
+ "node_modules/mini-svg-data-uri": {
+ "version": "1.3.3",
+ "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.3.3.tgz",
+ "integrity": "sha512-+fA2oRcR1dJI/7ITmeQJDrYWks0wodlOz0pAEhKYJ2IVc1z0AnwJUsKY2fzFmPAM3Jo9J0rBx8JAA9QQSJ5PuA==",
+ "dev": true,
+ "bin": {
+ "mini-svg-data-uri": "cli.js"
+ }
+ },
"node_modules/minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -1645,6 +1667,15 @@
"fastq": "^1.6.0"
}
},
+ "@tailwindcss/forms": {
+ "version": "0.3.3",
+ "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.3.3.tgz",
+ "integrity": "sha512-U8Fi/gq4mSuaLyLtFISwuDYzPB73YzgozjxOIHsK6NXgg/IWD1FLaHbFlWmurAMyy98O+ao74ksdQefsquBV1Q==",
+ "dev": true,
+ "requires": {
+ "mini-svg-data-uri": "^1.2.3"
+ }
+ },
"@types/parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -2260,6 +2291,12 @@
"picomatch": "^2.2.3"
}
},
+ "mini-svg-data-uri": {
+ "version": "1.3.3",
+ "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.3.3.tgz",
+ "integrity": "sha512-+fA2oRcR1dJI/7ITmeQJDrYWks0wodlOz0pAEhKYJ2IVc1z0AnwJUsKY2fzFmPAM3Jo9J0rBx8JAA9QQSJ5PuA==",
+ "dev": true
+ },
"minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
diff --git a/assets/package.json b/assets/package.json
index 2b449a1..e36c37d 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -6,6 +6,7 @@
"alpinejs": "^3.2.2"
},
"devDependencies": {
+ "@tailwindcss/forms": "^0.3.3",
"autoprefixer": "^10.2.0",
"postcss": "^8.3.5",
"postcss-import": "^14.0.2",
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index c206117..268ccab 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -1,14 +1,19 @@
+const colors = require('tailwindcss/colors')
module.exports = {
+ darkMode: 'media',
mode: 'jit',
purge: [
'./js/**/*.js',
'../lib/*_web/**/*.*ex'
],
theme: {
+ colors: colors
},
variants: {
extend: {},
},
- plugins: [],
+ plugins: [
+ require('@tailwindcss/forms')
+ ],
}
\ No newline at end of file
diff --git a/lib/live_beats_web/live/home_live.ex b/lib/live_beats_web/live/home_live.ex
new file mode 100644
index 0000000..4894ef4
--- /dev/null
+++ b/lib/live_beats_web/live/home_live.ex
@@ -0,0 +1,472 @@
+defmodule LiveBeatsWeb.HomeLive do
+ use LiveBeatsWeb, :live_view
+
+ def render(assigns) do
+ ~H"""
+
+
+
Who's Here
+
+
+ -
+
+ CM
+
+
+
+
+ -
+
+ KM
+
+
+
+
+ -
+
+ JV
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Nextup
+ |
+
+ likes
+ |
+
+ user
+ |
+
+
+
+ <%= for _ <- 1..20 do %>
+
+
+
+ |
+
+
+ |
+
+ March 17, 2020
+ |
+
+ <% end %>
+
+
+
+
+ |
+
+
+ |
+
+ April 4, 2020
+ |
+
+
+
+
+
+ |
+
+
+ |
+
+ March 30, 2020
+ |
+
+
+
+
+
+ """
+ end
+
+ def mount(_parmas, _session, socket) do
+ {:ok, socket}
+ end
+end
diff --git a/lib/live_beats_web/live/player_live.ex b/lib/live_beats_web/live/player_live.ex
new file mode 100644
index 0000000..b151616
--- /dev/null
+++ b/lib/live_beats_web/live/player_live.ex
@@ -0,0 +1,86 @@
+defmodule LiveBeatsWeb.PlayerLive do
+ use LiveBeatsWeb, :live_view
+
+ def render(assigns) do
+ ~H"""
+
+
+
+
+
+
+
+ Black Sands
+
+
+ Bonobo
+
+
+
+
+
+
+
<%= @time %>
+
<%= @count %>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ """
+ end
+
+ def mount(_parmas, _session, socket) do
+ if connected?(socket), do: Process.send_after(self(), :tick, 1000)
+ {:ok, assign(socket, time: inspect(System.system_time()), count: 0)}
+ end
+
+ def handle_info(:tick, socket) do
+ Process.send_after(self(), :tick, 1000)
+ {:noreply, update(socket, :count, &(&1 + 1))}
+ end
+end
diff --git a/lib/live_beats_web/live/signin_live.ex b/lib/live_beats_web/live/signin_live.ex
new file mode 100644
index 0000000..f7ac254
--- /dev/null
+++ b/lib/live_beats_web/live/signin_live.ex
@@ -0,0 +1,113 @@
+defmodule LiveBeatsWeb.SigninLive do
+ use LiveBeatsWeb, :live_view
+
+ def render(assigns) do
+ ~H"""
+
+
+
+
+
+
+
+
+
+
+
+
+ Or continue with
+
+
+
+
+
+
+
+
+
+ """
+ end
+
+ def mount(_parmas, _session, socket) do
+ {:ok, socket}
+ end
+end
diff --git a/lib/live_beats_web/router.ex b/lib/live_beats_web/router.ex
index 5e0680e..01bfb1a 100644
--- a/lib/live_beats_web/router.ex
+++ b/lib/live_beats_web/router.ex
@@ -17,7 +17,10 @@ defmodule LiveBeatsWeb.Router do
scope "/", LiveBeatsWeb do
pipe_through :browser
- get "/", PageController, :index
+ live_session :default do
+ live "/", HomeLive, :index
+ live "/signin", SigninLive, :index
+ end
end
# Other scopes may use custom stacks.
diff --git a/lib/live_beats_web/templates/layout/app.html.heex b/lib/live_beats_web/templates/layout/app.html.heex
index 169aed9..407d0aa 100644
--- a/lib/live_beats_web/templates/layout/app.html.heex
+++ b/lib/live_beats_web/templates/layout/app.html.heex
@@ -1,4 +1,4 @@
-
+
<%= get_flash(@conn, :info) %>
<%= get_flash(@conn, :error) %>
<%= @inner_content %>
diff --git a/lib/live_beats_web/templates/layout/live.html.heex b/lib/live_beats_web/templates/layout/live.html.heex
index a29d604..5a392a5 100644
--- a/lib/live_beats_web/templates/layout/live.html.heex
+++ b/lib/live_beats_web/templates/layout/live.html.heex
@@ -1,4 +1,4 @@
-
+
<%= live_flash(@flash, :info) %>
diff --git a/lib/live_beats_web/templates/layout/root.html.heex b/lib/live_beats_web/templates/layout/root.html.heex
index 2378dc6..23bc680 100644
--- a/lib/live_beats_web/templates/layout/root.html.heex
+++ b/lib/live_beats_web/templates/layout/root.html.heex
@@ -10,21 +10,363 @@
-
-
-
-
-
-
-
-
- <%= @inner_content %>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![Workflow](https://tailwindui.com/img/logos/workflow-logo-purple-500-mark-gray-700-text.svg)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![Workflow](https://tailwindui.com/img/logos/workflow-logo-purple-500-mark-gray-700-text.svg)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <%= live_render(@conn, LiveBeatsWeb.PlayerLive, session: %{}) %>
+
+
+
+
+ LiveBeats – Chill
+
+
+
+
+
+
+
+
+ <%= @inner_content %>
+
+
+
+