Spaces:

Nymbo
/

repo-to-text

Running

App Files Files Community

Nymbo commited on Oct 1, 2024

Commit

6173a67

verified ·

1 Parent(s): 078092d

making it dark mode

Browse files

Files changed (1) hide show

index.html +77 -17

index.html CHANGED Viewed

@@ -14,11 +14,71 @@
     <meta property="og:type" content="website">
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
     <style>
         .directory-checkbox + button:focus {
             outline: none;
         }
         .directory-checkbox + button:hover {
-            color: #4a5568;
         }
     </style>
     <script src="https://cdn.tailwindcss.com"></script>
@@ -34,38 +94,38 @@
         gtag('config', 'G-CYF86LN5WM');
     </script>
 </head>
-<body class="bg-gray-100 min-h-screen p-4 md:p-8 text-gray-600">
-    <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md p-6 relative">
         <a href="https://github.com/abinthomasonline/repo2txt" target="_blank" class="absolute top-2 right-2">
-            <i data-lucide="github" class="w-8 h-8 text-gray-600 hover:text-gray-800"></i>
         </a>
-        <h1 class="text-3xl font-bold mb-2 text-center text-gray-600">GitHub to Plain Text</h1>
-        <p class="text-lg text-center text-gray-500 mb-6">Convert Code in GitHub to a Single Formatted Text File</p>
         <form id="repoForm" class="space-y-4">
             <div>
-                <label for="repoUrl" class="block text-sm font-medium text-gray-600">GitHub URL:</label>
-                <input type="text" id="repoUrl" name="repoUrl" required class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 h-10 px-2">
             </div>
             <div class="hidden">
-                <label for="ref" class="block text-sm font-medium text-gray-600">Ref (branch/tag/commit sha):</label>
-                <input type="text" id="ref" name="ref" class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 h-10 px-2">
             </div>
             <div class="hidden">
-                <label for="path" class="block text-sm font-medium text-gray-600">Path (subdirectory):</label>
-                <input type="text" id="path" name="path" class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 h-10 px-2">
             </div>
             <div>
-                <label for="accessToken" class="block text-sm font-medium text-gray-600 flex items-center">
                     Personal Access Token (optional - for private repositories and higher rate limits):
-                    <button type="button" id="showMoreInfo" class="ml-2 text-blue-500 hover:text-blue-700">
                         <i data-lucide="info" class="w-4 h-4"></i>
                     </button>
                 </label>
                 <div id="tokenInfo" class="hidden mt-2">
