feat: adds bootstrap for style, adds print option for qrcode, updates…

… content

Gemfile

@@ -56,6 +56,15 @@ group :test do
   gem "selenium-webdriver"
 end
 
+# QR code generation
+# RQRCode gem for generating QR codes
 gem "rqrcode", "~> 2.2"
 
+# Password management (if uncommented earlier)
 gem "bcrypt", "~> 3.1.7"
+
+# Frontend styling
+# Bootstrap for styling and responsive design
+gem "bootstrap"
+# SassC-rails for integrating Sass with Rails
+gem "sassc-rails"

Gemfile.lock

@@ -74,12 +74,17 @@ GEM
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
     ast (2.4.2)
+    autoprefixer-rails (10.4.19.0)
+      execjs (~> 2)
     base64 (0.2.0)
     bcrypt (3.1.20)
     bigdecimal (3.1.8)
     bindex (0.8.1)
     bootsnap (1.18.4)
       msgpack (~> 1.2)
+    bootstrap (5.3.3)
+      autoprefixer-rails (>= 9.1.0)
+      popper_js (>= 2.11.8, < 3)
     brakeman (6.2.1)
       racc
     builder (3.3.0)
@@ -102,6 +107,13 @@ GEM
       reline (>= 0.3.8)
     drb (2.2.1)
     erubi (1.13.0)
+    execjs (2.9.1)
+    ffi (1.17.0-aarch64-linux-gnu)
+    ffi (1.17.0-arm-linux-gnu)
+    ffi (1.17.0-arm64-darwin)
+    ffi (1.17.0-x86-linux-gnu)
+    ffi (1.17.0-x86_64-darwin)
+    ffi (1.17.0-x86_64-linux-gnu)
     globalid (1.2.1)
       activesupport (>= 6.1)
     i18n (1.14.5)
@@ -159,6 +171,7 @@ GEM
       ast (~> 2.4.1)
       racc
     pg (1.5.7)
+    popper_js (2.11.8)
     psych (5.1.2)
       stringio
     public_suffix (6.0.1)
@@ -245,6 +258,14 @@ GEM
       rubocop-rails
     ruby-progressbar (1.13.0)
     rubyzip (2.3.2)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    sassc-rails (2.1.2)
+      railties (>= 4.0.0)
+      sassc (>= 2.0)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
     securerandom (0.3.1)
     selenium-webdriver (4.24.0)
       base64 (~> 0.2)
@@ -264,6 +285,7 @@ GEM
     stringio (3.1.1)
     strscan (3.1.0)
     thor (1.3.2)
+    tilt (2.4.0)
     timeout (0.4.1)
     turbo-rails (2.0.6)
       actionpack (>= 6.0.0)
@@ -298,6 +320,7 @@ PLATFORMS
 DEPENDENCIES
   bcrypt (~> 3.1.7)
   bootsnap
+  bootstrap
   brakeman
   capybara
   debug
@@ -308,6 +331,7 @@ DEPENDENCIES
   rails (~> 7.2.1)
   rqrcode (~> 2.2)
   rubocop-rails-omakase
+  sassc-rails
   selenium-webdriver
   sprockets-rails
   stimulus-rails

README.md

@@ -1,51 +1,91 @@
-# Pet Register System
+# Pet Tag Generator
 
