diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..1bb36b4 Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..07dede2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +*.DS_Store +*sftp-config.json +*auth.php diff --git a/README.md b/README.md index 265fe6a..fd89e6f 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,3 @@ # ixd608OL1FA24 Repo for IXD 608 OL 1 Fall 2024 + diff --git a/shifflet.coy/.DS_Store b/shifflet.coy/.DS_Store new file mode 100644 index 0000000..5e51391 Binary files /dev/null and b/shifflet.coy/.DS_Store differ diff --git a/shifflet.coy/README.md b/shifflet.coy/README.md new file mode 100644 index 0000000..3192a7d --- /dev/null +++ b/shifflet.coy/README.md @@ -0,0 +1,13 @@ +# Shifflet Coy + +## Relevent Links +-https://coyshifflet.com +-https://coyshifflet.com/aau/wnm608/shifflet.coy +-https://coyshifflet.com/aau/wnm608/shifflet.coy/styleguide +-https://coyshifflet.com/aau/wnm608/shifflet.coy/admin/index.php + +Extra Links + +-https://coyshifflet.com/aau/wnm608/shifflet.coy/admin/users/php +-https://coyshifflet.com/aau/wnm608/shifflet.coy/notes/reading_data.php + diff --git a/shifflet.coy/about.php b/shifflet.coy/about.php new file mode 100644 index 0000000..9dc4f1b --- /dev/null +++ b/shifflet.coy/about.php @@ -0,0 +1,20 @@ + + + + + About Us - My Online Store + + + + + +
+
+

About Us

+

Learn more about our company and values.

+
+
+ + + + diff --git a/shifflet.coy/admin/index.php b/shifflet.coy/admin/index.php new file mode 100644 index 0000000..7980824 --- /dev/null +++ b/shifflet.coy/admin/index.php @@ -0,0 +1,161 @@ +"", + "price"=>"", + "category"=>"", + "thumbnail"=>"", + "images"=>"", +]; + +// Logic +try { + $conn = makePDOConn(); + switch($_GET['action']) { + case "update": + $statement = $conn->prepare("UPDATE + `products` + SET + `name`=?, + `price`=?, + `category`=?, + `thumbnail`=?, + `images`=?, + `date_modify`=NOW() + WHERE `id`=? + "); + $statement->execute([ + $_POST['product-name'], + $_POST['product-price'], + $_POST['product-category'], + $_POST['product-thumbnail'], + $_POST['product-images'], + $_GET['id'] + ]); + header("location:{$_SERVER['PHP_SELF']}?id={$_GET['id']}"); + break; + + case "create": + $statement = $conn->prepare("INSERT INTO + `products` + ( + `name`, + `price`, + `category`, + `thumbnail`, + `images`, + `date_create`, + `date_modify` + ) + VALUES (?,?,?,?,?,NOW(),NOW()) + "); + $statement->execute([ + $_POST['product-name'], + $_POST['product-price'], + $_POST['product-category'], + $_POST['product-thumbnail'], + $_POST['product-images'], + ]); + $id = $conn->lastInsertId(); + header("location:{$_SERVER['PHP_SELF']}?id=$id"); + break; + + case "delete": + $statement = $conn->prepare("DELETE FROM `products` WHERE id=?"); + $statement->execute([$_GET['id']]); + header("location:{$_SERVER['PHP_SELF']}"); + break; + } +} catch(PDOException $e) { + die($e->getMessage()); +} + +// Templates +function productListItem($r, $o) { + return $r.<< +
+
+
$o->name
+
Edit
+
+ +HTML; +} + +function showProductPage($o) { + $id = $_GET['id']; + $addoredit = $id == "new" ? "Add" : "Edit"; + $createorupdate = $id == "new" ? "create" : "update"; + $images = array_reduce(explode(",", $o->images), function($r, $o) { + return $r.""; + }); + + $display = << +

$o->name

+
+ + $$o->price +
+
+ + $o->category +
+
+ + +
+
+ + $images +
+ +HTML; + + + $form = << +

$addoredit Product

+ + +HTML; + + $output = $id == "new" ? "
$form
" : + "
+
$display
+
$form
+
"; + + $delete = $id == "new" ? "" : "Delete"; + + echo << + + +$output +HTML; +} + +?> + + + + + Product Admin Page + + + +
+ +
+
+ +
+ + diff --git a/shifflet.coy/cart_actions.php b/shifflet.coy/cart_actions.php new file mode 100644 index 0000000..9fb73ad --- /dev/null +++ b/shifflet.coy/cart_actions.php @@ -0,0 +1,30 @@ + +amount = $_POST['amount']; + header("location:product_cart.php"); + break; + case "delete-cart-item": + $_SESSION['cart'] = array_filter($_SESSION['cart'],function($o){return $o->id!=$_POST['id'];}); + header("location:product_cart.php"); + break; + case "reset-cart": + resetCart(); + break; + default: + die("Incorrect Action"); + + } + +print_p ([$_GET,$_POST,$_SESSION]); diff --git a/shifflet.coy/contact.php b/shifflet.coy/contact.php new file mode 100644 index 0000000..5f3d048 --- /dev/null +++ b/shifflet.coy/contact.php @@ -0,0 +1,20 @@ + + + + + Contact Us - My Online Store + + + + + +
+
+

Contact Us

+

Reach out to us with any questions or concerns.

