updated

.env.example

@@ -0,0 +1 @@
+GEMINI_PRO_API_KEY=

summarly/index.html

@@ -5,6 +5,9 @@
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
   </style>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Playwrite+PE:[email protected]&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+  </style>
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />

summarly/src/App.css

@@ -3,11 +3,14 @@
   margin: 0 auto;
   padding: 2rem;
   font-family: "Poppins", sans-serif;
-  background-color: rgba(0,0,0,0.06);
+  background-color: rgba(0,0,0,0.3); /* Adjusted for translucency */
 }
 
 .card {
   padding: 2em;
+  background-color: rgba(0,0,0,0.3); /* Card specific transparency */
+  border-radius: 10px; /* Optional: Adds rounded corners for better aesthetics */
+  backdrop-filter: blur(5px); /* Optional: Adds a blur effect for better readability */
 }
 
 .markdown-content p {
@@ -22,11 +25,34 @@
   font-size: 28px;
 }
 
-.markdown-content ul{
+.markdown-content ul {
   font-size: 18px;
   line-height: 26px;
 }
 
-.markdown-content li{
+.markdown-content li {
   font-size: 15px;
+}
+
+/* HTML: <div class="loader"></div> */
+.loader {
+  display: inline-grid;
+  background: #fff;
+  filter: blur(4px) contrast(12);
+}
+.loader:before {
+  content: "";
+  height: 17px;
+  width: 83px;
+  aspect-ratio: 3;
+  --c: #0000 64%,#000 66% 98%,#0000 101%;
+  background:
+    radial-gradient(35% 146% at 50% 159%,var(--c)) 0 0,
+    radial-gradient(35% 146% at 50% -59%,var(--c)) 100% 100%;
+  background-size: calc(200%/3) 50%;
+  background-repeat: repeat-x;
+  animation: l11 .8s infinite linear;
+}
+@keyframes l11{
+  to {background-position: -200% 0,-100% 100%}
 }

summarly/src/App.jsx

@@ -3,12 +3,19 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import DOMPurify from 'dompurify';
 import './App.css';
+import poster from './assets/poster.png';
 
 function App() {
   return (
     <>
-      <h1>Summarly</h1>
-      <Summarizer />
+      <h1 style={{fontFamily: "Playwrite PE", textAlign: "center"}}>Summarly</h1>
+
+      <h2 style={{textAlign: "center"}}>Your AI Sidekick for Quick YouTube Summaries</h2>
+      <br />
+      <br />
+      <img src={poster} alt="" height="300px" />
+      <br /><br />
+
     </>
   );
 }
@@ -46,7 +53,7 @@ const Summarizer = () => {
   return (
     <div>
       <button onClick={handleSummarizeClick} disabled={isLoading}>
-        {isLoading ? 'Summarising...' : 'Summarise'}
+        {isLoading ? <span className="loader"></span> : <span style={{color: 'black'}}>Summarise</span>}
       </button>
       {error && <div className="error">{error}</div>}
       <div id="output" className="markdown-content">

summarly/src/index.css

@@ -2,11 +2,9 @@
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: rgba(0, 0, 0, 0.068);
-
+  background-color: rgba(0, 0, 0, 0.3); /* Increased transparency */
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -28,9 +26,8 @@ body {
   place-items: center;
   min-width: 500px;
   min-height: 100vh;
-  right: 0px;
+  background-color: rgba(0, 0, 0, 0.3); /* Increased transparency */
   color: rgba(255, 255, 255, 0.87);
-  background-color: rgba(0, 0, 0, 0.11);
 }
 
 h1 {
@@ -45,7 +42,7 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: #ffffff;
   cursor: pointer;
   transition: border-color 0.25s;
 }
@@ -60,7 +57,7 @@ button:focus-visible {
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
-    background-color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.8); /* Light translucent background */
   }
   a:hover {
     color: #747bff;