tmp
commit
ee5ad8c8de
GPG Key ID:
22473A32291F8CB6
@ -0,0 +1 @@
|
||||
node_modules
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "tangan-menolong",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"dev": "rollup -c -w",
|
||||
"start": "sirv public --host --no-clear"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
"@rollup/plugin-node-resolve": "^11.0.0",
|
||||
"eslint": "^7.25.0",
|
||||
"rollup": "^2.3.4",
|
||||
"rollup-plugin-css-only": "^3.1.0",
|
||||
"rollup-plugin-livereload": "^2.0.0",
|
||||
"rollup-plugin-svelte": "^7.0.0",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"svelte": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@rollup/plugin-image": "^2.0.6",
|
||||
"@tailwindcss/aspect-ratio": "^0.2.1",
|
||||
"@tailwindcss/jit": "^0.1.18",
|
||||
"@tailwindcss/typography": "^0.4.1",
|
||||
"daisyui": "^1.10.0",
|
||||
"postcss": "^8.2.12",
|
||||
"postcss-cli": "^8.3.1",
|
||||
"sirv-cli": "^1.0.0",
|
||||
"svelte-preprocess": "^4.7.2",
|
||||
"svelte-simple-modal": "^0.10.1",
|
||||
"svelte-spa-router": "^3.2.0",
|
||||
"tailwindcss": "^2.1.2"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
module.exports = () => ({
|
||||
plugins: [
|
||||
require("@tailwindcss/jit"),
|
||||
require("autoprefixer")
|
||||
],
|
||||
})
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="emerald">
|
||||
<head >
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Tangan Menolong</title>
|
||||
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link rel="stylesheet" href="build/bundle.css">
|
||||
|
||||
<script defer src="build/bundle.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
@ -0,0 +1,70 @@
|
||||
import svelte from "rollup-plugin-svelte";
|
||||
import commonjs from "@rollup/plugin-commonjs";
|
||||
import image from "@rollup/plugin-image";
|
||||
import resolve from "@rollup/plugin-node-resolve";
|
||||
import livereload from "rollup-plugin-livereload";
|
||||
import { terser } from "rollup-plugin-terser";
|
||||
import css from "rollup-plugin-css-only";
|
||||
import sveltePreprocess from "svelte-preprocess";
|
||||
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
function serve() {
|
||||
let server;
|
||||
|
||||
function toExit() {
|
||||
if (server) server.kill(0);
|
||||
}
|
||||
|
||||
return {
|
||||
writeBundle() {
|
||||
if (server) return;
|
||||
server = require("child_process").spawn("npm", ["run", "start", "--", "--dev"], {
|
||||
stdio: ["ignore", "inherit", "inherit"],
|
||||
shell: true
|
||||
});
|
||||
|
||||
process.on("SIGTERM", toExit);
|
||||
process.on("exit", toExit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
input: "src/main.js",
|
||||
output: {
|
||||
sourcemap: true,
|
||||
format: "iife",
|
||||
name: "app",
|
||||
file: "public/build/bundle.js"
|
||||
},
|
||||
plugins: [
|
||||
svelte({
|
||||
preprocess: sveltePreprocess({
|
||||
defaults: {
|
||||
style: "postcss"
|
||||
},
|
||||
postcss: {}
|
||||
}),
|
||||
compilerOptions: {
|
||||
dev: !production
|
||||
}
|
||||
}),
|
||||
css({ output: "bundle.css" }),
|
||||
resolve({
|
||||
browser: true,
|
||||
dedupe: ["svelte"]
|
||||
}),
|
||||
commonjs(),
|
||||
image(),
|
||||
|
||||
// Serve and Live Reload.
|
||||
!production && serve(),
|
||||
!production && livereload("public"),
|
||||
// Minify.
|
||||
production && terser()
|
||||
],
|
||||
watch: {
|
||||
clearScreen: false
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
import Navbar from './components/Navbar.svelte'
|
||||
import Footer from './components/Footer.svelte'
|
||||
import Router from 'svelte-spa-router'
|
||||
import routes from './routes'
|
||||
</script>
|
||||
|
||||
<main class="p-0 lg:p-4 bg-gray-200 min-h-screen">
|
||||
<Navbar />
|
||||
<div class="container mx-auto px-2 py-8">
|
||||
<Router {routes} />
|
||||
</div>
|
||||
<Footer />
|
||||
</main>
|
||||
|
||||
<style global lang="postcss">
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
</style>
|
||||
@ -0,0 +1,19 @@
|
||||
<div class="hero lg:rounded-box bg-neutral-focus text-neutral-content shadow-xl lg:relative">
|
||||
<div class="w-full max-w-6xl text-center hero-content flex flex-col lg:flex-row justify-cener items-center">
|
||||
<div class="text-xl mb-2 lg:mb-0 font-title text-neutral-content lg:absolute lg:left-4 font-bold">
|
||||
<img src="/logo.png" alt="" class="w-14 h-14 mr-4"/>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<a class="my-1 btn btn-ghost btn-xs" target="_blank" rel="noopener" href="#">Link 1</a>
|
||||
<a class="my-1 btn btn-ghost btn-xs" target="_blank" rel="noopener" href="#">Link 2</a>
|
||||
<a class="my-1 btn btn-ghost btn-xs" target="_blank" rel="noopener" href="#">Link 3</a>
|
||||
<a class="my-1 btn btn-ghost btn-xs" target="_blank" rel="noopener" href="#">Link 4</a>
|
||||
</div>
|
||||
|
||||
<div class="text-sm font-title text-neutral-content lg:absolute lg:right-4 font-bold">
|
||||
<span class="text-primary">Created by</span>
|
||||
<a class="my-1 btn btn-ghost btn-xs" target="_blank" rel="noopener" href="#">Hamza ALI</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,37 @@
|
||||
<div class="navbar lg:rounded-box bg-neutral-focus text-neutral-content shadow-xl">
|
||||
<div class="flex-1 px-2 mx-2">
|
||||
<span class="text-lg font-bold inline-flex items-center">
|
||||
<img src="/logo.png" alt="" class="w-14 h-14 mr-4"/>
|
||||
<span class="text-primary">Tangan</span>Menolong
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-none hidden px-2 mx-2 lg:flex">
|
||||
<div class="flex items-stretch">
|
||||
<a class="btn btn-ghost btn-sm rounded-btn" href="/#/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 mr-2 stroke-current">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
|
||||
</svg>
|
||||
Home
|
||||
</a>
|
||||
<a class="btn btn-ghost btn-sm rounded-btn" href="/#/businesses">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 mr-2 stroke-current">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
Businesses
|
||||
</a>
|
||||
<a class="btn btn-ghost btn-sm rounded-btn" href="/#/register">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 mr-2 stroke-current">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Register
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-none lg:hidden">
|
||||
<button class="btn btn-square btn-ghost">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,7 @@
|
||||
import App from "./App.svelte";
|
||||
|
||||
const app = new App({
|
||||
target: document.body
|
||||
});
|
||||
|
||||
export default app;
|
||||
@ -0,0 +1,41 @@
|
||||
<script>
|
||||
import { fade } from 'svelte/transition';
|
||||
import {link} from 'svelte-spa-router'
|
||||
</script>
|
||||
|
||||
<main class="max-w-6xl mx-auto" in:fade="{{delay: 120, duration: 100}}" out:fade="{{duration: 100}}">
|
||||
<div class="flex flex-col md:flex-row gap-10">
|
||||
<img src="https://picsum.photos/720/720" class="md:max-w-[60%] xl:max-w-[75%]" alt="">
|
||||
<div class="flex-1">
|
||||
<h4>Business Name</h4>
|
||||
<p>Some Name</p>
|
||||
<h4>Business Name</h4>
|
||||
<p>Some Name</p>
|
||||
<h4>Business Name</h4>
|
||||
<p>Some Name</p>
|
||||
<h4>Business Name</h4>
|
||||
<p>Some Name</p>
|
||||
<h4>Business Name</h4>
|
||||
<p>Some Name</p>
|
||||
<h4>Business Name</h4>
|
||||
<p>Some Name</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply mb-8;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,105 @@
|
||||
<script>
|
||||
import { fade } from 'svelte/transition';
|
||||
import {link} from 'svelte-spa-router'
|
||||
</script>
|
||||
|
||||
<main class="max-w-6xl mx-auto" in:fade="{{delay: 120, duration: 100}}" out:fade="{{duration: 100}}">
|
||||
<div class="flex flex-wrap gap-12 justify-center md:justify-start">
|
||||
|
||||
<div class="entry relative">
|
||||
<img src="https://picsum.photos/350/240"/>
|
||||
<div class="info-container">
|
||||
<div class="info">
|
||||
<p>Small description for the business.<br>Max 3 lines long.</p>
|
||||
<h2 class="text-sm italic">Business Type</h2>
|
||||
<hr class="mb-2">
|
||||
<h4 class="text-md">Learn More</h4>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="name ">Business Name</h2>
|
||||
</div>
|
||||
<div class="entry relative">
|
||||
<img src="https://picsum.photos/350/240"/>
|
||||
<div class="info-container">
|
||||
<div class="info">
|
||||
<p>Small description for the business.<br>Max 3 lines long.</p>
|
||||
<h2 class="text-sm italic">Business Type</h2>
|
||||
<hr class="mb-2">
|
||||
<h4 class="text-md">Learn More</h4>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="name ">Business Name</h2>
|
||||
</div>
|
||||
<div class="entry relative">
|
||||
<img src="https://picsum.photos/350/240"/>
|
||||
<div class="info-container">
|
||||
<div class="info">
|
||||
<p>Small description for the business.<br>Max 3 lines long.</p>
|
||||
<h2 class="text-sm italic">Business Type</h2>
|
||||
<hr class="mb-2">
|
||||
<h4 class="text-md">Learn More</h4>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="name ">Business Name</h2>
|
||||
</div>
|
||||
<div class="entry relative">
|
||||
<img src="https://picsum.photos/350/240"/>
|
||||
<div class="info-container">
|
||||
<div class="info">
|
||||
<p>Small description for the business.<br>Max 3 lines long.</p>
|
||||
<h2 class="text-sm italic">Business Type</h2>
|
||||
<hr class="mb-2">
|
||||
<h4 class="text-md">Learn More</h4>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="name ">Business Name</h2>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.entry {
|
||||
@apply bg-white shadow-lg rounded-box;
|
||||
@apply flex flex-col w-8/12 md:w-[30%] lg:w-[30%] min-h-[240px];
|
||||
@apply hover:shadow-2xl transition-all;
|
||||
}
|
||||
|
||||
.entry img {
|
||||
@apply rounded-box w-full h-full overflow-auto;
|
||||
}
|
||||
|
||||
.entry .name {
|
||||
@apply absolute bottom-0 left-0 w-full h-10;
|
||||
@apply bg-primary rounded-b-box bg-opacity-80;
|
||||
@apply flex justify-center items-center;
|
||||
@apply transition-all;
|
||||
}
|
||||
|
||||
|
||||
.entry .info-container {
|
||||
@apply absolute left-0 right-0 top-0 bottom-10;
|
||||
@apply flex flex-col justify-center;
|
||||
@apply bg-white rounded-t-box opacity-0 transition-all;
|
||||
}
|
||||
.entry .info {
|
||||
@apply w-10/12 mx-auto;
|
||||
}
|
||||
|
||||
.entry:hover .info-container {
|
||||
@apply opacity-100 bg-opacity-80;
|
||||
}
|
||||
|
||||
|
||||
.entry:hover h1, .entry:hover h4 {
|
||||
@apply text-secondary;
|
||||
}
|
||||
|
||||
.entry hr {
|
||||
@apply border-black;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
<script>
|
||||
import { fade } from 'svelte/transition';
|
||||
import {link} from 'svelte-spa-router'
|
||||
</script>
|
||||
|
||||
<main class="flex flex-col gap-6 max-w-5xl mx-auto" in:fade="{{delay: 120, duration: 100}}" out:fade="{{duration: 100}}">
|
||||
<div class="h-[calc(90vh-96px)] lg:h-[calc(80vh-108px)]
|
||||
bg-primary-content shadow-xl rounded-box p-4 flex flex-col">
|
||||
<img class="rounded-box" src="https://i.picsum.photos/id/188/1920/600.jpg?hmac=4nub7TUTUByAS9gjtFvgHkfLsJLtzUGmAEm3SxX1X9Y" alt="">
|
||||
<div class="flex-1 flex flex-col lg:flex-row justify-center items-center gap-8 lg:gap-0">
|
||||
<h1 class="text-2xl font-bold w-9/12 text-center
|
||||
lg:text-left lg:w-8/12">
|
||||
A Non-Profit initiative with the goal to
|
||||
increase online presence and collaboration within micro and
|
||||
small businesses in Indonesia.
|
||||
</h1>
|
||||
<button class="btn btn-lg btn-primary btn-wide self-center">Donate</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-primary-content shadow-xl items-center rounded-box px-12 py-4 flex flex-col">
|
||||
<h2 class="text-center text-3xl font-semibold mb-3">About Us</h2>
|
||||
<p class="md:max-w-2xl text-justify border-l-4 border-primary pl-4">
|
||||
There are more than 60,000 street vendors, and uncountable more
|
||||
microbusinesses all around Indonesia. These businesses have no way to
|
||||
find financial or social support, and have little to no agency to climb
|
||||
out of the poverty cycle. Being able to support those in desperate need
|
||||
with funds to kickstart their businesses. This can potentially change the
|
||||
lives of Indonesians for the better.
|
||||
</p>
|
||||
<h4 class="text-xl md:text-2xl font-semibold mt-5 mb-3">Our Mission</h4>
|
||||
<ol class="font-medium list-decimal text-md md:w-10/12">
|
||||
<li>Aid local businesses in connecting with potential investors</li>
|
||||
<li>Connect with business owners. Understand the situation.</li>
|
||||
<li>Create a profile. Promote the business, and give businesses the opportunity to get help.</li>
|
||||
<li>Help donors and community members get into contact with businsses.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="bg-primary shadow-xl rounded-box flex flex-col items-center p-6">
|
||||
<h2 class="text-3xl font-semibold mb-4">Learn More</h2>
|
||||
<div class="w-10/12 md:w-1/2">
|
||||
<div class="aspect-w-16 aspect-h-9">
|
||||
<iframe src="https://www.youtube.com/embed/asdasdasjdlkq"
|
||||
title="About"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write;
|
||||
encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen>
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
li {
|
||||
@apply mt-4;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,14 @@
|
||||
// Components
|
||||
import Home from './pages/Home.svelte'
|
||||
import Businesses from './pages/Businesses.svelte'
|
||||
import Business from './pages/Business.svelte'
|
||||
|
||||
// Routes
|
||||
export default {
|
||||
'/': Home,
|
||||
'/businesses': Businesses,
|
||||
'/business': Business,
|
||||
|
||||
// TODO: add a not found page.
|
||||
'*': Home,
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
module.exports = {
|
||||
mode: "jit",
|
||||
purge: {
|
||||
enabled: process.env.NODE_ENV === "production",
|
||||
safeList: [],
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.svelte",
|
||||
],
|
||||
},
|
||||
theme: {},
|
||||
variants: {},
|
||||
plugins: [
|
||||
require('@tailwindcss/aspect-ratio'),
|
||||
require('daisyui'),
|
||||
]
|
||||
};
|
||||
Loading…
Reference in New Issue