Too late but it was fun btw...

iaroslavkrasikov · Oct 10, 2023 · 5d4a0ad · 5d4a0ad
1 parent 5fc39f9
commit 5d4a0ad
Show file tree

Hide file tree

Showing 25 changed files with 294 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+# Telesim Mini App [@telesimbot](http://t.me/telesimbot).
+
+Built with Svelte and Telebot, deployed at Vercel with serverless functions.
+
+## Usage
+
+
+1. Put `TOKEN` and `DEV_WEBHOOK_URL` in your `.env.local` file
+2. Run
+```
+pip -r requirements.txt
+npm install
+vercel dev
+ ```
diff --git a/api/index.py b/api/index.py
@@ -6,13 +6,9 @@
 app = flask.Flask(__name__)
 app.url_map.strict_slashes = False
 
-@app.route("/")
-def web_app():
-	return "Web app"
-
 @app.route("/api")
 def index():
-	return env.WEBHOOK_URL
+	return flask.Response(status=200)
 
 @app.route("/api/bot", methods=["POST"])
 def bot_webhook():

diff --git a/app/index.html b/app/index.html
@@ -4,7 +4,6 @@
 	<meta charset="UTF-8">
 	<link rel="icon" type="image/svg+xml" href="" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
-	<link rel="stylesheet" href="./src/app.css">
 	<title>Telesim</title>
 </head>
 <body>

diff --git a/app/public/vite.svg b/app/public/vite.svg
diff --git a/app/src/App.svelte b/app/src/App.svelte
@@ -2,41 +2,49 @@
 	import WebApp from "@twa-dev/sdk";
 
 	import Logo from "./lib/Logo.svelte";
-	import Plans from "./lib/Plans.svelte";
-	import Sim from "./lib/SIM.svelte";
+	import Plans from "./lib/Plans/Plans.svelte";
+	import Sim from "./lib/SIM/SIM.svelte";
 	import History from "./lib/History.svelte";
-	import Info from "./lib/Info.svelte";
+	import Info from "./lib/Info/Info.svelte";
+	import { setContext } from "svelte";
+
+	setContext("webapp", WebApp);
 
 	const checkInitData = (unsafeInitData) => {
-		true
-	} 
+		return true;
+	};
 
-	const isUserActive = (userId)
+	const isUserActive = (userId) => {
+		return false;
+	};
 
 	let initData = checkInitData(WebApp.initData)
 		? WebApp.initDataUnsafe
-		: undefined;
+		: null;
 
 	const user = {
 		name: initData.user.id,
-		isActive: isUserActive(initData.user.id)
+		isActive: isUserActive(initData.user.id),
 	};
 </script>
 
-<main>
+<div class="container">
 	{#if !user.isActive}
 		<Logo />
 		<Info />
 		<Plans />
 		<History />
 	{:else}
 		<Sim />
-		Buy More:
+		<!-- Buy More: -->
 		<Plans />
 		<History />
 		<Info />
 	{/if}
-</main>
+</div>
 
 <style>
+	.container {
+		padding: 0 1em 0 1em;
+	}
 </style>
diff --git a/app/src/app.css b/app/src/app.css
@@ -5,20 +5,28 @@
 }
 
 body {
-	display: flex;
 	margin: 0;
-	min-width: 320px;
+	/* width: 100%; */
 	min-height: 100vh;
 	font-family: -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Arial", sans-serif;
+	font-size: 17px;
+	font-style: normal;
 	font-weight: 400;
 	font-synthesis: none;
-	line-height: 1.5;
+	line-height: 22px;
+	letter-spacing: -0.43px;
 	text-rendering: optimizeLegibility;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-text-size-adjust: 100%;
 }
 
