From 5bfe59a71fd75ebed9255a2ecc83fb35d6fb7f7d Mon Sep 17 00:00:00 2001 From: schriefer Date: Fri, 7 Jun 2024 12:47:45 +0200 Subject: [PATCH 1/4] WIP Session 1 --- html/chat1/index.html | 116 +++++++++++++++++++++++++++++++++++++ html/chat1/styles.css | 123 ++++++++++++++++++++++++++++++++++++++++ html/chat2/index.html | 92 ++++++++++++++++++++++++++++++ html/chat2/styles.css | 129 ++++++++++++++++++++++++++++++++++++++++++ html/index.html | 112 ++++++++++++++++++++++++++++++++++++ html/main.css | 70 +++++++++++++++++++++++ 6 files changed, 642 insertions(+) create mode 100644 html/chat1/index.html create mode 100644 html/chat1/styles.css create mode 100644 html/chat2/index.html create mode 100644 html/chat2/styles.css create mode 100644 html/index.html create mode 100644 html/main.css diff --git a/html/chat1/index.html b/html/chat1/index.html new file mode 100644 index 0000000..34af417 --- /dev/null +++ b/html/chat1/index.html @@ -0,0 +1,116 @@ + + + + + + DataDash + + + +
+
+

Welcome to DataDash! 👋

+

The place to launch and discover new Datasets and web-api's.

+
+
+

Top Products Launching Today

+

For the first 4 hours of the day, we're hiding upvotes to help every product get a chance to catch your interest.

+
+
+
+
+
+

Standup

+

Simply daily accountability phone call, powered by AI

+
+ Q 2 + Productivity +
+
+
+
+ + +
+
+
+
+
+
+

Tori

+

The simple mobile crypto wallet even your mom can use

+
+ Q 1 + Fintech + Crypto + Cryptocurrency +
+
+
+
+ + +
+
+
+
+
+
+

Tyms

+

Modern accounting ERP for ambitious businesses

+
+ Q 2 + Android + Artificial Intelligence + Accounting +
+
+
+
+ + +
+
+
+
+
+
+

ZapCardz

+

Remember what you learn forever with AI powered flashcards

+
+ Q 6 + Solo maker + Bootstrapped + Productivity +
+
+
+
+ + +
+
+
+
+
+
+

Peek

+

AI organizer and workspace for your browser tabs