-This README would normally document whatever steps are necessary to get the
-application up and running.
+[![Project Status: WIP – Initial development is in progress, but there has not yet been a stable, usable release suitable for the public.](https://www.repostatus.org/badges/latest/wip.svg)](https://www.repostatus.org/#wip)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Release Version](https://img.shields.io/github/release/sarahcssiqueira/pet-tag-generator.svg)](https://github.com/sarahcssiqueira/pet-tag-generator/releases/latest)
+[![Support Level](https://img.shields.io/badge/support-may_take_time-yellow.svg)](#support-level)
 
-Things you may want to cover:
+Welcome to the Pet Tag Generator! This open-source project provides an easy way to create personalized pet tags with QR codes, ensuring your pets are always safe and secure.
 
-* Ruby version
+## Features
 
-* System dependencies
+- **Free and Easy**: Create pet tags at no cost.
+- **Custom QR Codes**: Generate unique QR codes linked to a webpage with your pet's information.
+- **Update Anytime**: Modify your pet’s information through the website as needed.
+- **Secure**: Only authorized users can view or update the pet information.
+- **Vet-Friendly**: Ideal for veterinarians to use in their consultories for providing clients with customizable pet tags.
 
-* Configuration
+## Getting Started
 
-* Database creation
+To get started with the Pet Tag Generator, follow these steps:
 
-* Database initialization
+### Prerequisites
 
-* How to run the test suite
+- Ruby (version `3.3.3` or later)
+- Rails (version `7.2.1` or later)
+- PostgreSQL (or your preferred database)
+- Node.js and Yarn (for managing JavaScript dependencies)
 
-* Services (job queues, cache servers, search engines, etc.)
+### Installation
 
-* Deployment instructions
+1. Clone the Repository
 
-* ...
+    `git clone https://github.com/your-username/pet-tag-generator.git`
 
-## Webpacker
+    `cd -pet-tag-generator`
 
-. Install Webpacker
 
-If your Rails app doesn’t already use Webpacker, you can add it by running:
+2. Install Gems
 
-bash
+`bundle install`
 
-rails webpacker:install
+3. Setup Database
 
-This command sets up Webpacker in your Rails app.
-2. Enable Hot Module Replacement (HMR)
+```bash
 
-Webpacker supports HMR, which allows you to see changes in your frontend code without needing to refresh the entire page.
-a. Development Server
+rails db:create
+rails db:migrate
+rails db:seed
+```
 
-To enable HMR, you need to run the Webpack development server. Webpacker installs this automatically. You can start it by running:
+4. Run the Rails Server
 
-bash
+`rails server`
 
-bin/webpack-dev-server
+Visit http://localhost:3000 in your browser to see the application in action.
 
-This server watches your frontend files and applies updates as you make changes.
-b. Configuration
+### Usage
 
-Ensure that your config/webpacker.yml file is configured for development. By default, Webpacker is set up to use HMR in development, but you can check the development section to make sure hmr is enabled:
+- Register Your Pet: Fill out a form with your pet’s details.
+- Generate QR Code: Create and print a QR code linked to your pet’s information.
+- Attach: Put the QR code on your pet’s collar or tag.
+- Update Information: Log in to update your pet’s details as needed.
+
+### Vet Use
+
+Veterinarians can integrate this tool into their consultories, allowing pet owners to easily create and manage customized pet tags. This feature enhances the safety and security of pets and provides an additional service for clients.
+
+### Deployment
+
+
+### Contributing
+
+We welcome contributions to enhance the Free Pet Tag Generator. To contribute:
+
+- Fork the repository.
+- Create a new branch (git checkout -b feature-branch).
+- Commit your changes (git commit -am 'Add new feature').
+- Push to the branch (git push origin feature-branch).
+- Open a Pull Request.
+
+### License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+Acknowledgements
+
+- Bootstrap for styling.
+- QR Code Libraries for QR code generation.
+
+### Contact
+
+For any questions or feedback, please open an issue on GitHub.

app/assets/stylesheets/application.css → app/assets/stylesheets/application.scss

@@ -13,3 +13,5 @@
  *= require_tree .
  *= require_self
  */
+
+ @import "bootstrap";

app/controllers/privacy_policy_controller.rb

@@ -0,0 +1,4 @@
+class PrivacyPolicyController < ApplicationController
+  def index
+  end
+end

app/helpers/privacy_policy_helper.rb

@@ -0,0 +1,2 @@
+module PrivacyPolicyHelper
+end

app/javascript/application.js

@@ -1,3 +1,5 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+import "popper"
+import "bootstrap"

app/javascript/print_section.js

@@ -0,0 +1,11 @@
+function printDiv(divName) {
+    var printContents = document.getElementById(divName).innerHTML;
+    var originalContents = document.body.innerHTML;
+
+    document.body.innerHTML = printContents;
+
+    window.print();
+
+    document.body.innerHTML = originalContents;
+  }
+

app/models/pet.rb

@@ -7,6 +7,15 @@ class Pet < ApplicationRecord
 
   # ActiveStorage association for the image
   has_one_attached :pet_photo
+  validate :pet_photo_size
+
+  private
+
+  def pet_photo_size
+    if pet_photo.attached? && pet_photo.byte_size > 1.megabyte
+      errors.add(:pet_photo, "size should be less than 1MB")
+    end
+  end
 
   include Rails.application.routes.url_helpers
 

app/views/home/index.html.erb

@@ -1,2 +1,52 @@
-<h1>Home#index</h1>
-<p>Find me in app/views/home/index.html.erb</p>
+<header class="hero text-center bg-primary text-white py-5 mb-5">
+    <div class="container">
+        <h1 class="display-4">Welcome to the Free Pet Tag Generator!</h1>
+    </div>
+</header>
+
+<div class="container my-5">
+    <div class="bg-light py-4 mb-5 rounded">
+        <h2 class="display-5">Give Your Pet the Safety They Deserve</h2>
+        <p>We believe every pet deserves to be safe and secure. That's why we're excited to introduce our <strong>Free Pet Tag Generator</strong> – a simple and efficient way to ensure your furry friends are always protected.</p>
+    </div>
+
+    <div class="bg-light py-4 mb-5 rounded">
+        <h2 class="display-5">What is the Free Pet Tag Generator?</h2>
+        <p>Our Free Pet Tag Generator is an easy-to-use online tool that lets you create personalized pet tags at no cost. With just a few clicks, you can generate a unique QR code that will be linked to a dedicated webpage with all the information you provide about your pet.</p>
+    </div>
+
+    <div class="bg-light py-4 mb-5 rounded">
+        <h2 class="display-5">How It Works</h2>
+        <ul class="list-unstyled">
+            <li><strong>Register Your Pet:</strong> Fill out a simple form with details about your pet, including their name, your contact information, and any other important notes.</li>
+            <li><strong>Generate a QR Code:</strong> Our generator will create a custom QR code that you can print on a tag. This QR code will direct anyone who scans it to a webpage with the information you’ve provided.</li>
+            <li><strong>Print and Attach:</strong> Print the QR code and attach it to your pet’s collar or tag. It's that easy!</li>
+            <li><strong>Update Anytime:</strong> Need to update your pet’s information? No problem! Simply log in to our website and make changes to the details linked to your QR code.</li>
+        </ul>
+    </div>
+
+    <div class="bg-light py-4 mb-5 rounded">
+        <h2 class="display-5">Why Use This Pet Tag Generator?</h2>
+        <ul class="list-unstyled">
+            <li><strong>Free and Easy:</strong> No costs, no hassle. Create your pet's tag in minutes.</li>
+            <li><strong>Instant Access:</strong> The QR code provides quick access to your pet's information.</li>
+            <li><strong>Customizable:</strong> Tailor the information to fit your pet’s needs.</li>
+            <li><strong>Secure:</strong> Only authorized users can view or update the information.</li>
+        </ul>
+    </div>
+
+    <div class="bg-light py-4 mb-5 rounded">
+        <h2 class="display-5">Ready to Get Started?</h2>
+        <ol>
+            <li>Visit <%= link_to 'the register page', pets_path, class: 'cta-button' %></li>
+            <li>Register Your Pet</li>
+            <li>Generate Your QR Code</li>
+            <li>Print and Attach</li>
+        </ol>
+
+        <p>Make sure your pet is always safe and secure with our Free Pet Tag Generator. It’s a small step that can make a big difference.</p>
+
+        <%= link_to 'Get Started Now!', pets_path, class: 'cta-button' %>
+    </div>
+</div>
+

app/views/layouts/_footer.html.erb

@@ -0,0 +1,33 @@
+<footer class="bg-dark text-white py-4">
+  <div class="container">
+    <div class="row">
+      <div class="col-md-4">
+        <h5>About Us</h5>
+        <p>
+           We are dedicated to providing innovative solutions to keep your pets safe and secure. 
+           Our mission is to combine technology with convenience, making pet care easier and more 
+           efficient for pet owner.
+        </p>
+      </div>
+      <div class="col-md-4">
+        <h5>Quick Links</h5>
+        <ul class="list-unstyled">
+            <li><%= link_to 'Home', root_path, class: 'text-white' %></li>
+            <li><%= link_to 'Pets', pets_path, class: 'text-white' %></li>
+            <%
+=begin%>
+ <li><%= link_to 'Privacy Policy', privacy_policy_path, class: 'text-white' %></li> 
+<%
+=end%>
+        </ul>
+      </div>
+      <div class="col-md-4">
+        <h5>Contact Us</h5>
+        <p>Email:</p>
+      </div>
+    </div>
+    <div class="text-center mt-4">
+      <p>&copy; 2024 Pet Tag Generator. All Rights Reserved.</p>
+    </div>
+  </div>
+</footer>