104 lines
No EOL
7.7 KiB
HTML
104 lines
No EOL
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Cyber Circle Creator — Discover your Fediverse Circle</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="icon" href="img/favicon.png">
|
|
<meta name="description" content="Discover your Fediverse Circle in a cyberpunk style with Cyber Circle Creator.">
|
|
<!-- Open Graph / Facebook - eeeech! -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="Cyber Circle Creator">
|
|
<meta property="og:description" content="Discover your Fediverse Circle in a cyberpunk style with Cyber Circle Creator.">
|
|
<meta property="og:url" content="https://ccc.cyber.to">
|
|
<meta property="og:image" content="https://ccc.cyber.to/img/social.png">
|
|
<!-- Shitter - Kill Musk, it will be fun :) -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="Cyber Circle Creator">
|
|
<meta name="twitter:description" content="Discover your Fediverse Circle in a cyberpunk style with Cyber Circle Creator.">
|
|
<meta name="twitter:url" content="https://ccc.cyber.to">
|
|
<meta name="twitter:image" content="https://ccc.cyber.to/img/social.png">
|
|
<!-- Creator / Author / Other -->
|
|
<meta name="author" content="Ramses Revengeday">
|
|
<meta name="theme-color" content="#1bec99">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta property="fediverse:creator" content="@revengeday@corteximplant.com" />
|
|
</head>
|
|
|
|
<body>
|
|
<section class="hero"> <img src="img/circle.jpg" alt="Hero Banner">
|
|
<div class="hero-text">
|
|
<h1>Cyber Circle Creator</h1> </div>
|
|
</section>
|
|
<main>
|
|
<section class="form-section">
|
|
<div class="form-container">
|
|
<form id="generateForm" onsubmit="(async () => await circleMain())(); return false;">
|
|
<input id="txt_mastodon_handle" type="text" placeholder="e.g. @datakrash@corteximplant.net" required>
|
|
<div class="radio-group">
|
|
<input type="radio" id="detect" name="backend" value="detect" autocomplete="off" checked>
|
|
<label for="detect">↳ Autodetect</label>
|
|
<input type="radio" id="mastodon" name="backend" value="mastodon" autocomplete="off">
|
|
<label for="mastodon">Mastodon API</label>
|
|
<input type="radio" id="misskey" name="backend" value="misskey" autocomplete="off">
|
|
<label for="misskey">Misskey API</label>
|
|
<input type="radio" id="pleroma" name="backend" value="pleroma" autocomplete="off">
|
|
<label for="pleroma">Pleroma API</label>
|
|
</div>
|
|
<button type="submit" id="generateButton">⟨ Generate ⟩</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
<section class="output-section"> <span id="outInfo"></span>
|
|
<div class="canvas-container">
|
|
<canvas alt="A central profile picture surrounded by numerous smaller circular images, mostly profile pictures of various styles and subjects, linked by lines. The background is black with green text saying Cyber Circle Creator in the top left corner." id="canvas" width="1000" height="1000" style="
|
|
background-image: url('img/circle.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
"></canvas>
|
|
</div>
|
|
<div id="outDiv">
|
|
<h2><bdi id="outSelfUser"></bdi>'s Fedi Circle</h2>
|
|
<div id="usersDiv">
|
|
<div id="ud1" class="userSubDiv"></div>
|
|
<div id="ud2" class="userSubDiv"></div>
|
|
<div id="ud3" class="userSubDiv"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="faq-section">
|
|
<h3>Frequently Asked Questions</h3>
|
|
<p><strong>Q:</strong> Why is a Cyberpunk figure displayed instead of a profile picture?</p>
|
|
<p><strong>A:</strong> If a user's profile picture cannot be loaded, a placeholder image (in this case, a Cyberpunk figure) is displayed. This is done to provide a visual substitute in case the original image is unavailable due to loading errors or missing image URLs.</p>
|
|
<hr>
|
|
<p><strong>Q:</strong> What do the different lines on the canvas represent?</p>
|
|
<p><strong>A:</strong> <strong>Green Lines:</strong> These are default dashed lines that run from the center of the canvas to the user positions. They serve as visual connections between the main user and the other participants. <strong>Yellow Lines:</strong> These lines may be randomly drawn between different user positions to create additional visual connections and make the layout more dynamic. <strong>Red Line:</strong> The red line randomly connects the center of the canvas to one of the user positions, adding a highlight to the layout and emphasizing a particular connection.</p>
|
|
<hr>
|
|
<p><strong>Q:</strong> Why is there a maze background on the canvas?</p>
|
|
<p><strong>A:</strong> It adds visual complexity to the canvas and is created using random diagonal lines in a grid pattern.</p>
|
|
<hr>
|
|
<p><strong>Q:</strong> What happens if there is a delay in loading avatars?</p>
|
|
<p><strong>A:</strong> During the loading of avatars, a progress status is shown on the webpage indicating <strong>how many avatars have been successfully loaded</strong> (e.g., "Loading avatars: 1/10"). Once all avatars are loaded, this display disappears.</p>
|
|
<hr>
|
|
<p><strong>Q:</strong> What does the message "Something went horribly wrong, couldn't fetch your user: Error fetching .../api/v1/accounts/lookup?acct=" mean?</p>
|
|
<p><strong>A:</strong> This message indicates that the instance is currently not responding. Please try again later.</p>
|
|
<hr>
|
|
<p><strong>Q:</strong> Is it possible to directly link to my account?</p>
|
|
<p><strong>A:</strong> Yes, it is possible. Simply change the URL to <i>https://ccc.cyber.to/?@revengeday@corteximplant.com</i>, replacing <i>@revengeday@corteximplant.com</i> with your own account details.</p>
|
|
<hr>
|
|
</section>
|
|
<section class="credits-section">
|
|
<h3>Credits</h3>
|
|
<p> Cyber Circle Creator builds upon <a href="https://github.com/AMNatty/Mastodon-Circles" target="_blank" rel="nofollow">AMNatty/Mastodon-Circles</a>, which is a further development of <a href="https://github.com/andigandhi/Mastodon-Circles" target="_blank" rel="nofollow">andigandhi/Mastodon-Circles</a>. This project is licensed under the <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="nofollow">GNU Affero General Public License</a> and benefits from Fedibird support by <a href="https://github.com/noellabo/Mastodon-Circles" target="_blank" rel="nofollow">noellabo</a>, enhancing its functionality even further. We invite you to <a href="https://git.cyberwa.re/revengeday/cyber-circle-creator" target="_blank" rel="nofollow">create your own fork of Cyber Circle Creator</a> ♥ Moreover, the design employs the <a href="https://github.com/rektdeckard/departure-mono" target="_blank" rel="nofollow">departure-mono</a> typeface, crafted by rektdeckard and available under the <a href="https://opensource.org/licenses/MIT" target="_blank" rel="nofollow">MIT License</a>. </p>
|
|
</section>
|
|
</main>
|
|
<footer id="footer">
|
|
<p class="footer-note">Created by revengeday → <a href="https://corteximplant.com/@revengeday">@revengeday@corteximplant.com</a></p>
|
|
</footer>
|
|
<script src="js/create-circle.js"></script>
|
|
<script src="js/image.js"></script>
|
|
<script src="js/url.js"></script>
|
|
</body>
|
|
</html> |