-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
change js to ts for adding interface
- Loading branch information
Showing
1 changed file
with
172 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,172 @@ | ||
| interface Backgrounds { | ||
| background_css: String; | ||
| background_tailwind: String; | ||
| } | ||
| export const backgrounds:Backgrounds[] = [ | ||
| { | ||
| background_tailwind:`<div class="absolute top-0 z-[-2] h-screen w-screen bg-neutral-950 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>`, | ||
| background_css: "" | ||
| }, | ||
| { | ||
| background_tailwind:`<div class="absolute top-0 z-[-2] h-screen w-screen bg-neutral-950" style="background-image:linear-gradient(38.73deg, rgba(204, 0, 187, 0.25) 0%, rgba(201, 32, 184, 0) 50%), linear-gradient(141.27deg, rgba(0, 70, 209, 0) 50%, rgba(0, 70, 209, 0.25) 100%)"></div>`, | ||
| background_css: "" | ||
| }, | ||
| { | ||
| background_tailwind:`<div class="absolute top-0 z-[-2] h-screen w-screen bg-white bg-[radial-gradient(100%_50%_at_50%_0%,rgba(0,163,255,0.13)_0,rgba(0,163,255,0)_50%,rgba(0,163,255,0)_100%)]"></div>`, | ||
| background_css: "" | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute inset-0 -z-10 h-full w-full bg-white [background:radial-gradient(125%_125%_at_50%_10%,#fff_40%,#63e_100%)]"></div>`, | ||
| background_css: "" | ||
| }, | ||
| { | ||
| background_tailwind: ` <div class="absolute w-full h-full bg-zinc-900 "> | ||
| <div class="absolute top-1/4 left-1/2 h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle_farthest-side,rgba(0,255,242,0.15),rgba(255,255,255,0))]"></div> | ||
| <div class="absolute bottom-1/4 right-1/2 h-[600px] w-[600px] rounded-full bg-[radial-gradient(circle_farthest-side,rgba(0,255,242,0.15),rgba(255,255,255,0))]"></div> | ||
| </div>`, | ||
| background_css: `<div style="background-color:#0b0d13; width:100%; height:100%; position:absolute; "> | ||
| <div style=" | ||
| position: absolute; | ||
| bottom: 0; | ||
| right: -10%; | ||
| top: -10%; | ||
| height: 500px; | ||
| width: 500px; | ||
| border-radius: 50%; | ||
| background: radial-gradient( | ||
| circle farthest-side, | ||
| rgba(0, 200, 255, 0.15), | ||
| rgba(255, 255, 255, 0) | ||
| );"> | ||
| </div> | ||
| <div style="position: absolute; | ||
| bottom: 0%; | ||
| left: -10%; | ||
| height: 500px; | ||
| width: 500px; | ||
| border-radius: 50%; | ||
| background: radial-gradient( | ||
| circle farthest-side, | ||
| rgba(0, 255, 242, 0.15), | ||
| rgba(255, 255, 255, 0) | ||
| );"></div> | ||
| </div>` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem]"><div class="absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(circle_800px_at_100%_200px,#d5c5ff,transparent)]"></div></div>`, | ||
| background_css: "" | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute h-full w-full bg-slate-950"><div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]"></div></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute top-0 -z-10 h-full w-full bg-white"><div class="absolute bottom-auto left-auto right-0 top-0 h-[500px] w-[500px] -translate-x-[30%] translate-y-[20%] rounded-full bg-[rgba(173,109,244,0.5)] opacity-50 blur-[80px]"></div></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute top-0 z-[-2] h-screen w-screen bg-white bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]"><div class="absolute left-0 right-0 top-0 -z-10 m-auto h-[310px] w-[310px] rounded-full bg-fuchsia-400 opacity-20 blur-[100px]"></div></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]"><div class="absolute left-0 right-0 top-0 -z-10 m-auto h-[310px] w-[310px] rounded-full bg-fuchsia-400 opacity-20 blur-[100px]"></div></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem]"></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute h-full w-full bg-white "><div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute inset-0 -z-10 h-full w-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,#000_40%,#63e_100%)]"></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute h-full w-full bg-neutral-900"><div class="absolute inset-0 bg-fuchsia-400 bg-[size:20px_20px] opacity-20 blur-[100px]"></div></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute h-full w-full bg-slate-950"><div class="absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(circle_500px_at_50%_200px,#3e3e3e,transparent)]"></div></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute h-full w-full bg-slate-950"><div class="absolute bottom-0 left-[-20%] right-0 top-[-10%] h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle_farthest-side,rgba(255,0,182,.15),rgba(255,255,255,0))]"></div><div class="absolute bottom-0 right-[-20%] top-[-10%] h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle_farthest-side,rgba(255,0,182,.15),rgba(255,255,255,0))]"></div></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute h-full w-full bg-black"><div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]"></div><div class="absolute left-0 right-0 top-[-10%] h-[1000px] w-[1000px] rounded-full bg-[radial-gradient(circle_400px_at_50%_300px,#fbfbfb36,#000)]"></div></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute top-0 z-[-2] h-screen w-screen bg-[#000000] bg-[radial-gradient(#ffffff33_1px,#00091d_1px)] bg-[size:20px_20px]"></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: `<div class="absolute h-full w-full bg-slate-950"><div class="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div></div>`, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: ``, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: ``, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: ``, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: ``, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: ``, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: ``, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: ``, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: ``, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: ``, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: ``, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: ``, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: ``, | ||
| background_css: `` | ||
| }, | ||
| { | ||
| background_tailwind: ``, | ||
| background_css: `` | ||
| } | ||
| ] |