revengeday/cyber-circle-creator
revengeday/cyber-circle-creator
2
1
Fork 1
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

refactor: Reduce code duplication by using the section element for general styling

Browse source 
- Fix indentation in index.html
This commit is contained in:
Marco Kaiser 2024-11-17 08:26:36 +01:00
parent 002e945bbe
commit be8c44ab7d
Signed by: kaiserkiwi
GPG key ID: 664DEC0325FA5EAC
2 changed files with 146 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
css/style.css
View file

@ -87,14 +87,19 @@ main {
padding-inline: var(--spacing-sm); padding-inline: var(--spacing-sm);
max-width: 1000px; max-width: 1000px;
margin: 0 auto; margin: 0 auto;
}
.form-section { section:not(.output-section) {
text-align: left;
background-color: #102f2a; background-color: #102f2a;
padding: var(--spacing-md); padding: var(--spacing-md);
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
color: var(--cyber-font-color);
&:not(:last-child) {
margin-bottom: 40px; margin-bottom: 40px;
}
}
} }
.input-group, .radio-group, button { .input-group, .radio-group, button {
@ -207,27 +212,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: var(--spacing-md);
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;
@ -317,16 +307,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: var(--spacing-md);
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;

47
index.html
View file

@ -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,7 +34,7 @@
<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;">
@ -53,12 +53,12 @@
<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');
@ -75,7 +75,7 @@
</div> </div>
</div> </div>
</section> </section>
<section class="faq-section"> <section class="faq-section">
<h3>Frequently Asked Questions</h3> <h3>Frequently Asked Questions</h3>
<div class="faq-item"> <div class="faq-item">
@ -130,25 +130,28 @@
<input type="checkbox" id="faq7" class="faq-checkbox"> <input type="checkbox" id="faq7" class="faq-checkbox">
<label for="faq7" class="faq-question">Is it possible to directly link to my account?</label> <label for="faq7" class="faq-question">Is it possible to directly link to my account?</label>
<div class="faq-answer"> <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> <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>
<div class="faq-item"> <div class="faq-item">
<input type="checkbox" id="faq8" class="faq-checkbox"> <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> <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"> <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> <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> <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>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><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>
<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>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> </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> <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> </div>
</section> </div>
<section class="credits-section"> </section>
<section class="credits-section">
<h3>Credits</h3> <h3>Credits</h3>
<div class="credits-content"> <div class="credits-content">
<p> <p>
@ -161,15 +164,15 @@
</p> </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> <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>
</section> </section>
</main> </main>
<footer id="footer"> <footer id="footer">
<p class="footer-note">Created by revengeday → <a href="https://corteximplant.com/@revengeday">@revengeday@corteximplant.com</a></p> <p class="footer-note">Created by revengeday → <a href="https://corteximplant.com/@revengeday">@revengeday@corteximplant.com</a></p>
</footer> </footer>
<script src="js/create-circle.js"></script> <script src="js/create-circle.js"></script>
<script src="js/image.js"></script> <script src="js/image.js"></script>
<script src="js/url.js"></script> <script src="js/url.js"></script>
<script src="js/slider.js"></script> <script src="js/slider.js"></script>
<script>initializeSlider();</script> <script>initializeSlider();</script>
</body> </body>
</html> </html>