From 034dada32617363eb843720e0024460a0998830a Mon Sep 17 00:00:00 2001 From: yayunhuang Date: Wed, 14 Aug 2024 13:37:08 +0800 Subject: [PATCH 1/4] Add images for developer tools page --- public/images/arrow-forward.svg | 3 +++ public/images/authgear-logo.svg | 29 +++++++++++++++++++++++++++++ public/images/formxai-logo.svg | 28 ++++++++++++++++++++++++++++ public/images/makeappicon-logo.svg | 20 ++++++++++++++++++++ 4 files changed, 80 insertions(+) create mode 100644 public/images/arrow-forward.svg create mode 100644 public/images/authgear-logo.svg create mode 100644 public/images/formxai-logo.svg create mode 100644 public/images/makeappicon-logo.svg diff --git a/public/images/arrow-forward.svg b/public/images/arrow-forward.svg new file mode 100644 index 0000000..0317c00 --- /dev/null +++ b/public/images/arrow-forward.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/authgear-logo.svg b/public/images/authgear-logo.svg new file mode 100644 index 0000000..9d7f001 --- /dev/null +++ b/public/images/authgear-logo.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/formxai-logo.svg b/public/images/formxai-logo.svg new file mode 100644 index 0000000..c8dd35b --- /dev/null +++ b/public/images/formxai-logo.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/makeappicon-logo.svg b/public/images/makeappicon-logo.svg new file mode 100644 index 0000000..9c90f67 --- /dev/null +++ b/public/images/makeappicon-logo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + From 2d5b9000fbfc35bcca8f8230ba18f3875e71a854 Mon Sep 17 00:00:00 2001 From: yayunhuang Date: Wed, 14 Aug 2024 13:37:53 +0800 Subject: [PATCH 2/4] Update developer tools page ui --- public/scripts/developerTools.js | 39 +++++++++++++++ src/layouts/BaseLayout.astro | 1 + src/pages/developerTools.astro | 85 ++++++++++++++++++++------------ src/styles/developer-tools.css | 77 +++++++++++++++++++++++++++++ 4 files changed, 171 insertions(+), 31 deletions(-) create mode 100644 public/scripts/developerTools.js create mode 100644 src/styles/developer-tools.css diff --git a/public/scripts/developerTools.js b/public/scripts/developerTools.js new file mode 100644 index 0000000..284602c --- /dev/null +++ b/public/scripts/developerTools.js @@ -0,0 +1,39 @@ +function ready(fn) { + if (document.readyState != "loading") { + fn(); + } else { + document.addEventListener("DOMContentLoaded", fn); + } +} +ready(main); + +function main() { + function handleIntersection(entries, observer) { + entries.forEach((entry) => { + if (entry.isIntersecting) { + entry.target.classList.add("animate"); + } + }); + } + + const observer = new IntersectionObserver(handleIntersection); + + /* + If we use css, there will be some extra delay that we don't want to have + So use js to make the animation in mobile mode look smoother + */ + setTimeout(() => { + const formxaiCards = document.querySelector(".formxai-card"); + observer.observe(formxaiCards); + }, 0); + + setTimeout(() => { + const authgearCards = document.querySelector(".authgear-card"); + observer.observe(authgearCards); + }, 200); + + setTimeout(() => { + const makeappiconCards = document.querySelector(".makeappicon-card"); + observer.observe(makeappiconCards); + }, 400); +} diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 4d6a26b..e50b8b4 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -81,6 +81,7 @@ const { src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-recent-searches" > + diff --git a/src/pages/developerTools.astro b/src/pages/developerTools.astro index 1661410..f81de28 100644 --- a/src/pages/developerTools.astro +++ b/src/pages/developerTools.astro @@ -1,5 +1,6 @@ --- import BaseLayout from "../layouts/BaseLayout.astro"; +import "/src/styles/developer-tools.css"; --- @@ -8,38 +9,60 @@ import BaseLayout from "../layouts/BaseLayout.astro"; name="description" content="MockuPhone, ShotBot and MakeAppIcon are Oursky Developer Series. It speeds up the process of app development for developers, designers and project managers." /> -
-

Oursky Developer Suite

-
-
-

- - +

+
+
+
+

Developer Tools

+
+
+ +
+ +

FormX.ai

+

+ Empower Your Team with AI: Eliminate Manual Work, Embrace + Seamless Automation! +

+
+ Learn more + +
+
-

-

- MakeAppIcon is an icon creator - that resizes all iOS icons and Android icons required by App Store and - Google Play. With our icon resizer, you can import app icons to - Android Studio and Xcode in 3s. -

-

Support iOS icons:

-
    -
  • iPhone app icons
    • -
  • iPad app icons
    • -
  • iMessage Sticker app icons
    • -
  • WatchOS icons
    • -
-

Support Android icons:

-
    -
  • Play Store icon
    • -
  • ldpi
    • -
  • mdpi
    • -
  • hdpi
    • -
  • xhdpi
    • -
  • xxhdpi
    • -
  • xxxhdpi
    • -
+
+
+ +
+ +

Authgear

+

+ Activate Security with Auth, Simple and Scalable for Your + Business. +

+
+ Learn more + +
+
+ +
+
+ +
+ +

MakeAppIcon

+

+ An icon creator that resizes all iOS icons and Android icons + required by App Store and Google Play. +

+
+ Learn more + +
+
+ +
diff --git a/src/styles/developer-tools.css b/src/styles/developer-tools.css new file mode 100644 index 0000000..60d2f00 --- /dev/null +++ b/src/styles/developer-tools.css @@ -0,0 +1,77 @@ +@keyframes slideIn { + 0% { + transform: translateY(10%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + +.developer-tools-page { + .title { + font-size: 32px; + font-weight: bold; + margin-bottom: 4px; + } + + .col-12 { + padding: 16px !important; + } +} + +.developer-tools-card { + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 12px; + background-color: white; + padding: 20px; + height: 100%; + font-family: "Red Hat Display"; + display: flex; + flex-direction: column; + opacity: 0; + transition: box-shadow 0.3s ease-in-out; + + img { + width: 100%; + margin-bottom: 20px; + } + + h2 { + font-size: 20px; + font-weight: bold; + margin-bottom: 16px; + color: black; + } + + p { + font-size: 16px; + color: #838c9b; + margin-bottom: 16px; + text-align: left; + } + + .learn-more { + display: flex; + flex-direction: row; + color: #004be0; + margin-top: auto; + gap: 8px; + + img { + width: 24px; + height: 24px; + margin-bottom: 0; + } + } +} + +.developer-tools-card:hover { + cursor: pointer; + box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.16); +} + +.developer-tools-card.animate { + animation: slideIn 0.3s ease-in-out forwards; +} From 5f847c646dae9b8fcca3eb574eef72e65473618b Mon Sep 17 00:00:00 2001 From: yayunhuang Date: Wed, 14 Aug 2024 17:43:53 +0800 Subject: [PATCH 3/4] Extract DeveloperToolCard --- public/scripts/developerTools.js | 6 +- .../DeveloperToolCard/DeveloperToolCard.astro | 18 +++++ .../DeveloperToolCard/developerToolCard.css | 65 ++++++++++++++++++ src/pages/developerTools.astro | 64 +++++++----------- src/styles/developer-tools.css | 66 ------------------- 5 files changed, 108 insertions(+), 111 deletions(-) create mode 100644 src/components/DeveloperToolCard/DeveloperToolCard.astro create mode 100644 src/components/DeveloperToolCard/developerToolCard.css diff --git a/public/scripts/developerTools.js b/public/scripts/developerTools.js index 284602c..c51ae25 100644 --- a/public/scripts/developerTools.js +++ b/public/scripts/developerTools.js @@ -23,17 +23,17 @@ function main() { So use js to make the animation in mobile mode look smoother */ setTimeout(() => { - const formxaiCards = document.querySelector(".formxai-card"); + const formxaiCards = document.querySelector("#formxai-card"); observer.observe(formxaiCards); }, 0); setTimeout(() => { - const authgearCards = document.querySelector(".authgear-card"); + const authgearCards = document.querySelector("#authgear-card"); observer.observe(authgearCards); }, 200); setTimeout(() => { - const makeappiconCards = document.querySelector(".makeappicon-card"); + const makeappiconCards = document.querySelector("#makeappicon-card"); observer.observe(makeappiconCards); }, 400); } diff --git a/src/components/DeveloperToolCard/DeveloperToolCard.astro b/src/components/DeveloperToolCard/DeveloperToolCard.astro new file mode 100644 index 0000000..0c20bac --- /dev/null +++ b/src/components/DeveloperToolCard/DeveloperToolCard.astro @@ -0,0 +1,18 @@ +--- +import "./developerToolCard.css"; +const { url, imageSrc, title, content, id } = Astro.props; +--- + + +
+ +

{title}

+

+ {content} +

+
+ Learn more + +
+
+ diff --git a/src/components/DeveloperToolCard/developerToolCard.css b/src/components/DeveloperToolCard/developerToolCard.css new file mode 100644 index 0000000..ec30250 --- /dev/null +++ b/src/components/DeveloperToolCard/developerToolCard.css @@ -0,0 +1,65 @@ +@keyframes slideIn { + 0% { + transform: translateY(10%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + +.developer-tools-card { + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 12px; + background-color: white; + padding: 20px; + height: 100%; + font-family: "Red Hat Display"; + display: flex; + flex-direction: column; + opacity: 0; + transition: box-shadow 0.3s ease-in-out; + + img { + width: 100%; + margin-bottom: 20px; + } + + h2 { + font-size: 20px; + font-weight: bold; + margin-bottom: 16px; + color: black; + } + + p { + font-size: 16px; + color: #838c9b; + margin-bottom: 16px; + text-align: left; + } + + .learn-more { + display: flex; + flex-direction: row; + color: #004be0; + margin-top: auto; + gap: 8px; + + img { + width: 24px; + height: 24px; + margin-bottom: 0; + } + } +} + +.developer-tools-card:hover { + cursor: pointer; + box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.16); +} + +.developer-tools-card.animate { + animation: slideIn 0.3s ease-in-out forwards; +} diff --git a/src/pages/developerTools.astro b/src/pages/developerTools.astro index f81de28..b663430 100644 --- a/src/pages/developerTools.astro +++ b/src/pages/developerTools.astro @@ -1,5 +1,6 @@ --- import BaseLayout from "../layouts/BaseLayout.astro"; +import DeveloperToolCard from "../components/DeveloperToolCard/DeveloperToolCard.astro"; import "/src/styles/developer-tools.css"; --- @@ -16,52 +17,31 @@ import "/src/styles/developer-tools.css";

Developer Tools

- -
- -

FormX.ai

-

- Empower Your Team with AI: Eliminate Manual Work, Embrace - Seamless Automation! -

-
- Learn more - -
-
- +
- -
- -

Authgear

-

- Activate Security with Auth, Simple and Scalable for Your - Business. -

-
- Learn more - -
-
- +
- -
- -

MakeAppIcon

-

- An icon creator that resizes all iOS icons and Android icons - required by App Store and Google Play. -

-
- Learn more - -
-
- +
diff --git a/src/styles/developer-tools.css b/src/styles/developer-tools.css index 60d2f00..bffde98 100644 --- a/src/styles/developer-tools.css +++ b/src/styles/developer-tools.css @@ -1,14 +1,3 @@ -@keyframes slideIn { - 0% { - transform: translateY(10%); - opacity: 0; - } - 100% { - transform: translateY(0); - opacity: 1; - } -} - .developer-tools-page { .title { font-size: 32px; @@ -20,58 +9,3 @@ padding: 16px !important; } } - -.developer-tools-card { - border: 1px solid rgba(0, 0, 0, 0.1); - border-radius: 12px; - background-color: white; - padding: 20px; - height: 100%; - font-family: "Red Hat Display"; - display: flex; - flex-direction: column; - opacity: 0; - transition: box-shadow 0.3s ease-in-out; - - img { - width: 100%; - margin-bottom: 20px; - } - - h2 { - font-size: 20px; - font-weight: bold; - margin-bottom: 16px; - color: black; - } - - p { - font-size: 16px; - color: #838c9b; - margin-bottom: 16px; - text-align: left; - } - - .learn-more { - display: flex; - flex-direction: row; - color: #004be0; - margin-top: auto; - gap: 8px; - - img { - width: 24px; - height: 24px; - margin-bottom: 0; - } - } -} - -.developer-tools-card:hover { - cursor: pointer; - box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.16); -} - -.developer-tools-card.animate { - animation: slideIn 0.3s ease-in-out forwards; -} From 0a8842580bcd26b5da6bfa9ba03c5fc1bd126339 Mon Sep 17 00:00:00 2001 From: yayunhuang Date: Thu, 15 Aug 2024 15:07:57 +0800 Subject: [PATCH 4/4] Restructure developerTools page --- .../developerTools}/DeveloperToolCard.astro | 2 +- .../developerTools/developer-tools-card.css} | 0 .../{developerTools.astro => developerTools/index.astro} | 6 +++--- .../developer-tools.css => pages/developerTools/index.css} | 0 4 files changed, 4 insertions(+), 4 deletions(-) rename src/{components/DeveloperToolCard => pages/developerTools}/DeveloperToolCard.astro (90%) rename src/{components/DeveloperToolCard/developerToolCard.css => pages/developerTools/developer-tools-card.css} (100%) rename src/pages/{developerTools.astro => developerTools/index.astro} (89%) rename src/{styles/developer-tools.css => pages/developerTools/index.css} (100%) diff --git a/src/components/DeveloperToolCard/DeveloperToolCard.astro b/src/pages/developerTools/DeveloperToolCard.astro similarity index 90% rename from src/components/DeveloperToolCard/DeveloperToolCard.astro rename to src/pages/developerTools/DeveloperToolCard.astro index 0c20bac..8e8f93d 100644 --- a/src/components/DeveloperToolCard/DeveloperToolCard.astro +++ b/src/pages/developerTools/DeveloperToolCard.astro @@ -1,5 +1,5 @@ --- -import "./developerToolCard.css"; +import "./developer-tools-card.css"; const { url, imageSrc, title, content, id } = Astro.props; --- diff --git a/src/components/DeveloperToolCard/developerToolCard.css b/src/pages/developerTools/developer-tools-card.css similarity index 100% rename from src/components/DeveloperToolCard/developerToolCard.css rename to src/pages/developerTools/developer-tools-card.css diff --git a/src/pages/developerTools.astro b/src/pages/developerTools/index.astro similarity index 89% rename from src/pages/developerTools.astro rename to src/pages/developerTools/index.astro index b663430..f19d104 100644 --- a/src/pages/developerTools.astro +++ b/src/pages/developerTools/index.astro @@ -1,7 +1,7 @@ --- -import BaseLayout from "../layouts/BaseLayout.astro"; -import DeveloperToolCard from "../components/DeveloperToolCard/DeveloperToolCard.astro"; -import "/src/styles/developer-tools.css"; +import BaseLayout from "../../layouts/BaseLayout.astro"; +import DeveloperToolCard from "./DeveloperToolCard.astro"; +import "./index.css"; --- diff --git a/src/styles/developer-tools.css b/src/pages/developerTools/index.css similarity index 100% rename from src/styles/developer-tools.css rename to src/pages/developerTools/index.css