Initial commit: ART star count display for tablets with GitHub Pages deployment

Author: corbt

.github/workflows/deploy.yml

@@ -0,0 +1,37 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: '.'
+      
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -0,0 +1,41 @@
+# ART Star Count Display
+
+A simple website that displays the current star count for the [OpenPipe/ART](https://github.com/OpenPipe/ART) GitHub repository.
+
+## Features
+- Large, tasteful display of star count
+- Auto-refreshes every 30 seconds
+- Loads live count on page load
+- Clean, modern design
+
+## Deployment
+
+### Option 1: Vercel (Recommended - Easiest)
+1. Go to [vercel.com](https://vercel.com)
+2. Sign up/login with GitHub
+3. Click "Add New..." → "Project"
+4. Import this repository or drag the `art-star-count` folder
+5. Click "Deploy"
+
+### Option 2: Netlify Drop
+1. Go to [app.netlify.com/drop](https://app.netlify.com/drop)
+2. Drag the `art-star-count` folder into the browser
+3. Your site will be deployed instantly
+
+### Option 3: GitHub Pages
+1. Create a new GitHub repository
+2. Push this code to the repository
+3. Go to Settings → Pages
+4. Enable GitHub Pages from the main branch
+5. Your site will be available at `https://[username].github.io/[repo-name]`
+
+## Local Development
+```bash
+# Using Python
+python -m http.server 8000
+
+# Or using Node.js
+npx http-server
+```
+
+Then open http://localhost:8000 in your browser.

index.html

@@ -19,10 +19,12 @@
         .container {
             text-align: center;
             background: white;
-            padding: 3rem 4rem;
+            padding: 5vw 6vw;
             border-radius: 20px;
             box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
             transition: transform 0.3s ease;
+            width: 90vw;
+            max-width: 1200px;
         }
 
         .container:hover {
@@ -31,55 +33,73 @@
 
         h1 {
             color: #2d3748;
-            font-size: 2.5rem;
-            margin-bottom: 2rem;
+            font-size: clamp(3rem, 6vw, 5rem);
+            margin-bottom: 3vh;
             font-weight: 600;
         }
 
         .star-count {
-            font-size: 5rem;
+            font-size: clamp(6rem, 12vw, 10rem);
             font-weight: 700;
             color: #4a5568;
-            margin: 1rem 0;
+            margin: 2vh 0;
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 1rem;
+            gap: 2vw;
         }
 
         .star-icon {
             color: #f6e05e;
-            font-size: 4rem;
+            font-size: clamp(5rem, 10vw, 8rem);
         }
 
         .loading {
             color: #718096;
-            font-size: 3rem;
+            font-size: clamp(3rem, 6vw, 5rem);
         }
 
         .error {
             color: #e53e3e;
-            font-size: 1.5rem;
+            font-size: clamp(1.5rem, 3vw, 2.5rem);
         }
 
         .refresh-info {
             color: #718096;
-            font-size: 0.9rem;
-            margin-top: 2rem;
+            font-size: clamp(1rem, 2vw, 1.5rem);
+            margin-top: 3vh;
         }
 
         .github-link {
-            margin-top: 1.5rem;
+            margin-top: 2vh;
             display: inline-block;
             color: #4a5568;
             text-decoration: none;
-            font-size: 1.1rem;
+            font-size: clamp(1.2rem, 2.5vw, 2rem);
             transition: color 0.3s ease;
         }
 
         .github-link:hover {
             color: #2d3748;
         }
+        
+        @media (orientation: portrait) {
+            .container {
+                padding: 8vw;
+            }
+            
+            h1 {
+                font-size: clamp(4rem, 8vw, 6rem);
+            }
+            
+            .star-count {
+                font-size: clamp(8rem, 16vw, 12rem);
+            }
+            
+            .star-icon {
+                font-size: clamp(6rem, 12vw, 10rem);
+            }
+        }
     </style>
 </head>
 <body>