Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179<!DOCTYPE html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bluesky Recommendations</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background: #f8f5d7; min-height: 100vh; padding: 40px 20px; }
.container { max-width: 750px; margin: 0 auto; padding-top: 80px; }
.list-contianer { max-width: 500px; }
h1 { color: rgb(0, 0, 0); text-align: center; margin-bottom: 40px; font-size: 2.5em; }
.profiles-grid { display: flex; gap: 24px; padding: 12px; }
.profile-card { background: rgb(255, 254, 241); border-radius: 10px; padding: 24px; margin: 15px 10px; box-shadow: 0 5px 5px rgba(0,0,0,0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; display: flex; align-items: center; }
.profile-card:hover { transform: scale(1.02); box-shadow: 0 5px 5px rgba(0,0,0,0.3); }
.profile-image { max-width: 80px; max-height: 80px; aspect-ratio: 1; border-radius: 55px; object-fit: cover; }
.profile-info { text-align: left; margin-left: 25px; }
.display-name { font-size: 1.4em; font-weight: 600; color: #2d3748; margin-bottom: 2px; }
.did { font-size: 0.9em; color: #718096; font-family: 'Courier New', monospace; background: #f7fafc; padding: 6px 12px; margin-bottom: 4px; border-radius: 8px; word-break: break-all; width: fit-content; } .description { font-size: 0.95em; color: #4a5568; line-height: 1.5; margin-bottom: 12px; padding-left: 6px; }
.search-container { margin: 0 auto 30px; padding: 0 10px; } .search-container form { display: flex; gap: 10px; width: 100%; } .search-input { flex: 1; padding: 12px 16px; font-size: 1em; border: 2px solid #e2e8f0; border-radius: 8px; background: rgb(255, 254, 241); font-family: 'Courier New', monospace; } .search-input:focus { outline: none; border-color: #667eea; } .search-button { padding: 12px 24px; font-size: 1em; font-weight: 600; background: #667eea; color: white; border: none; border-radius: 8px; cursor: pointer; transition: background 0.3s ease; } .search-button:hover { background: #5568d3; }
.blurb { text-align: center; margin-bottom: 10px; } </style></head><body> <div class="container"> <h1>Bluesky Account Recommendations</h1>
<p class="blurb">Enter your bluesky handle or DID and get a list of recommended accounts!</p>
<div class="search-container"> <form onsubmit="event.preventDefault(); searchProfile();"> <input type="text" id="searchInput" placeholder="Enter handle or DID (e.g. johndoe.bsky.social)..." class="search-input" value="{{ query }}"> <button type="submit" class="search-button">Go</button> </form> </div>
<ul class="list-container"> {% for profile in profiles %} <div class="profile-card" onclick="window.open('https://bsky.app/profile/{{ profile.handle }}', '_blank')"> <img src={{ profile.avatar }} alt="Profile" class="profile-image"> <div class="profile-info"> <div class="display-name">@{{ profile.handle }}</div> <div class="did">{{ profile.did }}</div> <div class="description">{{ profile.description }}</div> </div> </div> {% endfor %} </ul>
<script> function searchProfile() { const searchValue = document.getElementById('searchInput').value.trim(); if (searchValue) { const url = new URL(window.location.href); url.searchParams.set('query', searchValue); window.location.href = url.toString(); } } </script> </div></body>