Compare commits
10 commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 85f28d1b39 | |||
| e4879af47f | |||
| 217860f4c9 | |||
bb1ff382fe
|
|||
|
f367e4b782
|
|||
|
be8c44ab7d
|
|||
|
002e945bbe
|
|||
|
6128fbacd6
|
|||
|
81312824e4
|
|||
|
c86c5fcf98
|
4 changed files with 241 additions and 212 deletions
69
README.md
69
README.md
|
|
@ -1,38 +1,69 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Cyber Circle Creator
|
# Cyber Circle Creator
|
||||||
|
|
||||||
Yo choom! I'm excited to introduce you to [Cyber Circle Creator](https://ccc.cyber.to), a preem tool that I forked and enhanced. It allows you to explore your Fediverse circle with a cyberpunk twist!
|
Yo choom!
|
||||||
|
|
||||||
## What's It About?
|
Welcome to the preem [Cyber Circle Creator](https://ccc.cyber.to), an advanced visualization tool with a cyberpunk twist that I have forked from [AMNatty/Mastodon-Circles](https://github.com/AMNatty/Mastodon-Circles) and enhanced.
|
||||||
|
|
||||||
Cyber Circle Creator lets you visualize your Fediverse connections in a dynamic, cyber-futuristic way. Just pop in your Fediverse handle, and watch your network come to life in an interactive diagram.
|
This tool allows you to explore and visualize your Fediverse connections through an interactive diagram.
|
||||||
|
|
||||||
This tool builds upon [AMNatty/Mastodon-Circles](https://github.com/AMNatty/Mastodon-Circles) and [andigandhi/Mastodon-Circles](https://github.com/andigandhi/Mastodon-Circles), with some enhancements from [noellabo](https://github.com/noellabo/Mastodon-Circles) including Fedibird support.
|
## Overview
|
||||||
|
|
||||||
## What Can You Do With It?
|
Cyber Circle Creator transforms the way you perceive your Fediverse connections into an immersive, cyber-futuristic visualization. Simply input your Fediverse handle, and watch your network unfold dynamically.
|
||||||
|
|
||||||
- **Visualize Your Network**: Enter your Mastodon or another Fediverse handle to see a graphical display of your connections.
|
This project is built upon enhancements from [AMNatty/Mastodon-Circles](https://github.com/AMNatty/Mastodon-Circles), [andigandhi/Mastodon-Circles](https://github.com/andigandhi/Mastodon-Circles), and contributions from [noellabo](https://github.com/noellabo/Mastodon-Circles) including Fedibird support.
|
||||||
- **Cyberpunk Style**: Enjoy visuals with dynamic lines and intricate, sci-fi-inspired backgrounds.
|
|
||||||
- **Instant Sharing**: Create a link with your handle to easily share your unique circle with others.
|
## Features
|
||||||
|
|
||||||
|
- **Network Visualization**: Enter your Mastodon or other Fediverse handle to generate a visual representation of your network.
|
||||||
|
- **Cyberpunk Aesthetics**: Experience sophisticated designs with dynamic lines and sci-fi-inspired backgrounds.
|
||||||
|
- **Easy Sharing**: Easily share your network visual by creating a unique link with your handle.
|
||||||
|
|
||||||
## Getting Started
|
## Getting Started
|
||||||
|
|
||||||
It's super easy to get started! Just head over to [Cyber Circle Creator](https://ccc.cyber.to) and enter your Fediverse handle. For quick access next time, modify the URL directly by appending your handle like so: `https://ccc.cyber.to/?@username@instance.tld`.
|
To get started with Cyber Circle Creator, visit [Cyber Circle Creator](https://ccc.cyber.to) and input your Fediverse handle. For direct access, append your handle to the URL in this format: `https://ccc.cyber.to/?@username@instance.tld`.
|
||||||
|
|
||||||
|
## Installation Guide
|
||||||
|
|
||||||
|
For those who wish to host Cyber Circle Creator on their own net, follow these steps:
|
||||||
|
|
||||||
|
1. **Download the Project**
|
||||||
|
- Clone the repository via Git:
|
||||||
|
```bash
|
||||||
|
git clone https://git.cyberwa.re/revengeday/cyber-circle-creator.git
|
||||||
|
```
|
||||||
|
- Alternatively, download it as a ZIP or tarball:
|
||||||
|
- [Download ZIP](https://git.cyberwa.re/revengeday/cyber-circle-creator/archive/main.zip)
|
||||||
|
- [Download tar.gz](https://git.cyberwa.re/revengeday/cyber-circle-creator/archive/main.tar.gz)
|
||||||
|
|
||||||
|
2. **Upload Files**
|
||||||
|
- Once downloaded, upload the contents of the project to your preferred webspace.
|
||||||
|
- Make sure your hosting service supports basic HTML/CSS/JavaScript execution.
|
||||||
|
|
||||||
|
3. **Access The Tool**
|
||||||
|
- Navigate to the uploaded directory's `index.html` file in your browser to access Cyber Circle Creator.
|
||||||
|
|
||||||
## Customization Options
|
## Customization Options
|
||||||
|
|
||||||
Make it your own with customization features! You can tweak line colors, avatar sizes, and add cool background patterns. Customization is available via the `config` object in `js/image.js`.
|
Tailor the tool to your liking with various customization features available. Adjust line colors, avatar sizes, and more via the `config` object in `js/image.js`.
|
||||||
|
|
||||||
Here's a quick overview of what you can change:
|
Quick customization pointers:
|
||||||
|
|
||||||
- **`logoSrc`**: Path to your project’s logo image.
|
- **`logoSrc`**: Define the path to your project’s logo image.
|
||||||
- **`backgroundColor`**: Set the background color of your canvas.
|
- **`backgroundColor`**: Set the canvas's background color.
|
||||||
- **`lineColor`**: Choose the color of the connection lines.
|
- **`lineColor`**: Customize the color of the connection lines.
|
||||||
- **Etc.**: There are many more options to play around with if you’re up for some customization.
|
- **And More**: Explore further options to enhance your personalized experience.
|
||||||
|
|
||||||
## Need Help?
|
## Need Assistance?
|
||||||
|
|
||||||
Got questions or need some help? Check out the [FAQ section](https://ccc.cyber.to) on the project site for more info or contact me in the Fediverse. [Fediverse](https://corteximplant.com/@revengeday)
|
For additional information or support, please visit the [FAQ section](https://ccc.cyber.to) on the project site or connect with me on the Fediverse at [corteximplant.com/@revengeday](https://corteximplant.com/@revengeday).
|
||||||
|
|
||||||
## Contribute!
|
## Acknowledgments
|
||||||
|
|
||||||
Interested in contributing? That would be awesome! Feel free to create a fork. Let's see what amazing things you can contribute!
|
A big thank you to all contributors who have helped shape the Cyber Circle Creator. You can find the list of contributors [here](https://git.cyberwa.re/revengeday/cyber-circle-creator/activity/contributors).
|
||||||
|
|
||||||
|
## Contributions Welcome!
|
||||||
|
|
||||||
|
Contributions are highly encouraged! Feel free to fork the repository and propose changes. Your insights and improvements are invaluable to the growth of Cyber Circle Creator.
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--cyber-bg-color: #05130f;
|
--cyber-bg-color: #05130f;
|
||||||
--cyber-font-color: #e8f0f2;
|
--cyber-font-color: #e8f0f2;
|
||||||
|
|
@ -19,6 +20,10 @@
|
||||||
--cyber-hero-overlay: rgba(0, 0, 0, 0.7);
|
--cyber-hero-overlay: rgba(0, 0, 0, 0.7);
|
||||||
--cyber-shadow: rgba(0, 0, 0, 0.5);
|
--cyber-shadow: rgba(0, 0, 0, 0.5);
|
||||||
--cyber-slider-thumb-bg: #fff;
|
--cyber-slider-thumb-bg: #fff;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--spacing-sm: clamp(0.75rem, 0.4295rem + 1.3675vw, 1.25rem);; /* 12px to 20px */
|
||||||
|
--spacing-md: clamp(1.5rem, 1.1795rem + 1.3675vw, 2rem);; /* 16px to 32px */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* General Styles */
|
/* General Styles */
|
||||||
|
|
@ -78,17 +83,22 @@ h1 {
|
||||||
|
|
||||||
/* Main content */
|
/* Main content */
|
||||||
main {
|
main {
|
||||||
padding: 40px 20px;
|
padding-inline: var(--spacing-sm);
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
|
||||||
|
|
||||||
.form-section {
|
section:not(.output-section) {
|
||||||
background-color: #102f2a;
|
text-align: left;
|
||||||
padding: 30px;
|
background-color: #102f2a;
|
||||||
border-radius: 10px;
|
padding: var(--spacing-md);
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
border-radius: 10px;
|
||||||
margin-bottom: 40px;
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||||
|
color: var(--cyber-font-color);
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-group, .radio-group, button {
|
.input-group, .radio-group, button {
|
||||||
|
|
@ -99,7 +109,9 @@ main {
|
||||||
|
|
||||||
input[type="text"] {
|
input[type="text"] {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
width: calc(100% - 20px);
|
font-size: inherit;
|
||||||
|
line-height: 1.35;
|
||||||
|
width: 100%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: 2px solid var(--cyber-primary-color);
|
border: 2px solid var(--cyber-primary-color);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
@ -116,9 +128,14 @@ input[type="text"]:focus {
|
||||||
/* Radio Buttons */
|
/* Radio Buttons */
|
||||||
.radio-group {
|
.radio-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
gap: var(--spacing-sm);
|
||||||
|
|
||||||
|
@media (width > 768px) {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-group input[type="radio"] {
|
.radio-group input[type="radio"] {
|
||||||
|
|
@ -126,8 +143,7 @@ input[type="text"]:focus {
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-group label {
|
.radio-group label {
|
||||||
width: calc(25% - 10px);
|
flex: 1;
|
||||||
margin: 5px;
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -151,11 +167,12 @@ input[type="text"]:focus {
|
||||||
/* Buttons */
|
/* Buttons */
|
||||||
button {
|
button {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: 1.35;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: var(--cyber-bg-color);
|
background-color: var(--cyber-bg-color);
|
||||||
color: var(--cyber-font-color);
|
color: var(--cyber-font-color);
|
||||||
font-size: 1rem;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 2px solid transparent;
|
border: 2px solid transparent;
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
|
@ -194,27 +211,12 @@ button:active {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.output-section {
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#outDiv {
|
#outDiv {
|
||||||
display: none;
|
display: none;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FAQ Section */
|
|
||||||
.faq-section {
|
|
||||||
background-color: var(--cyber-faq-bg-color);
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
|
||||||
color: var(--cyber-font-color);
|
|
||||||
margin-top: 40px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-section h3 {
|
.faq-section h3 {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
@ -242,12 +244,12 @@ button:active {
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--cyber-highlight-color);
|
color: var(--cyber-highlight-color);
|
||||||
padding: 15px;
|
padding: var(--spacing-sm);
|
||||||
background-color: #102f2a;
|
background-color: #102f2a;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 5px;
|
margin-bottom: var(--spacing-sm);
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
|
@ -266,9 +268,9 @@ button:active {
|
||||||
|
|
||||||
.faq-answer {
|
.faq-answer {
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
|
display: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: max-height 0.5s ease;
|
padding: var(--spacing-sm);
|
||||||
padding: 0 15px;
|
|
||||||
background-color: var(--cyber-bg-color);
|
background-color: var(--cyber-bg-color);
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|
@ -277,7 +279,7 @@ button:active {
|
||||||
|
|
||||||
.faq-checkbox:checked + .faq-question + .faq-answer {
|
.faq-checkbox:checked + .faq-question + .faq-answer {
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
padding: 15px;
|
display: block;
|
||||||
}
|
}
|
||||||
/* List Styles for FAQ */
|
/* List Styles for FAQ */
|
||||||
.faq-answer ul,
|
.faq-answer ul,
|
||||||
|
|
@ -304,16 +306,6 @@ button:active {
|
||||||
.faq-answer li::marker {
|
.faq-answer li::marker {
|
||||||
color: var(--cyber-highlight-color);
|
color: var(--cyber-highlight-color);
|
||||||
}
|
}
|
||||||
/* Credits Section */
|
|
||||||
.credits-section {
|
|
||||||
background-color: var(--cyber-faq-bg-color);
|
|
||||||
padding: 30px;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
|
||||||
color: var(--cyber-font-color);
|
|
||||||
margin-top: 40px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.credits-section h3 {
|
.credits-section h3 {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
|
|
@ -430,21 +422,25 @@ button:active {
|
||||||
/* Slider */
|
/* Slider */
|
||||||
.slider-container {
|
.slider-container {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
text-align: center;
|
|
||||||
color: var(--cyber-font-color);
|
color: var(--cyber-font-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
text-align: center;
|
||||||
gap: 15px;
|
gap: var(--spacing-sm) var(--spacing-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-container label {
|
.slider-container label {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
|
|
||||||
|
@media (width < 568px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="range"] {
|
input[type="range"] {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
width: 70%;
|
flex: 1;
|
||||||
margin: 10.5px 0;
|
margin: 10.5px 0;
|
||||||
background-color: var(--cyber-faq-bg-color);
|
background-color: var(--cyber-faq-bg-color);
|
||||||
}
|
}
|
||||||
|
|
@ -526,7 +522,6 @@ input[type="range"]::-ms-thumb {
|
||||||
|
|
||||||
#sliderValueDisplay {
|
#sliderValueDisplay {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
margin-left: 10px;
|
|
||||||
color: var(--cyber-primary-color);
|
color: var(--cyber-primary-color);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
261
index.html
261
index.html
|
|
@ -24,7 +24,7 @@
|
||||||
<meta name="author" content="Ramses Revengeday">
|
<meta name="author" content="Ramses Revengeday">
|
||||||
<meta name="theme-color" content="#1bec99">
|
<meta name="theme-color" content="#1bec99">
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||||
<meta property="fediverse:creator" content="@revengeday@corteximplant.com" />
|
<meta property="fediverse:creator" content="@revengeday@corteximplant.com"/>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -34,142 +34,145 @@
|
||||||
<img src="img/logo.png" alt="Logo">
|
<img src="img/logo.png" alt="Logo">
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<main>
|
<main>
|
||||||
<section class="form-section">
|
<section class="form-section">
|
||||||
<div class="form-container">
|
<div class="form-container">
|
||||||
<form id="generateForm" onsubmit="(async () => await circleMain())(); return false;">
|
<form id="generateForm" onsubmit="(async () => await circleMain())(); return false;">
|
||||||
<input id="txt_mastodon_handle" type="text" placeholder="e.g. @datakrash@corteximplant.net" required>
|
<input id="txt_mastodon_handle" type="text" placeholder="e.g. @datakrash@corteximplant.net" required>
|
||||||
<div class="radio-group">
|
<div class="radio-group">
|
||||||
<input type="radio" id="detect" name="backend" value="detect" autocomplete="off" checked>
|
<input type="radio" id="detect" name="backend" value="detect" autocomplete="off" checked>
|
||||||
<label for="detect">↳ Autodetect</label>
|
<label for="detect">↳ Autodetect</label>
|
||||||
<input type="radio" id="mastodon" name="backend" value="mastodon" autocomplete="off">
|
<input type="radio" id="mastodon" name="backend" value="mastodon" autocomplete="off">
|
||||||
<label for="mastodon">Mastodon API</label>
|
<label for="mastodon">Mastodon API</label>
|
||||||
<input type="radio" id="misskey" name="backend" value="misskey" autocomplete="off">
|
<input type="radio" id="misskey" name="backend" value="misskey" autocomplete="off">
|
||||||
<label for="misskey">Misskey API</label>
|
<label for="misskey">Misskey API</label>
|
||||||
<input type="radio" id="pleroma" name="backend" value="pleroma" autocomplete="off">
|
<input type="radio" id="pleroma" name="backend" value="pleroma" autocomplete="off">
|
||||||
<label for="pleroma">Pleroma API</label>
|
<label for="pleroma">Pleroma API</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="slider-container">
|
<div class="slider-container">
|
||||||
<label for="countSlider">Cyber Score:</label>
|
<label for="countSlider">Cyber Score:</label>
|
||||||
<input type="range" id="countSlider" name="count" min="1" max="1000" value="250" step="1">
|
<input type="range" id="countSlider" name="count" min="1" max="1000" value="250" step="1">
|
||||||
<span id="sliderValueDisplay">250</span>
|
<span id="sliderValueDisplay">250</span>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" id="generateButton">⟨ Generate ⟩</button>
|
<button type="submit" id="generateButton">⟨ Generate ⟩</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="output-section"> <span id="outInfo"></span>
|
<section class="output-section"><span id="outInfo"></span>
|
||||||
<div class="canvas-container">
|
<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="
|
<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-image: url('img/circle.jpg');
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
"></canvas>
|
"></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>
|
||||||
<div id="outDiv">
|
</div>
|
||||||
<h2><bdi id="outSelfUser"></bdi>'s Fedi Circle</h2>
|
</section>
|
||||||
<div id="usersDiv">
|
<section class="faq-section">
|
||||||
<div id="ud1" class="userSubDiv"></div>
|
<h3>Frequently Asked Questions</h3>
|
||||||
<div id="ud2" class="userSubDiv"></div>
|
|
||||||
<div id="ud3" class="userSubDiv"></div>
|
<div class="faq-item">
|
||||||
|
<input type="checkbox" id="faq1" class="faq-checkbox">
|
||||||
|
<label for="faq1" class="faq-question">What does Cyber Score mean?</label>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>The higher you set the value, the more your Fediverse conversations are examined to determine with which users you interact the most. Imagine it as if you would like to view the last 7 days, the last 14 days, the last 30 days. Note that the higher the value you enter, the longer it takes for your Cyber Circle to be generated.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<input type="checkbox" id="faq2" class="faq-checkbox">
|
||||||
|
<label for="faq2" class="faq-question">Why is a Cyberpunk figure displayed instead of a profile picture?</label>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<input type="checkbox" id="faq3" class="faq-checkbox">
|
||||||
|
<label for="faq3" class="faq-question">What do the different lines on the canvas represent?</label>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p><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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<input type="checkbox" id="faq4" class="faq-checkbox">
|
||||||
|
<label for="faq4" class="faq-question">Why is there a maze background on the canvas?</label>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>It adds visual complexity to the canvas and is created using random diagonal lines in a grid pattern.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<input type="checkbox" id="faq5" class="faq-checkbox">
|
||||||
|
<label for="faq5" class="faq-question">What happens if there is a delay in loading avatars?</label>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<input type="checkbox" id="faq6" class="faq-checkbox">
|
||||||
|
<label for="faq6" class="faq-question">What does the message "Something went horribly wrong, couldn't fetch your user: Error fetching .../api/v1/accounts/lookup?acct=" mean?</label>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>This message indicates that the instance is currently not responding. Please try again later.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<input type="checkbox" id="faq7" class="faq-checkbox">
|
||||||
|
<label for="faq7" class="faq-question">Is it possible to directly link to my account?</label>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq-item">
|
||||||
|
<input type="checkbox" id="faq8" class="faq-checkbox">
|
||||||
|
<label for="faq8" class="faq-question">Hey, how do I tell Cyber Circle Creator to buzz off and stop using my data? Where's the opt-out?!</label>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>We understand some users have concerns about data usage by Cyber Circle Creator. This tool is based on a fork of AMNatty/Mastodon-Circles, and user feedback suggests a demand for opt-out capabilities. Here's what we're doing to address these concerns:</p>
|
||||||
|
<ol>
|
||||||
|
<li><strong>User Control:</strong> Cyber Circle Creator operates entirely within your browser, ensuring that no data is stored on external servers. This design choice was made to enhance user privacy and control, and there's no data analysis performed.
|
||||||
|
</li>
|
||||||
|
<li><strong>Initial Measures:</strong> We've added a user-agent to our create-circle.js file. This allows Fediverse administrators to block Cyber Circle Creator if desired. Guidelines on implementing this measure can be found in our wiki under <a href="https://git.cyberwa.re/revengeday/cyber-circle-creator/wiki/Opt-Out%3A+Guide+for+Fediverse+Administrators">Opt-Out: Guide for Fediverse Administrators</a>.
|
||||||
|
</li>
|
||||||
|
<li><strong>Future Plans:</strong> We are evaluating ways to implement an opt-out feature to offer more control over data interaction. For more details or to contribute to this effort, please see our <a href="https://git.cyberwa.re/revengeday/cyber-circle-creator/issues/6">Feature Request: Opt-Out from Cyber Circle Creator #6</a>. We are actively seeking collaborators to help develop this feature, despite the technical complexities due to our codebase.
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
<p>If you have further questions or would like to contribute to this effort, please reach out. We appreciate your patience and feedback as we work to enhance user privacy and satisfaction.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
<section class="faq-section">
|
|
||||||
<h3>Frequently Asked Questions</h3>
|
|
||||||
|
|
||||||
<div class="faq-item">
|
|
||||||
<input type="checkbox" id="faq1" class="faq-checkbox">
|
|
||||||
<label for="faq1" class="faq-question">What does Cyber Score mean?</label>
|
|
||||||
<div class="faq-answer">
|
|
||||||
<p>The higher you set the value, the more your Fediverse conversations are examined to determine with which users you interact the most. Imagine it as if you would like to view the last 7 days, the last 14 days, the last 30 days. Note that the higher the value you enter, the longer it takes for your Cyber Circle to be generated.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
<section class="credits-section">
|
||||||
<div class="faq-item">
|
<h3>Credits</h3>
|
||||||
<input type="checkbox" id="faq2" class="faq-checkbox">
|
<div class="credits-content">
|
||||||
<label for="faq2" class="faq-question">Why is a Cyberpunk figure displayed instead of a profile picture?</label>
|
<p>
|
||||||
<div class="faq-answer">
|
<span class="credits-title">Cyber Circle Creator</span> builds upon <a href="https://github.com/AMNatty/Mastodon-Circles" target="_blank" rel="nofollow">AMNatty/Mastodon-Circles</a>,
|
||||||
<p>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>
|
which is a further development of <a href="https://github.com/andigandhi/Mastodon-Circles" target="_blank" rel="nofollow">andigandhi/Mastodon-Circles</a>.
|
||||||
|
</p>
|
||||||
|
<p>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.</p>
|
||||||
|
<p>
|
||||||
|
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> ♥.
|
||||||
|
</p>
|
||||||
|
<p>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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
</main>
|
||||||
<div class="faq-item">
|
<footer id="footer">
|
||||||
<input type="checkbox" id="faq3" class="faq-checkbox">
|
<p class="footer-note">Created by revengeday → <a href="https://corteximplant.com/@revengeday">@revengeday@corteximplant.com</a></p>
|
||||||
<label for="faq3" class="faq-question">What do the different lines on the canvas represent?</label>
|
</footer>
|
||||||
<div class="faq-answer">
|
<script src="js/create-circle.js"></script>
|
||||||
<p><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>
|
<script src="js/image.js"></script>
|
||||||
</div>
|
<script src="js/url.js"></script>
|
||||||
</div>
|
<script src="js/slider.js"></script>
|
||||||
|
<script>initializeSlider();</script>
|
||||||
<div class="faq-item">
|
|
||||||
<input type="checkbox" id="faq4" class="faq-checkbox">
|
|
||||||
<label for="faq4" class="faq-question">Why is there a maze background on the canvas?</label>
|
|
||||||
<div class="faq-answer">
|
|
||||||
<p>It adds visual complexity to the canvas and is created using random diagonal lines in a grid pattern.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq-item">
|
|
||||||
<input type="checkbox" id="faq5" class="faq-checkbox">
|
|
||||||
<label for="faq5" class="faq-question">What happens if there is a delay in loading avatars?</label>
|
|
||||||
<div class="faq-answer">
|
|
||||||
<p>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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq-item">
|
|
||||||
<input type="checkbox" id="faq6" class="faq-checkbox">
|
|
||||||
<label for="faq6" class="faq-question">What does the message "Something went horribly wrong, couldn't fetch your user: Error fetching .../api/v1/accounts/lookup?acct=" mean?</label>
|
|
||||||
<div class="faq-answer">
|
|
||||||
<p>This message indicates that the instance is currently not responding. Please try again later.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq-item">
|
|
||||||
<input type="checkbox" id="faq7" class="faq-checkbox">
|
|
||||||
<label for="faq7" class="faq-question">Is it possible to directly link to my account?</label>
|
|
||||||
<div class="faq-answer">
|
|
||||||
<p>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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq-item">
|
|
||||||
<input type="checkbox" id="faq8" class="faq-checkbox">
|
|
||||||
<label for="faq8" class="faq-question">Hey, how do I tell Cyber Circle Creator to buzz off and stop using my data? Where's the opt-out?!</label>
|
|
||||||
<div class="faq-answer">
|
|
||||||
<p>We understand some users have concerns about data usage by Cyber Circle Creator. This tool is based on a fork of AMNatty/Mastodon-Circles, and user feedback suggests a demand for opt-out capabilities. Here's what we're doing to address these concerns:</p>
|
|
||||||
<ol>
|
|
||||||
<li><strong>User Control:</strong> Cyber Circle Creator operates entirely within your browser, ensuring that no data is stored on external servers. This design choice was made to enhance user privacy and control, and there's no data analysis performed.</li>
|
|
||||||
<li><strong>Initial Measures:</strong> We've added a user-agent to our create-circle.js file. This allows Fediverse administrators to block Cyber Circle Creator if desired. Guidelines on implementing this measure can be found in our wiki under <a href="https://git.cyberwa.re/revengeday/cyber-circle-creator/wiki/Opt-Out%3A+Guide+for+Fediverse+Administrators">Opt-Out: Guide for Fediverse Administrators</a>.</li>
|
|
||||||
<li><strong>Future Plans:</strong> We are evaluating ways to implement an opt-out feature to offer more control over data interaction. For more details or to contribute to this effort, please see our <a href="https://git.cyberwa.re/revengeday/cyber-circle-creator/issues/6">Feature Request: Opt-Out from Cyber Circle Creator #6</a>. We are actively seeking collaborators to help develop this feature, despite the technical complexities due to our codebase.</li>
|
|
||||||
</ol>
|
|
||||||
<p>If you have further questions or would like to contribute to this effort, please reach out. We appreciate your patience and feedback as we work to enhance user privacy and satisfaction.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section class="credits-section">
|
|
||||||
<h3>Credits</h3>
|
|
||||||
<div class="credits-content">
|
|
||||||
<p>
|
|
||||||
<span class="credits-title">Cyber Circle Creator</span> 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>.
|
|
||||||
</p>
|
|
||||||
<p>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.</p>
|
|
||||||
<p>
|
|
||||||
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> ♥.
|
|
||||||
</p>
|
|
||||||
<p>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>
|
|
||||||
</div>
|
|
||||||
</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>
|
|
||||||
<script src="js/slider.js"></script>
|
|
||||||
<script>initializeSlider();</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -19,7 +19,7 @@ const config = {
|
||||||
mazeColor: '#05130f', // Color of the maze lines
|
mazeColor: '#05130f', // Color of the maze lines
|
||||||
mazeThickness: 2, // Thickness of the maze lines
|
mazeThickness: 2, // Thickness of the maze lines
|
||||||
drawRedLine: true, // Enable or disable the red line
|
drawRedLine: true, // Enable or disable the red line
|
||||||
redLineColor: '#FB2735', // Red line color
|
redLineColor: '#9B283C', // Red line color
|
||||||
consoleLogging: false, // Enable or disable console logging
|
consoleLogging: false, // Enable or disable console logging
|
||||||
};
|
};
|
||||||
// ---------------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------------
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue