diff --git a/.gitignore b/.gitignore index 159f515..90a1d3d 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,7 @@ *.css.map *.sass.map *.scss.map + + +*sftp-config.json +*auth.php diff --git a/README.md b/README.md index f577670..8a869e0 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,8 @@ # wnm608_202190_OL1 Repository for WNM608 + +## Relevant Links +-https://wondanielsung.com +-https://wondanielsung.com/AAU/wnm608/sung.wondaniel +-https://wondanielsung.com/AAU/wnm608/sung.wondaniel/styleguide +-https://wondanielsung.com/AAU/wnm608/sung.wondaniel/admin diff --git a/sung.wondaniel/README.md b/sung.wondaniel/README.md new file mode 100644 index 0000000..4731b55 --- /dev/null +++ b/sung.wondaniel/README.md @@ -0,0 +1,3 @@ +# Won Daniel Sung + +- https://wondanielsung.com diff --git a/sung.wondaniel/admin/index.php b/sung.wondaniel/admin/index.php new file mode 100644 index 0000000..14258d4 --- /dev/null +++ b/sung.wondaniel/admin/index.php @@ -0,0 +1,262 @@ +"Nike", + "model"=>"Pegasus", + "color"=>"Black", + "m/w"=>"m", + "size"=>"10.5", + "images"=>"peagus.jpeg", + "price"=>"199.99", + "description"=>"Comfortable running shoes", + "thumbnail"=>"pegasus_thumb.jpeg", + "category"=>"running" +]; + + + + + + + +// LOGIC + +try { + $conn = makePDOConn(); + switch(@$_GET['action']) { + case "update": + $statement = $conn->prepare("UPDATE + `products` + SET + `model`=?, + `price`=?, + `category`=?, + `description`=?, + `thumbnail`=?, + `images`=?, + `date_modify`=NOW() + Where `id`=? + "); + $statement->execute([ + $_POST['product-model'], + $_POST['product-price'], + $_POST['product-category'], + $_POST['product-description'], + $_POST['product-thumbnail'], + $_POST['product-images'], + $_GET['id'] + ]); + header("location:{$_SERVER['PHP_SELF']}?id={$_GET['id']}"); + break; + case "create": + $statement = $conn->prepare("UPDATE + `products` + ( + `model`, + `price`, + `category`, + `description`, + `thumbnail`, + `images`, + `date_create`, + `date_modify` + ) + VALUES (?,?,?,?,?,?,NOW(),NOW()) + "); + $statement->execute([ + $_POST['product-model'], + $_POST['product-price'], + $_POST['product-category'], + $_POST['product-description'], + $_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->model
+
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."";}); + + +//heredoc +$display = << +

$o->model

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

$addoredit Product

+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ +
+ +HTML; + +$output = $id == "new" ? "
$form
" : + "
+
$display
+
$form
+
+ "; + +$delete = $id == "new" ? "" : "Delete"; + +echo << + + +$output +HTML; +} + + + + + + +?> + + + + User Admin Page + + + + + + + + + +
+
+
+

Product Admin

+
+
+ +
+
+ + +
+ + +

Product List

+ + + + + + +
+ \ No newline at end of file diff --git a/sung.wondaniel/admin/users.php b/sung.wondaniel/admin/users.php new file mode 100644 index 0000000..63f7a71 --- /dev/null +++ b/sung.wondaniel/admin/users.php @@ -0,0 +1,194 @@ +"", + "type"=>"", + "email"=>"", + "classes"=>[] +]; + +//print_p([$_GET,$_POST]); + + +if(isset($_GET['action'])) { + switch($_GET['action']) { + case "update": + $users[$_GET['id']]->name = $_POST['user-name']; + $users[$_GET['id']]->type = $_POST['user-type']; + $users[$_GET['id']]->email = $_POST['user-email']; + $users[$_GET['id']]->classes = explode(",", $_POST['user-classes']); + + file_put_contents($filename,json_encode($users)); + header("location:{$_SERVER['PHP_SELF']}?id={$_GET['id']}"); + break; + case "create": + $empty_user->name = $_POST['user-name']; + $empty_user->type = $_POST['user-type']; + $empty_user->email = $_POST['user-email']; + $empty_user->classes = explode(",", $_POST['user-classes']); + + $id = count($users); + + $user[] = $empty_user; + + file_put_contents($filename,json_encode($users)); + header("location:{$_SERVER['PHP_SELF']}?id=$id"); + break; + case "delete": + header("location:{$_SERVER['PHP_SELF']}"); + break; + } +} + +if(isset($_POST['user-name'])) { + $users[$_GET['id']]->name = $_POST['user-name']; + $users[$_GET['id']]->type = $_POST['user-type']; + $users[$_GET['id']]->email = $_POST['user-email']; + $users[$_GET['id']]->classes = explode(",", $_POST['user-classes']); + + file_put_contents($filename,json_encode($users)); +} + + +function showUserPage($user) { + +$id = $_GET['id']; +$addoredit = $id == "new" ? "Add" : "Edit"; +$createorupdate = $id == "new" ? "create" : "update"; +$classes = implode(", ", $user->classes); + + +//heredoc +echo << + + + +
+

$addoredit User

+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+ + + +HTML; +} + +?> + + + + + + User Admin Page + + + + + + + + + +
+
+
+

User Admin

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

User List

+ + + + +
+
+ + + + + + \ No newline at end of file diff --git a/sung.wondaniel/css/storetheme.css b/sung.wondaniel/css/storetheme.css new file mode 100644 index 0000000..84df784 --- /dev/null +++ b/sung.wondaniel/css/storetheme.css @@ -0,0 +1,143 @@ + +:root{ + --color-offwhite: #f4f4f4; + + --color-main-light: #FAFAFA; + --color-main-medium: #FF914D; + --color-main-dark: #000000; +} + +body { + background-color:var(--color-offwhite) ; + padding-bottom: 4em; +} + +.favorite label { + transition: all 0.3s; + display: inline-block; + transform: scale(1,1); + color: var(--color-neutral-medium); + +} + +.favorite input:checked + label { + color: red; + transform: scale(1.5, 1.5); +} + + +@media (max-width: 800px) { + .container{ + padding-left: 1em; + padding-right: 1em; + } + .navbar h1{ + padding-left: 0.5em; + } +} + +@media (max-width: 400px) { + .navbar .display-flex { + display: block; + } + .navbar .nav li { + line-height: 2em; + } +} + +.figure.product { + border-radius: 0.5em; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + overflow: hidden; +} + +.product-overlay { + position: relative; + overflow: hidden; +} +.product-overlay figcaption { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.7); + opacity: 0; + transition: all 0.3s; + display: flex; + align-items:center; + justify-content: center; +} + +.product-overlay:hover figcaption{ + opacity: 1; +} + +.product-overlay .caption-body{ + background-color: white; + border-radius: 0.5em; + padding: 1em; + transform: translateY(2em); + transition:all 0.3s; +} + +.product-overlay:hover .caption-body{ + transform: translateY(0); +} + +.product-overlay img { + transform: scale(1,1); + transition: all 0.3s; +} + +.product-overlay:hover img { + transform: scale(1.4,1.4); +} + +@media (max-width: 600px) { + .product-overlay figcaption { + position: relative; + display: block; + top: initial; + left: initial; + width: 100%; + height: initial; + opacity: 1; + background-color: initial; + } + .product-overlay .caption-body { + transform: none; + padding: 0; + } +} + + +/* FONTS */ + +#headings h1 { + font-family: 'Racing Sans One', cursive; +} + +#paragraphs { + font-family: 'Poppins', sans-serif; +} + + +/* COLRS */ +.color1 { + background-color: #FF914D; + width: 400%; + height: 400px; +} + +.color2 { + background-color: #000000; + width: 400%; + height: 400px; +} + +.color3 { + background-color: #D8D3CF; + width: 400%; + height: 400px; +} \ No newline at end of file diff --git a/sung.wondaniel/css/storetheme_proj.css b/sung.wondaniel/css/storetheme_proj.css new file mode 100644 index 0000000..9ac35b4 --- /dev/null +++ b/sung.wondaniel/css/storetheme_proj.css @@ -0,0 +1,214 @@ + +:root{ + --color-offwhite: #f4f4f4; + + --color-main-light: #FAFAFA; + --color-main-medium: #FF914D; + --color-main-dark: #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-neutral-medium); + +} + +.favorite input:checked + label { + color: red; + transform: scale(1.5, 1.5); +} + + +@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; + } +} + +.figure.product { + border-radius: 0.5em; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + overflow: hidden; + height: 100%; + transition: all 0.3s; +} +.product.figure img{ + height: 100%; + 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); +} + + +.product-overlay { + position: relative; + overflow: hidden; +} +.product-overlay figcaption { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.7); + opacity: 0; + transition: all 0.3s; + display: flex; + align-items:center; + justify-content: center; +} + +.product-overlay:hover figcaption{ + opacity: 1; +} + +.product-overlay .caption-body{ + background-color: white; + border-radius: 0.5em; + padding: 1em; + transform: translateY(2em); + transition:all 0.3s; +} + +.product-overlay:hover .caption-body{ + transform: translateY(0); +} + +.product-overlay img { + transform: scale(1,1); + transition: all 0.3s; +} + +.product-overlay:hover img { + transform: scale(1.4,1.4); +} + +@media (max-width: 600px) { + .product-overlay figcaption { + position: relative; + display: block; + top: initial; + left: initial; + width: 100%; + height: initial; + opacity: 1; + background-color: initial; + } + .product-overlay .caption-body { + transform: none; + padding: 0; + } +} + + +/* FONTS */ + +#headings h1 { + font-family: 'Racing Sans One', cursive; +} + +#paragraphs { + font-family: 'Poppins', sans-serif; +} + + +/* COLRS */ +.color1 { + background-color: #FF914D; + width: 200%; + height: 200px; +} + +.color2 { + background-color: #000000; + width: 200%; + height: 200px; +} + +.color3 { + background-color: #D8D3CF; + width: 200%; + height: 200px; +} + +.color4 { + background-color: #FAFAFA; + width: 200%; + height: 200px; +} + +.color5 { + background-color: #FFFFFF; + width: 200%; + height: 200px; +} + +.color6 { + background-color: #FF5140; + width: 200%; + height: 200px; +} + +.images-main img { + width: 100%; + height: 40vh; + object-fit: contain; + +} + +.images-thumbs img { + width: 8em; + height: 6em; + object-fit: contain; +} + + +span.badge:not(:empty)::after { + content: ')'; +} +span.badge:not(:empty)::before { + content: '('; +} \ No newline at end of file diff --git a/sung.wondaniel/data/api.php b/sung.wondaniel/data/api.php new file mode 100644 index 0000000..9466329 --- /dev/null +++ b/sung.wondaniel/data/api.php @@ -0,0 +1,47 @@ +type) { + case "products_all": + $output['result'] = makeQuery(makeConn(),"SELECT * + FROM `products` + ORDER BY `date_create` DESC + LIMIT 12"); + break; + + case "product_search": + $output['result'] = makeQuery(makeConn(),"SELECT * + FROM `products` + WHERE `model` 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` LIKE '$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 Valid Type"; +} + +echo json_encode($output,JSON_NUMERIC_CHECK/JSON_UNESCAPED_UNICODE); \ No newline at end of file diff --git a/sung.wondaniel/data/products.sql b/sung.wondaniel/data/products.sql new file mode 100644 index 0000000..a180c2e --- /dev/null +++ b/sung.wondaniel/data/products.sql @@ -0,0 +1,86 @@ +-- phpMyAdmin SQL Dump +-- version 4.9.5 +-- https://www.phpmyadmin.net/ +-- +-- Host: localhost:3306 +-- Generation Time: Nov 08, 2021 at 12:06 AM +-- Server version: 5.6.51-cll-lve +-- PHP Version: 7.3.27 + +SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; +SET AUTOCOMMIT = 0; +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: `wdsungwnm608` +-- + +-- -------------------------------------------------------- + +-- +-- Table structure for table `products` +-- + +CREATE TABLE `products` ( + `id` int(11) NOT NULL, + `brand` varchar(64) NOT NULL, + `model` varchar(128) NOT NULL, + `color` varchar(64) NOT NULL, + `m/w` varchar(3) NOT NULL, + `size` decimal(10,2) NOT NULL, + `date_create` datetime NOT NULL, + `date_modify` datetime NOT NULL, + `thumbnail` varchar(128) NOT NULL, + `images` varchar(256) NOT NULL, + `price` decimal(10,2) NOT NULL +) ENGINE=InnoDB DEFAULT CHARSET=latin1; + +-- +-- Dumping data for table `products` +-- + +INSERT INTO `products` (`id`, `brand`, `model`, `color`, `m/w`, `size`, `date_create`, `date_modify`, `thumbnail`, `images`, `price`) VALUES +(1, 'Nike', 'Vapor Max', 'Grey/Orange', 'M', 10.50, '2021-11-07 23:51:04', '2021-11-07 23:51:04', 'vapormax_thumb.jpg', 'vapormax_1.jpg', 199.99), +(2, 'Nike', 'Air Max 97', 'Black', 'M', 10.50, '2021-11-07 23:53:30', '2021-11-07 23:53:30', 'airmax97_humb.jpg', 'airmax97_1.jpg', 199.99), +(3, 'Converse', 'ConverseXCDG', 'White/Red', 'M', 11.00, '2021-11-07 23:54:20', '2021-11-07 23:54:20', 'cdg_thumb.jpg', 'cdg_1.jpg', 150.99), +(4, 'Adidas', 'Yeezy 350 V2', 'Beige', 'M', 11.00, '2021-11-07 23:55:35', '2021-11-07 23:55:35', 'yeezy350_thumb.jpg', 'yeezy350_1.jpg', 270.00), +(5, 'Nike', 'Pegasus Trail 3 Gore-Tex', 'Black/White/Red', 'M', 10.00, '2021-11-07 23:56:51', '2021-11-07 23:56:51', 'pegasus_thumb.jpg', 'pegasus_1.jpg', 160.00), +(6, 'Nike', 'Air Presto', 'White/Red', 'M', 10.50, '2021-11-07 23:57:29', '2021-11-07 23:57:29', 'presto_thumb.jpg', 'presto_1.jpg', 130.00), +(7, 'Nike', 'SuperRep Go 2', 'White/Orange', 'M', 10.50, '2021-11-07 23:58:27', '2021-11-07 23:58:27', 'superrep_thumb.jpg', 'superrep_1.jpg', 100.00), +(8, 'Nike', 'Air Max 270', 'Black', 'W', 6.50, '2021-11-07 23:59:38', '2021-11-07 23:59:38', 'am270_thumb.jpg', 'am270_1.jpg', 150.00), +(9, 'Converse', 'Chuck 70', 'Black', 'M', 11.00, '2021-11-08 00:01:29', '2021-11-08 00:01:29', 'chuck70_thumb.jpg', 'chuck70_1.jpg', 85.00), +(10, 'Converse', 'Crafted Boot Chuck 70', 'Brown', 'M', 11.00, '2021-11-08 00:02:59', '2021-11-08 00:02:59', 'chuck70boots_thumb.jpg', 'chuck70boots_1.jpg', 120.00), +(11, 'Adidas', 'Daily 3.0', 'Grey/Black', 'M', 10.00, '2021-11-08 00:04:55', '2021-11-08 00:04:55', 'daily3_thumb.jpg', 'daily3_1.jpg', 60.00), +(12, 'Adidas', 'Super Star', 'White', 'M', 11.00, '2021-11-08 00:05:52', '2021-11-08 00:05:52', 'superstar_thumb.jpg', 'superstar_1.jpg', 85.00); + +-- +-- 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=13; +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/sung.wondaniel/data/users.json b/sung.wondaniel/data/users.json new file mode 100644 index 0000000..5773fea --- /dev/null +++ b/sung.wondaniel/data/users.json @@ -0,0 +1,54 @@ +[ + { + "name":"Daniel Sung", + "type":"Student", + "email":"won.sung.1991@gmail.com", + "classes":[608] + }, + +{ + "name":"Jason Stan", + "type":"Student", + "email":"j.lee.1993@gmail.com", + "classes":[605] +}, + +{ + "name":"Laura Markoupulous", + "type":"Instructor", + "email":"lmarkou@gmail.com", + "classes":[601,604,606] +}, + +{ + "name":"Joseph Calvaros", + "type":"Coach", + "email":"jocajoca@gmail.com", + "classes":[203,403,202] +}, + + +{ + "name":"Lucky Hofsteder", + "type":"Associate Lecturer", + "email":"luckyme7@gmail.com", + "classes":[101, 103] +}, + + +{ + "name":"Jeremy Scott", + "type":"Designer", + "email":"jsco380@gmail.com", + "classes":[401,404,601] +}, + +{ + "name":"Kathy Wong", + "type":"Lecturer", + "email":"kwonkwon123@gmail.com", + "classes":[303,403,602] +} + + +] \ No newline at end of file diff --git a/sung.wondaniel/img/airmax97_1.jpg b/sung.wondaniel/img/airmax97_1.jpg new file mode 100644 index 0000000..36eecc0 Binary files /dev/null and b/sung.wondaniel/img/airmax97_1.jpg differ diff --git a/sung.wondaniel/img/airmax97_thumb.jpg b/sung.wondaniel/img/airmax97_thumb.jpg new file mode 100644 index 0000000..36eecc0 Binary files /dev/null and b/sung.wondaniel/img/airmax97_thumb.jpg differ diff --git a/sung.wondaniel/img/am270_1.jpg b/sung.wondaniel/img/am270_1.jpg new file mode 100644 index 0000000..a5f0f8e Binary files /dev/null and b/sung.wondaniel/img/am270_1.jpg differ diff --git a/sung.wondaniel/img/am270_thumb.jpg b/sung.wondaniel/img/am270_thumb.jpg new file mode 100644 index 0000000..a5f0f8e Binary files /dev/null and b/sung.wondaniel/img/am270_thumb.jpg differ diff --git a/sung.wondaniel/img/cdg_1.jpg b/sung.wondaniel/img/cdg_1.jpg new file mode 100644 index 0000000..b5cc26c Binary files /dev/null and b/sung.wondaniel/img/cdg_1.jpg differ diff --git a/sung.wondaniel/img/cdg_thumb.jpg b/sung.wondaniel/img/cdg_thumb.jpg new file mode 100644 index 0000000..b5cc26c Binary files /dev/null and b/sung.wondaniel/img/cdg_thumb.jpg differ diff --git a/sung.wondaniel/img/chuck70_1.jpg b/sung.wondaniel/img/chuck70_1.jpg new file mode 100644 index 0000000..bc1ec2f Binary files /dev/null and b/sung.wondaniel/img/chuck70_1.jpg differ diff --git a/sung.wondaniel/img/chuck70_thumb.jpg b/sung.wondaniel/img/chuck70_thumb.jpg new file mode 100644 index 0000000..bc1ec2f Binary files /dev/null and b/sung.wondaniel/img/chuck70_thumb.jpg differ diff --git a/sung.wondaniel/img/chuck70boots_1.jpg b/sung.wondaniel/img/chuck70boots_1.jpg new file mode 100644 index 0000000..5d0a44a Binary files /dev/null and b/sung.wondaniel/img/chuck70boots_1.jpg differ diff --git a/sung.wondaniel/img/chuck70boots_thumb.jpg b/sung.wondaniel/img/chuck70boots_thumb.jpg new file mode 100644 index 0000000..5d0a44a Binary files /dev/null and b/sung.wondaniel/img/chuck70boots_thumb.jpg differ diff --git a/sung.wondaniel/img/daily3_1.jpg b/sung.wondaniel/img/daily3_1.jpg new file mode 100644 index 0000000..a510703 Binary files /dev/null and b/sung.wondaniel/img/daily3_1.jpg differ diff --git a/sung.wondaniel/img/daily3_thumb.jpg b/sung.wondaniel/img/daily3_thumb.jpg new file mode 100644 index 0000000..a510703 Binary files /dev/null and b/sung.wondaniel/img/daily3_thumb.jpg differ diff --git a/sung.wondaniel/img/main1.png b/sung.wondaniel/img/main1.png new file mode 100644 index 0000000..20de082 Binary files /dev/null and b/sung.wondaniel/img/main1.png differ diff --git a/sung.wondaniel/img/main2.png b/sung.wondaniel/img/main2.png new file mode 100644 index 0000000..c232da0 Binary files /dev/null and b/sung.wondaniel/img/main2.png differ diff --git a/sung.wondaniel/img/pegasus_1.jpg b/sung.wondaniel/img/pegasus_1.jpg new file mode 100644 index 0000000..bd372d0 Binary files /dev/null and b/sung.wondaniel/img/pegasus_1.jpg differ diff --git a/sung.wondaniel/img/pegasus_thumb.jpg b/sung.wondaniel/img/pegasus_thumb.jpg new file mode 100644 index 0000000..bd372d0 Binary files /dev/null and b/sung.wondaniel/img/pegasus_thumb.jpg differ diff --git a/sung.wondaniel/img/presto_1.jpg b/sung.wondaniel/img/presto_1.jpg new file mode 100644 index 0000000..00439f8 Binary files /dev/null and b/sung.wondaniel/img/presto_1.jpg differ diff --git a/sung.wondaniel/img/presto_thumb.jpg b/sung.wondaniel/img/presto_thumb.jpg new file mode 100644 index 0000000..00439f8 Binary files /dev/null and b/sung.wondaniel/img/presto_thumb.jpg differ diff --git a/sung.wondaniel/img/superrep_1.jpg b/sung.wondaniel/img/superrep_1.jpg new file mode 100644 index 0000000..12bfbc8 Binary files /dev/null and b/sung.wondaniel/img/superrep_1.jpg differ diff --git a/sung.wondaniel/img/superrep_thumb.jpg b/sung.wondaniel/img/superrep_thumb.jpg new file mode 100644 index 0000000..12bfbc8 Binary files /dev/null and b/sung.wondaniel/img/superrep_thumb.jpg differ diff --git a/sung.wondaniel/img/superstar_1.jpg b/sung.wondaniel/img/superstar_1.jpg new file mode 100644 index 0000000..82118aa Binary files /dev/null and b/sung.wondaniel/img/superstar_1.jpg differ diff --git a/sung.wondaniel/img/superstar_thumb.jpg b/sung.wondaniel/img/superstar_thumb.jpg new file mode 100644 index 0000000..82118aa Binary files /dev/null and b/sung.wondaniel/img/superstar_thumb.jpg differ diff --git a/sung.wondaniel/img/vapormax_1.jpg b/sung.wondaniel/img/vapormax_1.jpg new file mode 100644 index 0000000..b59385e Binary files /dev/null and b/sung.wondaniel/img/vapormax_1.jpg differ diff --git a/sung.wondaniel/img/vapormax_thumb.jpg b/sung.wondaniel/img/vapormax_thumb.jpg new file mode 100644 index 0000000..b59385e Binary files /dev/null and b/sung.wondaniel/img/vapormax_thumb.jpg differ diff --git a/sung.wondaniel/img/yeezy350_1.jpg b/sung.wondaniel/img/yeezy350_1.jpg new file mode 100644 index 0000000..99369c4 Binary files /dev/null and b/sung.wondaniel/img/yeezy350_1.jpg differ diff --git a/sung.wondaniel/img/yeezy350_thumb.jpg b/sung.wondaniel/img/yeezy350_thumb.jpg new file mode 100644 index 0000000..99369c4 Binary files /dev/null and b/sung.wondaniel/img/yeezy350_thumb.jpg differ diff --git a/sung.wondaniel/index.html b/sung.wondaniel/index.html new file mode 100644 index 0000000..9e6b73f --- /dev/null +++ b/sung.wondaniel/index.html @@ -0,0 +1,172 @@ + + + + + Your Next Tropical Fish Shopping Destination + + + + + + + + + +
+
+
+

Coral Reef

+
+
+ +
+
+ +
+
+

Grid

+
+
column 6
+
column 6
+
+
+
column 4
+
column 4
+
column 4
+ +
column 3
+
column 3
+
column 3
+
column 3
+ +
column 3
+
column 6
+
column 3
+ +
+
+
+ +
+
+

Responsive Grid

+
+
column 6
+
column 6
+
+
+
column 4
+
column 4
+
column 4
+ +
column 3
+
column 3
+
column 3
+
column 3
+
+
+
column 2
+
column 2
+
column 2
+
column 2
+
column 2
+
+
+ +
+ +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ + +
+ +
+ +
+
+
+
+

Welcome to Exotic Fish & Corals

+
+
+ +
+
+
+

Thank you for shopping with Coral Reef.

+

Coral Reef is the largest Exotic Fish & Corals seller in California.

+
+
+
+

Salt Water Specials

+
+

    +
  • Banded Coral Shrimp
    • +
  • Blue Tang
    • +
  • Carpenter's Fairy Wrasse
    • +
  • Cleaner Shrimp
    • +
  • Clown Citron Goby
    • +

+
+
+ +
+

Fresh Water Specials

+
+

    +
  • Pictus Catfish
    • +
  • Platinum Half Beak
    • +
  • Super Yellow Shrimp
    • +
  • Sumo Loach
    • +
  • Snow White Rice Fish
    • +

+
+
+ +
+ +
+
+

Live Fish Blog!

+
+

Please visit our Live Fish BLog!

+

www.livefishblog.com

+
+
+ +
+ + + + \ No newline at end of file diff --git a/sung.wondaniel/js/product_list.js b/sung.wondaniel/js/product_list.js new file mode 100644 index 0000000..2a5b94d --- /dev/null +++ b/sung.wondaniel/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:'product_all'}) + ).then(showResults); + }) + +}) \ No newline at end of file diff --git a/sung.wondaniel/js/product_thumbs.js b/sung.wondaniel/js/product_thumbs.js new file mode 100644 index 0000000..06cda40 --- /dev/null +++ b/sung.wondaniel/js/product_thumbs.js @@ -0,0 +1,10 @@ + +$(()=>{ + + $(".images-thumbs img").on("mouseenter",function(e){ + let src = $(this).attr("src"); + $(".images-main img").attr("src",src); + }) + + +}); \ No newline at end of file diff --git a/sung.wondaniel/js/templates.js b/sung.wondaniel/js/templates.js new file mode 100644 index 0000000..67d38d0 --- /dev/null +++ b/sung.wondaniel/js/templates.js @@ -0,0 +1,15 @@ + + +const listItemTemplate = templater(o=>` + +
+
+ +
+
+
${o.model}
+
$${(+o.price).toFixed(2)}
+
+
+ +`); \ No newline at end of file diff --git a/sung.wondaniel/lib/css/gridsystem.css b/sung.wondaniel/lib/css/gridsystem.css new file mode 100644 index 0000000..abcebba --- /dev/null +++ b/sung.wondaniel/lib/css/gridsystem.css @@ -0,0 +1,121 @@ + + +.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:0) { + .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; } +} \ No newline at end of file diff --git a/sung.wondaniel/lib/css/gridsystem_proj.css b/sung.wondaniel/lib/css/gridsystem_proj.css new file mode 100644 index 0000000..abcebba --- /dev/null +++ b/sung.wondaniel/lib/css/gridsystem_proj.css @@ -0,0 +1,121 @@ + + +.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:0) { + .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; } +} \ No newline at end of file diff --git a/sung.wondaniel/lib/css/styleguide.css b/sung.wondaniel/lib/css/styleguide.css new file mode 100644 index 0000000..223674d --- /dev/null +++ b/sung.wondaniel/lib/css/styleguide.css @@ -0,0 +1,428 @@ + +/* CSS RESET */ + +*, *::after, *::before { + box-sizing: border-box; +} + +:root { + --color-neutral-light:#eee ; + --color-neutral-medium:#999 ; + --color-neutral-dark:#555 ; + + --color-main-light: #FAFAFA; + --color-main-medium: #FF914D; + --color-main-dark: #000000; + + --color-black:#000 ; + --color-white:#fff ; + + + --header-height: 3rem; + --spacing: 1rem; + + + --font-serif: Georgia, "Times New Roman", serif; + --font-sans: Helvetica, Arial, sans-serif; +} + + +body{ + margin:0; + font-size:100%; + font-family:var(--font-sans); +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'Racing Sans One', cursive;; +} + +a{ + color:inherit; + font-weight:bold; + text-decoration:none; +} + +a: hover{ + text-decoration: underline; +} + + + + +/* LAYOUT CLASSES */ + +.container{ + max-width:1200px; + margin-right:auto; + margin-left: auto; +} + + + +.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-items: center; } + + +/* Small Class */ + +.media-image { + max-width: 100%; + vertical-allign: text-bootom; +} + +.hidden { display:none; } + + + + +/* COMPONENET 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 { + background-color: var(--color-main-medium); + color: var(--color-white); + text-decoration: none; + } + + + .nav .active a { + background-color: var(--color-main-light); + color: inherit; + + } + +.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: transparent; + color: inherit; + text-decoration: underline; +} + + +.nav-crumbs li:not(:first-child)::before { + content:'>'; +} + + +.nav-material a{ + padding: 0.5em 1rem; + position: relative; +} + +.nav-material .active a{ + background-color: transparent; + color: inherit; +} + +.nav-material a: hover { + background-color:var(--color-neutral-light); + color: inherit; +} + +.nav-material a::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 0; + background-color: var(--color-main-medium); + transition: all 0.3s; +} + + +.nav-material .active a::after { + height: 4px; +} + + +.navbar{ + background-color:var(--color-neutral-dark); + color: var(--color-white); + line-height: var(--header-height); + +} + + .navbar h1{ + font-size: 1em; + margin: 0; + font-family: var(--font-sans); + } + .navbar a{ + padding: 0 0.5em ; + } + +/* CARD */ + .card{ + background-color: var(--color-white); + 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); + } + .card.hard{ + border-radius: 0.2em; + border: 2px solid var(--color-neutral-medium); + } + .card.dark { + background-color: var(--color-neutral-dark); + color: var(--color-neutral-light); + } + .card.medium { + background-color: var(--color-neutral-medium); + } + .card.flat { + padding: 0; + } + + +.view-window{ + height: 50vh; + position: relative; + overflow: hidden; + background-size: cover; + background-position: center; + background-attachment: fixed; + +} + + + +/* TABLES */ + +.table{ + width: 100%; + border-collapse: collapse; +} + +.table th, +.table td { + text-align:left; + padding:0.2em 0.5em; +} + +.table.striped tbody tr:nth-child(odd) { + background-color: var(--color-neutral-light); +} + +.table.lined.all th:not(:first-child), +.table.lined.all td:not(:first-child), +.table.lined.vertical th:not(:first-child), +.table.lined.vertical td:not(:first-child) { + border-left: 1px solid var(--color-neutral-medium); +} + +.table.lined.all tbody tr, +.table.lined.all tbody tr { + border-top: 1px solid var(--color-neutral-medium); +} + +.table.lined.all, +.table.lined.border { + border-top: 1px solid var(--color-neutral-medium); +} + + + + +/* FIGURE */ + +.figure{ + margin: 0; + background-color: var(--color-white); +} + +.figure img { + width: 100%; + vertical-align: text-bottom; +} + +.figure figcaption { + padding: 1em; +} + + + + + + + + + +/* FORMS */ + +.form-input { + border-bottom: 1px solid var(--color-neutral-light); +} + +.form-select>select, +.hotdog input, +.hotdog, +.form-button, +.form-input, +.form-item { + display: inline-block; + background-color: transparent; + border-width: 0; + font: inherit; + -webkit-appearance: none; + color: inherit; + width: 100%; + outline: 0; +} + +.form-input:focus { + border-bottom-color:var(--color-main-light); + padding: 0.5em 1em; +} + +.form-label { + font-size: 0.8em; + color: var(--color-neutral-medium); + display: block; + width: 100%; +} + +.form-control { + margin: 1em 0; +} + +.form-button { + background-color: var(--color-neutral-light); + border-width: 0; + cursor: pointer; + text-align: center; + padding: 0.5em 1em; +} + +.form-button: hover { + text-decoration: none; +} +.form-button: active { + background-color: var(--color-neutral-dark); +} + +.hotdog { + background-color: var(--color-neutral-light); + border-radius: 2em; + padding: 0.5em 1.5em; + display: flex; +} + +.hotdog.dark { + background-color: var(--color-neutral-dark); + color: var(--color-neutral-light); +} + +.hotdog.light { + background-color: var(--color-white); + color: var(--color-black); +} + + +.form-select>select { + display: block; + padding: 0.5em 1.3em; + background-color: var(--color-neutral-light); + border-radius: 0.3em; + cursor: pointer; +} + +.form-select { + position: relative; +} +.form-select::after{ + content:'▾'; + font-family: arial,sans-serif; + font-size: 1.2em; + position: absolute; + top: 50%; + right: 0.2em; + transform: translateY(-50%); + pointer-events: none; + color: var(--color-neutral-medium); +} + + +/* Toggle */ + +.toggle label{ + font-size: 1.3em; + display: inline-block; + width: 2em; + height: 1em; + border: 0.1em solid var(--color-neutral-light); + background-color: var(--color-neutral-white) ; + border-radius: 1em; + position: relative; +} + +.toggle label::after{ + content: ''; + display: inline-block; + width: 0.8em; + height: 0.8em; + border-radius: 1em; + position: absolute; + background-color: var(--color-neutral-medium) ; + transition: all 0.3s; +} + +.toggle input:checked + label::after{ + transform: translateX(1em); +} \ No newline at end of file diff --git a/sung.wondaniel/lib/css/styleguide_proj.css b/sung.wondaniel/lib/css/styleguide_proj.css new file mode 100644 index 0000000..6b342b8 --- /dev/null +++ b/sung.wondaniel/lib/css/styleguide_proj.css @@ -0,0 +1,479 @@ + +/* CSS RESET */ + +*, *::after, *::before { + box-sizing: border-box; +} + +:root { + --color-neutral-light:#eee ; + --color-neutral-medium:#999 ; + --color-neutral-dark:#555 ; + + --color-main-light: #FAFAFA; + --color-main-medium: #FF914D; + --color-main-dark: #000000; + + --color-black:#000 ; + --color-white:#fff ; + + + --header-height: 3rem; + --spacing: 1rem; + + --font-serif: Georgia, "Times New Roman", serif; + --font-sans: 'Poppins', sans-serif; +} + + +body{ + margin:0; + font-size:100%; + font-family:var(--font-sans); +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'Racing Sans One', cursive;; +} + +a{ + color:inherit; + font-weight:bold; + text-decoration:none; +} + +a: hover{ + text-decoration: underline; +} + + + + +/* LAYOUT CLASSES */ + +.container{ + max-width:1200px; + margin-right:auto; + margin-left: auto; +} + + + +.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-items: center; } + +.flex-column {flex-direction: column; } +.flex-wrap {flex-wrap: wrap; } + + +/* Small Class */ + +.media-image { + max-width: 100%; + vertical-allign: text-bootom; +} + +.hidden { display:none; } + + + + +/* COMPONENET 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 { + background-color: var(--color-main-medium); + color: var(--color-white); + text-decoration: none; + } + + + .nav .active a { + background-color: var(--color-main-light); + color: inherit; + + } + +.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: transparent; + color: inherit; + text-decoration: underline; +} + + +.nav-crumbs li:not(:first-child)::before { + content:'>'; +} + + +.nav-material a{ + padding: 0.5em 1rem; + position: relative; +} + +.nav-material .active a{ + background-color: transparent; + color: inherit; +} + +.nav-material a: hover { + background-color:var(--color-neutral-light); + color: inherit; +} + +.nav-material a::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 0; + background-color: var(--color-main-medium); + transition: all 0.3s; +} + + +.nav-material .active a::after { + height: 4px; +} + + +.navbar{ + background-color:var(--color-main-dark); + color: var(--color-white); + line-height: var(--header-height); + margin-bottom: 1em; + +} + + + .navbar h1{ + font-size: 1em; + margin: 0; + font-family: var(--font-sans); + } + .navbar a{ + padding: 0 0.5em ; + } + + .flush>.navbar { + margin-bottom: 0; + } + +/* CARD */ + .card{ + background-color: var(--color-white); + 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); + } + .card.hard{ + border-radius: 0.2em; + border: 2px solid var(--color-neutral-medium); + } + .card.dark { + background-color: var(--color-neutral-dark); + color: var(--color-neutral-light); + } + .card.medium { + background-color: var(--color-neutral-medium); + } + .card.flat { + padding: 0; + } + + .card-section~.card-section { + border-top: 1px solid var(--color-neutral-light); + } + + .card-section { + padding: 1em; + } + +.view-window{ + height: 50vh; + position: relative; + overflow: hidden; + background-size: cover; + background-position: center; + background-attachment: fixed; + +} + + + +/* TABLES */ + +.table{ + width: 100%; + border-collapse: collapse; +} + +.table th, +.table td { + text-align:left; + padding:0.2em 0.5em; +} + +.table.striped tbody tr:nth-child(odd) { + background-color: var(--color-neutral-light); +} + +.table.lined.all th:not(:first-child), +.table.lined.all td:not(:first-child), +.table.lined.vertical th:not(:first-child), +.table.lined.vertical td:not(:first-child) { + border-left: 1px solid var(--color-neutral-medium); +} + +.table.lined.all tbody tr, +.table.lined.all tbody tr { + border-top: 1px solid var(--color-neutral-medium); +} + +.table.lined.all, +.table.lined.border { + border-top: 1px solid var(--color-neutral-medium); +} + + + + +/* FIGURE */ + +.figure{ + margin: 0; + background-color: var(--color-white); +} + +.figure img { + width: 100%; + height: 100%; + vertical-align: text-bottom; +} + +.figure figcaption { + padding: 1em; +} + + + + +/* FORMS */ + +.form-input { + border-bottom: 1px solid var(--color-neutral-light); +} + +.form-select>select, +.hotdog input, +.hotdog, +.form-button, +.form-input, +.form-item { + display: inline-block; + background-color: transparent; + border-width: 0; + font: inherit; + -webkit-appearance: none; + color: inherit; + width: 100%; + outline: 0; +} + +.form-input:focus { + border-bottom-color:var(--color-main-light); + padding: 0.5em 1em; +} + +.form-label { + font-size: 0.8em; + color: var(--color-neutral-medium); + display: block; + width: 100%; +} + +.form-control { + margin: 1em 0; +} + +.form-button { + background-color: var(--color-main-medium); + border-width: 0; + cursor: pointer; + text-align: center; + padding: 0.5em 1em; + font-weight: bold; +} + +.form-button.inline { + width: initial; +} + +.form-button: hover { + text-decoration: none; +} +.form-button: active { + background-color: var(--color-neutral-dark); +} + +.hotdog { + background-color: var(--color-neutral-light); + border-radius: 2em; + padding: 0.5em 1.5em; + display: flex; +} + +.hotdog.dark { + background-color: var(--color-neutral-dark); + color: var(--color-neutral-light); +} + +.hotdog.light { + background-color: var(--color-white); + color: var(--color-black); +} + + +.form-select>select { + display: block; + padding: 0.5em 1.3em; + background-color: var(--color-neutral-light); + border-radius: 0.3em; + cursor: pointer; +} + +.form-select { + position: relative; +} +.form-select::after{ + content:'▾'; + font-family: arial,sans-serif; + font-size: 1.2em; + position: absolute; + top: 50%; + right: 0.2em; + transform: translateY(-50%); + pointer-events: none; + color: var(--color-neutral-medium); +} + + +/* Toggle */ + +.toggle label{ + font-size: 1.3em; + display: inline-block; + width: 2em; + height: 1em; + border: 0.1em solid var(--color-neutral-light); + background-color: var(--color-neutral-white) ; + border-radius: 1em; + position: relative; +} + +.toggle label::after{ + content: ''; + display: inline-block; + width: 0.8em; + height: 0.8em; + border-radius: 1em; + position: absolute; + background-color: var(--color-main-medium) ; + transition: all 0.3s; +} + +.toggle input:checked + label::after{ + transform: translateX(1em); +} + + + +/*Custom*/ + +.main{ + padding: 4em 0; + margin: 0 auto; +} + +.main-wrap { + width: 850px; + margin: 0 auto; + align-items: center; + justify-content: space-between; +} + +.main-wrap img{ + width: 43%; +} + +.main-text { + width: 43%; + text-align: center; +} + +.main-text p{ + line-height: 1.5em; +} + + +[class*='col-']>.card{ + height:100%; + margin:0; +} \ No newline at end of file diff --git a/sung.wondaniel/lib/js/functions.js b/sung.wondaniel/lib/js/functions.js new file mode 100644 index 0000000..972b6e5 --- /dev/null +++ b/sung.wondaniel/lib/js/functions.js @@ -0,0 +1,13 @@ + +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),''); \ No newline at end of file diff --git a/sung.wondaniel/lib/php/functions.php b/sung.wondaniel/lib/php/functions.php new file mode 100644 index 0000000..cb23533 --- /dev/null +++ b/sung.wondaniel/lib/php/functions.php @@ -0,0 +1,100 @@ +",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->connect_errno) die($conn->error); + $a = []; + while($row = $result->fetch_object()) { + $a[] = $row; + +} + return $a; +} + + +/*CART ACTIONS*/ + +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) { + //$_SESSION['cart'] = []; + $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); +} \ No newline at end of file diff --git a/sung.wondaniel/notes/index.php b/sung.wondaniel/notes/index.php new file mode 100644 index 0000000..b856d6b --- /dev/null +++ b/sung.wondaniel/notes/index.php @@ -0,0 +1,161 @@ + + + + + Document + + + Hello World "; + echo "
Goodbye World
"; + + // Variables + $a = 5; + echo $a; + + //String Interpolation + echo "
I have $a things
"; + echo '
I have $a things
'; + + // Number + // Integer + $b = 15; + + // Float + $b = 0.576; + + $b = 10; + + + // String (if you see "" it's a String) + $name = "Yerguy2"; + + // Boolean + $isOn = true; + + // Math + // PEMDAS + echo (5 - 4) * 2; + + // Concatenation (combining strings together with .) + echo "
b + a" . " = C
"; + echo "
$b + $a = ".($a+$b)."
"; + + ?> + + +
+
This is my name
+
+ + + +
+ visit
"; + echo "
My name is {$_GET['name']}
"; + + // http://wondanielsung.com/AAU/wnm608/sung.wondaniel/notes/?name=Daniel&type=textarea + echo "visit
"; + 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/sung.wondaniel/notes/notes.json b/sung.wondaniel/notes/notes.json new file mode 100644 index 0000000..c217118 --- /dev/null +++ b/sung.wondaniel/notes/notes.json @@ -0,0 +1,10 @@ +{ + "notes":[ + "JSON files always start with either an array [] or an object {}", + "JSON files cannot have commnets(//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" + ] +} \ No newline at end of file diff --git a/sung.wondaniel/notes/reading_data.php b/sung.wondaniel/notes/reading_data.php new file mode 100644 index 0000000..f8a8ddb --- /dev/null +++ b/sung.wondaniel/notes/reading_data.php @@ -0,0 +1,64 @@ + + + + + + + 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/sung.wondaniel/parts/meta.php b/sung.wondaniel/parts/meta.php new file mode 100644 index 0000000..fa951a8 --- /dev/null +++ b/sung.wondaniel/parts/meta.php @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/sung.wondaniel/parts/navbar.php b/sung.wondaniel/parts/navbar.php new file mode 100644 index 0000000..ac51566 --- /dev/null +++ b/sung.wondaniel/parts/navbar.php @@ -0,0 +1,16 @@ + + +
    +
    +
    +

    Store

    +
    + +
    +
    \ No newline at end of file diff --git a/sung.wondaniel/parts/templates.php b/sung.wondaniel/parts/templates.php new file mode 100644 index 0000000..37205b3 --- /dev/null +++ b/sung.wondaniel/parts/templates.php @@ -0,0 +1,110 @@ +id"> +
    +
    + +
    +
    +
    $$o->price
    +
    $o->model
    +
    +
    + + + 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->model +
    + + +
    +
    +
    +
    $$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.0912,2,'.',''); + $taxedfixed = number_format($cartprice*1.0912,2,'.',''); + + return << +
    Sub Total
    +
    $$pricefixed
    + + +
    +
    Taxes
    +
    $$taxfixed
    +
    + +
    +
    Total
    +
    $$taxedfixed
    +
    + + + HTML; +} + + +function recommendedProducts($a) { +$products = array_reduce($a,'productListTemplate'); +echo <<$products +HTML; +} + + +function recommendedAnything($limit=3) { + $result = makeQuery(makeConn(),"SELECT * FROM `products` ORDER BY rand() DESC LIMIT $limit"); + recommendedProducts($result); +} + +function recommendedCategory($cat,$limit=3) { + $result = makeQuery(makeConn(),"SELECT * FROM `products` WHERE `category` = '$cat' ORDER BY `date_create` DESC LIMIT $limit"); + recommendedProducts($result); +} + +function recommendedSimilar($cat,$id=0,$limit=3) { + $result = makeQuery(makeConn(),"SELECT * FROM `products` WHERE `category` = '$cat' AND `id`<>$id ORDER BY rand() LIMIT $limit"); + recommendedProducts($result); +} \ No newline at end of file diff --git a/sung.wondaniel/product_item.php b/sung.wondaniel/product_item.php new file mode 100644 index 0000000..5bf0686 --- /dev/null +++ b/sung.wondaniel/product_item.php @@ -0,0 +1,30 @@ + + + + + Cart + + + + + + + + + + + + +
    +
    +

    Product Item

    + +

    This is item #

    +

    Add To Cart

    +
    +
    + + + + + \ No newline at end of file diff --git a/sung.wondaniel/product_list.php b/sung.wondaniel/product_list.php new file mode 100644 index 0000000..1b7c692 --- /dev/null +++ b/sung.wondaniel/product_list.php @@ -0,0 +1,34 @@ + + + + + Product List + + + + + + + + + + + + +
    +
    +

    Product List

    + + +
    +
    + + + + + \ No newline at end of file diff --git a/sung.wondaniel/project/cart_actions.php b/sung.wondaniel/project/cart_actions.php new file mode 100644 index 0000000..2d093ca --- /dev/null +++ b/sung.wondaniel/project/cart_actions.php @@ -0,0 +1,27 @@ +amount = $_POST['amount']; + header("location:cart_proj.php"); + break; + case "delete-cart-item": + $_SESSION['cart'] = array_filter($_SESSION['cart'],function($o){return$o->id!=$_POST['id'];}); + header("location:cart_proj.php"); + break; + case "reset-cart": + resetCart(); + break; + default: + die("Incorrect Action"); +} + +print_p([$_GET,$_POST,$_SESSION]); \ No newline at end of file diff --git a/sung.wondaniel/project/cart_proj.php b/sung.wondaniel/project/cart_proj.php new file mode 100644 index 0000000..e45a0ff --- /dev/null +++ b/sung.wondaniel/project/cart_proj.php @@ -0,0 +1,70 @@ + + + + + Cart + + + + + + + + + + + +
    +

    In Your Cart

    + + +
    +
    +
    + +
    +
    +
    +
    + +
    + Checkout +
    +
    +
    +
    + +
    No Items in your Cart

    +
    +

    Other Recommendations

    + + + + +
    + + + \ No newline at end of file diff --git a/sung.wondaniel/project/index.php b/sung.wondaniel/project/index.php new file mode 100644 index 0000000..c16c1d8 --- /dev/null +++ b/sung.wondaniel/project/index.php @@ -0,0 +1,44 @@ + + + + + Kickin Hard + + + + + + + + + + + + +
    +

    KICKS ON FIRE

    +
    + +
    + +
    +

    Latest Running Shoes

    + + +

    Latest Daily Shoes

    + +
    + +
    + +
    +
    + + \ No newline at end of file diff --git a/sung.wondaniel/project/meta_proj.php b/sung.wondaniel/project/meta_proj.php new file mode 100644 index 0000000..353da18 --- /dev/null +++ b/sung.wondaniel/project/meta_proj.php @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/sung.wondaniel/project/navbar_proj.php b/sung.wondaniel/project/navbar_proj.php new file mode 100644 index 0000000..fbdb83b --- /dev/null +++ b/sung.wondaniel/project/navbar_proj.php @@ -0,0 +1,26 @@ + + +
    +
    +
    +

    Kickin Hard

    +
    +
    + +
    + +
    +
    \ No newline at end of file diff --git a/sung.wondaniel/project/product_added_to_cart.php b/sung.wondaniel/project/product_added_to_cart.php new file mode 100644 index 0000000..97898d6 --- /dev/null +++ b/sung.wondaniel/project/product_added_to_cart.php @@ -0,0 +1,43 @@ + + + + + Confirmation Page + + + + + + + + + + + + +
    +
    +

    You added model ?> to your cart.

    +

    You have amount ?> of model ?> in your cart.

    + + +
    +
    Continue Shopping
    +
    +
    Go To Cart
    +
    + + +
    +
    + + + \ No newline at end of file diff --git a/sung.wondaniel/project/product_checkout.php b/sung.wondaniel/project/product_checkout.php new file mode 100644 index 0000000..21af331 --- /dev/null +++ b/sung.wondaniel/project/product_checkout.php @@ -0,0 +1,123 @@ + + + + + Checkout Page + + + + + + + + + + + + +
    +
    +
    +
    +

    Item Review

    +
    + total,2,'.',''); + return $r."
    +
    $o->model
    +
    $$totalfixed
    +
    "; + }) ?> +
    + +
    +
    + +
    +
    +

    Product Checkout

    + + +

    Address

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

    Payment

    +
    + + +
    + +
    + + +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    + +
    + + Complete Checkout +
    +
    + +
    +
    + + + +
    +
    + + + + + \ No newline at end of file diff --git a/sung.wondaniel/project/product_confirmation.php b/sung.wondaniel/project/product_confirmation.php new file mode 100644 index 0000000..8a2c89c --- /dev/null +++ b/sung.wondaniel/project/product_confirmation.php @@ -0,0 +1,32 @@ + + + + + Confirmation Page + + + + + + + + + + + + +
    +
    +

    Thank you for your purchase!

    +

    Continue Shopping

    + +
    +
    + + + + + \ No newline at end of file diff --git a/sung.wondaniel/project/product_item.php b/sung.wondaniel/project/product_item.php new file mode 100644 index 0000000..10f8906 --- /dev/null +++ b/sung.wondaniel/project/product_item.php @@ -0,0 +1,99 @@ +images); + +$image_elements = array_reduce($images,function($r,$o){ + return $r.""; +}); + +//print_p($product); + +?> + + + + Product Item + + + + + + + + + + + + + + +
    +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    + + + +
    +

    model ?>

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

    description ?>

    +
    + +

    Recommended Products

    + category,$product->id); + + ?> +
    + + + + + \ No newline at end of file diff --git a/sung.wondaniel/project/product_list_proj.php b/sung.wondaniel/project/product_list_proj.php new file mode 100644 index 0000000..4601f4b --- /dev/null +++ b/sung.wondaniel/project/product_list_proj.php @@ -0,0 +1,72 @@ + + + + + Product List + + + + + + + + + + + + + + + + +
    +

    Products

    + +
    + +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    + +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + + + +
    + +
    + + + \ No newline at end of file diff --git a/sung.wondaniel/styleguide/index.html b/sung.wondaniel/styleguide/index.html new file mode 100644 index 0000000..96b7056 --- /dev/null +++ b/sung.wondaniel/styleguide/index.html @@ -0,0 +1,554 @@ + + + + + + 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. Quisquam rem asperiores ut voluptas repellendus illo sit in voluptate, voluptatibus. Corrupti, deleniti. Eos magni iusto omnis mollitia magnam, illum recusandae dicta.

    +

    Facilis saepe voluptatum rem quae maxime ex nisi culpa dolorem quod molestias! Placeat odio eos, laboriosam obcaecati tenetur cumque labore quis ad ullam quam, ipsum praesentium mollitia, amet adipisci dicta.

    +

    Earum vero ex nam hic, esse itaque modi harum in, tenetur rem accusantium, magni, amet blanditiis voluptates alias illo qui ad id voluptate. Error officia atque quaerat, quibusdam quis nemo!

    +
    +
    + +
    +

    Cards

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

    View Window

    +
    + + + +
    +

    Grid System

    +
    + +
    +

    Flex System

    +
    + + + +
    +

    Tables

    + +
    +

    Basic Table

    + +
    + +
    +

    Striped Table

    + + +
    + +
    +

    Striped Lined Vertical

    + + +
    + +
    +

    Striped Lined Horizontal

    + + +
    + +
    +

    Striped Lined Border

    + + +
    + +
    +

    Striped Lined All

    + + +
    + +
    +

    Combination

    + + +
    +
    + +

    Figures

    + +
    +

    Basic Figures

    + +
    + +
    Product
    +
    +
    + + +

    Figure Grid

    +
    +
    +
    + +
    Product +
    +
    +
    +
    +
    + +
    + Product +
    +
    +
    +
    +
    + +
    + Product +
    +
    +
    +
    + +

    Product Grid

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

    Product Overlay

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

    Forms

    +

    Inputs

    + +
    +

    Default Inputs

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

    Form Input

    +
    + + + + +
    + +

    Form Label

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

    Form Control

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

    Buttons

    + +
    +

    Default Buttons

    + + + +

    Form Buttons

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

    Hotdog

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

    Select

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

    Check Boxes

    +
    +

    Basic Checkbox

    + + + +

    Heart Checkbox

    +
    + + +
    + +

    Toggle

    +
    + + +
    + +
    +
    + +
    +
    +
    + + +
    +
    +
    + +
    + +
    + + \ No newline at end of file diff --git a/sung.wondaniel/styleguide/index_proj.html b/sung.wondaniel/styleguide/index_proj.html new file mode 100644 index 0000000..72f1ac7 --- /dev/null +++ b/sung.wondaniel/styleguide/index_proj.html @@ -0,0 +1,386 @@ + + + + + + CSS Styleguide + + + + + + + + + + + + + + + + + + +
    +
    +
    +

    Kickin Hard Style Guide

    +
    +
    + +
    +
    + +
    +

    Table of Contents

    +
    + +
    +
    + +
    +

    Typography

    +
    + +

    Headings: Racing Sans One

    +

    Heading 1

    +

    Heading 2

    +

    Heading 3

    + +
    + +
    +

    Paragraphs: Poppins

    +

    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam rem asperiores ut voluptas repellendus illo sit in voluptate, voluptatibus. Corrupti, deleniti. Eos magni iusto omnis mollitia magnam, illum recusandae dicta.

    +

    Facilis saepe voluptatum rem quae maxime ex nisi culpa dolorem quod molestias! Placeat odio eos, laboriosam obcaecati tenetur cumque labore quis ad ullam quam, ipsum praesentium mollitia, amet adipisci dicta.

    +

    Earum vero ex nam hic, esse itaque modi harum in, tenetur rem accusantium, magni, amet blanditiis voluptates alias illo qui ad id voluptate. Error officia atque quaerat, quibusdam quis nemo!

    +
    +
    + +
    +
    +

    Colors

    + +
    +
    +
    +

    +
    + #FF914D +
    +
    +
    +
    +
    +

    +
    + #000000 +
    +
    +
    +
    +
    +

    +
    + #D8D3CF +
    +
    +
    + +
    +
    +

    +
    + #FAFAFA +
    +
    +
    +
    +
    +

    +
    + #FFFFFF +
    +
    +
    +
    +
    +

    +
    + #FF5140 +
    +
    +
    + + +
    +
    +
    + +