# Project export: Cross-Platform App Store

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: CruzHacks 2024
- Tagline: the one app store to rule them all
- Devpost: https://devpost.com/software/cross-platform-app-store
- GitHub: https://github.com/EricQXu/app-store
- Demo: https://app-store-beryl.vercel.app/index.html
- Team: 1 GitHub contributor(s) — ericxu (14 commits)

## Devpost submission (written by the team)

### Inspiration

There was no cross-platform app store that includes all the major apps people use (ex. Chrome, Firefox, etc.). I want to create this. Also, almost all app stores take a percent cut of the revenue of the app developer. However, we are advocating for justice and we will not cut revenue of developers.

## README (from the GitHub repository)

﻿# UnifyStore
This is an installable cross-platform App Store PWA that has offline caching support. This is a project currently under development. Feel free to contribute by opening a pull request!

## How to Install
Open up your Terminal and type the following:

    cd ./Downloads
    git clone https://github.com/EricQXu/passion-project-html
 Then, open `~/Downloads/passion-project-html-main` in VS Code. Inside VS Code, install the Live Server extension. After that, open `index.html` and right-click and click "Open with Live Server". (If the webpage opens with a non-Chromium based browser, paste the URL into a Chromium-based browser.) Now, you will see the install button on the URL bar and you can now install it.

## To-do
- attach links to apps in carousel on home.html
- clean up codebase
- attach the correct install script to the correct app info page and fix install script if there are any issues
- change purple accent color and highlight color to some other color
- [experimental feature] test if ```sudo mount .dmg```, ```sudo cp .app /Applications```, ```sudo umount .dmg``` works
- [experimental feature] if the above works great, maybe re-consider reworking scripts to do that instead of homebrew

### Bugs to Clean Up
- fix light/dark/system theme mode inconsistency between the main pages and app info page (JS: I forgot if it was embeded inside an HTML or if it was an external JS file, but anyways, fix it there)
- fix wrong icons in the left navbar
- [bug fix] fix broken search box on index.html and create.html and ... (maybe integrate in-website Google Search to search your site?) OR just delete the search bar altogether

### Optional Features
- prompt user to switch browsers to a Chromium-based browser if they are using Firefox or a Firefox-based browser upon load on landing page (index.html)
- add a "Buy Me a Coffee" button for donations and "Contribute" button that links to the GitHub repo page on the left navbar

### We might do this if we have time (or you can contribute to this part!):
- [feature] implement "sign-in with Google" button with favorited apps for each user
- [cosmetic] implement gaussian blur into the website ⚠️  Doesn't sound possible without a re-write, but we'll try
- [AI feature] implement AI summaries of user-written reviews
- [AI feature] implement AI recommendations of each app (ex. pros vs. cons of different web browser and which web browser is best for which group of people)
- [AI feature] implement a help section in the navbar where you can ask AI for app recommendations
- IMPORTANT! When implementing any AI-powered features or any feature requiring an API (ex. ChatGPT, Google Cloud, etc.), do NOT leak the API-key or secrets by pushing it to GitHub. Instead, in the API-key or secret field in your code, link it to an external file named 'secret.txt' and list that 'secret.txt' file on .gitignore so that you do NOT push it onto GitHub. When publishing the website using Vercel, provide the API-key or API-secret when prompted, which should be the ONLY time you provide an API key online.


## Detected evidence (automated analysis)

Indexed codebase: 184 recognized source files, 864 KB.
- CSS (language) — detected in the code
- Flask (technology) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- OpenAI (technology) — detected in the code
- Python (language) — detected in the code

## Codebase structure (from repository index)

### Files (120 of 214)

