-
-
Notifications
You must be signed in to change notification settings - Fork 135
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
this is about instruction for using sizzle application
- Loading branch information
Showing
12 changed files
with
275 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,254 @@ | ||
| {% extends "base.html" %} | ||
| {% load static %} | ||
| {% block content %} | ||
| <style> | ||
| body { | ||
| background-color: #f8f9fa; | ||
| font-family: Arial, sans-serif; | ||
| } | ||
| .step-number { | ||
| font-size: 2rem; | ||
| font-weight: bold; | ||
| color: #007bff; | ||
| margin-bottom: 10px; | ||
| } | ||
| .guide-container { | ||
| max-width: 900px; | ||
| margin: 50px auto; | ||
| padding: 20px; | ||
| background: #ffffff; | ||
| border-radius: 10px; | ||
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); | ||
| } | ||
| .step { | ||
| display: flex; | ||
| align-items: center; | ||
| margin: 40px 0; | ||
| padding: 20px; | ||
| background: #e9ecef; | ||
| border-radius: 10px; | ||
| } | ||
| .step-content { | ||
| flex: 1; | ||
| padding-right: 20px; | ||
| } | ||
| .step img { | ||
| max-width: 200px; | ||
| height: auto; | ||
| border-radius: 10px; | ||
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | ||
| cursor: pointer; | ||
| transition: transform 0.3s ease; | ||
| } | ||
| .step img:hover { | ||
| transform: scale(1.05); | ||
| } | ||
| .modal { | ||
| display: none; | ||
| position: fixed; | ||
| z-index: 1050; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background: rgba(0, 0, 0, 0.8); | ||
| justify-content: center; | ||
| align-items: center; | ||
| animation: fadeIn 0.5s; | ||
| } | ||
| .modal-content { | ||
| position: relative; | ||
| max-width: 90%; | ||
| max-height: 90%; | ||
| animation: zoomIn 0.5s; | ||
| } | ||
| .modal-content img { | ||
| width: 100%; | ||
| height: auto; | ||
| border-radius: 10px; | ||
| } | ||
| .close-btn { | ||
| position: absolute; | ||
| top: 10px; | ||
| right: 10px; | ||
| background: #ffffff; | ||
| border: none; | ||
| font-size: 1.5rem; | ||
| cursor: pointer; | ||
| border-radius: 50%; | ||
| padding: 5px 10px; | ||
| } | ||
| .download_btn { | ||
| background: #007bff!important; | ||
| color: #ffffff!important; | ||
| padding: 5px 10px; | ||
| border-radius: 5px; | ||
| text-decoration: none; | ||
| } | ||
| .download_btn:hover { | ||
| background: #0056b3!important; | ||
| } | ||
| .header_text { | ||
| font-size: 2.3rem!important; | ||
| } | ||
|
|
||
| @keyframes fadeIn { | ||
| from { opacity: 0; } | ||
| to { opacity: 1; } | ||
| } | ||
|
|
||
| @keyframes zoomIn { | ||
| from { transform: scale(0.5); } | ||
| to { transform: scale(1); } | ||
| } | ||
|
|
||
| @keyframes fadeOut { | ||
| from { opacity: 1; } | ||
| to { opacity: 0; } | ||
| } | ||
|
|
||
| @keyframes zoomOut { | ||
| from { transform: scale(1); } | ||
| to { transform: scale(0.5); } | ||
| } | ||
|
|
||
| .fade-out { | ||
| animation: fadeOut 0.5s, zoomOut 0.5s; | ||
| } | ||
| </style> | ||
| <div class="container mx-auto p-6"> | ||
| <!-- Include the left navigation --> | ||
| {% include "includes/sidenav.html" %} | ||
| <!-- Main Content Section --> | ||
| <div class="container guide-container"> | ||
| <h1 class="text-center my-4 font-bold header_text">How to Use Sizzle</h1> | ||
|
|
||
| <div class="step"> | ||
| <div class="step-content"> | ||
| <div class="step-number">Step 1</div> | ||
| <div class="step-title">Download the App</div> | ||
| <p>To get started, download the app from GitHub using the following link: <a class="download_btn" href="https://github.com/OWASP-BLT/BLT-Flutter/actions/workflows/build-flutter.yml" target="_blank">Click Here</a></p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="step"> | ||
| <div class="step-content"> | ||
| <div class="step-number">Step 2</div> | ||
| <div class="step-title">Find the Latest Successful Build</div> | ||
| <p>Locate the most recent successful build and click on it to proceed with the download.</p> | ||
| </div> | ||
| <img src="{% static 'img/sizzle/app_finding_1.jpg' %}" alt="Finding the App on GitHub Actions" class="step-image"> | ||
| </div> | ||
|
|
||
| <div class="step"> | ||
| <div class="step-content"> | ||
| <div class="step-number">Step 3</div> | ||
| <div class="step-title">Download the App for Your Device</div> | ||
| <p>Select the appropriate version of the app for your device and download it.</p> | ||
| </div> | ||
| <img src="{% static 'img/sizzle/app_finding_2.jpg' %}" alt="Choosing Device Version to Download" class="step-image"> | ||
| </div> | ||
|
|
||
| <div class="step"> | ||
| <div class="step-content"> | ||
| <div class="step-number">Step 4</div> | ||
| <div class="step-title">Open the App and Login</div> | ||
| <p>Once downloaded, open the app and login using your credentials.</p> | ||
| </div> | ||
| <img src="{% static 'img/sizzle/running_sizzle_1.jpg' %}" alt="Logging into the App" class="step-image"> | ||
| </div> | ||
|
|
||
| <div class="step"> | ||
| <div class="step-content"> | ||
| <div class="step-number">Step 5</div> | ||
| <div class="step-title">Access the Side Menu and Click "Sizzle"</div> | ||
| <p>Open the side menu and tap on the "Sizzle" button to continue.</p> | ||
| </div> | ||
| <img src="{% static 'img/sizzle/running_sizzle_2.jpg' %}" alt="Accessing Side Menu" class="step-image"> | ||
| </div> | ||
|
|
||
| <div class="step"> | ||
| <div class="step-content"> | ||
| <div class="step-number">Step 6</div> | ||
| <div class="step-title">Enter Your GitHub Username</div> | ||
| <p>Enter your GitHub username in the provided field and click "Add Username".</p> | ||
| </div> | ||
| <img src="{% static 'img/sizzle/running_sizzle_3.jpg' %}" alt="Entering GitHub Username" class="step-image"> | ||
| </div> | ||
|
|
||
| <div class="step"> | ||
| <div class="step-content"> | ||
| <div class="step-number">Step 7</div> | ||
| <div class="step-title">Start Time Tracking</div> | ||
| <p>Click on the "Start Work" button to begin tracking your work time.</p> | ||
| </div> | ||
| <img src="{% static 'img/sizzle/running_sizzle_4.jpg' %}" alt="Starting Time Tracking" class="step-image"> | ||
| </div> | ||
|
|
||
| <div class="step"> | ||
| <div class="step-content"> | ||
| <div class="step-number">Step 8</div> | ||
| <div class="step-title">View and Select Assigned Issues</div> | ||
| <p>All assigned issues will be displayed here. Select any task to begin working and click on the "Run" button to start tracking time for that task.</p> | ||
| </div> | ||
| <img src="{% static 'img/sizzle/running_sizzle_5.jpg' %}" alt="Viewing and Selecting Tasks" class="step-image"> | ||
| </div> | ||
|
|
||
| <div class="step"> | ||
| <div class="step-content"> | ||
| <div class="step-number">Step 9</div> | ||
| <div class="step-title">Track Time for the Task</div> | ||
| <p>Congratulations! You are now tracking time for the selected task. Click on the "Stop" button to stop tracking once completed.</p> | ||
| </div> | ||
| <img src="{% static 'img/sizzle/running_sizzle_6.jpg' %}" alt="Tracking Time for Selected Task" class="step-image"> | ||
| </div> | ||
|
|
||
| <div class="step"> | ||
| <div class="step-content"> | ||
| <div class="step-number">Step 10</div> | ||
| <div class="step-title">View Total Time Spent</div> | ||
| <p>After stopping the timer, you can view the total time spent on the task on the "Sizzle" page of the website.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="modal" id="imageModal"> | ||
| <div class="modal-content"> | ||
| <button class="close-btn" id="closeModal">×</button> | ||
| <img src="" alt="Expanded Image" id="modalImage"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| const images = document.querySelectorAll('.step-image'); | ||
| const modal = document.getElementById('imageModal'); | ||
| const modalImage = document.getElementById('modalImage'); | ||
| const closeModal = document.getElementById('closeModal'); | ||
|
|
||
| images.forEach(image => { | ||
| image.addEventListener('click', () => { | ||
| modal.style.display = 'flex'; | ||
| modalImage.src = image.src; | ||
| }); | ||
| }); | ||
|
|
||
| closeModal.addEventListener('click', () => { | ||
| modal.classList.add('fade-out'); | ||
| setTimeout(() => { | ||
| modal.style.display = 'none'; | ||
| modal.classList.remove('fade-out'); | ||
| }, 500); | ||
| }); | ||
|
|
||
| window.addEventListener('click', (e) => { | ||
| if (e.target === modal) { | ||
| modal.classList.add('fade-out'); | ||
| setTimeout(() => { | ||
| modal.style.display = 'none'; | ||
| modal.classList.remove('fade-out'); | ||
| }, 500); | ||
| } | ||
| }); | ||
| </script> | ||
| {% endblock content %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters