-
-
Save adrianhajdin/23b2d30e39cd2d92cfa9f436c19afe27 to your computer and use it in GitHub Desktop.
@tailwind base; | |
@tailwind components; | |
@tailwind utilities; | |
/* | |
Note: The styles for this gradient grid background is heavily inspired by the creator of this amazing site (https://dub.sh) – all credits go to them! | |
*/ | |
.main { | |
width: 100vw; | |
min-height: 100vh; | |
position: fixed; | |
display: flex; | |
justify-content: center; | |
padding: 120px 24px 160px 24px; | |
pointer-events: none; | |
} | |
.main:before { | |
background: radial-gradient(circle, rgba(2, 0, 36, 0) 0, #fafafa 100%); | |
position: absolute; | |
content: ""; | |
z-index: 2; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
} | |
.main:after { | |
content: ""; | |
background-image: url("/src/assets/grid.svg"); | |
z-index: 1; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
opacity: 0.4; | |
filter: invert(1); | |
} | |
.gradient { | |
height: fit-content; | |
z-index: 3; | |
width: 100%; | |
max-width: 640px; | |
background-image: radial-gradient( | |
at 27% 37%, | |
hsla(215, 98%, 61%, 1) 0px, | |
transparent 0% | |
), | |
radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%), | |
radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%), | |
radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%), | |
radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%), | |
radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%), | |
radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%); | |
position: absolute; | |
content: ""; | |
width: 100%; | |
height: 100%; | |
filter: blur(100px) saturate(150%); | |
top: 80px; | |
opacity: 0.15; | |
} | |
@media screen and (max-width: 640px) { | |
.main { | |
padding: 0; | |
} | |
} | |
/* Tailwind Styles */ | |
.app { | |
@apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6; | |
} | |
.black_btn { | |
@apply rounded-full border border-black bg-black py-1.5 px-5 text-sm text-white transition-all hover:bg-white hover:text-black; | |
} | |
.head_text { | |
@apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl text-center; | |
} | |
.orange_gradient { | |
@apply bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent; | |
} | |
.desc { | |
@apply mt-5 text-lg text-gray-600 sm:text-xl text-center max-w-2xl; | |
} | |
.url_input { | |
@apply block w-full rounded-md border border-gray-200 bg-white py-2.5 pl-10 pr-12 text-sm shadow-lg font-satoshi font-medium focus:border-black focus:outline-none focus:ring-0; | |
} | |
.submit_btn { | |
@apply hover:border-gray-700 hover:text-gray-700 absolute inset-y-0 right-0 my-1.5 mr-1.5 flex w-10 items-center justify-center rounded border border-gray-200 font-sans text-sm font-medium text-gray-400; | |
} | |
.link_card { | |
@apply p-3 flex justify-start items-center flex-row bg-white border border-gray-200 gap-3 rounded-lg cursor-pointer; | |
} | |
.copy_btn { | |
@apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur flex justify-center items-center cursor-pointer; | |
} | |
.blue_gradient { | |
@apply font-black bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent; | |
} | |
.summary_box { | |
@apply rounded-xl border border-gray-200 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur p-4; | |
} |
<!-- satoshi font family --> | |
<link | |
href="https://api.fontshare.com/v2/css?f[]=satoshi@1,900,700,500,300,400&display=swap" | |
rel="stylesheet" | |
/> | |
<!-- inter font family --> | |
<link | |
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" | |
rel="stylesheet" | |
/> |
getting this
@reduxjs_toolkit_query_react.js?v=b23c70a8:109
GET https://article-extractor-and-summarizer.p.rapidapi.com/summarize?url=https%3A%2F%2Fwww.w3schools.com%2F&length=3 503 (Service Unavailable)
I had the same problem with the 403 forbidden error and found out that it wasn't receiving the token like it was supposed to. I had my .env file in the src directory and I moved it to the root directory (the same area that index.html, vite.config, and the readme is on) and it works great. Thought that might help
Demo.jsx:17
GET https://article-extractor-and-summarizer.p.rapidapi.com/summarize?url=https%3A%2F%2Fwww.health.harvard.edu%2Fstaying-healthy%2Fcan-you-feel-younger-than-your-age&length=3 net::ERR_INTERNET_DISCONNECTED
Would appreciate some help.
For @layer directive problem (postcss) after importing App.css - use below code
@layer base {
.shadow-custom {
@apply shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)];
}
}
Im getting this error Dont understand what to do GET https://article-extractor-and-summarizer.p.rapidapi.com/summarize?url=https%3A%2F%2Fedumantra.net%2Flearn-english%2F124-class-9-10-short-essay-and-article-on-value-of-books%2F&length=3 403 Failed to load resource: the server responded with a status of 403 ()
i am getting the same error , did you resolve it?
i think your .env file in src directory remove and add in folder directory
I think your api key is invalid, please Check your api key?
Im getting this error Dont understand what to do GET https://article-extractor-and-summarizer.p.rapidapi.com/summarize?url=https%3A%2F%2Fedumantra.net%2Flearn-english%2F124-class-9-10-short-essay-and-article-on-value-of-books%2F&length=3 403 Failed to load resource: the server responded with a status of 403 ()
i am getting the same error , did you resolve it?
I got the same error, but with a 503 instead. However, when I tried with a url that actually contains an article, it worked. I tried this url: https://www.health.harvard.edu/staying-healthy/can-you-feel-younger-than-your-age
Try that and see if that works! :)
i also got the 503 error..it worked with an actual article link..but why it is not working with any random link? is there any solution for this??
I am getting this error in my console can anyone help me fix this it says 403 forbidden error in my console. If anybody knows why this is happening or fix pls let me know