```
.DS_Store
.gitignore
.vscode/settings.json
about.html
create.html
develop.html
docs.html
entertainment.html
home.html
index.html
index.py
manifest.json
readme.md
requirements.txt
search-preview.html
search.html
social.html
static/appListings/.DS_Store
static/appListings/angrybirds/expandText.js
static/appListings/angrybirds/index.html
static/appListings/angrybirds/linux/angrybirds.sh
static/appListings/angrybirds/mac/brew-angrybirds.sh
static/appListings/angrybirds/script.js
static/appListings/angrybirds/style.css
static/appListings/angrybirds/windows/install_angrybirds.ps1
static/appListings/chrome/expandText.js
static/appListings/chrome/index.html
static/appListings/chrome/linux/chrome.sh
static/appListings/chrome/mac/brew-chrome.sh
static/appListings/chrome/script.js
static/appListings/chrome/style.css
static/appListings/chrome/windows/install_chrome.ps1
static/appListings/discord/expandText.js
static/appListings/discord/index.html
static/appListings/discord/linux/discord.sh
static/appListings/discord/mac/brew-discord.sh
static/appListings/discord/script.js
static/appListings/discord/style.css
static/appListings/discord/windows/install_discord.ps1
static/appListings/disneyplus/expandText.js
static/appListings/disneyplus/index.html
static/appListings/disneyplus/linux/disneyplus.sh
static/appListings/disneyplus/mac/brew-disneyplus.sh
static/appListings/disneyplus/script.js
static/appListings/disneyplus/style.css
static/appListings/disneyplus/windows/install_disneyplus.ps1
static/appListings/evernote/.DS_Store
static/appListings/evernote/expandText.js
static/appListings/evernote/index.html
static/appListings/evernote/linux/evernote.sh
static/appListings/evernote/mac/brew-evernote.sh
static/appListings/evernote/script.js
static/appListings/evernote/style.css
static/appListings/evernote/windows/install_evernote.ps1
static/appListings/garageband/expandText.js
static/appListings/garageband/index.html
static/appListings/garageband/mac/brew-garageband.sh
static/appListings/garageband/script.js
static/appListings/garageband/style.css
static/appListings/googledocs/expandText.js
static/appListings/googledocs/index.html
static/appListings/googledocs/script.js
static/appListings/googledocs/style.css
static/appListings/googlesheets/expandText.js
static/appListings/googlesheets/index.html
static/appListings/googlesheets/script.js
static/appListings/googlesheets/style.css
static/appListings/googleslides/expandText.js
static/appListings/googleslides/index.html
static/appListings/googleslides/script.js
static/appListings/googleslides/style.css
static/appListings/hbomax/expandText.js
static/appListings/hbomax/index.html
static/appListings/hbomax/script.js
static/appListings/hbomax/style.css
static/appListings/illustrator/expandText.js
static/appListings/illustrator/index.html
static/appListings/illustrator/script.js
static/appListings/illustrator/style.css
static/appListings/instagram/expandText.js
static/appListings/instagram/index.html
static/appListings/instagram/script.js
static/appListings/instagram/style.css
static/appListings/microsoft365/expandText.js
static/appListings/microsoft365/index.html
static/appListings/microsoft365/mac/brew-microsoft365.sh
static/appListings/microsoft365/script.js
static/appListings/microsoft365/style.css
static/appListings/microsoft365/windows/install_microsoft365.ps1
static/appListings/microsoftexcel/expandText.js
static/appListings/microsoftexcel/index.html
static/appListings/microsoftexcel/mac/brew-microsoft365.sh
static/appListings/microsoftexcel/script.js
static/appListings/microsoftexcel/style.css
static/appListings/microsoftexcel/windows/install_microsoft365.ps1
static/appListings/microsoftonenote/expandText.js
static/appListings/microsoftonenote/index.html
static/appListings/microsoftonenote/mac/brew-microsoft365.sh
static/appListings/microsoftonenote/script.js
static/appListings/microsoftonenote/style.css
static/appListings/microsoftonenote/windows/install_microsoft365.ps1
static/appListings/microsoftpowerpoint/expandText.js
static/appListings/microsoftpowerpoint/index.html
static/appListings/microsoftpowerpoint/mac/brew-microsoft365.sh
static/appListings/microsoftpowerpoint/script.js
static/appListings/microsoftpowerpoint/style.css
static/appListings/microsoftpowerpoint/windows/install_microsoft365.ps1
static/appListings/microsofttodo/expandText.js
static/appListings/microsofttodo/index.html
static/appListings/microsofttodo/linux/microsofttodo.sh
static/appListings/microsofttodo/mac/brew-microsofttodo.sh
static/appListings/microsofttodo/script.js
static/appListings/microsofttodo/style.css
static/appListings/microsofttodo/windows/install_microsofttodo.ps1
static/appListings/microsoftword/expandText.js
static/appListings/microsoftword/index.html
static/appListings/microsoftword/mac/brew-microsoft365.sh
static/appListings/microsoftword/script.js
static/appListings/microsoftword/style.css
static/appListings/microsoftword/windows/install_microsoft365.ps1
[94 more files omitted for size]
```