+
+ Q 15 + Solo maker + Bootstrapped + Productivity +
+
+
+
+ + +
+
+
+
+
+ + diff --git a/html/chat1/styles.css b/html/chat1/styles.css new file mode 100644 index 0000000..249f086 --- /dev/null +++ b/html/chat1/styles.css @@ -0,0 +1,123 @@ +body { + background-color: #1c1c1c; + color: #e1e1e1; + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +.container { + max-width: 800px; + margin: 0 auto; + padding: 20px; +} + +header { + text-align: center; + margin-bottom: 20px; +} + +header h1 { + font-size: 24px; + margin: 0; +} + +header p { + font-size: 14px; +} + +header a { + color: #4a90e2; +} + +.top-products h2 { + font-size: 20px; + margin-bottom: 10px; +} + +.top-products p { + font-size: 14px; + margin-bottom: 20px; +} + +.top-products a { + color: #4a90e2; +} + +.product-list { + display: flex; + flex-direction: column; + gap: 10px; +} + +.product { + display: flex; + justify-content: space-between; + background-color: #333; + padding: 10px; + border-radius: 5px; +} + +.product-info { + display: flex; + gap: 10px; +} + +.icon { + width: 40px; + height: 40px; + background-color: #555; + border-radius: 5px; +} + +.standup { background-image: url('standup.png'); } +.tori { background-image: url('tori.png'); } +.tyms { background-image: url('tyms.png'); } +.zapcardz { background-image: url('zapcardz.png'); } +.peek { background-image: url('peek.png'); } + +.details { + display: flex; + flex-direction: column; +} + +.details h3 { + font-size: 16px; + margin: 0; +} + +.details p { + font-size: 14px; + margin: 5px 0; +} + +.tags { + display: flex; + gap: 5px; + font-size: 12px; +} + +.tags span { + background-color: #4a90e2; + padding: 2px 5px; + border-radius: 3px; +} + +.upvote { + display: flex; + flex-direction: column; + justify-content: center; + gap: 5px; +} + +.upvote button { + background: none; + border: none; + color: #4a90e2; + font-size: 20px; + cursor: pointer; +} + +.upvote button:hover { + color: #ff9900; +} diff --git a/html/chat2/index.html b/html/chat2/index.html new file mode 100644 index 0000000..23b235a --- /dev/null +++ b/html/chat2/index.html @@ -0,0 +1,92 @@ + + + + + + DataDash + + + +
+
+

Welcome to DataDash 👋

+

The place to launch and discover Datasets and api-endpoints.

+
+
+

Launching Today

+
    +
  • +
    +
    +
    +

    Standup

    +

    Simply daily accountability phone call, powered by AI

    +
    +
    +
    + + 8 + +
    +
    • +
  • +
    +
    +
    +

    Tori

    +

    The simple mobile crypto wallet even your mom can use

    +
    +
    +
    + + 8 + +
    +
    • +
  • +
    +
    +
    +

    Tyms

    +

    Modern accounting ERP for ambitious businesses

    +
    +
    +
    + + 8 + +
    +
    • +
  • +
    +
    +
    +

    ZapCardz

    +

    Remember what you learn forever with AI powered flashcards

    +
    +
    +
    + + 8 + +
    +
    • +
  • +
    +
    +
    +

    Peek

    +

    AI organizer and workspace for your browser tabs

    +
    +
    +
    + + 8 + +
    +
    • +
+
+
+ + diff --git a/html/chat2/styles.css b/html/chat2/styles.css new file mode 100644 index 0000000..6ce7434 --- /dev/null +++ b/html/chat2/styles.css @@ -0,0 +1,129 @@ +body { + background-color: #1c1c1c; + color: #e1e1e1; + font-family: Arial, sans-serif; + margin: 0; + padding: 0; +} + +main { + max-width: 800px; + margin: 0 auto; + padding: 20px; +} + +header { + text-align: center; + margin-bottom: 20px; +} + +header h1 { + font-size: 24px; + margin: 0; +} + +header p { + font-size: 14px; +} + +header a { + color: #4a90e2; +} + +.top-products h2 { + font-size: 20px; + margin-bottom: 10px; +} + +.top-products p { + font-size: 14px; + margin-bottom: 20px; +} + +.top-products a { + color: #4a90e2; +} + +.product-list { + list-style-type: none; + padding: 0; +} + +.product { + display: flex; + justify-content: space-between; + background-color: #333; + padding: 10px; + border-radius: 5px; + margin-bottom: 10px; +} + +.product-info { + display: flex; + gap: 10px; +} + +.icon { + width: 40px; + height: 40px; + background-color: #555; + border-radius: 5px; +} + +.standup { background-image: url('standup.png'); } +.tori { background-image: url('tori.png'); } +.tyms { background-image: url('tyms.png'); } +.zapcardz { background-image: url('zapcardz.png'); } +.peek { background-image: url('peek.png'); } + +.details { + display: flex; + flex-direction: column; +} + +.details h3 { + font-size: 16px; + margin: 0; +} + +.details p { + font-size: 14px; + margin: 5px 0; +} + +.tags { + display: flex; + gap: 5px; + font-size: 12px; +} + +.tags span { + background-color: #4a90e2; + padding: 2px 5px; + border-radius: 3px; +} + +.upvote { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; +} + +.upvote button { + background: none; + border: none; + color: #4a90e2; + font-size: 20px; + cursor: pointer; +} + +.upvote button:hover { + color: #ff9900; +} + +.upvote-count { + font-size: 16px; + color: #e1e1e1; +} diff --git a/html/index.html b/html/index.html new file mode 100644 index 0000000..1933cfb --- /dev/null +++ b/html/index.html @@ -0,0 +1,112 @@ + + + + + + DataDash + + + +
+
+

Welcome to DataDash

+

The place to launch and discover datasets and API endpoints.

+
+ +
+

Recently added:

+
    +
  • +
    +
    +
    +

    Standup

    +

    Simply daily accountability phone call, powered by AI

    +
    +
    + +
    • +
  • +
    +
    +
    +

    Tori

    +

    The simple mobile crypto wallet even your mom can use

    +
    +
    + +
    • +
  • +
    +
    +
    +

    Tyms

    +

    Modern accounting ERP for ambitious businesses

    +
    +
    + +
    • +
  • +
    +
    +
    +

    ZapCardz

    +

    Remember what you learn forever with AI powered flashcards

    +
    +
    + +
    • +
  • +
    +
    +
    +

    Peek

    +

    AI organizer and workspace for your browser tabs

    +
    +
    + +
    • +
+
+
+

Most Liked:

+
    +
  • +
    +
    +
    +

    Standup

    +

    Simply daily accountability phone call, powered by AI

    +
    +
    + +
    • +
+ +
+ + \ No newline at end of file diff --git a/html/main.css b/html/main.css new file mode 100644 index 0000000..6719ba4 --- /dev/null +++ b/html/main.css @@ -0,0 +1,70 @@ +:root { + --bg-color: #222; + --fg-color: #555; + --text-color: #dbdbdb; + font-size: 12pt; +} + +body { + background-color: var(--bg-color, black); + color: var(--text-color, white); +} + +main { + max-width: 120ch; + padding-inline: 2rem; + margin-inline: auto; +} + +header { + text-align: center; + margin-inline: .75rem; +} + +.datasets { + padding-inline: 1rem; + display: grid; + grid-template-columns: repeat(auto-fit, 1fr); + grid-auto-columns: 1fr; + gap: 1rem; +} + +.datasets > li { + min-width: 60ch; + background-color: var(--fg-color, darkgrey); + border-radius: 1rem; + list-style: none; + padding: 1rem 2rem; +} + +.datasets > li :is(h3, p) { + width: fit-content; +} + +/* +.upvote { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 5px; +} + +.upvote button { + background: none; + border: none; + color: #4a90e2; + font-size: 20px; + cursor: pointer; +} + +.upvote button:hover { + color: #ff9900; +} + +.upvote-count { + font-size: 16px; + color: #e1e1e1; +} + +*/ \ No newline at end of file From 7c402830220f2ae7963427c4b36754385aaf7805 Mon Sep 17 00:00:00 2001 From: schriefer Date: Sun, 9 Jun 2024 20:33:38 +0200 Subject: [PATCH 2/4] Add grid functionality + upvote style --- html/index.html | 50 ++++++++++++++++++------------------- html/main.css | 63 ++++++++++++++++++++++++++++------------------- html/triangle.svg | 2 ++ 3 files changed, 65 insertions(+), 50 deletions(-) create mode 100644 html/triangle.svg diff --git a/html/index.html b/html/index.html index 1933cfb..54736df 100644 --- a/html/index.html +++ b/html/index.html @@ -16,8 +16,8 @@

Recently added:

    -
  • -
    +
  • +

    Standup

    @@ -25,13 +25,13 @@
    • -
  • -
    +
  • +

    Tori

    @@ -39,13 +39,13 @@
    • -
  • -
    +
  • +

    Tyms

    @@ -53,13 +53,13 @@
    • -
  • -
    +
  • +

    ZapCardz

    @@ -67,13 +67,13 @@
    • -
  • -
    +
  • +

    Peek

    @@ -81,18 +81,18 @@
-
+

Most Liked:

    -
  • -
    +
  • +

    Standup

    @@ -100,9 +100,9 @@
diff --git a/html/main.css b/html/main.css index 6719ba4..03cf4e5 100644 --- a/html/main.css +++ b/html/main.css @@ -2,6 +2,9 @@ --bg-color: #222; --fg-color: #555; --text-color: #dbdbdb; + --pad-datasets: 1rem; + --pad-main: 2rem; + --min-card-size: 60ch; font-size: 12pt; } @@ -11,9 +14,10 @@ body { } main { - max-width: 120ch; - padding-inline: 2rem; + max-width: calc(2 * var(--min-card-size) + var(--pad-main) + var(--pad-datasets)); + padding-inline: var(--pad-main); margin-inline: auto; + container-type: inline-size; } header { @@ -22,49 +26,58 @@ header { } .datasets { - padding-inline: 1rem; + padding-inline: var(--pad-datasets); display: grid; - grid-template-columns: repeat(auto-fit, 1fr); - grid-auto-columns: 1fr; + grid-template-columns: repeat(auto-fit, minmax(var(--min-card-size), 1fr)); gap: 1rem; } -.datasets > li { - min-width: 60ch; +@container (width < 80ch) { + .datasets { + grid-template-columns: 1fr; + } +} + +.dataset { + padding: 1rem 2rem; background-color: var(--fg-color, darkgrey); border-radius: 1rem; list-style: none; - padding: 1rem 2rem; + display: inline-flex; + align-items: center; + justify-content: space-between; + box-sizing: border-box; } -.datasets > li :is(h3, p) { - width: fit-content; -} - -/* .upvote { + margin-left: 1rem; + margin-block: 1rem; display: flex; flex-direction: column; - justify-content: center; align-items: center; - gap: 5px; + gap: .5em; } -.upvote button { - background: none; +.upvote-btn, .downvote-btn { + background: url(triangle.svg) no-repeat; + background-size: contain; border: none; - color: #4a90e2; - font-size: 20px; + width: 2em; + height: 2em; + padding: 0; + overflow: hidden; + color: transparent; cursor: pointer; } -.upvote button:hover { - color: #ff9900; +.downvote-btn { + transform: rotate(180deg); } -.upvote-count { - font-size: 16px; - color: #e1e1e1; +:is(.upvote-btn, .downvote-btn):is(:hover, :focus-visible) { + filter: brightness(1.5); } -*/ \ No newline at end of file +:is(.upvote-btn, .downvote-btn):active { + filter: brightness(1.75); +} diff --git a/html/triangle.svg b/html/triangle.svg new file mode 100644 index 0000000..75d192f --- /dev/null +++ b/html/triangle.svg @@ -0,0 +1,2 @@ + + From be681cc1b7bfe9165007b0cebd1df556511a37d5 Mon Sep 17 00:00:00 2001 From: schriefer Date: Mon, 10 Jun 2024 14:36:19 +0200 Subject: [PATCH 3/4] Add sad looking-glass icon --- html/sad-looking-glass.svg | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 html/sad-looking-glass.svg diff --git a/html/sad-looking-glass.svg b/html/sad-looking-glass.svg new file mode 100644 index 0000000..7ad3841 --- /dev/null +++ b/html/sad-looking-glass.svg @@ -0,0 +1,2 @@ + + From b6734e5984b5fcf0d79ced8bd40973287d55d429 Mon Sep 17 00:00:00 2001 From: schriefer Date: Fri, 14 Jun 2024 12:32:29 +0200 Subject: [PATCH 4/4] Finish it --- html/chat1/index.html | 116 ------------------------------------- html/chat1/styles.css | 123 ---------------------------------------- html/chat2/index.html | 92 ------------------------------ html/chat2/styles.css | 129 ------------------------------------------ html/index.html | 15 ++--- 5 files changed, 8 insertions(+), 467 deletions(-) delete mode 100644 html/chat1/index.html delete mode 100644 html/chat1/styles.css delete mode 100644 html/chat2/index.html delete mode 100644 html/chat2/styles.css diff --git a/html/chat1/index.html b/html/chat1/index.html deleted file mode 100644 index 34af417..0000000 --- a/html/chat1/index.html +++ /dev/null @@ -1,116 +0,0 @@ - - - - - - DataDash - - - -
-
-

Welcome to DataDash! 👋

-

The place to launch and discover new Datasets and web-api's.

-
-
-

Top Products Launching Today

-

For the first 4 hours of the day, we're hiding upvotes to help every product get a chance to catch your interest.

-
-
-
-
-
-

Standup

-

Simply daily accountability phone call, powered by AI

-
- Q 2 - Productivity -
-
-
-
- - -
-
-
-
-
-
-

Tori

-

The simple mobile crypto wallet even your mom can use

-
- Q 1 - Fintech - Crypto - Cryptocurrency -
-
-
-
- - -
-
-
-
-
-
-

Tyms

-

Modern accounting ERP for ambitious businesses

-
- Q 2 - Android - Artificial Intelligence - Accounting -
-
-
-
- - -
-
-
-
-
-
-

ZapCardz

-

Remember what you learn forever with AI powered flashcards

-
- Q 6 - Solo maker - Bootstrapped - Productivity -
-
-
-
- - -
-
-
-
-
-
-

Peek

-

AI organizer and workspace for your browser tabs

-
- Q 15 - Solo maker - Bootstrapped - Productivity -
-
-
-
- - -
-
-
-
-
- - diff --git a/html/chat1/styles.css b/html/chat1/styles.css deleted file mode 100644 index 249f086..0000000 --- a/html/chat1/styles.css +++ /dev/null @@ -1,123 +0,0 @@ -body { - background-color: #1c1c1c; - color: #e1e1e1; - font-family: Arial, sans-serif; - margin: 0; - padding: 0; -} - -.container { - max-width: 800px; - margin: 0 auto; - padding: 20px; -} - -header { - text-align: center; - margin-bottom: 20px; -} - -header h1 { - font-size: 24px; - margin: 0; -} - -header p { - font-size: 14px; -} - -header a { - color: #4a90e2; -} - -.top-products h2 { - font-size: 20px; - margin-bottom: 10px; -} - -.top-products p { - font-size: 14px; - margin-bottom: 20px; -} - -.top-products a { - color: #4a90e2; -} - -.product-list { - display: flex; - flex-direction: column; - gap: 10px; -} - -.product { - display: flex; - justify-content: space-between; - background-color: #333; - padding: 10px; - border-radius: 5px; -} - -.product-info { - display: flex; - gap: 10px; -} - -.icon { - width: 40px; - height: 40px; - background-color: #555; - border-radius: 5px; -} - -.standup { background-image: url('standup.png'); } -.tori { background-image: url('tori.png'); } -.tyms { background-image: url('tyms.png'); } -.zapcardz { background-image: url('zapcardz.png'); } -.peek { background-image: url('peek.png'); } - -.details { - display: flex; - flex-direction: column; -} - -.details h3 { - font-size: 16px; - margin: 0; -} - -.details p { - font-size: 14px; - margin: 5px 0; -} - -.tags { - display: flex; - gap: 5px; - font-size: 12px; -} - -.tags span { - background-color: #4a90e2; - padding: 2px 5px; - border-radius: 3px; -} - -.upvote { - display: flex; - flex-direction: column; - justify-content: center; - gap: 5px; -} - -.upvote button { - background: none; - border: none; - color: #4a90e2; - font-size: 20px; - cursor: pointer; -} - -.upvote button:hover { - color: #ff9900; -} diff --git a/html/chat2/index.html b/html/chat2/index.html deleted file mode 100644 index 23b235a..0000000 --- a/html/chat2/index.html +++ /dev/null @@ -1,92 +0,0 @@ - - - - - - DataDash - - - -
-
-

Welcome to DataDash 👋

-

The place to launch and discover Datasets and api-endpoints.

-
-
-

Launching Today

-
    -
  • -
    -
    -
    -

    Standup

    -

    Simply daily accountability phone call, powered by AI

    -
    -
    -
    - - 8 - -
    -
    • -
  • -
    -
    -
    -

    Tori

    -

    The simple mobile crypto wallet even your mom can use

    -
    -
    -
    - - 8 - -
    -
    • -
  • -
    -
    -
    -

    Tyms

    -

    Modern accounting ERP for ambitious businesses

    -
    -
    -
    - - 8 - -
    -
    • -
  • -
    -
    -
    -

    ZapCardz

    -

    Remember what you learn forever with AI powered flashcards

    -
    -
    -
    - - 8 - -
    -
    • -
  • -
    -
    -
    -

    Peek

    -

    AI organizer and workspace for your browser tabs

    -
    -
    -
    - - 8 - -
    -
    • -
-
-
- - diff --git a/html/chat2/styles.css b/html/chat2/styles.css deleted file mode 100644 index 6ce7434..0000000 --- a/html/chat2/styles.css +++ /dev/null @@ -1,129 +0,0 @@ -body { - background-color: #1c1c1c; - color: #e1e1e1; - font-family: Arial, sans-serif; - margin: 0; - padding: 0; -} - -main { - max-width: 800px; - margin: 0 auto; - padding: 20px; -} - -header { - text-align: center; - margin-bottom: 20px; -} - -header h1 { - font-size: 24px; - margin: 0; -} - -header p { - font-size: 14px; -} - -header a { - color: #4a90e2; -} - -.top-products h2 { - font-size: 20px; - margin-bottom: 10px; -} - -.top-products p { - font-size: 14px; - margin-bottom: 20px; -} - -.top-products a { - color: #4a90e2; -} - -.product-list { - list-style-type: none; - padding: 0; -} - -.product { - display: flex; - justify-content: space-between; - background-color: #333; - padding: 10px; - border-radius: 5px; - margin-bottom: 10px; -} - -.product-info { - display: flex; - gap: 10px; -} - -.icon { - width: 40px; - height: 40px; - background-color: #555; - border-radius: 5px; -} - -.standup { background-image: url('standup.png'); } -.tori { background-image: url('tori.png'); } -.tyms { background-image: url('tyms.png'); } -.zapcardz { background-image: url('zapcardz.png'); } -.peek { background-image: url('peek.png'); } - -.details { - display: flex; - flex-direction: column; -} - -.details h3 { - font-size: 16px; - margin: 0; -} - -.details p { - font-size: 14px; - margin: 5px 0; -} - -.tags { - display: flex; - gap: 5px; - font-size: 12px; -} - -.tags span { - background-color: #4a90e2; - padding: 2px 5px; - border-radius: 3px; -} - -.upvote { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 5px; -} - -.upvote button { - background: none; - border: none; - color: #4a90e2; - font-size: 20px; - cursor: pointer; -} - -.upvote button:hover { - color: #ff9900; -} - -.upvote-count { - font-size: 16px; - color: #e1e1e1; -} diff --git a/html/index.html b/html/index.html index 54736df..df5a374 100644 --- a/html/index.html +++ b/html/index.html @@ -16,6 +16,7 @@

Recently added:

    +
  • @@ -26,7 +27,7 @@
    • @@ -35,12 +36,12 @@

    Tori

    -

    The simple mobile crypto wallet even your mom can use

    +

    The simple mobile crypto wallet even your grandparents can use

    @@ -54,7 +55,7 @@ @@ -68,7 +69,7 @@ @@ -82,7 +83,7 @@ @@ -101,7 +102,7 @@