Skip to content

Commit 81e9c1c

Browse files
devyujidevyuji
committed
testing
0 parents  commit 81e9c1c

37 files changed

+3624
-0
lines changed

‎.eslintignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
10+
# Ignore files for PNPM, NPM and YARN
11+
pnpm-lock.yaml
12+
package-lock.json
13+
yarn.lock

‎.eslintrc.cjs

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module.exports = {
2+
root: true,
3+
parser: '@typescript-eslint/parser',
4+
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
5+
plugins: ['svelte3', '@typescript-eslint'],
6+
ignorePatterns: ['*.cjs'],
7+
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
8+
settings: {
9+
'svelte3/typescript': () => require('typescript')
10+
},
11+
parserOptions: {
12+
sourceType: 'module',
13+
ecmaVersion: 2020
14+
},
15+
env: {
16+
browser: true,
17+
es2017: true,
18+
node: true
19+
}
20+
};

‎.gitignore

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example

‎.npmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
engine-strict=true

‎.prettierignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
10+
# Ignore files for PNPM, NPM and YARN
11+
pnpm-lock.yaml
12+
package-lock.json
13+
yarn.lock

‎.prettierrc

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"useTabs": true,
3+
"singleQuote": true,
4+
"trailingComma": "none",
5+
"printWidth": 100,
6+
"plugins": ["prettier-plugin-svelte"],
7+
"pluginSearchDirs": ["."],
8+
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
9+
}

‎README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# create-svelte
2+
3+
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
4+
5+
## Creating a project
6+
7+
If you're seeing this, you've probably already done this step. Congrats!
8+
9+
```bash
10+
# create a new project in the current directory
11+
npm create svelte@latest
12+
13+
# create a new project in my-app
14+
npm create svelte@latest my-app
15+
```
16+
17+
## Developing
18+
19+
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20+
21+
```bash
22+
npm run dev
23+
24+
# or start the server and open the app in a new browser tab
25+
npm run dev -- --open
26+
```
27+
28+
## Building
29+
30+
To create a production version of your app:
31+
32+
```bash
33+
npm run build
34+
```
35+
36+
You can preview the production build with `npm run preview`.
37+
38+
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

‎package.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "wa",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite dev",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
10+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
11+
"lint": "prettier --plugin-search-dir . --check . && eslint .",
12+
"format": "prettier --plugin-search-dir . --write ."
13+
},
14+
"devDependencies": {
15+
"@sveltejs/adapter-auto": "^1.0.0",
16+
"@sveltejs/kit": "^1.0.0",
17+
"@typescript-eslint/eslint-plugin": "^5.27.0",
18+
"@typescript-eslint/parser": "^5.27.0",
19+
"autoprefixer": "^10.4.13",
20+
"eslint": "^8.16.0",
21+
"eslint-config-prettier": "^8.3.0",
22+
"eslint-plugin-svelte3": "^4.0.0",
23+
"postcss": "^8.4.20",
24+
"prettier": "^2.6.2",
25+
"prettier-plugin-svelte": "^2.7.0",
26+
"svelte": "^3.44.0",
27+
"svelte-check": "^2.7.1",
28+
"svelte-preprocess": "^5.0.0",
29+
"tailwindcss": "^3.2.4",
30+
"tslib": "^2.3.1",
31+
"typescript": "^4.7.4",
32+
"vite": "^4.0.1"
33+
},
34+
"type": "module"
35+
}

‎postcss.config.cjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎src/app.css

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer base {
6+
input[type='number']::-webkit-inner-spin-button,
7+
input[type='number']::-webkit-outer-spin-button {
8+
-webkit-appearance: none;
9+
margin: 0;
10+
}
11+
}
12+
13+
@layer utilities {
14+
/* width */
15+
::-webkit-scrollbar {
16+
width: 5px;
17+
}
18+
19+
/* Track */
20+
::-webkit-scrollbar-track {
21+
background: #f1f1f1;
22+
}
23+
24+
/* Handle */
25+
::-webkit-scrollbar-thumb {
26+
background: #22c55e;
27+
border-radius: 50px;
28+
}
29+
30+
/* Handle on hover */
31+
::-webkit-scrollbar-thumb:hover {
32+
background: #555;
33+
}
34+
}

‎src/app.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// See https://kit.svelte.dev/docs/types#app
2+
// for information about these interfaces
3+
// and what to do when importing types
4+
declare namespace App {
5+
// interface Locals {}
6+
// interface PageData {}
7+
// interface Error {}
8+
// interface Platform {}
9+
}

‎src/app.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%sveltekit.assets%/Group 12.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link rel="manifest" crossorigin="use-credentials" href="%sveltekit.assets%/manifest.json" />
8+
<meta name="description" content="Send message without saving number on Whatsapp" />
9+
<title>whatsnum - send whatsapp message without saving number.</title>
10+
%sveltekit.head%
11+
</head>
12+
<body class="bg-green-50 dark:bg-black h-screen w-full">
13+
<div>%sveltekit.body%</div>
14+
</body>
15+
</html>