### Dependencies

- requirements.txt: Flask@==3.0.0, openai@==1.13.3, python-dotenv@==1.0.1

### Recent commits (newest first)

- Updated readme.md
- added border radius to AI search UI
- updated previous commit
- testing new AI search UI
- fixed discord and ms365
- commented out searchBtn on script.js
- fixed error
- commented out 2nd .sidebar{} css
- trying smthing else? Modified chrome listing style.css
- trying something
- maybe fixed chrome styling?
- appListing for chrome - navbar change
- ms-word fix test
- added sparkles
- fixed app routing up to msWord
- updated the first 11 apps routing
- Added Firefox/Safari incompatible message
- Update vercel.json
- Update vercel.json
- Changed server.py to index.py

## Key source files (fetched from GitHub, selected and truncated for size)

### requirements.txt

```
Flask==3.0.0
python-dotenv==1.0.1
openai==1.13.3
```

### index.py

```python
import os
from dotenv import load_dotenv
from openai import OpenAI

load_dotenv()  # load env vars from .env file

client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
from dotenv import load_dotenv
from flask import Flask, render_template, request
from flask import send_file

app = Flask(__name__, template_folder='.')


@app.route("/")
def index():
    return render_template("index.html")

@app.route("/docs")
def docs():
    return render_template("docs.html")

@app.route("/about")
def about():
    return render_template("about.html")

@app.route("/home")
def home():
    return render_template("home.html")

@app.route("/create")
def create():
    return render_template("create.html")

@app.route("/work")
def work():
    return render_template("work.html")

@app.route("/entertainment")
def entertainment():
    return render_template("entertainment.html")

@app.route("/social")
def social():
    return render_template("social.html")

@app.route("/develop")
def develop():
    return render_template("develop.html")

@app.route("/search")
def search():
    return render_template("search.html")





# appListings

@app.route("/angrybirds")
def angrybirds():
    return render_template("/static/appListings/angrybirds/index.html")

@app.route("/chrome")
def chrome():
    return render_template("/static/appListings/chrome/index.html")

@app.route("/discord")
def discord():
    return render_template("/static/appListings/discord/index.html")

@app.route("/disneyplus")
def disneyplus():
    return render_template("/static/appListings/disneyplus/index.html")

@app.route("/evernote")
def evernote():
    return render_template("/static/appListings/evernote/index.html")

@app.route("/garageband")
def garageband():
    return render_template("/static/appListings/garageband/index.html")

@app.route("/googledocs")
def googledocs():
    return render_template("/static/appListings/googledocs/index.html")

@app.route("/googlesheets")
def googlesheets():
    return render_template("/static/appListings/googlesheets/index.html")

@app.route("/googleslides")
def googleslides():
    return render_template("/static/appListings/googleslides/index.html")

@app.route("/hbomax")
def hbomax():
    return render_template("/static/appListings/hbomax/index.html")

@app.route("/illustrator")
def illustrator():
    return render_template("/static/appListings/illustrator/index.html")

@app.route("/instagram")
def instagram():
    return render_template("/static/appListings/instagram/index.html")

@app.route("/microsoft365")
def microsoft365():
    return render_template("/static/appListings/microsoft365/index.html")

@app.route("/microsoftexcel")
def microsoftexcel():
    return render_template("/static/appListings/microsoftexcel/index.html")

@app.route("/microsoftonenote")
def microsoftonenote():
    return render_template("/static/appListings/microsoftonenote/index.html")

@app.route("/microsoftpowerpoint")
def microsoftpowerpoint():
    return render_template("/static/appListings/microsoftpowerpoint/index.html")

@app.route("/microsofttodo")
def microsofttodo():
    return render_template("/static/appListings/microsofttodo/index.html")

@app.route("/microsoftword")
def microsoftword():
    return render_template("/static/appListings/microsoftword/index.html")

@app.route("/netflix")
def netflix():
    return render_template("/static/appListings/netflix/index.html")

@app.route("/notion")
def notion():
    return render_template("/static/appListings/notion/index.html")

@app.route("/photoshop")
def photoshop():
    return render_template("/static/appListings/photoshop/index.html")

@app.route("/premierepro")
def premierepro():
    return render_template("/static/appListings/premierepro/index.html")

@app.route("/pycharm")
def pycharm():
    return render_template("/static/appListings/pycharm/index.html")

@app.route("/resolve")
def resolve():
    return render_template("/static/appListings/resolve/index.html")

@app.route("/slack")
def slack():
    return render_template("/static/appListings/slack/index.html")

@app.route("/snapchat")
def snapchat():
    return render_template("/static/appListings/snapchat/index.html")

@app.route("/steam")
def steam():
    return render_template("/static/appListings/steam/index.html")

@app.route("/tiktok")
def tiktok():
    return render_template("/static/appListings/tiktok/index.html")

@app.route("/twitter")
def twitter():
    return render_template("/static/appListings/twitter/index.html")

@app.route("/vscode")
def vscode():
    return render_template("/static/appListings/vscode/index.html")






# Installable PWA routing

@app.route('/manifest.json')
def serve_manifest():
    return send_file('manifest.json', mimetype='application/manifest+json')

@app.route('/sw.js')
def serve_sw():
    return send_file('sw.js', mimetype='application/javascript')


@app.route("/get_response")
def get_response():
    message = request.args.get("message")
    completion = client.chat.completions.create(# You can switch this to `gpt-4` if you have access to that model.
    model="gpt-3.5-turbo",
    messages=[{"role": "user", "content": "You know a lot about tech. Do not answer any math questions. Please answer the following question(s) only if it is related to tech: " + message}])
    response = completion.choices[0].message.content
    return response







if __name__ == "__main__":
    app.run(debug=True)

```

