Skip to content

Commit

Permalink
this is about instruction for using sizzle application
Browse files Browse the repository at this point in the history
  • Loading branch information
@JisanAR03
JisanAR03 committed Oct 16, 2024
1 parent 5f94395 commit 7aae883
Showing 1 changed file with 104 additions and 88 deletions.
192 changes: 104 additions & 88 deletions website/templates/sizzle/sizzle_docs.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% extends "base.html" %}
{% load static %}
{% block content %}
<style>
<style>
body {
background-color: #f8f9fa;
font-family: Arial, sans-serif;
Expand Down Expand Up @@ -115,112 +115,128 @@
.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>
</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>

<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 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>
<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 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>
<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 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>
<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 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>
<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 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>
<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 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>
<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 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>
<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 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>
<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 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>

<div class="modal" id="imageModal">
<div class="modal-content">
<button class="close-btn" id="closeModal">&times;</button>
<img src="" alt="Expanded Image" id="modalImage">
<div class="modal" id="imageModal">
<div class="modal-content">
<button class="close-btn" id="closeModal">&times;</button>
<img src="" alt="Expanded Image" id="modalImage">
</div>
</div>
</div>

<script>
<script>
const images = document.querySelectorAll('.step-image');
const modal = document.getElementById('imageModal');
const modalImage = document.getElementById('modalImage');
Expand Down Expand Up @@ -250,5 +266,5 @@ <h1 class="text-center my-4 font-bold header_text">How to Use Sizzle</h1>
}, 500);
}
});
</script>
{% endblock content %}
</script>
{% endblock content %}

0 comments on commit 7aae883

Please sign in to comment.