-                    <p class="text-sm text-gray-500">[This code runs in your browser. We don't use or store your token.]</p>
-                    <p class="mt-1"><a href="https://github.com/settings/tokens/new?description=repo2file&scopes=repo" target="_blank" class="text-sm text-gray-500 hover:text-gray-700"><i data-lucide="external-link" class="w-5 h-5 inline-block"></i> Get your token</a></p>
                 </div>
-                <input type="text" id="accessToken" name="accessToken" class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 h-10 px-2">
             </div>
             <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline flex items-center justify-center">

     <meta property="og:type" content="website">
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
     <style>
+        body {
+            background-color: #1a202c; /* Dark background */
+            color: #e2e8f0; /* Light text color */
+        }
         .directory-checkbox + button:focus {
             outline: none;
         }
         .directory-checkbox + button:hover {
+            color: #cbd5e0; /* Lighter hover color */
+        }
+        .max-w-4xl {
+            background-color: #2d3748; /* Darker background for container */
+            color: #e2e8f0; /* Light text */
+        }
+        input, textarea {
+            background-color: #4a5568; /* Dark input background */
+            color: #edf2f7; /* Light input text color */
+            border: 1px solid #718096; /* Border matching the theme */
+        }
+        input:focus, textarea:focus {
+            border-color: #63b3ed; /* Focus border color (light blue) */
+            outline: none;
+        }
+        button {
+            transition: background-color 0.3s;
+        }
+        button.bg-blue-500 {
+            background-color: #4299e1; /* Blue for button */
+        }
+        button.bg-blue-500:hover {
+            background-color: #3182ce; /* Darker blue on hover */
+        }
+        button.bg-green-500 {
+            background-color: #48bb78; /* Green button */
+        }
+        button.bg-green-500:hover {
+            background-color: #38a169; /* Darker green on hover */
+        }
+        button.bg-indigo-500 {
+            background-color: #667eea; /* Indigo button */
+        }
+        button.bg-indigo-500:hover {
+            background-color: #5a67d8; /* Darker indigo on hover */
+        }
+        button.bg-purple-500 {
+            background-color: #9f7aea; /* Purple button */
+        }
+        button.bg-purple-500:hover {
+            background-color: #805ad5; /* Darker purple on hover */
+        }
+        .text-gray-600 {
+            color: #a0aec0; /* Adjust to lighter gray for text */
+        }
+        .text-gray-500 {
+            color: #cbd5e0; /* Lighter gray text */
+        }
+        a i {
+            color: #e2e8f0; /* Light color for icons */
+        }
+        a i:hover {
+            color: #edf2f7; /* Even lighter color on hover */
+        }
+        .rounded-md {
+            background-color: #2d3748; /* Dark background for output text */
+            border-color: #4a5568; /* Matching border */
         }
     </style>
     <script src="https://cdn.tailwindcss.com"></script>
         gtag('config', 'G-CYF86LN5WM');
     </script>
 </head>
+<body class="bg-gray-900 min-h-screen p-4 md:p-8 text-gray-200">
+    <div class="max-w-4xl mx-auto bg-gray-800 rounded-lg shadow-md p-6 relative">
         <a href="https://github.com/abinthomasonline/repo2txt" target="_blank" class="absolute top-2 right-2">
+            <i data-lucide="github" class="w-8 h-8 text-gray-400 hover:text-gray-300"></i>
         </a>
+        <h1 class="text-3xl font-bold mb-2 text-center text-gray-200">GitHub to Plain Text</h1>
+        <p class="text-lg text-center text-gray-400 mb-6">Convert Code in GitHub to a Single Formatted Text File</p>
         <form id="repoForm" class="space-y-4">
             <div>
+                <label for="repoUrl" class="block text-sm font-medium text-gray-300">GitHub URL:</label>
+                <input type="text" id="repoUrl" name="repoUrl" required class="mt-1 block w-full rounded-md border border-gray-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 h-10 px-2">
             </div>
             <div class="hidden">
+                <label for="ref" class="block text-sm font-medium text-gray-300">Ref (branch/tag/commit sha):</label>
+                <input type="text" id="ref" name="ref" class="mt-1 block w-full rounded-md border border-gray-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 h-10 px-2">
             </div>
             <div class="hidden">
+                <label for="path" class="block text-sm font-medium text-gray-300">Path (subdirectory):</label>
+                <input type="text" id="path" name="path" class="mt-1 block w-full rounded-md border border-gray-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 h-10 px-2">
             </div>
             <div>
+                <label for="accessToken" class="block text-sm font-medium text-gray-300 flex items-center">
                     Personal Access Token (optional - for private repositories and higher rate limits):
+                    <button type="button" id="showMoreInfo" class="ml-2 text-blue-500 hover:text-blue-400">
                         <i data-lucide="info" class="w-4 h-4"></i>
                     </button>
                 </label>
                 <div id="tokenInfo" class="hidden mt-2">
+                    <p class="text-sm text-gray-400">[This code runs in your browser. We don't use or store your token.]</p>
+                    <p class="mt-1"><a href="https://github.com/settings/tokens/new?description=repo2file&scopes=repo" target="_blank" class="text-sm text-blue-500 hover:text-blue-400"><i data-lucide="external-link" class="w-5 h-5 inline-block"></i> Get your token</a></p>
                 </div>
+                <input type="text" id="accessToken" name="accessToken" class="mt-1 block w-full rounded-md border border-gray-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 h-10 px-2">
             </div>
             <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline flex items-center justify-center">