### about.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Docs</title>
    <link rel="stylesheet" href="coverStyle.css">
  </head>
  <body>
	<script src="script.js"></script>
    <div class="topnav">
        <img src="./appstorefavicon.png" width="30px">
        <a href="index.html">App Store</a>
        <a class="active" href="#docs">Docs</a>
        <a href="#about">About</a>
        <a class="github-link" href="#github">Github</a>
    </div>
    <p>See Github</p>
  </body>
</html>
```

### docs.html

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Docs</title>
    <link rel="stylesheet" href="coverStyle.css">
  </head>
  <body>
	<script src="script.js"></script>
    <div class="topnav">
        <img src="./appstorefavicon.png" width="30px">
        <a href="index.html">App Store</a>
        <a class="active" href="#docs">Docs</a>
        <a href="#about">About</a>
        <a class="github-link" href="#github">Github</a>
    </div>
    <p>See Github</p>
  </body>
</html>
```

### sw.js

```javascript
const cacheName = "cache1"; // Change value to force update

self.addEventListener("install", event => {
	// Kick out the old service worker
	self.skipWaiting();

	event.waitUntil(
		caches.open(cacheName).then(cache => {
			return cache.addAll([
				"/",
			]);
		})
	);
});

self.addEventListener("activate", event => {
	// Delete any non-current cache
	event.waitUntil(
		caches.keys().then(keys => {
			Promise.all(
				keys.map(key => {
					if (![cacheName].includes(key)) {
						return caches.delete(key);
					}
				})
			)
		})
	);
});

// Offline-first, cache-first strategy
// Kick off two asynchronous requests, one to the cache and one to the network
// If there's a cached version available, use it, but fetch an update for next time.
// Gets data on screen as quickly as possible, then updates once the network has returned the latest data. 
self.addEventListener("fetch", event => {
	event.respondWith(
		caches.open(cacheName).then(cache => {
			return cache.match(event.request).then(response => {
				return response || fetch(event.request).then(networkResponse => {
					cache.put(event.request, networkResponse.clone());
					return networkResponse;
				});
			})
		})
	);
});

```

