Sunbelt Computer Software

PL/B Language Development and Support

Graph-Algorithm-Simulator-DAA-Project/index.html at main · Aditya-Experiments/Graph-Algorithm-Simulator-DAA-Project · GitHub

Repository navigation

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Interactive Graph Algorithm Simulator for visualizing BFS, DFS, and Dijkstra's algorithms with sound effects and animations">

<meta name="keywords" content="graph algorithms, BFS, DFS, Dijkstra, visualization, simulator, computer science">

<title>Graph Algorithm Simulator | Visualize BFS, DFS, Dijkstra</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<h1>Graph Algorithm Simulator</h1>

<p class="subtitle">Visualize BFS, DFS, and Dijkstra's Algorithm</p>

</header>

<main>

<div class="simulator-container">

<div class="canvas-container">

<canvas id="graphCanvas"></canvas>

</div>

<div class="control-panel">

<button onclick="startBFS()">

<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

<circle cx="12" cy="12" r="10"></circle>

<line x1="12" y1="8" x2="12" y2="16"></line>

<line x1="8" y1="12" x2="16" y2="12"></line>

</svg>

BFS

</button>

<button onclick="startDFS()">

<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

<circle cx="12" cy="12" r="10"></circle>

<path d="M8 14s1.5 2 4 2 4-2 4-2"></path>

<line x1="9" y1="9" x2="9.01" y2="9"></line>

<line x1="15" y1="9" x2="15.01" y2="9"></line>

</svg>

DFS

</button>

<button onclick="startDijkstra()">

<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

<circle cx="12" cy="12" r="10"></circle>

<path d="M16 16s-1.5-2-4-2-4 2-4 2"></path>

<line x1="9" y1="9" x2="9.01" y2="9"></line>

<line x1="15" y1="9" x2="15.01" y2="9"></line>

</svg>

Dijkstra

</button>

<button class="reset" onclick="resetGraph()">

<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

<polyline points="1 4 1 10 7 10"></polyline>

<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>

</svg>

Reset

</button>

</div>

<div id="log"></div>

</div>

<div id="infoPopup" class="popup">

<div class="popup-header">

<h3>Algorithm Information</h3>

<button class="popup-close" onclick="hidePopup()">×</button>

</div>

<div id="popupContent"></div>

</div>

<div id="notification" class="notification"></div>

</main>

<footer>

<p>Designed by Aditya Pandey and Team | B.Tech 4th Semester | Graph Algorithm Visualization Tool</p>

</footer>

<script src="script.js"></script>

</body>

</html>