‎src/components/modal/backdrop.svelte

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
import { modal } from '../../store/store';
3+
import { fade } from 'svelte/transition';
4+
5+
const closeModal = () => {
6+
modal.update((v) => false);
7+
};
8+
9+
const handleKeyUp = (event: any) => {
10+
if (event.code === 'Escape') closeModal();
11+
};
12+
</script>
13+
14+
<svelte:window on:keyup={handleKeyUp} />
15+
16+
<!-- svelte-ignore a11y-click-events-have-key-events -->
17+
<div
18+
on:click={closeModal}
19+
transition:fade
20+
class="fixed top-0 left-0 bg-black/20 w-full h-full flex items-center justify-center"
21+
>
22+
<slot />
23+
</div>

‎src/components/modal/numberCode.svelte

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<script lang="ts">
2+
import Backdrop from './backdrop.svelte';
3+
import { scale } from 'svelte/transition';
4+
import { modal } from '../../store/store';
5+
import countryCode from '$lib/countryCode.json';
6+
import NumberList from '../numberList.svelte';
7+
import type { filterDataProps } from '$lib/types';
8+
9+
let filterData: filterDataProps[] = [];
10+
let value = '';
11+
12+
const closeModal = () => {
13+
modal.update(() => false);
14+
};
15+
16+
const filter = () => {
17+
filterData = countryCode.filter((v) => v.name.toLowerCase().match(value.toLowerCase()));
18+
};
19+
20+
function focus(e: any) {
21+
e.focus();
22+
}
23+
</script>
24+
25+
<Backdrop>
26+
<!-- svelte-ignore a11y-click-events-have-key-events -->
27+
<div
28+
transition:scale
29+
on:click|stopPropagation
30+
class="bg-green-50 h-5/6 lg:w-96 w-11/12 rounded-lg overflow-y-auto"
31+
>
32+
<div class="flex justify-end p-4">
33+
<button
34+
type="button"
35+
aria-label="close"
36+
on:click={closeModal}
37+
class="bg-green-100 p-2 rounded-lg text-green-800 font-bold text-xs"
38+
>
39+
ESC
40+
</button>
41+
</div>
42+
43+
<form on:submit|preventDefault class="flex items-center p-4 gap-4 border-b-2">
44+
<svg
45+
viewBox="0 0 24 24"
46+
width="24"
47+
height="24"
48+
stroke="currentColor"
49+
stroke-width="2"
50+
fill="none"
51+
stroke-linecap="round"
52+
stroke-linejoin="round"
53+
class="text-green-900 w-6 h-6"
54+
><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg
55+
>
56+
<input
57+
type="text"
58+
bind:value
59+
on:keyup={filter}
60+
use:focus
61+
placeholder="Search by country"
62+
autocomplete="off"
63+
class="w-full outline-none bg-transparent placeholder:text-black"
64+
/>
65+
</form>
66+
67+
<div>
68+
{#if filterData.length != 0}
69+
{#each filterData as data}
70+
<NumberList {data} />
71+
{/each}
72+
{:else}
73+
{#each countryCode as data}
74+
<NumberList {data} />
75+
{/each}
76+
{/if}
77+
</div>
78+
</div>
79+
</Backdrop>

‎src/components/navbar.svelte

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script lang="ts">
2+
function toggleTheme() {
3+
const theme = localStorage.theme;
4+
5+
if (theme !== 'dark') {
6+
localStorage.theme = 'dark';
7+
document.documentElement.classList.add('dark');
8+
} else {
9+
localStorage.theme = 'light';
10+
document.documentElement.classList.remove('dark');
11+
}
12+
}
13+
</script>
14+
15+
<header class="bg-green-50 dark:bg-black p-4 grid place-items-center">
16+
<nav class="flex justify-end lg:w-[40rem] md:w-5/6 w-full">
17+
<ul class="flex gap-4 dark:text-white">
18+
<li>
19+
<button type="button">Install app</button>
20+
</li>
21+
<li>
22+
<a href="/how-to-use">how-to-use</a>
23+
</li>
24+
<li>
25+
<button type="button" aria-label="theme toggle" on:click={toggleTheme}>theme</button>
26+
</li>
27+
</ul>
28+
</nav>
29+
</header>

‎src/components/numberList.svelte

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script lang="ts">
2+
import type { filterDataProps } from '$lib/types';
3+
import { dialCode, modal } from '../store/store';
4+
5+
export let data: filterDataProps;
6+
7+
const updateCode = () => {
8+
dialCode.update(() => data.dial_code);
9+
modal.update(() => false);
10+
};
11+
</script>
12+
13+
<button
14+
class="hover:bg-green-100 focus:bg-green-100 outline-none w-full flex gap-2 p-4 border-b-2"
15+
on:click={updateCode}
16+
>
17+
<span>{data.dial_code}</span>
18+
<span class="text-left">{data.name}</span>
19+
<span class="ml-auto"
20+
><svg
21+
viewBox="0 0 24 24"
22+
width="24"
23+
height="24"
24+
stroke="currentColor"
25+
stroke-width="2"
26+
fill="none"
27+
stroke-linecap="round"
28+
stroke-linejoin="round"><polyline points="9 18 15 12 9 6" /></svg
29+
></span
30+
>
31+
</button>

0 commit comments

Comments
 (0)