-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproject2-details.html
157 lines (150 loc) · 7.84 KB
/
project2-details.html
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Tim Rishell's Recipe Database Program Project">
<title>Tim Rishell - Recipe Database Program Project</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="./resources/css/reset.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="./resources/css/style.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-H721TL27NS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-H721TL27NS');
</script>
<body class="bg-dark">
<header>
<!-- Header of page -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a class="nav-link" href="index.html"><img src="resources/images/it_me_trans.png" alt="Tim Rishell picture"
class="profile-picture"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="credentials.html">Credentials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="container mt-5">
<h1 class="text-center text-light" tabindex="0">Recipe Database Program</h1><br>
<!-- Carousel -->
<div id="carouselExampleIndicators" class="carousel slide mb-5" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<video class="d-block w-100" controls autoplay muted loop preload="auto">
<source src="resources/images/recipe_db_gif1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="carousel-item">
<video class="d-block w-100" controls autoplay muted loop preload="auto">
<source src="resources/images/recipe_db_gif2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="carousel-item">
<video class="d-block w-100" controls autoplay muted loop preload="auto">
<source src="resources/images/recipe_db_gif3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Project Description -->
<div class="text-light" tabindex="0">
<h2>About the Project</h2>
<p>
The Recipe Database Program is a Python and SQLite3 based application designed to help users store and retrieve their favorite recipes easily. The primary objective of this project is to provide a user-friendly local database where users can save and organize their recipes, making it simple to find inspiration for meals based on available ingredients, particularly focusing on proteins or main substances.
</p>
<p>
This program operates in a command prompt window and has been compiled into an executable file, ensuring that it can be easily downloaded and used by anyone without needing to install additional software. The intuitive command-line interface allows for efficient data entry and retrieval, making it an invaluable tool for home cooks and culinary enthusiasts.
</p>
<p>
You can find the link to the project <a href="https://github.com/Cheftr/Recipe-DB" aria-label="link to my project" target="_blank">here</a>!
</p>
</div>
</div>
</main>
<footer class="bg-dark text-light text-center py-3">
<div class="container">
<p>© 2024 Tim Rishell | <a href="mailto:[email protected]" class="text-light">Contact</a></p>
<div>
<a href="https://github.com/Cheftr" class="text-light mr-2" aria-label="link to my github account" target="_blank"><i
class="fab fa-github"></i></a>
<a href="https://linkedin.com/in/timrishellr" class="text-light mr-2" aria-label="link to my linkedin account" target="_blank"><i
class="fab fa-linkedin"></i></a>
</div>
</div>
</footer>
<!-- Bootstrap and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('[data-toggle="popover"]').popover();
// Adding keyboard accessibility
document.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
var activeElement = document.activeElement;
if (activeElement.classList.contains('expandable-image')) {
$(activeElement).trigger('click');
} else if (activeElement.classList.contains('nav-link')) {
window.location.href = activeElement.getAttribute('href');
} else if (activeElement.classList.contains('btn')) {
activeElement.click();
}
}
});
// Ensure all interactive elements are focusable
var interactiveElements = document.querySelectorAll('.expandable-image, .nav-link, .btn');
interactiveElements.forEach(function (element) {
element.setAttribute('tabindex', '0');
element.setAttribute('role', 'button');
});
});
</script>
</body>
</html>