Compare commits

...

10 commits
main ... main

Author SHA1 Message Date
85f28d1b39 Edit redLineColor
see revengeday/cyber-circle-creator#11
2024-11-17 19:15:50 +00:00
e4879af47f Add installation instructions and acknowledge contributors in README.md
- Included a detailed installation guide to assist users in setting up Cyber Circle Creator on their own webspace.
- Added a section to express gratitude to all contributors with a link to the contributors' activity page.
- Made minor enhancements to the description
2024-11-17 15:29:20 +00:00
217860f4c9 Merge pull request 'Mobile Optimization' (#8) from kaiserkiwi/cyber-circle-creator:mobile-optimization into main
Reviewed-on: revengeday/cyber-circle-creator#8
Reviewed-by: Ramses Revengeday <revengeday@noreply.git.cyberwa.re>
2024-11-17 13:40:10 +00:00
bb1ff382fe
Merge remote-tracking branch 'origin/main' into mobile-optimization
# Conflicts:
#	css/style.css
2024-11-17 14:33:19 +01:00
f367e4b782
fix: Remove accidentally pushed font 2024-11-17 11:44:47 +01:00
be8c44ab7d
refactor: Reduce code duplication by using the section element for general styling
- Fix indentation in index.html
2024-11-17 08:26:36 +01:00
002e945bbe
feat: Optimize the cyber score slider to fit better on mobile 2024-11-17 08:15:40 +01:00
6128fbacd6
feat: The radio group is now actually usable on mobile
- The labels aren't cut off anymore
- Instead of trying to fit four buttons next to each other they're now one each line when not enough room is there
2024-11-17 08:15:18 +01:00
81312824e4
feat: Inherit font size for buttons and input 2024-11-17 08:14:06 +01:00
c86c5fcf98
feat: Add dynamic spacing variables
- Use dynamic spacing for main element and sections
- Fix wonky padding when opening and closing faq answers
2024-11-17 08:13:34 +01:00
4 changed files with 241 additions and 212 deletions

View file

@ -1,38 +1,69 @@
![Cyber Circle Creator Logo](https://git.cyberwa.re/revengeday/cyber-circle-creator/raw/branch/main/img/logo.svg)
# 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.
- **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.
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.
## 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
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
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 projects logo image.
- **`backgroundColor`**: Set the background color of your canvas.
- **`lineColor`**: Choose the color of the connection lines.
- **Etc.**: There are many more options to play around with if youre up for some customization.
- **`logoSrc`**: Define the path to your projects logo image.
- **`backgroundColor`**: Set the canvas's background color.
- **`lineColor`**: Customize the color of the connection lines.
- **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.

View file

@ -9,6 +9,7 @@
font-style: normal;
font-display: swap;
}
:root {
--cyber-bg-color: #05130f;
--cyber-font-color: #e8f0f2;
@ -19,6 +20,10 @@
--cyber-hero-overlay: rgba(0, 0, 0, 0.7);
--cyber-shadow: rgba(0, 0, 0, 0.5);
--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 */
@ -78,18 +83,23 @@ h1 {
/* Main content */
main {
padding: 40px 20px;
padding-inline: var(--spacing-sm);
max-width: 1000px;
margin: 0 auto;
}
.form-section {
section:not(.output-section) {
text-align: left;
background-color: #102f2a;
padding: 30px;
padding: var(--spacing-md);
border-radius: 10px;
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 {
width: 100%;
@ -99,7 +109,9 @@ main {
input[type="text"] {
font-family: inherit;
width: calc(100% - 20px);
font-size: inherit;
line-height: 1.35;
width: 100%;
padding: 10px;
border: 2px solid var(--cyber-primary-color);
border-radius: 5px;
@ -116,9 +128,14 @@ input[type="text"]:focus {
/* Radio Buttons */
.radio-group {
display: flex;
justify-content: space-around;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--spacing-sm);
@media (width > 768px) {
flex-direction: row;
}
}
.radio-group input[type="radio"] {
@ -126,8 +143,7 @@ input[type="text"]:focus {
}
.radio-group label {
width: calc(25% - 10px);
margin: 5px;
flex: 1;
padding: 10px;
text-align: center;
cursor: pointer;
@ -151,11 +167,12 @@ input[type="text"]:focus {
/* Buttons */
button {
font-family: inherit;
font-size: inherit;
line-height: 1.35;
padding: 10px 20px;
border-radius: 5px;
background-color: var(--cyber-bg-color);
color: var(--cyber-font-color);
font-size: 1rem;
cursor: pointer;
border: 2px solid transparent;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
@ -194,27 +211,12 @@ button:active {
display: block;
}
.output-section {
margin-top: 40px;
}
#outDiv {
display: none;
margin-top: 30px;
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 {
font-size: 2rem;
margin-bottom: 20px;
@ -242,12 +244,12 @@ button:active {
display: block;
font-weight: bold;
color: var(--cyber-highlight-color);
padding: 15px;
padding: var(--spacing-sm);
background-color: #102f2a;
border-radius: 8px;
cursor: pointer;
position: relative;
margin-bottom: 5px;
margin-bottom: var(--spacing-sm);
transition: background-color 0.3s;
white-space: normal;
overflow: visible;
@ -266,9 +268,9 @@ button:active {
.faq-answer {
max-height: 0;
display: none;
overflow: hidden;
transition: max-height 0.5s ease;
padding: 0 15px;
padding: var(--spacing-sm);
background-color: var(--cyber-bg-color);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 8px;
@ -277,7 +279,7 @@ button:active {
.faq-checkbox:checked + .faq-question + .faq-answer {
max-height: 100%;
padding: 15px;
display: block;
}
/* List Styles for FAQ */
.faq-answer ul,
@ -304,16 +306,6 @@ button:active {
.faq-answer li::marker {
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 {
font-size: 2rem;
@ -430,21 +422,25 @@ button:active {
/* Slider */
.slider-container {
margin: 20px 0;
text-align: center;
color: var(--cyber-font-color);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 15px;
text-align: center;
gap: var(--spacing-sm) var(--spacing-md);
}
.slider-container label {
font-size: 1.2rem;
@media (width < 568px) {
width: 100%;
}
}
input[type="range"] {
-webkit-appearance: none;
width: 70%;
flex: 1;
margin: 10.5px 0;
background-color: var(--cyber-faq-bg-color);
}
@ -526,7 +522,6 @@ input[type="range"]::-ms-thumb {
#sliderValueDisplay {
font-size: 1.1rem;
margin-left: 10px;
color: var(--cyber-primary-color);
font-weight: bold;
}

View file

@ -139,9 +139,12 @@
<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>
<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>

View file

@ -19,7 +19,7 @@ const config = {
mazeColor: '#05130f', // Color of the maze lines
mazeThickness: 2, // Thickness of the maze lines
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
};
// ---------------------------------------------------------------------------------