### search-preview.html

```html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
</style>
</head>
<body>

<h2>My Phonebook</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>
<p>Yolo!</p>

<script>
	document.addEventListener("DOMContentLoaded", function() {
	    var ul = document.getElementById("myUL");
	    ul.style.display = "none";
	});
	
	function myFunction() {
	    var input, filter, ul, li, a, i, txtValue;
	    input = document.getElementById("myInput");
	    filter = input.value.toUpperCase();
	    ul = document.getElementById("myUL");
	    li = ul.getElementsByTagName("li");
	
	    // Show or hide the list based on input and page load
	    if (filter === "" || filter === null) {
	        ul.style.display = "none"; // Hide the list when input is empty
	    } else {
	        ul.style.display = "block"; // Show the list when there is input
	    }
	
	    for (i = 0; i < li.length; i++) {
	        a = li[i].getElementsByTagName("a")[0];
	        txtValue = a.textContent || a.innerText;
	        if (txtValue.toUpperCase().indexOf(filter) > -1) {
	            li[i].style.display = "";
	        } else {
	            li[i].style.display = "none";
	        }
	    }
	}
</script>

</body>
</html>

```

### index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="theme-color" content="#695CFE"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App Store</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/coverStyle.css') }}">
    <!----===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    <link rel="icon" href="{{url_for('static', filename='manifestIcons/icon_256x256.png')}}" type="image/png">
    <link rel="icon" href="{{url_for('static', filename='manifestIcons/icon_512x512.png')}}" type="image/png">
    <link rel="icon" href="{{url_for('static', filename='manifestIcons/icon_1024x1024.png')}}" type="image/png">
    <link rel="apple-touch-icon" href="{{url_for('static', filename='manifestIcons/icon_256x256.png')}}" type="image/png">
    <link rel="apple-touch-icon" href="{{url_for('static', filename='manifestIcons/icon_512x512.png')}}" type="image/png">
    <link rel="apple-touch-icon" href="{{url_for('static', filename='manifestIcons/icon_1024x1024.png')}}" type="image/png">
    <link rel="manifest" href="./manifest.json">
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register("/sw.js").then(function(registration) {
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
          }, function(err) {
            console.log('ServiceWorker registration failed: ', err);
          });
        });
      }
    </script>
    <script defer src="{{ url_for('static', filename='js/AppStoreInstallation.js') }}"></script>
