initial commit

5 files changed, 332 insertions, 0 deletions

diff --git a/_includes/appstoreconnect.html b/_includes/appstoreconnect.html
new file mode 100644
index 0000000..755caaf
--- /dev/null
+++ b/_includes/appstoreconnect.html
@@ -0,0 +1,81 @@
+{% if site.ios_app_id %}
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+  const iosAppId = "{{ site.ios_app_id }}";
+  const iosAppCountry = "{{ site.ios_app_country }}";
+
+  if (iosAppId) {
+    const apiURL = `https://itunes.apple.com/lookup?id=${iosAppId}&country=${iosAppCountry}&callback=?`;
+
+    fetch(apiURL.replace("&callback=?", ""))
+      .then(response => response.json())
+      .then(json => {
+        if (json.results && json.results.length) {
+          console.info("Image strings loaded from Apple API.");
+          const appInfo = json.results[0];
+
+          const favicon = document.querySelector('link[rel="shortcut icon"]');
+          if (favicon) favicon.href = appInfo.artworkUrl512;
+
+          // // Set page title
+          const pageTitle = document.querySelector(".pageTitle");
+          if (pageTitle && pageTitle.textContent.trim().length === 0) {
+            pageTitle.textContent = appInfo.trackName;
+          }
+
+          // Set large app icon
+          const appIconLarge = document.getElementById("largeIcon");
+          if (appIconLarge && (!appIconLarge.getAttribute("src") ||
+             appIconLarge.getAttribute("src") === "{{ '/assets/placeholder-icon.png' | relative_url }}")) {
+            appIconLarge.setAttribute("src", appInfo.artworkUrl512);
+          }
+
+          // Set header app icon
+          const appIconHeader = document.getElementById("headerIcon");
+          if (appIconHeader && (!appIconHeader.getAttribute("src") ||
+             appIconHeader.getAttribute("src") === "{{ '/assets/placeholder-icon.png' | relative_url }}")) {
+            appIconHeader.setAttribute("src", appInfo.artworkUrl512);
+            console.log(appInfo.artworkUrl512);
+          }
+
+          // Set app name
+          const appName = document.getElementById("appName");
+          if (appName) {
+          if (appName.textContent.trim().length === 0 || appName.textContent.trim() === "Your App Name") {
+            appName.textContent = appInfo.trackName;
+          }
+          }
+
+          // Set header name
+          const headerName = document.getElementById("headerName");
+          if ((headerName.textContent.trim().length === 0) || headerName.textContent.trim() === "Your App Name") {
+            headerName.textContent = appInfo.trackName;
+          }
+
+          // Set price
+          const appPrice = document.getElementById("appPrice");
+          if (appPrice && appPrice.textContent.trim().length === 0) {
+            appPrice.textContent = appInfo.formattedPrice;
+          }
+
+          // Set App Store link
+          const appStoreLink = document.getElementById("appStoreLink");
+          if (appStoreLink && appStoreLink.getAttribute("href").trim().length === 0) {
+            appStoreLink.setAttribute("href", appInfo.trackViewUrl);
+          }
+
+          // Set App Description
+          const appDescription = document.getElementById("appDescription");
+          if (appDescription && appDescription.textContent.trim().length === 0) {
+            appDescription.textContent = appInfo.description;
+          }
+
+          console.info(appInfo);
+        }
+      })
+      .catch(error => console.error("Error fetching App Store info:", error));
+  }
+});
+</script>
+
+{% endif %}
diff --git a/_includes/features.html b/_includes/features.html
new file mode 100644
index 0000000..5920b14
--- /dev/null
+++ b/_includes/features.html
@@ -0,0 +1,23 @@
+        <div class="column is-two-thirds">
+            <div class="columns is-multiline " style="height: 100%;">
+                {% assign features_to_show = site.features | slice: 0, 6 %}
+                {% for feature in features_to_show %}
+                {% if feature.title %}
+                <div class="column is-6" style="height: 33.333%;">
+                    <div class="card feature-box  m-1">
+                        <div class="card-content  is-flex is-flex-direction-column is-justify-content-center">
+                            <div class="has-text-centered mb-2">
+                                <span class="icon is-large">
+                                    <i class="fa-solid fa-{{ feature.fontawesome_icon_name }} fa-2x"></i>
+                                </span>
+                            </div>
+                            <h4 class="title is-5 has-text-centered">{{ feature.title }}</h4>
+                            <p class="has-text-centered">{{ feature.description }}</p>
+                        </div>
+                    </div>
+                </div>
+                {% endif %}
+                {% endfor %}
+
+            </div>
+        </div>
diff --git a/_includes/footer.html b/_includes/footer.html
new file mode 100644
index 0000000..7409e0c
--- /dev/null
+++ b/_includes/footer.html
@@ -0,0 +1,42 @@
+<footer class="footer mt-5">
+      <div class="content has-text-centered">
+        {% if site.your_name %}
+        <p>Made with ❤️ by {% if site.your_link %}<a href="{{ site.your_link }}">{% endif %}{{ site.your_name }}{% if site.your_link %}</a>{% endif %}{% if site.your_city %} in {{ site.your_city }}{% endif %}</p>
+        {% endif %}
+
+        <div class="social-icons">
+            {% if site.email_address %}
+            <a href="mailto:{{ site.email_address }}" class="icon is-large" aria-label="E-mail">
+              <i class="fa fas fa-envelope fa-2x"></i>
+            </a>
+            {% endif %}
+            {% if site.twitter_username %}
+          <a href="https://twitter.com/{{ site.twitter_username }}" class="icon is-large" aria-label="Twitter">
+            <i class="fa-brands fa-x-twitter fa-2x"></i>
+          </a>
+          {% endif %}
+          <a href="#" class="icon is-large" aria-label="GitHub">
+            <i class="fa-brands fa-github fa-2x"></i>
+          </a>
+          <a href="https://bsky.app/profile/{{ site.bluesky_profile }}" class="icon is-large" aria-label="Bluesky">
+            <i class="fa-brands fa-bluesky fa-2x"></i>
+          </a>
+          {% if site.mastodon_link %}
+          <a href="{{ site.mastodon_link }}" class="icon is-large" aria-label="Mastodon">
+            <i class="fa-brands fa-mastodon fa-2x"></i>
+          </a>
+          {% endif %}
+          {% if site.instagram_username %}
+          <a href="https://instagram.com/{{ site.instagram_username }}" class="icon is-large" aria-label="Instagram">
+            <i class="fa-brands fa-instagram fa-2x"></i>
+          </a>
+          {% endif %}
+        </div>
+
+        <div class="footer-links">
+            {% for page in site.pages %}
+			<a href="{{ page.url | relative_url }}" target="_self">{{ page.title }}</a>
+			{% endfor %}
+        </div>
+      </div>
+  </footer>
diff --git a/_includes/head.html b/_includes/head.html
new file mode 100644
index 0000000..cd90cbb
--- /dev/null
+++ b/_includes/head.html
@@ -0,0 +1,145 @@
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>{{ site.page_title }}</title>
+	<meta name="description" content="{{ site.app_description }}">
+	<link rel="shortcut icon" href="{{ site.app_icon | relative_url }}">
+	{% if site.enable_smart_app_banner %}
+		<meta name="apple-itunes-app" content="app-id={{ site.ios_app_id }}">
+	{% endif %}
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.2/css/bulma.min.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
+ <style>
+        :root {
+            --bulma-shadow-l: 0;
+        }
+
+        body {
+            background-color: #f8f9fc;
+        }
+
+        .card {
+            background-color: #e3e7ee;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            body {
+                background-color: #0a0e17;
+            }
+
+            .card {
+                background-color: #111827;
+            }
+        }
+
+        .card {
+            border: 2px solid rgba(156, 163, 175, 0.1);
+            border-radius: 0.75rem;
+            height: 100%;
+            transition: all 0.3s ease;
+        }
+
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            border-color: {{ site.accent_color }}80;
+        }
+
+        .card-content {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+        .app-icon {
+            border-radius: 30px;
+            width: 120px;
+            height: 120px;
+        }
+
+        .store-button {
+            height: 4rem;
+            margin: 0.5rem;
+        }
+        .phone-container {
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+        }
+        .phone-frame {
+            position: absolute;
+            height: 90vh;
+            z-index: 10;
+            pointer-events: none;
+        }
+        .phone-screenshot {
+            height: 87vh;
+            border-radius: 3rem;
+        }
+        @media (min-width: 768px) {
+            .phone-screenshot {
+                margin-right: 1px;
+            }
+        }
+        .app-icon-clip {
+            clip-path: path('M120,37.2V37c0-.9,0-1.8,0-2.7a35.1,35.1,0,0,0-.51-5.9,19.62,19.62,0,0,0-1.86-5.6,18.8,18.8,0,0,0-8.28-8.3,19.62,19.62,0,0,0-5.62-1.9,35.46,35.46,0,0,0-5.91-.51c-.9,0-1.8,0-2.73,0H55.41c-.9,0-1.8,0-2.73,0a43.35,43.35,0,0,0-5.91.51,19.74,19.74,0,0,0-5.62,1.9,18.84,18.84,0,0,0-8.28,8.3,19.62,19.62,0,0,0-1.86,5.6,35.51,35.51,0,0,0-.51,5.9c0,.9,0,1.8,0,2.73v40.2c0,.9,0,1.8,0,2.73a43.35,43.35,0,0,0,.51,5.91,19.62,19.62,0,0,0,1.86,5.6,18.84,18.84,0,0,0,8.28,8.28,19.71,19.71,0,0,0,5.62,1.86,35.46,35.46,0,0,0,5.91.51c.9,0,1.8,0,2.73,0H95.09c.9,0,1.8,0,2.73,0a43.28,43.28,0,0,0,5.91-.51,19.55,19.55,0,0,0,5.62-1.86,18.8,18.8,0,0,0,8.28-8.28,19.62,19.62,0,0,0,1.86-5.6,35.51,35.51,0,0,0,.51-5.91c0-.9,0-1.8,0-2.73V37.2Z');
+        }
+
+        .feature-box {
+            height: 100%;
+        }
+       .feature-box .icon {
+            color: {{site.accent_color}};
+            margin-bottom: 0.5rem;
+        }
+        .feature-box .title {
+            margin-bottom: 0.75rem;
+            font-size: 1.1rem;
+        }
+        .feature-box p {
+            font-size: 0.9rem;
+            line-height: 1.5;
+        }
+       .social-icons {
+              margin-bottom: 1.5rem;
+            }
+
+            .social-icons .icon {
+              margin: 0 0.5rem;
+              transition: transform 0.3s ease;
+            }
+
+            .social-icons .icon:hover {
+              transform: translateY(-5px);
+            }
+
+            .footer-links {
+              margin-top: 1rem;
+            }
+
+            .footer-links a {
+              padding: 0 1rem;
+              border-right: 1px solid #dbdbdb;
+            }
+
+            .footer-links a:last-child {
+              border-right: none;
+            }
+
+            .made-by {
+              font-weight: 500;
+              margin-bottom: 1rem;
+            }
+
+            .social-icons .icon {
+                color: {{ site.footer_link_color }};
+                transition: filter 0.2s ease;
+            }
+
+            .social-icons a:hover {
+                filter: brightness(0.65);
+            }
+    </style>
+</head>
diff --git a/_includes/header.html b/_includes/header.html
new file mode 100644
index 0000000..0404093
--- /dev/null
+++ b/_includes/header.html
@@ -0,0 +1,41 @@
+<nav class="navbar mb-5 px-5 py-3" role="navigation" aria-label="main navigation">
+    <div class="navbar-brand is-align-items-center">
+        <figure class="image is-64x64">
+            {% if page.url != '/' %}
+            <a href="../" target="_self"><img src="{{ '/assets/placeholder-icon.png' | relative_url }}"
+                 alt="App Icon" style="border-radius: 12px;" id="headerIcon"></a>
+                     {% else %}
+                 <img src="{{ '/assets/placeholder-icon.png' | relative_url }}"
+                      alt="App Icon" style="border-radius: 12px;" id="headerIcon">
+                     {% endif %}
+        </figure>
+        <p class="title is-4 ml-4 is-hidden-mobile" id="headerName">
+            Your App Name
+        </p>
+        <div class="ml-auto is-hidden-desktop">
+            {% for page in site.pages %}
+            {% if page.include_in_header == true %}
+            <a href="{{ page.url | relative_url }}" target="_self" class="button">
+                {{ page.title }}
+            </a>
+            {% endif %}
+            {% endfor %}
+        </div>
+    </div>
+
+    <div class="navbar-menu">
+        <div class="navbar-end">
+            <div class="navbar-item">
+                <div class="buttons">
+                    {% for page in site.pages %}
+                    {% if page.include_in_header == true %}
+                    <a href="{{ page.url | relative_url }}" target="_self" class="button">
+                        {{ page.title }}
+                    </a>
+                    {% endif %}
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </div>
+</nav>