+
+
+ + + + diff --git a/shifflet.coy/css/storetheme.css b/shifflet.coy/css/storetheme.css new file mode 100644 index 0000000..cb03634 --- /dev/null +++ b/shifflet.coy/css/storetheme.css @@ -0,0 +1,118 @@ +:root { + --color-primary: #004175; /* Midnight Blue */ + --color-secondary: #708090; /* Slate Gray */ + --color-accent: #CCFF00; /* Electric Lime */ + --color-offwhite: #f4f4f4; + --color-white: #ffffff; + --color-black: #000000; +} + +body { + background-color: var(--color-white); + padding-bottom: 4em; +} + +.favorite label { + transition: all 0.3s; + display: inline-block; + transform: scale(1,1); + color: var(--color-black); +} + +.favorite input:checked + label { + color: red; + transform: scale(1.5, 1.5); +} + +.figure.product { + border-radius: 0.5em; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + overflow: hidden; + height: 100%; + transition: 0.3s; +} + +.product.figure img { + width: 100%; + height: 40vh; + object-fit: contain; +} + +.productlist a { + text-decoration: none; + font-weight: initial; +} + +.product.figure:hover { + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); +} + +.images-main img { + width: 100%; + height: auto; + max-height: 500px; + object-fit: contain; +} + +.images-thumbs img { + width: 80px; + height: 80px; + object-fit: cover; + margin: 5px; + border: 1px solid var(--color-secondary); + border-radius: 0.3em; + cursor: pointer; +} + + +.images-thumbs img:hover { + transform: scale(1.1); + transition: transform 0.2s; +} + +span.badge:not(:empty)::after { + content: ')'; +} +span.badge:not(:empty)::before { + content: '('; +} + +@media (max-width: 800px) { + .container { + padding-left: 1em; + padding-right: 1em; + } + .navbar h1 { + padding-left: 0.5em; + } +} + +.menu-button label { + display: none; +} + +@media (max-width: 400px) { + .navbar .display-flex { + flex-wrap: wrap; + } + .navbar .nav { + width: 100%; + display: none; + } + + .navbar .nav-flex ul { + display: block; + } + .navbar .nav li { + line-height: 2em; + } + + .menu-button label { + display: block; + padding: 0 1em; + } + + #menu:checked + .navbar .nav { + display: block; + } +} diff --git a/shifflet.coy/data/api.php b/shifflet.coy/data/api.php new file mode 100644 index 0000000..6c2a96f --- /dev/null +++ b/shifflet.coy/data/api.php @@ -0,0 +1,77 @@ +type)) { + $output['error'] = "No Type Provided"; +} else { + error_log("Received type: " . $data->type); // Log the received type + + switch ($data->type) { + case "products_all": + $output['result'] = makeQuery(makeConn(), "SELECT + * + FROM `products` + ORDER BY `date_create` DESC + LIMIT 12 + "); + break; + + + case "product_from_id": + $output['result'] = makeQuery(makeConn(), "SELECT + * + FROM `products` + WHERE id = '$data->id' + "); + break; + + case "product_search": + $output['result'] = makeQuery(makeConn(), "SELECT + * + FROM `products` + WHERE + `name` LIKE '%{$data->search}%' OR + `description` LIKE '%{$data->search}%' OR + `category` LIKE '%{$data->search}%' + ORDER BY `date_create` DESC + LIMIT 12 + "); + break; + + case "product_filter": + $output['result'] = makeQuery(makeConn(), "SELECT + * + FROM `products` + WHERE `$data->column` = '$data->value' + ORDER BY `date_create` DESC + LIMIT 12 + "); + break; + + case "product_sort": + $output['result'] = makeQuery(makeConn(), "SELECT + * + FROM `products` + ORDER BY `$data->column` $data->dir + LIMIT 12 + "); + break; + + default: + $output['error'] = "No Matched Type"; + } +} + +// Return the output as JSON +echo json_encode( + $output, + JSON_NUMERIC_CHECK | JSON_UNESCAPED_UNICODE +); diff --git a/shifflet.coy/data/products.sql b/shifflet.coy/data/products.sql new file mode 100644 index 0000000..2bc9082 --- /dev/null +++ b/shifflet.coy/data/products.sql @@ -0,0 +1,85 @@ +-- phpMyAdmin SQL Dump +-- version 5.2.1 +-- https://www.phpmyadmin.net/ +-- +-- Host: localhost:3306 +-- Generation Time: Dec 02, 2024 at 10:25 PM +-- Server version: 10.6.19-MariaDB-cll-lve +-- PHP Version: 8.1.29 + +SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; +START TRANSACTION; +SET time_zone = "+00:00"; + + + +/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; +/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; +/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; +/*!40101 SET NAMES utf8mb4 */; + +-- +-- Database: `CoyArt608` +-- + +-- -------------------------------------------------------- + +-- +-- Table structure for table `products` +-- + +CREATE TABLE `products` ( + `id` int(11) NOT NULL, + `name` varchar(64) NOT NULL, + `price` decimal(10,2) NOT NULL, + `category` varchar(32) NOT NULL, + `date_create` datetime NOT NULL, + `date-modify` datetime NOT NULL, + `description` text NOT NULL, + `thumbnail` varchar(128) NOT NULL, + `images` varchar(256) NOT NULL +) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_swedish_ci; + +-- +-- Dumping data for table `products` +-- + +INSERT INTO `products` (`id`, `name`, `price`, `category`, `date_create`, `date-modify`, `description`, `thumbnail`, `images`) VALUES +(1, 'ASUS Zenbook 14 UM3406HA Business Laptop', 1149.00, 'laptops', '2024-12-02 13:40:26', '2024-12-02 13:40:26', '14\" WUXGA Touchscreen, AMD Ryzen 7 8840HS 8-Core, Radeon Graphics, 16GB LPDDR5 512GB SSD, Backlit Keyboard, Wi-Fi 6E, Win11 Home, COU 32GB USB\r\n', 'asus_thumb.jpg', 'asus_1.jpg, asus_2.jpg, asus_3.jpg'), +(2, 'ThinkPad X1 Carbon Gen 12 (14? Intel) Laptop', 999.00, 'laptops', '2024-12-02 13:45:25', '2024-12-02 13:45:25', '14? industry-leading, ultraportable coworker for on-the-go\r\n\r\nPowered by Intel® Core™ Ultra processors, with integrated AI\r\n\r\nAll-day battery life, instant wake, & Intel® Unison™\r\n\r\nDolby Voice®, Dolby Atmos®, & Zoom-certified\r\n\r\nRecycled post-industrial & post-consumer content used', 'x1_thumb.jpg', 'x1_1.jpg, x1_2.jpg, x1_3.jpg'), +(3, 'Apple iPad (10th Generation)', 279.00, 'tablets', '2024-12-02 21:42:50', '2024-12-02 21:42:50', 'A14 Bionic chip, 10.9-inch Liquid Retina Display, 64GB, Wi-Fi 6, 12MP front/12MP Back Camera, Touch ID, All-Day Battery Life – Blue', 'ipad_thumb.jpg', 'ipad_1.jpg, ipad_2.jpg, ipad_3.jpg'), +(5, 'SAMSUNG Galaxy Tab S10+', 849.00, 'tablets', '2024-12-02 21:45:24', '2024-12-02 21:45:24', '12.4” 256GB, Android Tablet, Circle to Search, Sketch to Image, Durability, Long Battery Life, AMOLED 2X Screen, S Pen Included, US Version, 2024, Moonstone Gray', 'sam_thumb.jpg', 'sam_1.jpg, sam_2.jpg, sam_3.jpg'), +(6, 'Apple Iphone 16', 829.00, 'Mobile', '2024-12-02 21:45:24', '2024-12-02 21:45:24', 'Apple Intelligence helps you write, express yourself, and get things done effortlessly. \r\nGroundbreaking privacy protections to give you peace of mind that no one else can access your data. \r\nImproved 12MP Ultra Wide camera with autofocus lets you takes incredibly detailed macro photos and videos. Use the 48MP Fusion camera for stunning high-resolution images, and zoom in with the 2x optical-quality Telephoto.\r\nWorks together with the A18 chip to deliver a big boost in battery life with up to 22 hours video playback. Charge via USB-C or snap on a MagSafe charger for faster wireless charging', 'iphone_thumb.jpg', 'iphone_1.jpg, iphone_2.jpg, iphone_3.jpg'), +(7, 'Samsung Galaxy S24 Ultra', 940.00, 'mobile', '2024-12-02 21:45:24', '2024-12-02 21:45:24', 'Ultra Cell Phone, 256GB AI Smartphone, Unlocked Android, 200MP, 100x Zoom Cameras, Fast Processor, Long Battery Life, Edge-to-Edge Display, S Pen, US Version, 2024, Titanium Gray', 'samp_thumb.jpg', 'samp_1.jpg, samp_2.jpg, samp_3.jpg'), +(8, 'Apple Watch Series 10 ', 359.00, 'health', '2024-12-02 21:45:24', '2024-12-02 21:45:24', 'Bigger display with up to 30 percent more screen area. A thinner, lighter, and more comfortable design. Advanced health and fitness features provide invaluable insights. Safety features connect you to help when you need it. Faster charging gives you 80 percent battery in about 30 minutes.', 'iwatch_thumb.jpg', 'iwatch_1.jpg, iwatch_2.jpg, iwatch_3.jpg'), +(9, 'Samsung Galaxy Watch FE', 130.00, 'health', '2024-12-02 21:45:24', '2024-12-02 21:45:24', '40mm Bluetooth AI Smartwatch w/Fitness Tracking, BIA Sensor, Personalized HR Zones, Heart Rate Tracker, Sleep Monitor, 2024, Black [US Version, 1Yr Manufacturer Warranty]', 'samw_thumb.jpg', 'samw_1.jpg, samw_2.jpg, samw_3.jpg'), +(10, 'Oura Ring 4', 499.00, 'health', '2024-12-02 21:45:24', '2024-12-02 21:45:24', 'Gold - Size 7 - Smart Ring - Size First with Oura Ring 4 Sizing Kit - Sleep Tracking Wearable - Heart Rate - Fitness Tracker - Up to 8 Days of Battery Life', 'ring_thumb.jpg', 'ring_1.jpg, ring_2.jpg, ring_3.jpg'), +(11, 'Etekcity Smart Scale', 67.98, 'health', '2024-12-02 21:45:24', '2024-12-02 21:45:24', 'Body Weight Fat, FSA HSA Eligible, Digital Bathroom Weighing Machine for Accurate BMI Muscle Mass Composition, Home Use Apple Health Compatible Fitness Equipment', 'scale_thumb.jpg', 'scale_1.jpg, scale_2.jpg, scale_3.jpg'), +(12, 'VITURE Pro XR/AR Glasses', 399.00, 'health', '2024-12-02 21:45:24', '2024-12-02 21:45:24', '135\" 120Hz 1000Nits UltraClarity Display, Harman Audio, Myopia Adjustments, Electrochromic Film, Video Display Glasses for iPhone 16/15/Android/Mac/PC/Steam Deck/Consoles', 'g_thumb.jpg', 'g_1.jpg, g_2.jpg, g_3.jpg'), +(13, 'Linkind Matter Smart Plug', 16.99, 'smart', '2024-12-02 21:45:24', '2024-12-02 21:45:24', 'Work with Apple Home, Siri, Alexa, Google Home, SmartThings, Smart Outlet 15A/1800W Max, Smart Home Automation, APP Remote Control,Timer&Schedule, 2.4G Wi-Fi Only, 2 Pack', 'plug_thumb.jpg', 'plug_1.jpg, plug_2.jpg, plug_3.jpg'), +(14, 'Linkind Matter Smart Light Bulb', 12.99, 'smart', '2024-12-02 21:45:24', '2024-12-02 21:45:24', 'Smart Bulbs Work with Alexa/Apple Home/Google Home, Color Changing Light Bulbs Music Sync, Preset Scenes, Mood Lights, 2.4Ghz WiFi Only, A19 E26 60W 1 Pack\r\n', 'bulb_thumb.jpg', 'bulb_1.jpg, bulb_2.jpg, bulb_3.jpg'); + +-- +-- Indexes for dumped tables +-- + +-- +-- Indexes for table `products` +-- +ALTER TABLE `products` + ADD PRIMARY KEY (`id`); + +-- +-- AUTO_INCREMENT for dumped tables +-- + +-- +-- AUTO_INCREMENT for table `products` +-- +ALTER TABLE `products` + MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=20; +COMMIT; + +/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; +/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; +/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; diff --git a/shifflet.coy/img/asus_1.jpg b/shifflet.coy/img/asus_1.jpg new file mode 100644 index 0000000..0d16059 Binary files /dev/null and b/shifflet.coy/img/asus_1.jpg differ diff --git a/shifflet.coy/img/asus_2.jpg b/shifflet.coy/img/asus_2.jpg new file mode 100644 index 0000000..54d4f2d Binary files /dev/null and b/shifflet.coy/img/asus_2.jpg differ diff --git a/shifflet.coy/img/asus_3.jpg b/shifflet.coy/img/asus_3.jpg new file mode 100644 index 0000000..fccb6ec Binary files /dev/null and b/shifflet.coy/img/asus_3.jpg differ diff --git a/shifflet.coy/img/asus_thumb.jpg b/shifflet.coy/img/asus_thumb.jpg new file mode 100644 index 0000000..2c6f9b6 Binary files /dev/null and b/shifflet.coy/img/asus_thumb.jpg differ diff --git a/shifflet.coy/img/bg.jpg b/shifflet.coy/img/bg.jpg new file mode 100644 index 0000000..16f8d12 Binary files /dev/null and b/shifflet.coy/img/bg.jpg differ diff --git a/shifflet.coy/img/bulb_1.jpg b/shifflet.coy/img/bulb_1.jpg new file mode 100644 index 0000000..0b56c61 Binary files /dev/null and b/shifflet.coy/img/bulb_1.jpg differ diff --git a/shifflet.coy/img/bulb_2.jpg b/shifflet.coy/img/bulb_2.jpg new file mode 100644 index 0000000..25f8ea1 Binary files /dev/null and b/shifflet.coy/img/bulb_2.jpg differ diff --git a/shifflet.coy/img/bulb_3.jpg b/shifflet.coy/img/bulb_3.jpg new file mode 100644 index 0000000..14caf8f Binary files /dev/null and b/shifflet.coy/img/bulb_3.jpg differ diff --git a/shifflet.coy/img/bulb_thumb.jpg b/shifflet.coy/img/bulb_thumb.jpg new file mode 100644 index 0000000..03f4aa9 Binary files /dev/null and b/shifflet.coy/img/bulb_thumb.jpg differ diff --git a/shifflet.coy/img/g_1.jpg b/shifflet.coy/img/g_1.jpg new file mode 100644 index 0000000..7dd86ff Binary files /dev/null and b/shifflet.coy/img/g_1.jpg differ diff --git a/shifflet.coy/img/g_2.jpg b/shifflet.coy/img/g_2.jpg new file mode 100644 index 0000000..e6cdb1b Binary files /dev/null and b/shifflet.coy/img/g_2.jpg differ diff --git a/shifflet.coy/img/g_3.jpg b/shifflet.coy/img/g_3.jpg new file mode 100644 index 0000000..26774a3 Binary files /dev/null and b/shifflet.coy/img/g_3.jpg differ diff --git a/shifflet.coy/img/g_thumb.jpg b/shifflet.coy/img/g_thumb.jpg new file mode 100644 index 0000000..bb3ee4e Binary files /dev/null and b/shifflet.coy/img/g_thumb.jpg differ diff --git a/shifflet.coy/img/ipad_1.jpg b/shifflet.coy/img/ipad_1.jpg new file mode 100644 index 0000000..04b5aa9 Binary files /dev/null and b/shifflet.coy/img/ipad_1.jpg differ diff --git a/shifflet.coy/img/ipad_2.jpg b/shifflet.coy/img/ipad_2.jpg new file mode 100644 index 0000000..dd82af9 Binary files /dev/null and b/shifflet.coy/img/ipad_2.jpg differ diff --git a/shifflet.coy/img/ipad_3.jpg b/shifflet.coy/img/ipad_3.jpg new file mode 100644 index 0000000..dd42778 Binary files /dev/null and b/shifflet.coy/img/ipad_3.jpg differ diff --git a/shifflet.coy/img/ipad_thumb.jpg b/shifflet.coy/img/ipad_thumb.jpg new file mode 100644 index 0000000..b94d671 Binary files /dev/null and b/shifflet.coy/img/ipad_thumb.jpg differ diff --git a/shifflet.coy/img/iphone_1.jpg b/shifflet.coy/img/iphone_1.jpg new file mode 100644 index 0000000..c0be77a Binary files /dev/null and b/shifflet.coy/img/iphone_1.jpg differ diff --git a/shifflet.coy/img/iphone_2.jpg b/shifflet.coy/img/iphone_2.jpg new file mode 100644 index 0000000..0dc22d0 Binary files /dev/null and b/shifflet.coy/img/iphone_2.jpg differ diff --git a/shifflet.coy/img/iphone_3.jpg b/shifflet.coy/img/iphone_3.jpg new file mode 100644 index 0000000..692a39a Binary files /dev/null and b/shifflet.coy/img/iphone_3.jpg differ diff --git a/shifflet.coy/img/iphone_thumb.jpg b/shifflet.coy/img/iphone_thumb.jpg new file mode 100644 index 0000000..0ac23bd Binary files /dev/null and b/shifflet.coy/img/iphone_thumb.jpg differ diff --git a/shifflet.coy/img/iwatch_1.jpg b/shifflet.coy/img/iwatch_1.jpg new file mode 100644 index 0000000..ef2302a Binary files /dev/null and b/shifflet.coy/img/iwatch_1.jpg differ diff --git a/shifflet.coy/img/iwatch_2.jpg b/shifflet.coy/img/iwatch_2.jpg new file mode 100644 index 0000000..c2c5de4 Binary files /dev/null and b/shifflet.coy/img/iwatch_2.jpg differ diff --git a/shifflet.coy/img/iwatch_3.jpg b/shifflet.coy/img/iwatch_3.jpg new file mode 100644 index 0000000..bcffdeb Binary files /dev/null and b/shifflet.coy/img/iwatch_3.jpg differ diff --git a/shifflet.coy/img/iwatch_thumb.jpg b/shifflet.coy/img/iwatch_thumb.jpg new file mode 100644 index 0000000..6c91387 Binary files /dev/null and b/shifflet.coy/img/iwatch_thumb.jpg differ diff --git a/shifflet.coy/img/logo.jpg b/shifflet.coy/img/logo.jpg new file mode 100644 index 0000000..0f8c4e2 Binary files /dev/null and b/shifflet.coy/img/logo.jpg differ diff --git a/shifflet.coy/img/plug_1.jpg b/shifflet.coy/img/plug_1.jpg new file mode 100644 index 0000000..1387aac Binary files /dev/null and b/shifflet.coy/img/plug_1.jpg differ diff --git a/shifflet.coy/img/plug_2.jpg b/shifflet.coy/img/plug_2.jpg new file mode 100644 index 0000000..5024cfa Binary files /dev/null and b/shifflet.coy/img/plug_2.jpg differ diff --git a/shifflet.coy/img/plug_3.jpg b/shifflet.coy/img/plug_3.jpg new file mode 100644 index 0000000..ea3e885 Binary files /dev/null and b/shifflet.coy/img/plug_3.jpg differ diff --git a/shifflet.coy/img/plug_thumb.jpg b/shifflet.coy/img/plug_thumb.jpg new file mode 100644 index 0000000..170e65b Binary files /dev/null and b/shifflet.coy/img/plug_thumb.jpg differ diff --git a/shifflet.coy/img/ring_1.jpg b/shifflet.coy/img/ring_1.jpg new file mode 100644 index 0000000..aefb2e7 Binary files /dev/null and b/shifflet.coy/img/ring_1.jpg differ diff --git a/shifflet.coy/img/ring_2.jpg b/shifflet.coy/img/ring_2.jpg new file mode 100644 index 0000000..236fb5d Binary files /dev/null and b/shifflet.coy/img/ring_2.jpg differ diff --git a/shifflet.coy/img/ring_3.jpg b/shifflet.coy/img/ring_3.jpg new file mode 100644 index 0000000..47b12f3 Binary files /dev/null and b/shifflet.coy/img/ring_3.jpg differ diff --git a/shifflet.coy/img/ring_thumb.jpg b/shifflet.coy/img/ring_thumb.jpg new file mode 100644 index 0000000..d1e5078 Binary files /dev/null and b/shifflet.coy/img/ring_thumb.jpg differ diff --git a/shifflet.coy/img/sam_1.jpg b/shifflet.coy/img/sam_1.jpg new file mode 100644 index 0000000..e6ec9a9 Binary files /dev/null and b/shifflet.coy/img/sam_1.jpg differ diff --git a/shifflet.coy/img/sam_2.jpg b/shifflet.coy/img/sam_2.jpg new file mode 100644 index 0000000..8c60f3d Binary files /dev/null and b/shifflet.coy/img/sam_2.jpg differ diff --git a/shifflet.coy/img/sam_3.jpg b/shifflet.coy/img/sam_3.jpg new file mode 100644 index 0000000..b5f5ec6 Binary files /dev/null and b/shifflet.coy/img/sam_3.jpg differ diff --git a/shifflet.coy/img/sam_thumb.jpg b/shifflet.coy/img/sam_thumb.jpg new file mode 100644 index 0000000..d0ce56e Binary files /dev/null and b/shifflet.coy/img/sam_thumb.jpg differ diff --git a/shifflet.coy/img/samp_1.jpg b/shifflet.coy/img/samp_1.jpg new file mode 100644 index 0000000..ce3a4ee Binary files /dev/null and b/shifflet.coy/img/samp_1.jpg differ diff --git a/shifflet.coy/img/samp_2.jpg b/shifflet.coy/img/samp_2.jpg new file mode 100644 index 0000000..c0760f0 Binary files /dev/null and b/shifflet.coy/img/samp_2.jpg differ diff --git a/shifflet.coy/img/samp_3.jpg b/shifflet.coy/img/samp_3.jpg new file mode 100644 index 0000000..c1a2bc1 Binary files /dev/null and b/shifflet.coy/img/samp_3.jpg differ diff --git a/shifflet.coy/img/samp_thumb.jpg b/shifflet.coy/img/samp_thumb.jpg new file mode 100644 index 0000000..68cfd1d Binary files /dev/null and b/shifflet.coy/img/samp_thumb.jpg differ diff --git a/shifflet.coy/img/samw_1.jpg b/shifflet.coy/img/samw_1.jpg new file mode 100644 index 0000000..680dec5 Binary files /dev/null and b/shifflet.coy/img/samw_1.jpg differ diff --git a/shifflet.coy/img/samw_2.jpg b/shifflet.coy/img/samw_2.jpg new file mode 100644 index 0000000..0e9362c Binary files /dev/null and b/shifflet.coy/img/samw_2.jpg differ diff --git a/shifflet.coy/img/samw_3.jpg b/shifflet.coy/img/samw_3.jpg new file mode 100644 index 0000000..61df296 Binary files /dev/null and b/shifflet.coy/img/samw_3.jpg differ diff --git a/shifflet.coy/img/samw_thumb.jpg b/shifflet.coy/img/samw_thumb.jpg new file mode 100644 index 0000000..7b8ffc7 Binary files /dev/null and b/shifflet.coy/img/samw_thumb.jpg differ diff --git a/shifflet.coy/img/scale_1.jpg b/shifflet.coy/img/scale_1.jpg new file mode 100644 index 0000000..7d4f3e7 Binary files /dev/null and b/shifflet.coy/img/scale_1.jpg differ diff --git a/shifflet.coy/img/scale_2.jpg b/shifflet.coy/img/scale_2.jpg new file mode 100644 index 0000000..159b554 Binary files /dev/null and b/shifflet.coy/img/scale_2.jpg differ diff --git a/shifflet.coy/img/scale_3.jpg b/shifflet.coy/img/scale_3.jpg new file mode 100644 index 0000000..8be865e Binary files /dev/null and b/shifflet.coy/img/scale_3.jpg differ diff --git a/shifflet.coy/img/scale_thumb.jpg b/shifflet.coy/img/scale_thumb.jpg new file mode 100644 index 0000000..e420af0 Binary files /dev/null and b/shifflet.coy/img/scale_thumb.jpg differ diff --git a/shifflet.coy/img/x1_1.jpg b/shifflet.coy/img/x1_1.jpg new file mode 100644 index 0000000..b04b413 Binary files /dev/null and b/shifflet.coy/img/x1_1.jpg differ diff --git a/shifflet.coy/img/x1_2.jpg b/shifflet.coy/img/x1_2.jpg new file mode 100644 index 0000000..1f0ba1c Binary files /dev/null and b/shifflet.coy/img/x1_2.jpg differ diff --git a/shifflet.coy/img/x1_3.jpg b/shifflet.coy/img/x1_3.jpg new file mode 100644 index 0000000..ab9ab99 Binary files /dev/null and b/shifflet.coy/img/x1_3.jpg differ diff --git a/shifflet.coy/img/x1_thumb.jpg b/shifflet.coy/img/x1_thumb.jpg new file mode 100644 index 0000000..aa38453 Binary files /dev/null and b/shifflet.coy/img/x1_thumb.jpg differ diff --git a/shifflet.coy/index.html b/shifflet.coy/index.html new file mode 100644 index 0000000..71ce1be --- /dev/null +++ b/shifflet.coy/index.html @@ -0,0 +1,116 @@ + + + + + + Progress Overview - SkillSync AI + + + +
+
+

Your Progress

+

Track your learning journey and next steps.

+
+ + +
+
75%
+
+ + +
+

AI Recommendations

+ +
+

Next Step: Complete Python Basics

+

Finish the remaining 2 modules to strengthen your Python skills.

+ +
+ +
+

Revise: Data Analysis Fundamentals

+

Review your recent performance and retake key practice questions.

+ +
+ +
+

Test: JavaScript Intermediate

+

Take the skill test to measure your progress.

+ +
+
+
+ + diff --git a/shifflet.coy/index.php b/shifflet.coy/index.php new file mode 100644 index 0000000..f770131 --- /dev/null +++ b/shifflet.coy/index.php @@ -0,0 +1,43 @@ + + + + + Home Page + + + +
+ + +
+

Welcome to Trech!

+

Trech is your ultimate destination for trendy tech. Whether you're upgrading your gadgets, exploring smart devices, or investing in cutting-edge technology, we've got what you need to stay ahead.

+ +

Our mission is to make technology accessible and exciting for everyone. From the latest smartphones and laptops to innovative smart home solutions and wearables, Trech offers a carefully curated selection of products designed to fit your modern lifestyle.

+ +

We believe shopping for tech should be fun and effortless. That's why we provide detailed product information, personalized recommendations, and an easy-to-navigate online store. Discover the future of tech with Trech!

+
+ +
+
Use promo code TRENDY20 at checkout for 20% off your first purchase.
+
+ +
+

New Arrivals

+ +
+ +
+ +
+ + + + + + diff --git a/shifflet.coy/js/product_list.js b/shifflet.coy/js/product_list.js new file mode 100644 index 0000000..9c1b6c6 --- /dev/null +++ b/shifflet.coy/js/product_list.js @@ -0,0 +1,38 @@ +const showResults = d => { + $(".productlist").html( + d.error?d.error: + d.result.length?listItemTemplate(d.result): + 'No Results'); +} + + +query({type:'products_all'}).then(showResults); + +$(()=>{ + $("#product-search").on("submit",function(e){ + e.preventDefault(); + let search = $(this).find("input").val(); + query({type:'product_search',search:search}).then(showResults); + }) + + + $("[data-filter").on("click",function(e){ + let column = $(this).data("filter"); + let value = $(this).data("value"); + query( + value==""? {type:'products_all'} : + {type:'product_filter',column:column,value:value} + ).then(showResults); + }) + + $(".js-sort").on("change",function(e){ + ( + this.value==1 ? query({type:'product_sort',column:'date_create',dir:'DESC'}) : + this.value==2 ? query({type:'product_sort',column:'date_create',dir:'ASC'}) : + this.value==3 ? query({type:'product_sort',column:'price',dir:'ASC'}) : + this.value==4 ? query({type:'product_sort',column:'price',dir:'DESC'}) : + + query({type:'products_all'}) + ).then(showResults); + }) +}) \ No newline at end of file diff --git a/shifflet.coy/js/product_thumbs.js b/shifflet.coy/js/product_thumbs.js new file mode 100644 index 0000000..91a00e8 --- /dev/null +++ b/shifflet.coy/js/product_thumbs.js @@ -0,0 +1,9 @@ + +$(()=>{ + + $(".images-thumbs img").on("mouseenter",function(e){ + let src = $(this).attr("src"); + $(".images-main img").attr("src",src); + }) + +}); diff --git a/shifflet.coy/js/templates.js b/shifflet.coy/js/templates.js new file mode 100644 index 0000000..145262a --- /dev/null +++ b/shifflet.coy/js/templates.js @@ -0,0 +1,12 @@ +const listItemTemplate = templater(o=>` + +
+
+ Health
+
+
$${o.price}
+
${o.name}
+
+
+ +`); diff --git a/shifflet.coy/landingpage.html b/shifflet.coy/landingpage.html new file mode 100644 index 0000000..89cedc1 --- /dev/null +++ b/shifflet.coy/landingpage.html @@ -0,0 +1,81 @@ + + + + + + Store Landing Page + + + + + + +
+

My Online Store

+ +
+ + +
+

Welcome to the Best Online Store

+
+
+
+
+
+ + +
+

Our Products

+
+
+

Product 1

+

Description of product 1. It's amazing!

+
+
+

Product 2

+

Description of product 2. You’ll love it!

+
+
+

Product 3

+

Description of product 3. Best deal today!

+
+
+
+ + + +
+

Exclusive Discounts

+
+

50% Off on All Items!

+

Use the code SAVE50 at checkout to enjoy half off on all products!

+
+
+ + +
+

About Our Company

+
+

We are a leading online store with a focus on delivering high-quality products at competitive prices.

+
+
+ + +
+

Subscribe to Our Newsletter

+
+ + +
+
+ + + diff --git a/shifflet.coy/lib/css/gridsystem.css b/shifflet.coy/lib/css/gridsystem.css new file mode 100644 index 0000000..33df67c --- /dev/null +++ b/shifflet.coy/lib/css/gridsystem.css @@ -0,0 +1,120 @@ +.grid { + display: grid; + grid-template-columns: repeat(12, 1fr); +} + +.grid.ten { + grid-template-columns: repeat(10, 1fr); +} + +.grid.gap { + --grid-gap: 1em; + grid-gap: var(--grid-gap); + gap: var(--grid-gap); +} + +/* Extra Small */ +@media (min-width: 0px) { + .gap.xs-large { --grid-gap: 2em; } + .gap.xs-medium { --grid-gap: 1em; } + .gap.xs-small { --grid-gap: 0.5em; } + + .col-xs-0 { display: none; } + .col-xs-1 { grid-column: span 1; } + .col-xs-2 { grid-column: span 2; } + .col-xs-3 { grid-column: span 3; } + .col-xs-4 { grid-column: span 4; } + .col-xs-5 { grid-column: span 5; } + .col-xs-6 { grid-column: span 6; } + .col-xs-7 { grid-column: span 7; } + .col-xs-8 { grid-column: span 8; } + .col-xs-9 { grid-column: span 9; } + .col-xs-10 { grid-column: span 10; } + .col-xs-11 { grid-column: span 11; } + .col-xs-12 { grid-column: span 12; } +} + +/* Small */ +@media (min-width: 380px) { + .gap.sm-large { --grid-gap: 2em; } + .gap.sm-medium { --grid-gap: 1em; } + .gap.sm-small { --grid-gap: 0.5em; } + + .col-sm-0 { display: none; } + .col-sm-1 { grid-column: span 1; } + .col-sm-2 { grid-column: span 2; } + .col-sm-3 { grid-column: span 3; } + .col-sm-4 { grid-column: span 4; } + .col-sm-5 { grid-column: span 5; } + .col-sm-6 { grid-column: span 6; } + .col-sm-7 { grid-column: span 7; } + .col-sm-8 { grid-column: span 8; } + .col-sm-9 { grid-column: span 9; } + .col-sm-10 { grid-column: span 10; } + .col-sm-11 { grid-column: span 11; } + .col-sm-12 { grid-column: span 12; } +} + +/* Medium */ +@media (min-width: 550px) { + .gap.md-large { --grid-gap: 2em; } + .gap.md-medium { --grid-gap: 1em; } + .gap.md-small { --grid-gap: 0.5em; } + + .col-md-0 { display: none; } + .col-md-1 { grid-column: span 1; } + .col-md-2 { grid-column: span 2; } + .col-md-3 { grid-column: span 3; } + .col-md-4 { grid-column: span 4; } + .col-md-5 { grid-column: span 5; } + .col-md-6 { grid-column: span 6; } + .col-md-7 { grid-column: span 7; } + .col-md-8 { grid-column: span 8; } + .col-md-9 { grid-column: span 9; } + .col-md-10 { grid-column: span 10; } + .col-md-11 { grid-column: span 11; } + .col-md-12 { grid-column: span 12; } +} + + +/* Large */ +@media (min-width: 900px) { + .gap.lg-large { --grid-gap: 2em; } + .gap.lg-medium { --grid-gap: 1em; } + .gap.lg-small { --grid-gap: 0.5em; } + + .col-lg-0 { display: none; } + .col-lg-1 { grid-column: span 1; } + .col-lg-2 { grid-column: span 2; } + .col-lg-3 { grid-column: span 3; } + .col-lg-4 { grid-column: span 4; } + .col-lg-5 { grid-column: span 5; } + .col-lg-6 { grid-column: span 6; } + .col-lg-7 { grid-column: span 7; } + .col-lg-8 { grid-column: span 8; } + .col-lg-9 { grid-column: span 9; } + .col-lg-10 { grid-column: span 10; } + .col-lg-11 { grid-column: span 11; } + .col-lg-12 { grid-column: span 12; } +} + +/* Extra Large */ +@media (min-width: 1200px) { + .gap.xl-large { --grid-gap: 2em; } + .gap.xl-medium { --grid-gap: 1em; } + .gap.xl-small { --grid-gap: 0.5em; } + + .col-xl-0 { display: none; } + .col-xl-1 { grid-column: span 1; } + .col-xl-2 { grid-column: span 2; } + .col-xl-3 { grid-column: span 3; } + .col-xl-4 { grid-column: span 4; } + .col-xl-5 { grid-column: span 5; } + .col-xl-6 { grid-column: span 6; } + .col-xl-7 { grid-column: span 7; } + .col-xl-8 { grid-column: span 8; } + .col-xl-9 { grid-column: span 9; } + .col-xl-10 { grid-column: span 10; } + .col-xl-11 { grid-column: span 11; } + .col-xl-12 { grid-column: span 12; } +} diff --git a/shifflet.coy/lib/css/styleguide.css b/shifflet.coy/lib/css/styleguide.css new file mode 100644 index 0000000..96be55c --- /dev/null +++ b/shifflet.coy/lib/css/styleguide.css @@ -0,0 +1,495 @@ +/* CSS RESET */ + +*, *::after, *::before { + box-sizing: border-box; +} + +:root { + --color-primary: #004175; /* Midnight Blue */ + --color-secondary: #708090; /* Slate Gray */ + --color-accent: #CCFF00; /* Electric Lime */ + --color-offwhite: #f4f4f4; + --color-white: #ffffff; + --color-black: #000000; +} + +--header-height: 3rem; +--spacing: 1rem; + +--font-serif: Georgia, "Times New Roman", serif; +--font-sans: avenir, Arial, sans-serif; + +body { + margin: 0; + font-size: 100%; + font-family: var(--font-sans); +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-serif); +} + +a { + color: inherit; + font-weight: bold; + text-decoration: none; +} + +a:hover { + text-decoration: none; + color: var(--color-accent); +} + +.largetext { + text-align: center; + font-size: 2em; +} + +/* LAYOUT CLASSES */ + +.container { + max-width: 800px; + margin-right: auto; + margin-left: auto; +} + +.cartcontainer { + max-width: 1200px; + margin-right: auto; + margin-left: auto; +} + +.itemcontainer { + max-width: 1500px; + margin-right: auto; + margin-left: auto; +} +.view-window { + height: 10vh; /* Or any fixed height, e.g., 300px */ + background-size: cover; + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; +} +.display-flex { + display: flex; +} + +.display-inline-flex { + display: inline-flex; +} + +.display-block { + display: block; +} + +.display-inline-block { + display: inline-block; +} + +.flex-stretch { + flex: 1 1 auto; +} + +.flex-none { + flex: none; +} + +.flex-align-center { + align-items: center; +} + +.flex-justify-center { + justify-content: center; +} + +.flex-column { + flex-direction: column; +} + +.flex-wrap { + flex-wrap: wrap; +} + +/* Small classes */ + +.media-image { + max-width: 100%; + vertical-align: text-bottom; +} + +.hidden { + display: none; +} + +/* COMPONENT CLASSES */ + +.nav ul { + list-style-type: none; + margin-top: 0; + margin-bottom: 0; + padding-left: 0; +} + +.nav a { + display: block; + padding: 0.2em 0.5em; +} + +.nav a:hover { + color: var(--color-accent); + text-decoration: none; +} + +.nav .active a { + background-color: var(--color-accent); + color: var(--color-white); + text-decoration: none; +} + +.nav-material ul, .nav-crumbs ul, .nav-pills ul, .nav-stretch ul, .nav-flex ul { + display: flex; +} + + +.nav-material li, .nav-stretch li { + flex: 1 1 auto; + text-align: center; +} + +.nav-pills a { + border-radius: 2em; + padding: 0.5em 1em; +} + +.nav-crumbs a { + display: inline-block; +} + +.nav-crumbs .active a, .nav-crumbs a:hover { + background-color: var(--color-secondary); + color: inherit; + text-decoration: none; +} + +.nav-crumbs li:not(:first-child)::before { + content: '/'; +} + +.nav-material a { + padding: 0.5em 1em; + position: relative; +} + +.nav-material a:hover { + background-color: var(--color-offwhite); + color: inherit; +} + +.nav-material a::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 0; + background-color: var(--color-secondary); + transition: all 0.3s; +} + +.nav-material .active a { + background-color: transparent; + color: inherit; +} + +.nav-material .active a::after { + height: 4px; +} + +.navbar { + background-color: var(--color-primary); + color: var(--color-white); + line-height: var(--header-height); +} + +.navbar h4 { + font-size: 0.5em; + margin: 0; + color: var(--color-white); +} + +.navbar a { + padding: 0 0.5em; +} + +/* CARD */ + +.card { + background-color: var(--color-offwhite); + margin-top: 1em; + margin-bottom: 1em; + padding: 1em; + overflow: hidden; + position: relative; +} + +.card.soft { + border-radius: 0.5em; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + background-color: var(--color-white); +} + +.card.hard { + border-radius: 0.5em; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + background-color: var(--color-secondary); + color: var(--color-white); +} + +.card.dark { + background-color: var(--color-primary); + color: var(--color-white); +} + +.card.medium { + background-color: var(--color-secondary); + color: var(--color-white); +} + +.card.flat { + background-color: var(--color-offwhite); + padding: 0; +} + +/* Footer */ + +.footer { + background-color: var(--color-primary); /* Matches the navbar background */ + color: var(--color-white); /* Ensure text is readable */ + padding: 2em 1em; /* Add padding for spacing */ + text-align: center; /* Center align the text and elements */ +} + +.footer-section img { + max-width: 150px; /* Adjust logo size */ + margin-bottom: 1em; /* Add spacing below the logo */ +} + +.footer-section p { + margin: 0.5em 0; /* Add spacing between paragraphs */ +} + +.subscribe-form { + display: flex; + flex-wrap: wrap; + gap: 0.5em; /* Add spacing between elements */ + justify-content: center; /* Center align the form */ +} + +.subscribe-input { + padding: 0.5em; + flex: 1 1 200px; /* Responsive width for input */ + border: 1px solid var(--color-secondary); /* Add a border for the input */ + border-radius: 5px; +} + +.subscribe-button { + background-color: var(--color-accent); /* Accent color for the button */ + color: var(--color-primary); /* Ensure contrast for the button text */ + border: none; + padding: 0.5em 1em; + border-radius: 5px; + cursor: pointer; +} + +.google-map iframe { + width: 100%; + height: 200px; + border: none; + border-radius: 10px; /* Add rounded corners to the map */ +} + + +/* Figure */ + +.figure { + margin: 0; + background-color: var(--color-white); +} + +.figure img { + width: 100%; + vertical-align: text-bottom; +} + +.figure figcaption { + padding: 1em; + font-family: var(--font-serif); +} + +/* Colors */ + +.color-1 { + background-color: var(--color-primary); + color: var(--color-white); +} + +.color-2 { + background-color: var(--color-secondary); + color: var(--color-white); +} + +.color-3 { + background-color: var(--color-accent); + color: var(--color-black); +} + +.color-4 { + background-color: var(--color-accent); /* Electric Lime */ + color: var(--color-white); +} + +.color-5 { + background-color: var(--color-secondary); /* Slate Gray */ + color: var(--color-white); +} + +.color-6 { + background-color: var(--color-primary); /* Midnight Blue */ + color: var(--color-white); +} + +/* forms */ + +.form-control { + margin: 1em 0; +} + + +.form-item { + display: inline-block; + background-color: transparent; + border-width: 0; + font: inherit; + -webkit-appearance: none; + color: inherit; + width: 100%; + outline: 0; +} + +.form-input { + border-bottom: 1px solid var(--color-secondary); + padding: 0.5em 1em; +} + +.form-input:focus { + border-bottom-color: var(--color-accent); /* Electric Lime */ +} + +.form-label { + font-size: 0.8em; + color: var(--color-primary); /* Midnight Blue */ + display: block; + width: 100%; +} + +.form-button { + background-color: var(--color-primary); + color: white; + border: none; + padding: 0.5em 1em; + border-radius: 0.3em; + text-align: center; + text-decoration: none; + cursor: pointer; +} + +.form-button.inline { + width: initial; +} + +.form-button:hover { + text-decoration: none; + background-color: var(--color-secondary); /* Slate Gray */ +} + +.form-button:active { + background-color: var(--color-accent); /* Electric Lime */ +} + +.hotdog { + background-color: var(--color-secondary); /* Slate Gray */ + border-radius: 2em; + padding: 0.5em 1.5em; + display: flex; + color: var(--color-white); +} + +.hotdog.dark { + background-color: var(--color-primary); /* Midnight Blue */ + color: var(--color-white); +} + +.hotdog.light { + background-color: var(--color-accent); /* Electric Lime */ + color: var(--color-black); + border-radius: 2em; +} + +.form-select > select { + padding: 0.5em 1.3em; + background-color: var(--color-secondary); /* Slate Gray */ + border-radius: 0.3em; + cursor: pointer; +} + +.form-select { + position: relative; +} + +.form-select::after { + content: '\25BC'; + font-family: sans-serif; + font-size: 0.6em; + position: absolute; + top: 50%; + right: 0.7em; + transform: translateY(-50%); + pointer-events: none; + color: var(--color-primary); /* Midnight Blue */ +} + +/* Toggle */ + +.toggle label { + font-size: 1em; + display: inline-block; + width: 1.7em; + height: 0.7em; + border: 1.9px solid var(--color-primary); /* Midnight Blue */ + border-radius: 1em; + position: relative; +} + +.toggle label::after { + content: ''; + display: inline-block; + width: 0.6em; + height: 0.6em; + border-radius: 1em; + position: absolute; + background-color: var(--color-accent); /* Electric Lime */ + transition: all 0.3s; +} + +.toggle input:checked + label::after { + transform: translateX(1em); +} + +.card-section~.card-section { + border-top: 1px solid var(--color-primary); /* Midnight Blue */ +} + +.card-section { + padding: 1em; +} diff --git a/shifflet.coy/lib/js/functions.js b/shifflet.coy/lib/js/functions.js new file mode 100644 index 0000000..149a12e --- /dev/null +++ b/shifflet.coy/lib/js/functions.js @@ -0,0 +1,14 @@ +const query = (options) => { + return fetch('data/api.php',{ + method:'POST', + body: JSON.stringify(options), + headers:{'Content-Type':'application/json'} + }).then(d=>d.json()); +} + + +const templater = f => a => + (Array.isArray(a)?a:[a]) + .reduce((r,o,i,a)=>r+f(o,i,a),''); + + diff --git a/shifflet.coy/lib/php/functions.php b/shifflet.coy/lib/php/functions.php new file mode 100644 index 0000000..a81cc66 --- /dev/null +++ b/shifflet.coy/lib/php/functions.php @@ -0,0 +1,99 @@ +", print_r($v), ""; +} + +function file_get_json($filename) { + $file = file_get_contents($filename); + return json_decode($file); +} + +include_once "auth.php"; + +function makeConn() { + $conn = new mysqli(...MYSQLIAuth()); + if ($conn->connect_errno) die($conn->connect_error); + $conn->set_charset('utf8'); + return $conn; +} + +function makePDOConn() { + try { + $conn = new PDO(...PDOAuth()); + } catch (PDOException $e) { + die($e->getMessage()); + } + return $conn; +} + +function makeQuery($conn,$qry) { + $result = $conn->query($qry); + if ($conn->errno) die($conn->error); + $a = []; + while ($row = $result->fetch_object()) { + $a[] = $row; + } + return $a; +} + +/* Cart Functions */ + +function array_find($array, $fn) { + foreach ($array as $o) if ($fn($o)) return $o; + return false; +} + +function getCart() { + return isset($_SESSION['cart']) ? $_SESSION['cart'] : []; +} + +function addToCart($id, $amount) { + $cart = getCart(); + + $p = array_find($cart, function ($o) use ($id) { return $o->id == $id; }); + + if ($p) { + $p->amount += $amount; + } else { + $_SESSION['cart'][] = (object)[ + "id" => $id, + "amount" => $amount, + ]; + } +} + + +function resetCart() { $_SESSION['cart'] = []; } + +function cartItemById($id) { + return array_find(getCart(), function ($o) use ($id) { return $o->id == $id; }); +} + +function makeCartBadge() { + $cart = getCart(); + if (count($cart) == 0) { + return ""; + } else { + return "(" . array_reduce($cart, function ($r, $o) { return $r + $o->amount; }, 0) . ")"; + } +} + +function getCartItems() { + $cart = getCart(); + + if (empty($cart)) return []; + + $ids = implode(",", array_map(function ($o) { return $o->id; }, $cart)); + $data = makeQuery(makeConn(), "SELECT * FROM `products` WHERE `id` IN ($ids)"); + + return array_map(function ($o) use ($cart) { + $p = cartItemByID($o->id); + $o->amount = $p->amount; + $o->total = $p->amount * $o->price; + return $o; + }, $data); +} +?> diff --git a/shifflet.coy/notes/index.php b/shifflet.coy/notes/index.php new file mode 100644 index 0000000..e81d619 --- /dev/null +++ b/shifflet.coy/notes/index.php @@ -0,0 +1,162 @@ + + + + + + Document + + + + + + + Document + + +Hello World"; + echo "
Goodbye World
"; + + + // Variables + $a = 5; + + + echo $a; + + // String Interpolation + echo "
$a things
"; + echo "
$a things
"; + + // Number + // Integer + $b = 15; + // Float + $b = 0.576; + + $b = 10; + + // String + $name = "Yerguy2"; + + // Boolean + $isOn = true; + + // Math + // PEMDAS + echo (5 + 4) * 2; + + // Concatenation + echo "
b + a"."=c
"; + echo "
$b + $a = ".($a+$b)."
"; + + ?> + +
+
This is my name
+
+ + + +
+ visit
"; + echo "
My name is {$_GET['name']}
"; + + // ?name=Joey&type=textarea + echo "<{$_GET['type']}>My name is {$_GET['name']}"; + + ?> + +
+ $colors[0] +
$colors[1] +
$colors[2] + "; + + echo count($colors); + + ?> + +
+ This text is green +
+ +
+ "#f00", + "green" => "#0f0", + "blue" => "#00f" + ]; + + echo $colorsAssociative['green']; + + ?> + +
+ "; + + // Array Index Notation + echo $colors[0]."
"; + echo $colorsAssociative['red']."
"; + echo $colorsAssociative[$colors[0]]."
"; + + // Object Property Notation + echo $colorsObject->red."
"; + echo $colorsObject->{$colors[0]}."
"; + + ?> + + +
+ "; + print_r($colorsAssociative); + echo "
"; + echo"
", print_r($colorsObject),"
"; + + + // Function + function print_p($v){ + echo"
", print_r($v),"
"; + } + + print_p($_GET); + + ?> + + + \ No newline at end of file diff --git a/shifflet.coy/notes/notes.json b/shifflet.coy/notes/notes.json new file mode 100644 index 0000000..9d68cf9 --- /dev/null +++ b/shifflet.coy/notes/notes.json @@ -0,0 +1,11 @@ +{ + + "notes":[ + "JSON files always start with either an array [] or an object {}", + "JSON files cannot have comments, so put any comments in this array", + "Commas go between items in an array or object, but there should never be a trailing comma", + "All property names must be in quotation marks" + "All string quotation marks must be double quotes", + "Use a linter like jsonlint.com to check json" + ] +} diff --git a/shifflet.coy/notes/reading_data.php b/shifflet.coy/notes/reading_data.php new file mode 100644 index 0000000..eb37064 --- /dev/null +++ b/shifflet.coy/notes/reading_data.php @@ -0,0 +1,56 @@ + + + + + + Reading Data + + + + + + + + +
+
+

Notes

+ + notes) ; $i++) { + echo "
  • {$notes_object->notes[$i]}
    • "; + } + + ?> +
    + + +
    +

    Users

    + + + {$users_array[$i]->name} + {$users_array[$i]->type} + "; + } + + ?> +
    +
    + + + \ No newline at end of file diff --git a/shifflet.coy/parts/footer.php b/shifflet.coy/parts/footer.php new file mode 100644 index 0000000..f9e4198 --- /dev/null +++ b/shifflet.coy/parts/footer.php @@ -0,0 +1,26 @@ + + diff --git a/shifflet.coy/parts/meta.php b/shifflet.coy/parts/meta.php new file mode 100644 index 0000000..f999669 --- /dev/null +++ b/shifflet.coy/parts/meta.php @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/shifflet.coy/parts/navbar.php b/shifflet.coy/parts/navbar.php new file mode 100644 index 0000000..a1f45b3 --- /dev/null +++ b/shifflet.coy/parts/navbar.php @@ -0,0 +1,21 @@ +
    +
    +
    + + Trech Logo + +
    +
    + +
    +
    + diff --git a/shifflet.coy/parts/templates.php b/shifflet.coy/parts/templates.php new file mode 100644 index 0000000..b858cc9 --- /dev/null +++ b/shifflet.coy/parts/templates.php @@ -0,0 +1,111 @@ +id"> +
    +
    + Tech
    +
    +
    $$o->price
    +
    $o->name
    +
    +
    + +HTML; +} + + +function selectAmount($amount=1,$total=10) { + $output = ""; + return $output; +} + + +function cartListTemplate($r,$o){ +$totalfixed = number_format($o->total,2,'.',''); +$selectamount = selectAmount($o->amount,10); +return $r.<< +
    + +
    +
    + $o->name +
    + + +
    +
    +
    +
    $$totalfixed
    +
    + + +
    + + $selectamount +
    +
    +
    +
    +HTML; +} + + +function cartTotals() { + $cart = getCartItems(); + + $cartprice = array_reduce($cart,function($r,$o){return $r + $o->total;},0); + + $pricefixed = number_format($cartprice,2,'.',''); + $taxfixed = number_format($cartprice*0.0725,2,'.',''); + $taxedfixed = number_format($cartprice*1.0725,2,'.',''); + + +return << +
    Sub Total
    +
    $$pricefixed
    + +
    +
    Taxes
    +
    $$taxfixed
    +
    +
    +
    Total
    +
    $$taxedfixed
    +
    +HTML; +} + + + +function recommendedProducts($a) { +$products = array_reduce($a,'productListTemplate'); +echo <<$products +HTML; +} + +function recommendedCategory($cat,$limit=3) { + $result = makeQuery(makeConn(),"SELECT * FROM `products` WHERE `category`='$cat' ORDER BY `date_create` DESC LIMIT 6"); + recommendedProducts($result); + +} + +function recommendedSimilar($cat,$id=0,$limit=3) { + $result = makeQuery(makeConn(),"SELECT * FROM `products` WHERE `category`='$cat' AND `id`<>$id ORDER BY rand() DESC LIMIT 3"); + recommendedProducts($result); + +} + +function recommendedAnything($cat,$id=0,$limit=3) { + $result = makeQuery(makeConn(),"SELECT * FROM `products` WHERE `category`='$cat' AND `id`<>$id ORDER BY rand() DESC LIMIT 6"); + recommendedProducts($result); + +} \ No newline at end of file diff --git a/shifflet.coy/product_added_to_cart b/shifflet.coy/product_added_to_cart new file mode 100644 index 0000000..7bd80d5 --- /dev/null +++ b/shifflet.coy/product_added_to_cart @@ -0,0 +1,49 @@ + + + + Store: Product Added To Cart + + + + + + + + +
    +
    +
    +

    Cart Confirmation

    + +
    + Thank you for adding amount ?> of the name ?> to the cart. +
    +
    + +
    +
    +
    + Back to Shopping +
    +
    +
    + Check Cart +
    +
    +
    +
    +
    + + + + diff --git a/shifflet.coy/product_cart.php b/shifflet.coy/product_cart.php new file mode 100644 index 0000000..92e788f --- /dev/null +++ b/shifflet.coy/product_cart.php @@ -0,0 +1,50 @@ + + + + Store: Cart + + + + + + + + +
    + + +
    +
    +
    + +
    +
    +
    +
    + +
    + Checkout +
    +
    +
    +
    +
    + + + diff --git a/shifflet.coy/product_checkout.php b/shifflet.coy/product_checkout.php new file mode 100644 index 0000000..8c7e8d6 --- /dev/null +++ b/shifflet.coy/product_checkout.php @@ -0,0 +1,93 @@ + + + + Store: Checkout + + + + + + +
    + +
    +
    +
    + +

    Checkout Information

    + +
    +

    Credit Card

    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +

    Billing Address

    + +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    + + +
    +
    +
    +
    + +
    + Complete Payment +
    +
    +
    +
    + + +
    + + + + \ No newline at end of file diff --git a/shifflet.coy/product_confirmation.php b/shifflet.coy/product_confirmation.php new file mode 100644 index 0000000..714c2c2 --- /dev/null +++ b/shifflet.coy/product_confirmation.php @@ -0,0 +1,32 @@ + + + + Store: Purchase Confirmation + + + + + + + + +
    +
    + +

    Purchase Confirmation

    + +
    Thank you for buying
    + +
    + Back to shopping +
    + +
    +
    + + + + diff --git a/shifflet.coy/product_item.php b/shifflet.coy/product_item.php new file mode 100644 index 0000000..d175555 --- /dev/null +++ b/shifflet.coy/product_item.php @@ -0,0 +1,76 @@ +images); + +$image_elements = array_reduce($images, function ($r, $o) { + return $r . ""; +}); + +?> + + + + Store: Product Item + + + + + + + +
    + + +
    +
    +
    +
    + Product Thumbnail +
    +
    + +
    +
    +
    +
    +
    +
    +

    name ?>

    +
    $price ?>
    +
    +
    + + +
    +
    + +
    +
    +
    +
    + +
    +

    Description

    +
    + description ?> +
    +
    + +
    +

    Recommended Products

    + category, $product->id); ?> +
    +
    + + + + diff --git a/shifflet.coy/product_list.php b/shifflet.coy/product_list.php new file mode 100644 index 0000000..4a3efed --- /dev/null +++ b/shifflet.coy/product_list.php @@ -0,0 +1,75 @@ + + + + + + + Product List + + + + + + + + + + + + + +
    +

    Product List

    + +
    + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + + + +
    + +
    + + + + + + + + + diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.04.59\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.04.59\342\200\257PM.png" new file mode 100644 index 0000000..3b12108 Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.04.59\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.05.15\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.05.15\342\200\257PM.png" new file mode 100644 index 0000000..6bc97ce Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.05.15\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.05.37\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.05.37\342\200\257PM.png" new file mode 100644 index 0000000..0464f55 Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.05.37\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.05.48\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.05.48\342\200\257PM.png" new file mode 100644 index 0000000..123cb10 Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.05.48\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.06.14\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.06.14\342\200\257PM.png" new file mode 100644 index 0000000..0b06d40 Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.06.14\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.06.24\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.06.24\342\200\257PM.png" new file mode 100644 index 0000000..9c056e1 Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.06.24\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.06.49\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.06.49\342\200\257PM.png" new file mode 100644 index 0000000..4dd77f1 Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.06.49\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.07.16\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.07.16\342\200\257PM.png" new file mode 100644 index 0000000..c18ce36 Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.07.16\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.07.34\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.07.34\342\200\257PM.png" new file mode 100644 index 0000000..344f588 Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.07.34\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.07.45\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.07.45\342\200\257PM.png" new file mode 100644 index 0000000..c62cb7e Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.07.45\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.08.04\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.08.04\342\200\257PM.png" new file mode 100644 index 0000000..793ec3d Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.08.04\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.08.33\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.08.33\342\200\257PM.png" new file mode 100644 index 0000000..b12644e Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.08.33\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.08.44\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.08.44\342\200\257PM.png" new file mode 100644 index 0000000..ab9442e Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.08.44\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.08.54\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.08.54\342\200\257PM.png" new file mode 100644 index 0000000..7fde553 Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.08.54\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.09.17\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.09.17\342\200\257PM.png" new file mode 100644 index 0000000..bb2ab90 Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.09.17\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.09.29\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.09.29\342\200\257PM.png" new file mode 100644 index 0000000..e39a4ad Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.09.29\342\200\257PM.png" differ diff --git "a/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.09.55\342\200\257PM.png" "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.09.55\342\200\257PM.png" new file mode 100644 index 0000000..bcaeb9d Binary files /dev/null and "b/shifflet.coy/screenshots/Screenshot 2024-12-17 at 11.09.55\342\200\257PM.png" differ diff --git a/shifflet.coy/styleguide/index.html b/shifflet.coy/styleguide/index.html new file mode 100644 index 0000000..d821e96 --- /dev/null +++ b/shifflet.coy/styleguide/index.html @@ -0,0 +1,491 @@ + + + + CSS Styleguide + + + + + + + + + + + + +
    +
    +
    +

    Styleguide

    +
    + +
    + +
    +

    Table of Contents

    +
    + +
    +
    + + + + +
    +

    Typography

    + +
    +

    Headings

    +

    Heading 1

    +

    Heading 2

    +

    Heading 3

    +

    Heading 4

    +
    Heading 5
    +
    Heading 6
    +
    + +
    +

    Paragraphs

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates autem ipsam consectetur voluptatibus libero saepe temporibus soluta nemo, et dolore maiores! Voluptates laborum maxime, unde repellat repudiandae, dolorum repellendus sit.

    +

    Quam delectus, veniam tempore nostrum. Fugit magni voluptatem eaque aut nobis odit quod ipsa voluptates sapiente, quam delectus natus facere doloribus numquam? Reiciendis quos odio quisquam quidem accusantium amet placeat.

    +

    Autem accusamus est porro voluptatibus natus facere aspernatur qui voluptatem distinctio tenetur quidem unde repellendus illo praesentium perferendis molestias, accusantium itaque ab ea, cumque recusandae aliquid. Incidunt consectetur, unde cumque.

    +
    +
    + + +
    +

    Cards

    + +
    +
    +
    Card
    +
    +
    +
    Card Soft
    +
    +
    +
    Card Hard
    +
    +
    +
    Card Flat
    +
    +
    +
    Card Dark
    +
    +
    +
    Card Medium
    +
    +
    +
    + + +
    +

    Colors

    + + +
    + +
    +
    #1F3B2C
    +
    + +
    +
    #69967B
    +
    + +
    +
    #E580A4
    +
    +
    +
    #FFBCD4
    +
    + + +
    +
    #F4EADA
    +
    +
    +
    #F6F3E9
    +
    +
    +
    + + + + + +
    +

    View Window

    +
    +
    + + + + +
    +

    Tables

    + +
    +

    Basic Table

    + + +
    + +
    +

    Striped Table

    + + +
    + +
    +

    Striped Lined Vertical

    + + +
    + +
    +

    Striped Lined Horizontal

    + + +
    + +
    +

    Striped Lined Border

    + + +
    + +
    +

    Striped Lined All

    + + +
    + +
    +

    Combinations

    + + +
    +
    + + +
    +

    Product Grid

    + +
    +
    +
    + +
    +
    Product Name
    +
    $3.99
    +
    +
    +
    +
    +
    + +
    +
    Product Name
    +
    $3.99
    +
    +
    +
    +
    +
    + +
    +
    Product Name
    +
    $3.99
    +
    +
    +
    +
    +

    + +

    +

    Form Inputs

    + +
    + +

    Form Input

    +
    + + + + +
    + +

    Form Label

    +
    + + + + + + + + +
    + +

    Form Control

    +
    + +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    + + + +

    Buttons

    + +
    + +

    Form Buttons

    + +
    + +
    +
    + +
    +
    + Anchor +
    +
    + + +

    Hotdog

    + +
    +

    Hotdog Basic

    +
    +
    + +
    +
    +

    Hotdog Dark

    +
    +
    + +
    +
    +

    Hotdog Light

    +
    +
    + +
    +
    +

    Hotdogs with Icons

    +
    +
    + ≡ + +
    +
    +
    +
    + + ≡ +
    +
    +
    + + +

    Select

    + +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +
    + + +

    Check Boxes

    + +
    +

    Basic Checkbox

    + + +

    Heart Checkbox

    +
    + + +
    + +

    Toggle

    +
    + + +
    +
    +
    + +
    +
    +
    + + +
    +
    +
    +
    + + + + + \ No newline at end of file