</head>
<body>
    <div class="topnav">
        <img src="static/assets/appstorefavicon.png" width="30px">
        <a href="index.html">App Store</a>
        <a class="active" href="docs.html">Docs</a>
        <a href="about.html">About</a>
        <a class="github-link" href="https://github.com/EricQXu/app-store">Github</a>
    </div>
    <h1 class="coverHeading">App Store</h1>
    <p class="coverDescription">The ultimate cross-platform app store built by the people, for the people<br><br><br><p>
    <img src="" id="coverScreenshot" class="center">
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(event) {
      let coverScreenshot = document.getElementById('coverScreenshot');
      let coverScreenshots = ['static/assets/windows-mockup.png', 'static/assets/mac-mockup.png', 'static/assets/linux-mockup.png'].map(src => {
        let img = new Image();
        img.src = src;
        return img;
      });
      let i = 0;

      coverScreenshot.src = coverScreenshots[i].src;

      setInterval(function() {
        i = (i + 1) % coverScreenshots.length;
        coverScreenshot.style.opacity = 0;
        setTimeout(function() {
          coverScreenshot.src = coverScreenshots[i].src;
          coverScreenshot.style.opacity = 1;
        }, 500);
      }, 2000);
    });
    </script>
    <div class="installBtnContainer">
        <div class="installBtn">
            <button id = "installBtn" class="btn">Install App</button>
        </div>
    </div>
    <p style="color: #b6b6b6; font-family: monospace, monospace; text-align:right;">Flask App Store Developer Edition</p>
    <p style="color: #88bb8d; font-family: monospace, monospace;">Developer Options: </p>
    <a href="{{ url_for('home') }}" style="color: #889fbb; font-family: monospace, monospace;">Directly Take Me to the App Store</a>
</body>
</html>
```

### work.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App Store</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/work.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <!----===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    <link rel="icon" href="{{url_for('static', filename='manifestIcons/icon_256x256.png')}}" type="image/png">
    <link rel="icon" href="{{url_for('static', filename='manifestIcons/icon_512x512.png')}}" type="image/png">
    <link rel="icon" href="{{url_for('static', filename='manifestIcons/icon_1024x1024.png')}}" type="image/png">
    <link rel="apple-touch-icon" href="{{url_for('static', filename='manifestIcons/icon_256x256.png')}}" type="image/png">
    <link rel="apple-touch-icon" href="{{url_for('static', filename='manifestIcons/icon_512x512.png')}}" type="image/png">
    <link rel="apple-touch-icon" href="{{url_for('static', filename='manifestIcons/icon_1024x1024.png')}}" type="image/png">
    <link rel="manifest" href="./manifest.json">
</head>
<body>
    <nav class="sidebar close">
        <header>
            <div class="image-text">
                <span class="image">
                    <img src="{{ url_for('static', filename='assets/logo.png') }}" alt="">
                </span>

                <div class="text logo-text">
                    <span class="name">App Store</span>
                </div>
            </div>

            <i class='bx bx-chevron-right toggle'></i>
        </header>

        <div class="menu-bar">
            <div class="menu">

                <ul class="menu-links">
                    <li class="nav-link">
                        <a href="{{ url_for('home') }}">
                            <i class='bx bx-home-alt icon' ></i>
                            <span class="text nav-text">Home</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('create') }}">
                            <i class='bx bx-book-alt icon' ></i>
                            <span class="text nav-text">Create</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('work') }}">
                            <i class='bx bx-briefcase icon'></i>
                            <span class="text nav-text">Work</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('entertainment') }}">
                            <i class='bx bx-dice-3 icon' ></i>
                            <span class="text nav-text">Entertainment</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('social') }}">
                            <i class='bx bx-chat icon' ></i>
                            <span class="text nav-text">Social</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('develop') }}">
                            <i class='bx bx-terminal icon' ></i>
                            <span class="text nav-text">Develop</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a href="{{ url_for('search') }}">
                            <i class='bx bx-search icon' ></i>
                            <span class="text nav-text">Search</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="bottom-content">
                <li class="mode">
                    <div class="sun-moon">
                        <i class='bx bx-moon icon moon'></i>
                        <i class='bx bx-sun icon sun'></i>
                    </div>
                    <span class="mode-text text">Dark mode</span>

                    <div class="toggle-switch">
                        <span class="switch"></span>
                    </div>
                </li>
                
            </div>
        </div>

    </nav>

    <section class="home">
        <div class="text">Work</div>
        <div class="app-container">
            <div class="app">
            <img src="https://yt3.googleusercontent.com/ytc/AIf8zZQTjGhyv6zCabZQRDnnudwAJ7AoRvnucvEkhi4DSA=s900-c-k-c0x00ffffff-no-rj">
            <div class="app-content">
            <h3>Slack</h3>
            <a href="{{ url_for('slack') }}" class="btn">Details</a>
            </div>
            </div>
            <div class="app">
            <img src="https://pbs.twimg.com/profile_images/1278896602745274369/1neATIDG_400x400.jpg">
            <div class="app-content">
            <h3>Evernote</h3>
            <a href="{{ url_for('evernote') }}" class="btn">Details</a>
            </div>
            </div>
    </section>

    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
  </body>
</html>
```

