diff --git a/css/style.css b/css/style.css index e671a70..111c13f 100644 --- a/css/style.css +++ b/css/style.css @@ -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,17 +83,22 @@ h1 { /* Main content */ main { - padding: 40px 20px; + padding-inline: var(--spacing-sm); max-width: 1000px; margin: 0 auto; -} -.form-section { - background-color: #102f2a; - padding: 30px; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); - margin-bottom: 40px; + section:not(.output-section) { + text-align: left; + background-color: #102f2a; + 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 { @@ -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; } diff --git a/index.html b/index.html index 6834c6d..b75fc03 100644 --- a/index.html +++ b/index.html @@ -24,152 +24,155 @@ - + -
+
Hero Banner
Logo
-
-
-
-
- -
- - - - - - - - -
-
- - - 250 -
- -
-
-
-
-
- +
+
+ +
+ + + + + + + + +
+
+ + + 250 +
+ +
+
+
+
+
+ +
+
+

's Fedi Circle

+
+
+
+
-
-

's Fedi Circle

-
-
-
-
+
+
+
+

Frequently Asked Questions

+ +
+ + +
+

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.

+
+
+ +
+ + +
+

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.

+
+
+ +
+ + +
+

Green Lines: 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. Yellow Lines: These lines may be randomly drawn between different user positions to create additional visual connections and make the layout more dynamic. Red Line: 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.

+
+
+ +
+ + +
+

It adds visual complexity to the canvas and is created using random diagonal lines in a grid pattern.

+
+
+ +
+ + +
+

During the loading of avatars, a progress status is shown on the webpage indicating how many avatars have been successfully loaded (e.g., "Loading avatars: 1/10"). Once all avatars are loaded, this display disappears.

+
+
+ +
+ + +
+

This message indicates that the instance is currently not responding. Please try again later.

+
+
+ +
+ + +
+

Yes, it is possible. Simply change the URL tohttps://ccc.cyber.to/?@revengeday@corteximplant.com, replacing @revengeday@corteximplant.comwith your own account details.

+
+ +
+ + +
+

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:

+
    +
  1. User Control: 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. +
    2. +
  2. Initial Measures: 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 Opt-Out: Guide for Fediverse Administrators. +
    3. +
  3. Future Plans: 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 Feature Request: Opt-Out from Cyber Circle Creator #6. We are actively seeking collaborators to help develop this feature, despite the technical complexities due to our codebase. +
    4. +
+

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.

-
-
-

Frequently Asked Questions

- -
- - -
-

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.

-
- -
- - -
-

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.

+
+
+

Credits

+
+

+ Cyber Circle Creator builds upon AMNatty/Mastodon-Circles, + which is a further development of andigandhi/Mastodon-Circles. +

+

This project is licensed under the GNU Affero General Public License and benefits from Fedibird support by noellabo, enhancing its functionality even further.

+

+ We invite you to create your own fork of Cyber Circle Creator ♥. +

+

Moreover, the design employs the departure-mono typeface, crafted by rektdeckard and available under the MIT License.

- - -
- - -
-

Green Lines: 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. Yellow Lines: These lines may be randomly drawn between different user positions to create additional visual connections and make the layout more dynamic. Red Line: 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.

-
-
- -
- - -
-

It adds visual complexity to the canvas and is created using random diagonal lines in a grid pattern.

-
-
- -
- - -
-

During the loading of avatars, a progress status is shown on the webpage indicating how many avatars have been successfully loaded (e.g., "Loading avatars: 1/10"). Once all avatars are loaded, this display disappears.

-
-
- -
- - -
-

This message indicates that the instance is currently not responding. Please try again later.

-
-
- -
- - -
-

Yes, it is possible. Simply change the URL to https://ccc.cyber.to/?@revengeday@corteximplant.com, replacing @revengeday@corteximplant.com with your own account details.

-
- -
- - -
-

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:

-
    -
  1. User Control: 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.
    2. -
  2. Initial Measures: 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 Opt-Out: Guide for Fediverse Administrators.
    3. -
  3. Future Plans: 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 Feature Request: Opt-Out from Cyber Circle Creator #6. We are actively seeking collaborators to help develop this feature, despite the technical complexities due to our codebase.
    4. -
-

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.

-
-
-
-
-
-

Credits

-
-

- Cyber Circle Creator builds upon AMNatty/Mastodon-Circles, - which is a further development of andigandhi/Mastodon-Circles. -

-

This project is licensed under the GNU Affero General Public License and benefits from Fedibird support by noellabo, enhancing its functionality even further.

-

- We invite you to create your own fork of Cyber Circle Creator ♥. -

-

Moreover, the design employs the departure-mono typeface, crafted by rektdeckard and available under the MIT License.

-
-
-
- - - - - - +
+ + + + + + + - \ No newline at end of file +