+* {
+	box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+}
+
 a {
 	font-weight: 500;
 	text-decoration: inherit;
@@ -29,11 +37,6 @@ a:hover {
 	color: #535bf2;
 }
 
-h1 {
-	font-size: 3.2em;
-	line-height: 1.1;
-}
-
 button {
 	border-radius: 8px;
 	font-size: 1em;
@@ -56,9 +59,39 @@ button:focus-visible {
 	outline: 4px auto -webkit-focus-ring-color;
 }
 
-.logo {
-	display: flex;
-	height: 162px;
-	place-items: center;
-	text-align: center;
+.title {
+	font-size: 22px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 28px;
+	/* 127.273% */
+	letter-spacing: -0.264px;
+}
+
+.headline {
+	margin: 1em 0 .5em 0.25em;
+	font-size: 22px;
+	font-style: normal;
+	font-weight: 700;
+	line-height: 28px;
+	/* 127.273% */
+	letter-spacing: -0.264px;
+}
+
+.subheadline {
+	margin-top: .1em;
+	font-size: 15px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px;
+	/* 120% */
+	letter-spacing: -0.23px;
+}
+
+.body-semibold {
+	font-size: 17px;
+	font-style: normal;
+	font-weight: 590;
+	line-height: 22px;
+	letter-spacing: -0.43px;
 }
diff --git a/app/src/assets/icon/devices.svg b/app/src/assets/icon/devices.svg
diff --git a/app/src/assets/icon/faq.svg b/app/src/assets/icon/faq.svg
diff --git a/app/src/assets/icon/support.svg b/app/src/assets/icon/support.svg
diff --git a/app/src/assets/svelte.svg b/app/src/assets/svelte.svg
diff --git a/app/src/assets/telesim-logo.png b/app/src/assets/telesim-logo.png
diff --git a/app/src/lib/Counter.svelte b/app/src/lib/Counter.svelte
diff --git a/app/src/lib/Info/Info.svelte b/app/src/lib/Info/Info.svelte
@@ -0,0 +1,23 @@
+<script>
+	import faqIcon from "../../assets/icon/faq.svg";
+	import devicesIcon from "../../assets/icon/devices.svg";
+	import supportIcon from "../../assets/icon/support.svg";
+
+	import InfoButton from "./InfoButton.svelte";
+</script>
+
+<div class="info">
+	<InfoButton link="faq" icon={faqIcon} text="FAQ" />
+	<InfoButton link="devices" icon={devicesIcon} text="eSIM Devices" />
+	<InfoButton link="support" icon={supportIcon} text="Support" />
+</div>
+
+<style>
+	.info {
+		display: flex;
+		margin-top: 2em;
+		flex-wrap: wrap;
+		color: var(--tg-theme-button-text-color);
+		gap: 9px;
+	}
+</style>
diff --git a/app/src/lib/Info/InfoButton.svelte b/app/src/lib/Info/InfoButton.svelte
@@ -0,0 +1,32 @@
+<script>
+	export let link;
+	export let icon;
+	export let text;
+
+	// TODO: Button action
+</script>
+
+<button class="button" {link}>
+	<img src={icon} class="icon" alt="" />
+	<div>{text}</div>
+</button>
+
+<style>
+	.button {
+		display: inline-flex;
+		height: 36px;
+		padding: 0px 24px 0px 12px;
+		align-items: center;
+		flex-shrink: 0;
+		font-weight: 590;
+		line-height: 100%;
+		vertical-align: middle;
+		background: var(--tg-theme-button-color);
+		border-radius: 12px;
+		gap: 6px;
+	}
+	.icon {
+		width: 24px;
+		height: 24px;
+	}
+</style>
diff --git a/app/src/lib/Logo.svelte b/app/src/lib/Logo.svelte
@@ -1,5 +1,20 @@
-<script></script>
+<script>
+	import telesimLogo from "../assets/telesim-logo.png";
+</script>
 
-<main>Logo</main>
+<div class="logo">
+	<img src={telesimLogo} alt="" />
+	<span class="title">Telesim</span>
+	<span class="subheadline">Your SIM-card across the world</span>
+</div>
 
-<style></style>
+<style>
+	.logo {
+		display: flex;
+		height: 162px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
diff --git a/app/src/lib/Plans.svelte b/app/src/lib/Plans.svelte
diff --git a/app/src/lib/Info.svelte → app/src/lib/Plans/Limits.svelte b/app/src/lib/Info.svelte → app/src/lib/Plans/Limits.svelte
diff --git a/app/src/lib/Plans/Plans.svelte b/app/src/lib/Plans/Plans.svelte
@@ -0,0 +1,15 @@
+<script>
+	import PlanRegions from "./Regions/Regions.svelte";
+	import PlanLimits from "./Limits.svelte";
+</script>
+
+<div class="plans">
+	<PlanRegions />
+	<PlanLimits />
+</div>
+
+<style>
+	.plans {
+		margin-top: 2em;
+	}
+</style>
diff --git a/app/src/lib/Plans/Regions/Region.svelte b/app/src/lib/Plans/Regions/Region.svelte
@@ -0,0 +1,50 @@
+<script>
+	export let double = false;
+	export let selector = false;
+</script>
+
+<div>
+	{#if !selector}
+		{#if double}
+			<div class="region region-double">
+				<div class="body-semibold"><slot /></div>
+			</div>
+		{:else}
+			<div class="region">
+				<div class="body-semibold"><slot /></div>
+			</div>
+		{/if}
+	{:else}
+		<div class="region region-selector">
+			<div class="body-semibold"><slot /></div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.region {
+		--W: calc(var(--vw) - 2em);
+		--g: 9px;
+		--w: calc((var(--W) - 2 * var(--g)) / 3);
+		display: flex;
+		width: var(--w);
+		height: var(--w);
+		padding: 8px 12px;
+		flex-direction: column;
+		justify-content: flex-end;
+		align-items: flex-start;
+		flex-shrink: 0;
+		background: var(--bg-color);
+		color: #fff;
+		border-radius: 12px;
+	}
+
+	.region-double {
+		--u: calc(var(--W) - var(--w) - var(--g));
+		width: var(--u);
+	}
+
+	.region-selector {
+		background: var(--tg-theme-hint-color);
+	}
+</style>