### develop.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App Store</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/develop.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <!----===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    <link rel="icon" href="{{url_for('static', filename='manifestIcons/icon_256x256.png')}}" type="image/png">
    <link rel="icon" href="{{url_for('static', filename='manifestIcons/icon_512x512.png')}}" type="image/png">
    <link rel="icon" href="{{url_for('static', filename='manifestIcons/icon_1024x1024.png')}}" type="image/png">
    <link rel="apple-touch-icon" href="{{url_for('static', filename='manifestIcons/icon_256x256.png')}}" type="image/png">
    <link rel="apple-touch-icon" href="{{url_for('static', filename='manifestIcons/icon_512x512.png')}}" type="image/png">
    <link rel="apple-touch-icon" href="{{url_for('static', filename='manifestIcons/icon_1024x1024.png')}}" type="image/png">
    <link rel="manifest" href="./manifest.json">
</head>
<body>
    <nav class="sidebar close">
        <header>
            <div class="image-text">
                <span class="image">
                    <img src="{{ url_for('static', filename='assets/logo.png') }}" alt="">
                </span>

                <div class="text logo-text">
                    <span class="name">App Store</span>
                </div>
            </div>

            <i class='bx bx-chevron-right toggle'></i>
        </header>

        <div class="menu-bar">
            <div class="menu">

                <ul class="menu-links">
                    <li class="nav-link">
                        <a href="{{ url_for('home') }}">
                            <i class='bx bx-home-alt icon' ></i>
                            <span class="text nav-text">Home</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('create') }}">
                            <i class='bx bx-book-alt icon' ></i>
                            <span class="text nav-text">Create</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('work') }}">
                            <i class='bx bx-briefcase icon'></i>
                            <span class="text nav-text">Work</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('entertainment') }}">
                            <i class='bx bx-dice-3 icon' ></i>
                            <span class="text nav-text">Entertainment</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('social') }}">
                            <i class='bx bx-chat icon' ></i>
                            <span class="text nav-text">Social</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('develop') }}">
                            <i class='bx bx-terminal icon' ></i>
                            <span class="text nav-text">Develop</span>
                        </a>
                    </li>
                    
                    <li class="nav-link">
                        <a href="{{ url_for('search') }}">
                            <i class='bx bx-search icon' ></i>
                            <span class="text nav-text">Search</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="bottom-content">
                <li class="mode">
                    <div class="sun-moon">
                        <i class='bx bx-moon icon moon'></i>
                        <i class='bx bx-sun icon sun'></i>
                    </div>
                    <span class="mode-text text">Dark mode</span>

                    <div class="toggle-switch">
                        <span class="switch"></span>
                    </div>
                </li>
                
            </div>
        </div>

    </nav>

    <section class="home">
        <div class="text">Develop</div>
        <div class="app-container">
        <div class="app">
        <img src="https://yt3.googleusercontent.com/_q52i8bUAEvcb7JR4e-eNTv23y2A_wg5sCz0NC0GrGtcw1CRMWJSOPVHUDh_bngD0q4gMvVeoA=s900-c-k-c0x00ffffff-no-rj">
        <div class="app-content">
        <h3>Visual Studio Code</h3>
        <a href="{{ url_for('vscode') }}" class="btn">Details</a>
        </div>
        </div>
        <div class="app">
        <img src="https://www.jetbrainsmerchandise.com/media/catalog/product/cache/9de2cbab405d38079f6e94f2fde72752/j/b/jbst-016_pycharm_2.png">
        <div class="app-content">
        <h3>PyCharm</h3>
        <a href="{{ url_for('pycharm') }}" class="btn">Details</a>
        </div>
        </div>

        <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    </body>
</html>
```

### search.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App Store</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/search.css') }}">
    <link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
    <!----===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    <!-- Material Icons CSS-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <link rel="manifest" href="manifest.json">
    <script>
        if ('serviceWorker' in navigator) {
          window.addEventListener('load', function() {
            navigator.serviceWorker.register("/sw.js").then(function(registration) {
              console.log('ServiceWorker registration successful with scope: ', registration.scope);
            }, function(err) {
              console.log('ServiceWorker registration failed: ', err);
            });
          });
        }
      </script>
    <script defer src="{{ url_for('static', filename='js/script.js') }}"></script>
    <script defer src="{{ url_for('static', filename='js/rainbow-glow.js') }}"></script>
    <script defer src="{{ url_for('static', filename='js/genAI.js') }}"></script>
</head>
<body>
    <nav class="sidebar close">
        <header>
            <div class="image-text">
                <span class="image">
                    <img src="{{ url_for('static', filename='assets/logo.png') }}" alt="">
                </span>

                <div class="text logo-text">
                    <span class="name">App Store</span>
                </div>
            </div>

            <i class='bx bx-chevron-right toggle'></i>
        </header>

        <div class="menu-bar">
            <div class="menu">

                <!-- <li class="search-box">
                    <i class='bx bx-search icon'></i>
                    <input type="text" placeholder="Search...">
                </li> -->

                <ul class="menu-links">
                    <li class="nav-link">
                        <a href="{{ url_for('home') }}">
                            <i class='bx bx-home-alt icon' ></i>
                            <span class="text nav-text">Home</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('create') }}">
                            <i class='bx bx-book-alt icon' ></i>
                            <span class="text nav-text">Create</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('work') }}">
                            <i class='bx bx-briefcase icon'></i>
                            <span class="text nav-text">Work</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('entertainment') }}">
                            <i class='bx bx-dice-3 icon' ></i>
                            <span class="text nav-text">Entertainment</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('social') }}">
                            <i class='bx bx-chat icon' ></i>
                            <span class="text nav-text">Social</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('develop') }}">
                            <i class='bx bx-terminal icon' ></i>
                            <span class="text nav-text">Develop</span>
                        </a>
                    </li>

                    <li class="nav-link">
                        <a href="{{ url_for('search') }}">
                            <i class='bx bx-search icon' ></i>
                            <span class="text nav-text">Search</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="bottom-content">
                <li class="mode">
                    <div class="sun-moon">
                        <i class='bx bx-moon icon moon'></i>
                        <i class='bx bx-sun icon sun'></i>
                    </div>
                    <span class="mode-text text">Dark mode</span>

                    <div class="toggle-switch">
                        <span class="switch"></span>
                    </div>
                </li>
                
            </div>
        </div>

    </nav>

    <section class="home">
        <div class="text">Search & Help</div>
        <main>
            <h2>Search Apps<br><br></h2>
            <p>--------------- Search Here ------------------</p>
            <p><br><br><br><br><br><br><br></p>
            
            <img src="{{ url_for('static', filename='assets/geminiAnimation.gif') }}">
            <h2>&#10024; Not sure which app is right for you? Ask us!</h2>
            <h3>Powered by AI<br><br></h3>
            <div class="input-area">
                <input type="text" class="message" id="message" placeholder="Try asking: 'Which browser is best for me?'">
                <button class="send" id="send">
                    <span class="material-symbols-rounded">send</span>
                </button>
            </div>
            <div class="chatbox" id="chatbox"></div>
        </main>
    </section>
  </body>
</html>
```

[173 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]