mirror of
https://github.com/mudabbir-ahmad/web-project.git
synced 2026-10-07 20:20:20 +00:00
new file: .cache/replit/nix/env.json
new file: .config/configstore/update-notifier-npm.json new file: .config/configstore/update-notifier-npm.json.2701252402 new file: .replit new file: .vscode/launch.json new file: Internet.html new file: about.html new file: case.html new file: cooling.html new file: cpu.html new file: css/about.css new file: css/home.css new file: css/log copy.css new file: css/log.css new file: css/parts.css new file: css/pc.css new file: css/profile.css new file: global.css new file: global.js new file: gpu.html new file: hdd.html new file: home.html new file: images/pc-case.png new file: images/sal.jpeg new file: includes/dbh.inc.php new file: includes/functions.inc.php new file: includes/login.inc.php new file: includes/signup.inc.php new file: index.html new file: js/log copy.js new file: js/log.js new file: keyb.html new file: log copy.html new file: log.html new file: monitor.html new file: mouse.html new file: pc.html new file: profile.html new file: psu.html new file: ram.html new file: register.html new file: replit.nix new file: ssd.html
This commit is contained in:
bob bob committed
commit
e5d4d5dfe3
43 files changed
+2680
No files matched your search
@@ -0,0 +1 @@
|
||||
{"entries":{"replit.nix":{"env":{"AR":"ar","AS":"as","CC":"gcc","CONFIG_SHELL":"/nix/store/bm7jr70d9ghn5cczb3q0w90apsm05p54-bash-5.1-p8/bin/bash","CXX":"g++","HOST_PATH":"/nix/store/mj9madzlh0xwcccb30qsnsclfjxr5k1s-vscode-langservers-extracted-3.0.1/bin:/nix/store/rszcnphk27fvfr2hq5pcr07jccf2dqy1-typescript-language-server-0.9.6/bin:/nix/store/jd1y449cf66yx5d1hwyjvc4562b1p1am-coreutils-9.0/bin:/nix/store/jjvw20r6pz3ff7pn91yhvfx8s7izsqan-findutils-4.8.0/bin:/nix/store/ndd6gh8zigjy0j68arj7nyrbcw4kcw01-diffutils-3.8/bin:/nix/store/bpg0ia8nkavzw7s66avi1f9nz72i1p3r-gnused-4.8/bin:/nix/store/df3ff57sbkgbdhc4ar19zs4y0hrhggii-gnugrep-3.7/bin:/nix/store/4fv981732jqzirah3h2y6ynmlsfbxb37-gawk-5.1.1/bin:/nix/store/k5ifa08z0qlkknnb8s1bdh2kdrx0qmd0-gnutar-1.34/bin:/nix/store/dcird3wn9xywy49w3qq1hpjwvjfn3lph-gzip-1.11/bin:/nix/store/s85iyc3p9nbinwvwx9rcqirf1m68zpmm-bzip2-1.0.6.0.2-bin/bin:/nix/store/msncxcf5lgy5by9cqjyxchxd26x47d64-gnumake-4.3/bin:/nix/store/bm7jr70d9ghn5cczb3q0w90apsm05p54-bash-5.1-p8/bin:/nix/store/gi3psbgxbf2fmvgi36pmw77nnh58vq3l-patch-2.7.6/bin:/nix/store/sqb20f4rk80lw21j4is85qwljlphmn3g-xz-5.2.5-bin/bin","LD":"ld","LOCALE_ARCHIVE":"/usr/lib/locale/locale-archive","NIX_BINTOOLS":"/nix/store/spm7d6ncyx2k5w8yl6clzynv2s4wf1kp-binutils-wrapper-2.35.2","NIX_BINTOOLS_WRAPPER_TARGET_HOST_x86_64_unknown_linux_gnu":"1","NIX_BUILD_CORES":"8","NIX_BUILD_TOP":"/tmp","NIX_CC":"/nix/store/2qwnn6lizc9d119kp3zig3q19gbfm4n6-gcc-wrapper-10.3.0","NIX_CC_WRAPPER_TARGET_HOST_x86_64_unknown_linux_gnu":"1","NIX_CFLAGS_COMPILE":" -frandom-seed=qfbj2w45kl","NIX_ENFORCE_NO_NATIVE":"1","NIX_HARDENING_ENABLE":"fortify stackprotector pic strictoverflow format relro bindnow","NIX_INDENT_MAKE":"1","NIX_LDFLAGS":"-rpath /nix/store/qfbj2w45kliilxjmvsvz3iqm4mxk1qf1-nix-shell/lib64 -rpath /nix/store/qfbj2w45kliilxjmvsvz3iqm4mxk1qf1-nix-shell/lib ","NIX_STORE":"/nix/store","NM":"nm","OBJCOPY":"objcopy","OBJDUMP":"objdump","PATH":"/nix/store/bccsypsvjskpzsgzww8bzjgqmck4bjbf-bash-interactive-5.1-p8/bin:/nix/store/bqmg7l0jn6nhgjlfc981g1imzb6ny8xl-patchelf-0.13/bin:/nix/store/2qwnn6lizc9d119kp3zig3q19gbfm4n6-gcc-wrapper-10.3.0/bin:/nix/store/6r5h4h7nqx73m87j5b9sjwy2x9kyri0k-gcc-10.3.0/bin:/nix/store/csz8v8xi2f644j26n84i20dnqmq43sih-glibc-2.33-117-bin/bin:/nix/store/jd1y449cf66yx5d1hwyjvc4562b1p1am-coreutils-9.0/bin:/nix/store/spm7d6ncyx2k5w8yl6clzynv2s4wf1kp-binutils-wrapper-2.35.2/bin:/nix/store/h19zwlkrp6b0hp3ypbqdcggnyarn3af6-binutils-2.35.2/bin:/nix/store/mj9madzlh0xwcccb30qsnsclfjxr5k1s-vscode-langservers-extracted-3.0.1/bin:/nix/store/rszcnphk27fvfr2hq5pcr07jccf2dqy1-typescript-language-server-0.9.6/bin:/nix/store/jd1y449cf66yx5d1hwyjvc4562b1p1am-coreutils-9.0/bin:/nix/store/jjvw20r6pz3ff7pn91yhvfx8s7izsqan-findutils-4.8.0/bin:/nix/store/ndd6gh8zigjy0j68arj7nyrbcw4kcw01-diffutils-3.8/bin:/nix/store/bpg0ia8nkavzw7s66avi1f9nz72i1p3r-gnused-4.8/bin:/nix/store/df3ff57sbkgbdhc4ar19zs4y0hrhggii-gnugrep-3.7/bin:/nix/store/4fv981732jqzirah3h2y6ynmlsfbxb37-gawk-5.1.1/bin:/nix/store/k5ifa08z0qlkknnb8s1bdh2kdrx0qmd0-gnutar-1.34/bin:/nix/store/dcird3wn9xywy49w3qq1hpjwvjfn3lph-gzip-1.11/bin:/nix/store/s85iyc3p9nbinwvwx9rcqirf1m68zpmm-bzip2-1.0.6.0.2-bin/bin:/nix/store/msncxcf5lgy5by9cqjyxchxd26x47d64-gnumake-4.3/bin:/nix/store/bm7jr70d9ghn5cczb3q0w90apsm05p54-bash-5.1-p8/bin:/nix/store/gi3psbgxbf2fmvgi36pmw77nnh58vq3l-patch-2.7.6/bin:/nix/store/sqb20f4rk80lw21j4is85qwljlphmn3g-xz-5.2.5-bin/bin","RANLIB":"ranlib","READELF":"readelf","SIZE":"size","SOURCE_DATE_EPOCH":"315532800","STRINGS":"strings","STRIP":"strip","XDG_DATA_DIRS":"/nix/store/bqmg7l0jn6nhgjlfc981g1imzb6ny8xl-patchelf-0.13/share","_":"/nix/store/jd1y449cf66yx5d1hwyjvc4562b1p1am-coreutils-9.0/bin/env","__ETC_PROFILE_SOURCED":"1","buildInputs":"/nix/store/mj9madzlh0xwcccb30qsnsclfjxr5k1s-vscode-langservers-extracted-3.0.1 /nix/store/rszcnphk27fvfr2hq5pcr07jccf2dqy1-typescript-language-server-0.9.6","builder":"/nix/store/bm7jr70d9ghn5cczb3q0w90apsm05p54-bash-5.1-p8/bin/bash","configureFlags":"","depsBuildBuild":"","depsBuildBuildPropagated":"","depsBuildTarget":"","depsBuildTargetPropagated":"","depsHostHost":"","depsHostHostPropagated":"","depsTargetTarget":"","depsTargetTargetPropagated":"","doCheck":"","doInstallCheck":"","name":"nix-shell","nativeBuildInputs":"","nobuildPhase":"echo\necho \"This derivation is not meant to be built, aborting\";\necho\nexit 1\n","out":"/nix/store/qfbj2w45kliilxjmvsvz3iqm4mxk1qf1-nix-shell","outputs":"out","patches":"","phases":"nobuildPhase","propagatedBuildInputs":"","propagatedNativeBuildInputs":"","shell":"/nix/store/bm7jr70d9ghn5cczb3q0w90apsm05p54-bash-5.1-p8/bin/bash","shellHook":"","stdenv":"/nix/store/z7wz8q1i0j4jmfpn87wpakwma6q0k90n-stdenv-linux","strictDeps":"","system":"x86_64-linux"},"dependencies":[{"path":"replit.nix","mod_time":"2022-03-14T23:31:45.35298035Z"}],"channel":"stable-21_11","channel_nix_path":"/nix/store/ki2jvm59r70z94nhzxa1hqsn2amr5n62-nixpkgs-stable-21_11-21.11.tar.gz/nixpkgs-stable-21_11"}}}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"optOut": false,
|
||||
"lastUpdateCheck": 1676197516737,
|
||||
"update": {
|
||||
"latest": "9.4.2",
|
||||
"current": "6.14.15",
|
||||
"type": "major",
|
||||
"name": "npm"
|
||||
}
|
||||
}
|
||||
Whitespace-only changes.
@@ -0,0 +1,179 @@
|
||||
hidden=[".config"]
|
||||
|
||||
# hosting is currently hardcoded for this language
|
||||
# [hosting]
|
||||
# route = "/"
|
||||
# directory= "/"
|
||||
|
||||
[nix]
|
||||
channel = "stable-21_11"
|
||||
|
||||
[languages.html]
|
||||
pattern = "**/*.html"
|
||||
[languages.html.languageServer]
|
||||
start = "vscode-html-language-server --stdio"
|
||||
[languages.html.languageServer.initializationOptions]
|
||||
provideFormatter = true
|
||||
[languages.html.languageServer.configuration.html]
|
||||
customData = [ ]
|
||||
autoCreateQuotes = true
|
||||
autoClosingTags = true
|
||||
mirrorCursorOnMatchingTag = false
|
||||
|
||||
[languages.html.languageServer.configuration.html.completion]
|
||||
attributeDefaultValue = "doublequotes"
|
||||
|
||||
[languages.html.languageServer.configuration.html.format]
|
||||
enable = true
|
||||
wrapLineLength = 120
|
||||
unformatted = "wbr"
|
||||
contentUnformatted = "pre,code,textarea"
|
||||
indentInnerHtml = false
|
||||
preserveNewLines = true
|
||||
indentHandlebars = false
|
||||
endWithNewline = false
|
||||
extraLiners = "head, body, /html"
|
||||
wrapAttributes = "auto"
|
||||
templating = false
|
||||
unformattedContentDelimiter = ""
|
||||
|
||||
[languages.html.languageServer.configuration.html.suggest]
|
||||
html5 = true
|
||||
|
||||
[languages.html.languageServer.configuration.html.validate]
|
||||
scripts = true
|
||||
styles = true
|
||||
|
||||
[languages.html.languageServer.configuration.html.hover]
|
||||
documentation = true
|
||||
references = true
|
||||
|
||||
[languages.html.languageServer.configuration.html.trace]
|
||||
server = "off"
|
||||
|
||||
[languages.javascript]
|
||||
pattern = "**/{*.js,*.jsx,*.ts,*.tsx,*.mjs,*.cjs}"
|
||||
[languages.javascript.languageServer]
|
||||
start = "typescript-language-server --stdio"
|
||||
|
||||
[languages.css]
|
||||
pattern = "**/{*.less,*.scss,*.css}"
|
||||
[languages.css.languageServer]
|
||||
start = "vscode-css-language-server --stdio"
|
||||
[languages.css.languageServer.configuration.css]
|
||||
customData = [ ]
|
||||
validate = true
|
||||
|
||||
[languages.css.languageServer.configuration.css.completion]
|
||||
triggerPropertyValueCompletion = true
|
||||
completePropertyWithSemicolon = true
|
||||
|
||||
[languages.css.languageServer.configuration.css.hover]
|
||||
documentation = true
|
||||
references = true
|
||||
|
||||
[languages.css.languageServer.configuration.css.lint]
|
||||
# Configure linting
|
||||
# ignore = don't show any warning or error
|
||||
# warning = show yellow underline
|
||||
# error = show red underline
|
||||
argumentsInColorFunction = "error" # Invalid number of parameters
|
||||
boxModel = "ignore" # Do not use width or height when using padding or border
|
||||
compatibleVendorPrefixes = "ignore" # When using a vendor-specific prefix make sure to also include all other vendor-specific properties"
|
||||
duplicateProperties = "warning" # Do not use duplicate style definitions
|
||||
emptyRules = "warning" # Do not use empty rulesets
|
||||
float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes.
|
||||
fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties
|
||||
hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers
|
||||
idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML.
|
||||
ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older
|
||||
important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored.
|
||||
importStatement = "ignore" # Import statements do not load in parallel
|
||||
propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display
|
||||
universalSelector = "ignore" # The universal selector (*) is known to be slow
|
||||
unknownAtRules = "warning" # Unknown at-rule
|
||||
unknownProperties = "warning" # Unknown property.
|
||||
validProperties = [ ] # add some properties that the linter doesn't know about
|
||||
unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property.
|
||||
vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property
|
||||
zeroUnits = "ignore" # No unit for zero needed
|
||||
|
||||
[languages.css.languageServer.configuration.css.trace]
|
||||
server = "off"
|
||||
|
||||
[languages.css.languageServer.configuration.scss]
|
||||
validate = true
|
||||
|
||||
[languages.css.languageServer.configuration.scss.completion]
|
||||
triggerPropertyValueCompletion = true
|
||||
completePropertyWithSemicolon = true
|
||||
|
||||
[languages.css.languageServer.configuration.scss.hover]
|
||||
documentation = true
|
||||
references = true
|
||||
|
||||
[languages.css.languageServer.configuration.scss.lint]
|
||||
# Configure linting
|
||||
# ignore = don't show any warning or error
|
||||
# warning = show yellow underline
|
||||
# error = show red underline
|
||||
argumentsInColorFunction = "error" # Invalid number of parameters
|
||||
boxModel = "ignore" # Do not use width or height when using padding or border
|
||||
compatibleVendorPrefixes = "ignore" # When using a vendor-specific prefix make sure to also include all other vendor-specific properties"
|
||||
duplicateProperties = "warning" # Do not use duplicate style definitions
|
||||
emptyRules = "warning" # Do not use empty rulesets
|
||||
float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes.
|
||||
fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties
|
||||
hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers
|
||||
idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML.
|
||||
ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older
|
||||
important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored.
|
||||
importStatement = "ignore" # Import statements do not load in parallel
|
||||
propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display
|
||||
universalSelector = "ignore" # The universal selector (*) is known to be slow
|
||||
unknownAtRules = "warning" # Unknown at-rule
|
||||
unknownProperties = "warning" # Unknown property.
|
||||
validProperties = [ ] # add some properties that the linter doesn't know about
|
||||
unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property.
|
||||
vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property
|
||||
zeroUnits = "ignore" # No unit for zero needed"
|
||||
|
||||
[languages.css.languageServer.configuration.less]
|
||||
validate = true
|
||||
|
||||
[languages.css.languageServer.configuration.less.completion]
|
||||
triggerPropertyValueCompletion = true
|
||||
completePropertyWithSemicolon = true
|
||||
|
||||
[languages.css.languageServer.configuration.less.hover]
|
||||
documentation = true
|
||||
references = true
|
||||
|
||||
[languages.css.languageServer.configuration.less.lint]
|
||||
# Configure linting
|
||||
# ignore = don't show any warning or error
|
||||
# warning = show yellow underline
|
||||
# error = show red underline
|
||||
argumentsInColorFunction = "error" # Invalid number of parameters
|
||||
boxModel = "ignore" # Do not use width or height when using padding or border
|
||||
compatibleVendorPrefixes = "ignore" # When using a vendor-specific prefix make sure to also include all other vendor-specific properties"
|
||||
duplicateProperties = "warning" # Do not use duplicate style definitions
|
||||
emptyRules = "warning" # Do not use empty rulesets
|
||||
float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes.
|
||||
fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties
|
||||
hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers
|
||||
idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML.
|
||||
ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older
|
||||
important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored.
|
||||
importStatement = "ignore" # Import statements do not load in parallel
|
||||
propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display
|
||||
universalSelector = "ignore" # The universal selector (*) is known to be slow
|
||||
unknownAtRules = "warning" # Unknown at-rule
|
||||
unknownProperties = "warning" # Unknown property.
|
||||
validProperties = [ ] # add some properties that the linter doesn't know about
|
||||
unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property.
|
||||
vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property
|
||||
zeroUnits = "ignore" # No unit for zero needed"
|
||||
|
||||
[gitHubImport]
|
||||
requiredFiles = [".replit", "replit.nix", ".config"]
|
||||
Vendored
+15
@@ -0,0 +1,15 @@
|
||||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "msedge",
|
||||
"request": "launch",
|
||||
"name": "Launch Edge against localhost",
|
||||
"url": "C:/Users/bob/Downloads/web project -1/home.html",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
}
|
||||
]
|
||||
}
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/parts.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder: Internet</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<p style="margin-left: 60px; margin-top: 60px;font-size:35px;">From here you can select a variety of CPUs to look at
|
||||
and compare, those CPUs being from both AMD and INTEL</p>
|
||||
<!-- listing the products -->
|
||||
|
||||
|
||||
<!-- toggle's for AMD and INTEL -->
|
||||
|
||||
<div style="margin-left:60px;">
|
||||
<button class="pill" data-selected onclick="showAllCards()" id="all">All Components</button>
|
||||
<button class="pill" onclick="showCategory('wireless')" id="wireless">wireless adapters</button>
|
||||
<button class="pill" onclick="showCategory('wired')" id="wired">wired adapters</button>
|
||||
</div>
|
||||
|
||||
<!-- first wireless adapter test -->
|
||||
|
||||
<div class="list-grid">
|
||||
|
||||
|
||||
<a class="card lb list" data-wireless>
|
||||
<p class="lb-text">Test Wireless</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- wireless adapter -->
|
||||
|
||||
<!-- first wired adapter test -->
|
||||
<a class="card lb list" data-wired>
|
||||
<p class="lb-text">Test Wired</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- wired adapter -->
|
||||
|
||||
<!-- rest of list -->
|
||||
<a class="card lb list" data-wired>
|
||||
<p class="lb-text">wired adapter 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-wireless>
|
||||
<p class="lb-text">wireless adapter 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-wireless>
|
||||
<p class="lb-text">wireless adapter 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-wireless>
|
||||
<p class="lb-text">wireless adapter 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-wired>
|
||||
<p class="lb-text">wired adapter 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-wired>
|
||||
<p class="lb-text">wired adapter 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-wired>
|
||||
<p class="lb-text">wired adapter</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-wireless>
|
||||
<p class="lb-text">wireless adapter 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/about.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<p>this is for about </p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/parts.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<p>this is for case </p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/parts.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<p>this is for cooling </p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/parts.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<p style="margin-left: 60px; margin-top: 60px;font-size:35px;">From here you can select a variety of CPUs to look at and compare, those CPUs being from both AMD and INTEL</p>
|
||||
<!-- listing the products -->
|
||||
|
||||
|
||||
<!-- toggle's for AMD and INTEL -->
|
||||
|
||||
<div style="margin-left:60px;">
|
||||
<button class="pill" data-selected onclick="showAllCards()" id="all">All Components</button>
|
||||
<button class="pill" onclick="showCategory('intel')" id="intel">Intel CPUs</button>
|
||||
<button class="pill" onclick="showCategory('amd')" id="amd">Amd CPUs</button>
|
||||
</div>
|
||||
|
||||
<!-- first intel cpu test -->
|
||||
|
||||
<div class="list-grid">
|
||||
|
||||
|
||||
<a class="card lb list" data-intel>
|
||||
<p class="lb-text">Test Intel</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- intel cpu -->
|
||||
|
||||
<!-- first amd cpu test -->
|
||||
<a class="card lb list" data-amd>
|
||||
<p class="lb-text">Test AMD</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- amd cpu -->
|
||||
|
||||
<!-- rest of list -->
|
||||
<a class="card lb list" data-amd>
|
||||
<p class="lb-text">amd cpu 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-intel>
|
||||
<p class="lb-text">intel cpu 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-intel>
|
||||
<p class="lb-text">intel cpu 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-intel>
|
||||
<p class="lb-text">intel cpu 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-amd>
|
||||
<p class="lb-text">amd cpu 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-amd>
|
||||
<p class="lb-text">amd cpu 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-amd>
|
||||
<p class="lb-text">Amd cpu 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-intel>
|
||||
<p class="lb-text">intel cpu 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Whitespace-only changes.
@@ -0,0 +1,89 @@
|
||||
/* to set a minimum height for the website */
|
||||
body{
|
||||
min-height: 100vw;
|
||||
}
|
||||
|
||||
/*card grid to allow cards to be displayed in a grid*/
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, auto);
|
||||
gap: 45px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
|
||||
/* card design for information pallets as first collumn*/
|
||||
.card {
|
||||
background-color: #EADDCF;
|
||||
width: 200px;
|
||||
height: 260px;
|
||||
border: 6px solid #CEBBA9;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
border-radius: 35px;
|
||||
transition: 0.6s;
|
||||
}
|
||||
|
||||
/* makes the cards highlight themselves when you hover over them*/
|
||||
.card:hover {
|
||||
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.4);
|
||||
background-color: #7FC8AB;
|
||||
border: 6px solid #236E44;
|
||||
transition: 0.6s;
|
||||
}
|
||||
|
||||
|
||||
/* text body above buttons */
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 140px;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
display: flex;
|
||||
padding-left: 60px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* for the image next to the text body */
|
||||
.hero-image {
|
||||
margin-top: 50px;
|
||||
width: 400px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
|
||||
.title{
|
||||
font-size: 40px;
|
||||
font-weight: 900;
|
||||
font-family: sans-serif;
|
||||
color: #292E3A;
|
||||
}
|
||||
|
||||
.text{
|
||||
font-size: 12px;
|
||||
font-family: sans-serif;
|
||||
font-weight: 900;
|
||||
color: #292E3A;
|
||||
}
|
||||
|
||||
/* for the title of each card */
|
||||
.CT{
|
||||
font-family: sans-serif;
|
||||
padding-left: 5px;
|
||||
font-weight: 800;
|
||||
color: #292E3A;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* for the text of each card */
|
||||
.Cf{
|
||||
padding-left: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #292E3A;
|
||||
font-family: sans-serif;
|
||||
padding-right: 10px;
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
header{
|
||||
background-color: #EADDCF;
|
||||
height: 44px;
|
||||
width: 240px;
|
||||
border-radius: 35px;
|
||||
text-align: center;
|
||||
margin-left: 70px;
|
||||
margin-right: 5px;
|
||||
border: 4px solid #CEBBA9;
|
||||
transition: 0.5s;
|
||||
color: #292E3A;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
::selection{
|
||||
color: #F1EFF0;
|
||||
background: #D5B3FD;
|
||||
}
|
||||
.wrapper{
|
||||
width: 380px;
|
||||
padding: 40px 30px 50px 30px;
|
||||
background: #EADDCF;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
box-shadow: 10px 10px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
.wrapper header{
|
||||
font-size: 35px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.wrapper form{
|
||||
margin: 40px 0;
|
||||
}
|
||||
form .field{
|
||||
width: 75%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
form .field.shake{
|
||||
animation: shake 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
form .field .input-area{
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
form input{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
padding: 0 45px;
|
||||
font-size: 20px;
|
||||
background: #F1EFF0;
|
||||
caret-color: #D5B3FD;
|
||||
border-radius: 35px;
|
||||
border: 5px solid #CEBBA9;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
form .field input:focus,
|
||||
form .field.valid input{
|
||||
border: 5px solid #236E44;
|
||||
}
|
||||
form .field.shake input,
|
||||
form .field.error input{
|
||||
border-color: #dc3545;
|
||||
}
|
||||
.field .input-area i{
|
||||
position: relative;
|
||||
top: 50%;
|
||||
font-size: 18px;
|
||||
pointer-events: none;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.input-area .icon{
|
||||
left: 15px;
|
||||
color: #F1EFF0;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.input-area .error-icon{
|
||||
right: 15px;
|
||||
color: #dc3545;
|
||||
}
|
||||
form input:focus ~ .icon,
|
||||
form .field.valid .icon{
|
||||
color: #D5B3FD;
|
||||
}
|
||||
form .field.shake input:focus ~ .icon,
|
||||
form .field.error input:focus ~ .icon{
|
||||
color: #bfbfbf;
|
||||
}
|
||||
form input::placeholder{
|
||||
color: #bfbfbf;
|
||||
font-size: 17px;
|
||||
}
|
||||
form .field .error-txt{
|
||||
color: #dc3545;
|
||||
text-align: left;
|
||||
margin-top: 5px;
|
||||
}
|
||||
form .field .error{
|
||||
display: none;
|
||||
}
|
||||
form .field.shake .error,
|
||||
form .field.error .error{
|
||||
display: block;
|
||||
}
|
||||
form .pass-txt{
|
||||
text-align: left;
|
||||
margin-top: 15px;
|
||||
}
|
||||
form .reg-txt{
|
||||
text-align: left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.wrapper a{
|
||||
color: #BA65FF;
|
||||
margin-left: 15px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.wrapper a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
form input[type="submit"]{
|
||||
height: 50px;
|
||||
margin-top: 15px;
|
||||
color: #000;
|
||||
padding: 0;
|
||||
border: 4px solid #292E3A;
|
||||
background: #d3aff1;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
form input[type="submit"]:hover{
|
||||
color: #fff;
|
||||
background: #BA65FF;
|
||||
};
|
||||
+164
@@ -0,0 +1,164 @@
|
||||
header{
|
||||
background-color: #EADDCF;
|
||||
height: 44px;
|
||||
width: 240px;
|
||||
border-radius: 35px;
|
||||
text-align: center;
|
||||
margin-left: 70px;
|
||||
margin-right: 5px;
|
||||
border: 4px solid #CEBBA9;
|
||||
transition: 0.5s;
|
||||
color: #292E3A;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
::selection{
|
||||
color: #F1EFF0;
|
||||
background: #D5B3FD;
|
||||
}
|
||||
.wrapper{
|
||||
width: 380px;
|
||||
padding: 40px 30px 50px 30px;
|
||||
background: #EADDCF;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
box-shadow: 10px 10px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
.wrapper header{
|
||||
font-size: 35px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.wrapper form{
|
||||
margin: 40px 0;
|
||||
}
|
||||
form .field{
|
||||
width: 75%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
form .field.shake{
|
||||
animation: shake 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
form .field .input-area{
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
form input{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
outline: none;
|
||||
padding: 0 45px;
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
background: #F1EFF0;
|
||||
caret-color: #D5B3FD;
|
||||
border-radius: 35px;
|
||||
border: 5px solid #CEBBA9;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
form .field input:focus,
|
||||
form .field.valid input{
|
||||
border: 5px solid #236E44;
|
||||
}
|
||||
form .field.shake input,
|
||||
form .field.error input{
|
||||
border-color: #dc3545;
|
||||
}
|
||||
.field .input-area i{
|
||||
position: relative;
|
||||
top: 50%;
|
||||
font-size: 18px;
|
||||
pointer-events: none;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.input-area .icon{
|
||||
left: 15px;
|
||||
color: #F1EFF0;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.input-area .error-icon{
|
||||
right: 15px;
|
||||
color: #dc3545;
|
||||
}
|
||||
form input:focus ~ .icon,
|
||||
form .field.valid .icon{
|
||||
color: #D5B3FD;
|
||||
}
|
||||
form .field.shake input:focus ~ .icon,
|
||||
form .field.error input:focus ~ .icon{
|
||||
color: #bfbfbf;
|
||||
}
|
||||
form input::placeholder{
|
||||
color: #bfbfbf;
|
||||
font-size: 17px;
|
||||
}
|
||||
form .field .error-txt{
|
||||
color: #dc3545;
|
||||
text-align: left;
|
||||
margin-top: 5px;
|
||||
}
|
||||
form .field .error{
|
||||
display: none;
|
||||
}
|
||||
form .field.shake .error,
|
||||
form .field.error .error{
|
||||
display: block;
|
||||
}
|
||||
form .pass-txt{
|
||||
text-align: left;
|
||||
margin-top: 15px;
|
||||
}
|
||||
form .reg-txt{
|
||||
text-align: left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.wrapper a{
|
||||
color: #BA65FF;
|
||||
margin-left: 15px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.wrapper a:hover{
|
||||
text-decoration: underline;
|
||||
}
|
||||
form input[type="submit"]{
|
||||
height: 50px;
|
||||
margin-top: 15px;
|
||||
color: #000;
|
||||
padding: 0;
|
||||
border: 4px solid #292E3A;
|
||||
background: #d3aff1;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
form input[type="submit"]:hover{
|
||||
color: #fff;
|
||||
background: #BA65FF;
|
||||
};
|
||||
button[type="submit"]{
|
||||
height: 50px;
|
||||
margin-top: 15px;
|
||||
color: #000;
|
||||
padding: 0;
|
||||
border: 4px solid #292E3A;
|
||||
background: #d3aff1;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
button[type="submit"]:hover{
|
||||
color: #fff;
|
||||
background: #BA65FF;
|
||||
};
|
||||
button{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
outline: none;
|
||||
padding: 0 45px;
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
background: #F1EFF0;
|
||||
caret-color: #D5B3FD;
|
||||
border-radius: 35px;
|
||||
border: 5px solid #CEBBA9;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
body{
|
||||
min-height:100vw;
|
||||
}
|
||||
|
||||
|
||||
/*card grid to allow cards to be displayed in a grid*/
|
||||
.list-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 320px);
|
||||
gap: 45px;
|
||||
}
|
||||
|
||||
|
||||
/* card design for information pallets as first collumn*/
|
||||
.list {
|
||||
background-color: #EADDCF;
|
||||
width: 280px;
|
||||
height: 180px;
|
||||
margin-bottom: 25px;
|
||||
margin-left: 60px;
|
||||
border: 6px solid #CEBBA9;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
transition: 0.6s;
|
||||
}
|
||||
/* makes the cards highlight themselves when you hover over them*/
|
||||
.list:hover {
|
||||
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.4);
|
||||
background-color: #7FC8AB;
|
||||
border: 6px solid #236E44;
|
||||
transition: 0.6s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* text body above buttons */
|
||||
.lb {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.lb-text {
|
||||
display: flex;
|
||||
padding-left: 5px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* for the image next to the text body */
|
||||
.lb-image {
|
||||
margin-top: 10px;
|
||||
height: 80px;
|
||||
}
|
||||
Whitespace-only changes.
@@ -0,0 +1,59 @@
|
||||
span{
|
||||
font-size: 22px;
|
||||
font-family: sans-serif;
|
||||
font-weight: 600;
|
||||
color: #292E3A;
|
||||
}
|
||||
|
||||
t{
|
||||
font-size: 22px;
|
||||
font-family: sans-serif;
|
||||
font-weight: 400;
|
||||
color: #292E3A;
|
||||
}
|
||||
|
||||
|
||||
/* text body for profile */
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 140px;
|
||||
}
|
||||
|
||||
.profile-text {
|
||||
display: flex;
|
||||
padding-left: 60px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* for the image next to the text body */
|
||||
.profile-image {
|
||||
margin-top: 50px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 100px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
|
||||
/*card grid to allow cards to be displayed in a grid*/
|
||||
.pfcard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, auto);
|
||||
gap: 45px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
|
||||
/* card design for information pallets as first collumn*/
|
||||
.pfcard {
|
||||
background-color: #EADDCF;
|
||||
margin-left: 500px;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
border: 6px solid #CEBBA9;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-radius: 35px;
|
||||
}
|
||||
+107
@@ -0,0 +1,107 @@
|
||||
body {
|
||||
background-color: #F4EBE2;
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #292E3A;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/* button pill */
|
||||
.pill{
|
||||
background-color: #EADDCF;
|
||||
height: 35px;
|
||||
width: 160px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 40px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
border: 4px solid #CEBBA9;
|
||||
transition: 0.5s;
|
||||
color: #292E3A;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.pill:hover{
|
||||
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
|
||||
background-color: #7FC8AB;
|
||||
transition: 0.5s;
|
||||
border: 4px solid #236E44;
|
||||
}
|
||||
|
||||
.pill[data-selected] {
|
||||
background-color: #D5B3FD;
|
||||
border: 4px solid #393939;
|
||||
}
|
||||
|
||||
.topnav-container {
|
||||
background-color: #F4EBE2;
|
||||
padding: 10px;
|
||||
padding-bottom: 0px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Add a black background color to the top navigation */
|
||||
.topnav {
|
||||
background-color: #333;
|
||||
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5);
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
border-radius: 25px;
|
||||
padding: 10px 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-width: 95vw;
|
||||
}
|
||||
|
||||
/* for the BOB INC. */
|
||||
.logo {
|
||||
color: white;
|
||||
padding: 0px 16px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
/* Style the links inside the navigation bar */
|
||||
.topnav-links a {
|
||||
color: #f2f2f2;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Change the color of links on hover */
|
||||
.topnav-links a:hover {
|
||||
background-color: #CEBBA9;
|
||||
font-size: 18px;
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
/*code to allow the nav bar to follow you as you scroll */
|
||||
|
||||
.sticky {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.centered {
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
// makes it so the nav bar follows you as you scroll
|
||||
window.onscroll = function() {myFunction()};
|
||||
var navbar = document.getElementById("navbar");
|
||||
var sticky = navbar.offsetTop;
|
||||
function myFunction() {
|
||||
if (window.pageYOffset >= sticky) {
|
||||
navbar.classList.add("sticky")
|
||||
} else {
|
||||
navbar.classList.remove("sticky");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// for card allignment - allows filtering of results
|
||||
function showAllCards() {
|
||||
const cards = document.querySelectorAll(`.card`);
|
||||
|
||||
cards.forEach((item) => {
|
||||
item.style.display = null;
|
||||
});
|
||||
|
||||
document.getElementById("all").setAttribute('data-selected', true);
|
||||
document.querySelectorAll(`.pill:not([id="all"])`).forEach((pill) => pill.removeAttribute("data-selected"));
|
||||
}
|
||||
|
||||
function showCategory(category) {
|
||||
const CategoryItems = document.querySelectorAll(`.card[data-${category}]`);
|
||||
const AllElse = document.querySelectorAll(`.card:not([data-${category}])`);
|
||||
document.getElementById(category).setAttribute('data-selected', true);
|
||||
document.querySelectorAll(`.pill:not([id="${category}"])`).forEach((pill) => pill.removeAttribute("data-selected"));
|
||||
|
||||
CategoryItems.forEach((item) => {
|
||||
item.style.display = null;
|
||||
});
|
||||
|
||||
AllElse.forEach((item) => {
|
||||
item.style.display = 'none';
|
||||
});
|
||||
|
||||
document.getElementById("all").removeAttribute('data-selected');
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/parts.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<p style="margin-left: 60px; margin-top: 60px;font-size:35px;">From here you can select a variety of gpus to look at and compare, those gpus being from both AMD and nvidia</p>
|
||||
<!-- listing the products -->
|
||||
|
||||
|
||||
<!-- toggle's for AMD and nvidia -->
|
||||
|
||||
<div style="margin-left:60px;">
|
||||
<button class="pill" data-selected onclick="showAllCards()" id="all">All Components</button>
|
||||
<button class="pill" onclick="showCategory('nvidia')" id="nvidia">nvidia gpus</button>
|
||||
<button class="pill" onclick="showCategory('amd')" id="amd">Amd gpus</button>
|
||||
</div>
|
||||
|
||||
<!-- first nvidia gpu test -->
|
||||
|
||||
<div class="list-grid">
|
||||
|
||||
|
||||
<a href="https://www.amazon.co.uk/s?k=rtx+3060&rh=n%3A430500031%2Cp_n_feature_thirteen_browse-bin%3A27399140031&dc&ds=v1%3AEWl2HqTgaeEVOyC8i0D3L4r2vLGlrrMJPJIs51NQSqY&crid=1N3E6UVGVDAER&qid=1673714116&rnid=27399136031&sprefix=rtx+3060%2Caps%2C78&ref=sr_nr_p_n_feature_thirteen_browse-bin_2" class="card lb list" data-nvidia>
|
||||
<p class="lb-text">Test nvidia</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- nvidia gpu -->
|
||||
|
||||
<!-- first amd gpu test -->
|
||||
<a class="card lb list" data-amd>
|
||||
<p class="lb-text">Test AMD</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- amd gpu -->
|
||||
|
||||
<!-- rest of list -->
|
||||
<a class="card lb list" data-amd>
|
||||
<p class="lb-text">amd gpu 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-nvidia>
|
||||
<p class="lb-text">nvidia gpu 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-nvidia>
|
||||
<p class="lb-text">nvidia gpu 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-nvidia>
|
||||
<p class="lb-text">nvidia gpu 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-amd>
|
||||
<p class="lb-text">amd gpu 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-amd>
|
||||
<p class="lb-text">amd gpu 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-amd>
|
||||
<p class="lb-text">Amd gpu 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-nvidia>
|
||||
<p class="lb-text">nvidia gpu 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/parts.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder: HDD</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<p style="margin-left: 60px; margin-top: 60px;font-size:35px;">From here you can select a variety of storage drives to
|
||||
look at and compare, those drives being from both faster more expensive drives and large volume drives</p>
|
||||
<!-- listing the products -->
|
||||
|
||||
|
||||
<!-- toggle's for AMD and INTEL -->
|
||||
|
||||
<div style="margin-left:60px;">
|
||||
<button class="pill" data-selected onclick="showAllCards()" id="all">All Components</button>
|
||||
<button class="pill" onclick="showCategory('large')" id="large">large storage drives</button>
|
||||
<button class="pill" onclick="showCategory('fast')" id="fast">fast drives</button>
|
||||
</div>
|
||||
|
||||
<!-- first large storage drive test -->
|
||||
|
||||
<div class="list-grid">
|
||||
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">Test large</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- large storage drive -->
|
||||
|
||||
<!-- first fast drive test -->
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">Test fast</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- fast drive -->
|
||||
|
||||
<!-- rest of list -->
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">fast drive 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">large storage drive 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">large storage drive 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">large storage drive 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">fast drive 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">fast drive 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">fast drive 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">large storage drive 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/home.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">REGISTER</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<!-- search bar -->
|
||||
|
||||
<!-- <form class="example"> -->
|
||||
<!-- <input type="text" placeholder="Search.." name="search"> <button type="submit"><i class="fa fa-search"></i></button> -->
|
||||
<!-- </form> -->
|
||||
|
||||
<!-- end of search bar -->
|
||||
|
||||
<!-- text body -->
|
||||
<div class="hero centered">
|
||||
<div class="hero-text">
|
||||
<span class="title">BUILD YOUR OWN COMPUTER</span>
|
||||
<span class="title">AND LEARN ABOUT YOUR PC AS YOU BUILD IT.</span>
|
||||
<span class="text">Offers people ways in where they can learn about their computers as they build it</span>
|
||||
<span class="text">to ensure maximum customer satisfaction.</span>
|
||||
</div>
|
||||
<img class="hero-image" src="images/pc-case.png">
|
||||
</div>
|
||||
<!-- end of text body -->
|
||||
|
||||
|
||||
<!-- buttons -->
|
||||
<div class="centered">
|
||||
<button class="pill" data-selected onclick="showAllCards()" id="all">All Components</button>
|
||||
<button class="pill" onclick="showCategory('core-components')" id="core-components">Core Components</button>
|
||||
<button class="pill" onclick="showCategory('peripherals')" id="peripherals">Peripherals</button>
|
||||
<button class="pill" onclick="showCategory('storage')" id="storage">Storage Devices</button>
|
||||
</div>
|
||||
<!-- end of buttons -->
|
||||
|
||||
<!-- cards -->
|
||||
<div class="card-grid centered">
|
||||
<a href="cpu.html" class="card" data-core-components>
|
||||
<h2 class="CT">CPU:</h2>
|
||||
<p class="Cf">Look for a suitable brain for your computer.<br><br>Choose from:<br>1. AMD<br>2. INTEL</p>
|
||||
</a>
|
||||
|
||||
<a href="gpu.html" class="card" data-core-components>
|
||||
<h2 class="CT">GPU:</h2>
|
||||
<p class="Cf">Find the best Graphical Processing Unit for your system<br><br>Choose from:<br>1. AMD<br>2. NVIDIA
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a href="ram.html" class="card" data-core-components>
|
||||
<h2 class="CT">RAM:</h2>
|
||||
<p class="Cf">Find the best ram for your system.<br><br>Load files quicker with better RAM.</p>
|
||||
</a>
|
||||
|
||||
<a href="Internet.html" class="card" data-core-components data-peripherals>
|
||||
<h2 class="CT">INTERNET:</h2>
|
||||
<p class="Cf">For your computer to be able to access the internet you would need a network adapter, normally you
|
||||
can choose from: <br><br> 1. Wifi Adapters<br>2. Ethernet Adapaters</p>
|
||||
</a>
|
||||
|
||||
<a href="case.html" class="card" data-core-components>
|
||||
<h2 class="CT">CASE:</h2>
|
||||
<p class="Cf">you need a case to put your pc parts inside.<br><br>Find the best case to house all of your
|
||||
computer’s Components.</p>
|
||||
</a>
|
||||
|
||||
<a href="psu.html" class="card" data-core-components>
|
||||
<h2 class="CT">PSU:</h2>
|
||||
<p class="Cf">This deivce is used to provide your system with the necessary power in order to function<br><br>-
|
||||
ensure your PSU is rated to provide enough power to your system!</p>
|
||||
</a>
|
||||
|
||||
<a href="hdd.html" class="card" data-storage>
|
||||
<h2 class="CT">HDD:</h2>
|
||||
<p class="Cf">These are storage devices known as Hard Disk Drive, these are typically robust and cheap and are
|
||||
able to retain a large amount of storage</p>
|
||||
</a>
|
||||
|
||||
<a href="ssd.html" class="card" data-storage>
|
||||
<h2 class="CT">SSD:</h2>
|
||||
<p class="Cf">These are a storage devices known as Solid State Drive, these tend to be the more expensive and
|
||||
smaller counter part to HDD however they are fast</p>
|
||||
</a>
|
||||
|
||||
<a href="mouse.html" class="card" data-peripherals>
|
||||
<h2 class="CT">MOUSE:</h2>
|
||||
<p class="Cf">This is an input device used to input where you are pointing. You can find a large variety of these
|
||||
and they tend to be typically inexpensive.</p>
|
||||
</a>
|
||||
|
||||
<a href="keyb.html" class="card" data-peripherals>
|
||||
<h2 class="CT">KEYBOARD:</h2>
|
||||
<p class="Cf">This is an input device used to input letters, such as typing. They come in 2 main forms which are:
|
||||
<br><br>1. Mechanical Keyboards<br>2. Membrane Keyboards</p>
|
||||
</a>
|
||||
|
||||
<a href="monitor.html" class="card" data-peripherals>
|
||||
<h2 class="CT">MONITOR:</h2>
|
||||
<p class="Cf">To be able to visually see the output of your system you will need a display.<br><br>These displays
|
||||
can have different resolutions for a difference in quality and different refresh rates for smoothness.</p>
|
||||
</a>
|
||||
|
||||
<a href="cooling.html" class="card" data-core-components="">
|
||||
<h2 class="CT">COOLING:</h2>
|
||||
<p class="Cf">In order to ensure that your system doesnt overheat, buy a cooler capable enough to keep your system
|
||||
adequately cool!</p>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<!-- end of cards -->
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
@@ -0,0 +1,13 @@
|
||||
<?php
|
||||
|
||||
$servername= "localhost";
|
||||
$dBUserName= "root";
|
||||
$dBPassword= "";
|
||||
$dBName= "proto1";
|
||||
|
||||
$conn = mysqli_connect($servername, $dBUserName, $dBPassword, $dBName);
|
||||
|
||||
if (!$conn) {
|
||||
die("connection failed: ". mysqli_connect_error());
|
||||
}
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
<?php
|
||||
|
||||
function emptyInputSignup($name, $email, $username, $pwd, $pwdRepeat)
|
||||
{
|
||||
$result;
|
||||
if (empty($name) || empty($email) || empty($username) || empty($pwd) || empty($pwdRepeat)) {
|
||||
$result = true;
|
||||
} else {
|
||||
$result = false;
|
||||
}
|
||||
return $result;
|
||||
}
|
||||
|
||||
function invalidUid($username)
|
||||
{
|
||||
$result;
|
||||
if (preg_match("/^[a-zA-Z0-9]*$/", $username)) {
|
||||
$result = true;
|
||||
} else {
|
||||
$result = false;
|
||||
}
|
||||
return $result;
|
||||
}
|
||||
|
||||
function invalidEmail($email)
|
||||
{
|
||||
$result;
|
||||
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
|
||||
$result = true;
|
||||
} else {
|
||||
$result = false;
|
||||
}
|
||||
return $result;
|
||||
}
|
||||
|
||||
function pwdMatch($pwd, $pwdRepeat)
|
||||
{
|
||||
$result;
|
||||
if ($pwd !== $pwdRepeat) {
|
||||
$result = true;
|
||||
} else {
|
||||
$result = false;
|
||||
}
|
||||
return $result;
|
||||
}
|
||||
|
||||
|
||||
function uidExists($conn, $username, $email)
|
||||
{
|
||||
$sql = "SELECT * FROM users WHERE usersUid = ? OR usersEmail = ?;";
|
||||
$stmt = mysqli_stmt_init($conn);
|
||||
if (!mysqli_stmt_prepare($stmt, $sql)) {
|
||||
header("location: ../signup.html?error=stmtfailed");
|
||||
exit();
|
||||
}
|
||||
|
||||
mysqli_stmt_bind_param($stmt, "ss", $username, $email);
|
||||
mysqli_stmt_execute($stmt);
|
||||
|
||||
$resultData = mysqli_stmt_get_result($stmt);
|
||||
|
||||
if ($row = mysqli_fetch_assoc($resultData)) {
|
||||
return $row;
|
||||
} else {
|
||||
$result = false;
|
||||
return $result;
|
||||
}
|
||||
mysqli_stmt_close($stmt);
|
||||
}
|
||||
|
||||
function createUser($conn, $name, $username, $email, $pwd)
|
||||
{
|
||||
$sql = "INSERT INTO users (usersName, usersEmail, usersUid, UsersPwd) VALUES (?, ?, ?, ?);";
|
||||
$stmt = mysqli_stmt_init($conn);
|
||||
if (!mysqli_stmt_prepare($stmt, $sql)) {
|
||||
header("location: ../register.html?error=stmtfailed");
|
||||
exit();
|
||||
}
|
||||
|
||||
$hashedPwd = password_hash($pwd, PASSWORD_DEFAULT);
|
||||
|
||||
mysqli_stmt_bind_param($stmt, "ssss", $name, $email, $username, $hashedPwd);
|
||||
mysqli_stmt_execute($stmt);
|
||||
mysqli_stmt_close($stmt);
|
||||
header("location: ../register.html?error=none");
|
||||
exit();
|
||||
}
|
||||
|
||||
Whitespace-only changes.
@@ -0,0 +1,42 @@
|
||||
<?php
|
||||
|
||||
if (isset($_POST["submit"])) {
|
||||
|
||||
$name = $_POST["name"];
|
||||
$email = $_POST["email"];
|
||||
$username = $_POST["uid"];
|
||||
$pwd = $_POST["pwd"];
|
||||
$pwdRepeat = $_POST["pwdrepeat"];
|
||||
|
||||
require_once 'dbh.inc.php';
|
||||
require_once 'functions.inc.php';
|
||||
|
||||
if (emptyInputSignup($name, $email, $username, $pwd, $pwdRepeat) !==false) {
|
||||
header("location: ../register.html?error=emptyinput");
|
||||
exit();
|
||||
}
|
||||
|
||||
if (invalidUid($username) !==false) {
|
||||
header("location: ../register.html?error=invaliduid");
|
||||
exit();
|
||||
}
|
||||
if (invalidEmail($email) !==false) {
|
||||
header("location: ../register.html?error=invalidemail");
|
||||
exit();
|
||||
}
|
||||
if (pwdMatch($pwd, $pwdRepeat) !==false) {
|
||||
header("location: ../register.html?error=passwordsdontmatch");
|
||||
exit();
|
||||
}
|
||||
if (uidExists($conn, $username, $email) !==false) {
|
||||
header("location: ../register.html?error=usernametaken");
|
||||
exit();
|
||||
}
|
||||
|
||||
createUser($conn, $name, $username, $email, $pwd);
|
||||
}
|
||||
|
||||
else {
|
||||
header("location: ../register.html");
|
||||
exit();
|
||||
}
|
||||
+138
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/home.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<!-- search bar -->
|
||||
|
||||
<!-- <form class="example"> -->
|
||||
<!-- <input type="text" placeholder="Search.." name="search"> <button type="submit"><i class="fa fa-search"></i></button> -->
|
||||
<!-- </form> -->
|
||||
|
||||
<!-- end of search bar -->
|
||||
|
||||
<!-- text body -->
|
||||
<div class="hero centered">
|
||||
<div class="hero-text">
|
||||
<span class="title">BUILD YOUR OWN COMPUTER</span>
|
||||
<span class="title">AND LEARN ABOUT YOUR PC AS YOU BUILD IT.</span>
|
||||
<span class="text">Offers people ways in where they can learn about their computers as they build it</span>
|
||||
<span class="text">to ensure maximum customer satisfaction.</span>
|
||||
</div>
|
||||
<img class="hero-image" src="images/pc-case.png">
|
||||
</div>
|
||||
<!-- end of text body -->
|
||||
|
||||
|
||||
<!-- buttons -->
|
||||
<div class="centered">
|
||||
<button class="pill" data-selected onclick="showAllCards()" id="all">All Components</button>
|
||||
<button class="pill" onclick="showCategory('core-components')" id="core-components">Core Components</button>
|
||||
<button class="pill" onclick="showCategory('peripherals')" id="peripherals">Peripherals</button>
|
||||
<button class="pill" onclick="showCategory('storage')" id="storage">Storage Devices</button>
|
||||
</div>
|
||||
<!-- end of buttons -->
|
||||
|
||||
<!-- cards -->
|
||||
<div class="card-grid centered">
|
||||
<a href="cpu.html" class="card" data-core-components>
|
||||
<h2 class="CT">CPU:</h2>
|
||||
<p class="Cf">Look for a suitable brain for your computer.<br><br>Choose from:<br>1. AMD<br>2. INTEL</p>
|
||||
</a>
|
||||
|
||||
<a href="gpu.html" class="card" data-core-components>
|
||||
<h2 class="CT">GPU:</h2>
|
||||
<p class="Cf">Find the best Graphical Processing Unit for your system<br><br>Choose from:<br>1. AMD<br>2. NVIDIA
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a href="ram.html" class="card" data-core-components>
|
||||
<h2 class="CT">RAM:</h2>
|
||||
<p class="Cf">Find the best ram for your system.<br><br>Load files quicker with better RAM.</p>
|
||||
</a>
|
||||
|
||||
<a href="Internet.html" class="card" data-core-components data-peripherals>
|
||||
<h2 class="CT">INTERNET:</h2>
|
||||
<p class="Cf">For your computer to be able to access the internet you would need a network adapter, normally you
|
||||
can choose from: <br><br> 1. Wifi Adapters<br>2. Ethernet Adapaters</p>
|
||||
</a>
|
||||
|
||||
<a href="case.html" class="card" data-core-components>
|
||||
<h2 class="CT">CASE:</h2>
|
||||
<p class="Cf">you need a case to put your pc parts inside.<br><br>Find the best case to house all of your
|
||||
computer’s Components.</p>
|
||||
</a>
|
||||
|
||||
<a href="psu.html" class="card" data-core-components>
|
||||
<h2 class="CT">PSU:</h2>
|
||||
<p class="Cf">This deivce is used to provide your system with the necessary power in order to function<br><br>-
|
||||
ensure your PSU is rated to provide enough power to your system!</p>
|
||||
</a>
|
||||
|
||||
<a href="hdd.html" class="card" data-storage>
|
||||
<h2 class="CT">HDD:</h2>
|
||||
<p class="Cf">These are storage devices known as Hard Disk Drive, these are typically robust and cheap and are
|
||||
able to retain a large amount of storage</p>
|
||||
</a>
|
||||
|
||||
<a href="ssd.html" class="card" data-storage>
|
||||
<h2 class="CT">SSD:</h2>
|
||||
<p class="Cf">These are a storage devices known as Solid State Drive, these tend to be the more expensive and
|
||||
smaller counter part to HDD however they are fast</p>
|
||||
</a>
|
||||
|
||||
<a href="mouse.html" class="card" data-peripherals>
|
||||
<h2 class="CT">MOUSE:</h2>
|
||||
<p class="Cf">This is an input device used to input where you are pointing. You can find a large variety of these
|
||||
and they tend to be typically inexpensive.</p>
|
||||
</a>
|
||||
|
||||
<a href="keyb.html" class="card" data-peripherals>
|
||||
<h2 class="CT">KEYBOARD:</h2>
|
||||
<p class="Cf">This is an input device used to input letters, such as typing. They come in 2 main forms which are:
|
||||
<br><br>1. Mechanical Keyboards<br>2. Membrane Keyboards
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a href="monitor.html" class="card" data-peripherals>
|
||||
<h2 class="CT">MONITOR:</h2>
|
||||
<p class="Cf">To be able to visually see the output of your system you will need a display.<br><br>These displays
|
||||
can have different resolutions for a difference in quality and different refresh rates for smoothness.</p>
|
||||
</a>
|
||||
|
||||
<a href="cooling.html" class="card" data-core-components="">
|
||||
<h2 class="CT">COOLING:</h2>
|
||||
<p class="Cf">In order to ensure that your system doesnt overheat, buy a cooler capable enough to keep your system
|
||||
adequately cool!</p>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<!-- end of cards -->
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
const form = document.querySelector("form")
|
||||
eField = form.querySelector(".email"),
|
||||
eInput = eField.querySelector("input"),
|
||||
pField = form.querySelector(".password"),
|
||||
pInput = pField.querySelector("input");
|
||||
|
||||
|
||||
form.onsubmit = (e)=>{
|
||||
e.preventDefault(); //preventing from form submitting
|
||||
//if email and password is blank then add shake class in it else call specified function
|
||||
(eInput.value == "") ? eField.classList.add("shake", "error") : checkEmail();
|
||||
(pInput.value == "") ? pField.classList.add("shake", "error") : checkPass();
|
||||
|
||||
|
||||
setTimeout(()=>{ //remove shake class after 500ms
|
||||
eField.classList.remove("shake");
|
||||
pField.classList.remove("shake");
|
||||
}, 500);
|
||||
|
||||
|
||||
eInput.onkeyup = ()=>{checkEmail();} //calling checkEmail function on email input keyup
|
||||
pInput.onkeyup = ()=>{checkPass();} //calling checkPassword function on pass input keyup
|
||||
|
||||
|
||||
function checkEmail(){ //checkEmail function
|
||||
let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/; //pattern for validate email
|
||||
if(!eInput.value.match(pattern)){ //if pattern not matched then add error and remove valid class
|
||||
eField.classList.add("error");
|
||||
eField.classList.remove("valid");
|
||||
let errorTxt = eField.querySelector(".error-txt");
|
||||
//if email value is not empty then show please enter valid email else show Email can't be blank
|
||||
(eInput.value != "") ? errorTxt.innerText = "Enter a valid email address" : errorTxt.innerText = "Email can't be blank";
|
||||
}else{ //if pattern matched then remove error and add valid class
|
||||
eField.classList.remove("error");
|
||||
eField.classList.add("valid");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function checkPass(){ //checkPass function
|
||||
if(pInput.value == ""){ //if pass is empty then add error and remove valid class
|
||||
pField.classList.add("error");
|
||||
pField.classList.remove("valid");
|
||||
}else{ //if pass is empty then remove error and add valid class
|
||||
pField.classList.remove("error");
|
||||
pField.classList.add("valid");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//if eField and pField doesn't contains error class that mean user filled details properly
|
||||
if(!eField.classList.contains("error") && !pField.classList.contains("error")){
|
||||
window.location.href = form.getAttribute("action"); //redirecting user to the specified url which is inside action attribute of form tag
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,55 @@
|
||||
const form = document.querySelector("form")
|
||||
eField = form.querySelector(".email"),
|
||||
eInput = eField.querySelector("input"),
|
||||
pField = form.querySelector(".password"),
|
||||
pInput = pField.querySelector("input");
|
||||
|
||||
|
||||
form.onsubmit = (e)=>{
|
||||
e.preventDefault(); //preventing from form submitting
|
||||
//if email and password is blank then add shake class in it else call specified function
|
||||
(eInput.value == "") ? eField.classList.add("shake", "error") : checkEmail();
|
||||
(pInput.value == "") ? pField.classList.add("shake", "error") : checkPass();
|
||||
|
||||
|
||||
setTimeout(()=>{ //remove shake class after 500ms
|
||||
eField.classList.remove("shake");
|
||||
pField.classList.remove("shake");
|
||||
}, 500);
|
||||
|
||||
|
||||
eInput.onkeyup = ()=>{checkEmail();} //calling checkEmail function on email input keyup
|
||||
pInput.onkeyup = ()=>{checkPass();} //calling checkPassword function on pass input keyup
|
||||
|
||||
|
||||
function checkEmail(){ //checkEmail function
|
||||
let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/; //pattern for validate email
|
||||
if(!eInput.value.match(pattern)){ //if pattern not matched then add error and remove valid class
|
||||
eField.classList.add("error");
|
||||
eField.classList.remove("valid");
|
||||
let errorTxt = eField.querySelector(".error-txt");
|
||||
//if email value is not empty then show please enter valid email else show Email can't be blank
|
||||
(eInput.value != "") ? errorTxt.innerText = "Enter a valid email address" : errorTxt.innerText = "Email can't be blank";
|
||||
}else{ //if pattern matched then remove error and add valid class
|
||||
eField.classList.remove("error");
|
||||
eField.classList.add("valid");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function checkPass(){ //checkPass function
|
||||
if(pInput.value == ""){ //if pass is empty then add error and remove valid class
|
||||
pField.classList.add("error");
|
||||
pField.classList.remove("valid");
|
||||
}else{ //if pass is empty then remove error and add valid class
|
||||
pField.classList.remove("error");
|
||||
pField.classList.add("valid");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//if eField and pField doesn't contains error class that mean user filled details properly
|
||||
if(!eField.classList.contains("error") && !pField.classList.contains("error")){
|
||||
window.location.href = form.getAttribute("action"); //redirecting user to the specified url which is inside action attribute of form tag
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/parts.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<p>this is for keyboard </p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/log.css">
|
||||
<script src="js/log.js"></script>
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<!-- login page -->
|
||||
|
||||
<div class="lb centered" style="margin-top:100px;">
|
||||
<div class="wrapper">
|
||||
<header>Login Form</header>
|
||||
<form action="home.html">
|
||||
<div class="field email">
|
||||
<div class="input-area">
|
||||
<input type="text" placeholder="Email Address">
|
||||
<i class="icon fas fa-envelope"></i>
|
||||
<i class="error error-icon fas fa-exclamation-circle"></i>
|
||||
</div>
|
||||
<div class="error error-txt">Email can't be blank</div>
|
||||
</div>
|
||||
<div class="field password">
|
||||
<div class="input-area">
|
||||
<input type="password" placeholder="Password">
|
||||
<i class="icon fas fa-lock"></i>
|
||||
<i class="error error-icon fas fa-exclamation-circle"></i>
|
||||
</div>
|
||||
<div class="error error-txt">Password can't be blank</div>
|
||||
</div>
|
||||
<span class="pass-txt" style="margin-left: -30px;"><a href="cpu.html">Forgot password?</a></span>
|
||||
<span class="reg-txt"><a href="home.html">Register</a></span>
|
||||
<input type="submit" value="Login">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- login page -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/log.css">
|
||||
<script src="js/log.js"></script>
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<!-- log to register switching -->
|
||||
|
||||
<!-- buttons -->
|
||||
<!-- <div class="centered">
|
||||
<button class="pill" data-selected onclick="showAllCards()" id="all">All Components</button>
|
||||
<button class="pill" onclick="showCategory('login')" id="login">login</button>
|
||||
<button class="pill" onclick="showCategory('register')" id="register">register</button>
|
||||
</div> -->
|
||||
<!-- end of buttons -->
|
||||
|
||||
<!-- end of log to register switching -->
|
||||
|
||||
<!-- login page -->
|
||||
|
||||
<div class="lb centered" style="margin-top:100px;" login>
|
||||
<div class="wrapper">
|
||||
<header>Login Page</header>
|
||||
<form action="includes/login.inc.php" method="post">
|
||||
<div class="input-area field">
|
||||
<input type="text" name="name" placeholder="Username/Email">
|
||||
<input type="password" name="pwd" placeholder="Password">
|
||||
</div>
|
||||
<span class="pass-txt" style="margin-left: -30px;"><a href="cpu.html">Forgot password?</a></span>
|
||||
<span class="reg-txt"><a href="register.html">Register</a></span>
|
||||
<input type="submit" name="submit" value="Login">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- login page -->
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/parts.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<p style="margin-left: 60px; margin-top: 60px;font-size:35px;">From here you can select a variety of storage drives to
|
||||
look at and compare, those drives being from both faster more expensive drives and large volume drives</p>
|
||||
<!-- listing the products -->
|
||||
|
||||
|
||||
<!-- toggle's for AMD and INTEL -->
|
||||
|
||||
<div style="margin-left:60px;">
|
||||
<button class="pill" data-selected onclick="showAllCards()" id="all">All Components</button>
|
||||
<button class="pill" onclick="showCategory('refresh')" id="refresh">high refresh</button>
|
||||
<button class="pill" onclick="showCategory('resolution')" id="resolution">high resolution</button>
|
||||
</div>
|
||||
|
||||
<!-- first high refresh test -->
|
||||
|
||||
<div class="list-grid">
|
||||
|
||||
|
||||
<a class="card lb list" data-refresh>
|
||||
<p class="lb-text">Test refresh</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- high refresh -->
|
||||
|
||||
<!-- first high resolution test -->
|
||||
<a class="card lb list" data-resolution>
|
||||
<p class="lb-text">Test resolution</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- high resolution -->
|
||||
|
||||
<!-- rest of list -->
|
||||
<a class="card lb list" data-resolution>
|
||||
<p class="lb-text">high resolution 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-refresh>
|
||||
<p class="lb-text">high refresh 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-refresh>
|
||||
<p class="lb-text">high refresh 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-refresh>
|
||||
<p class="lb-text">high refresh 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-resolution>
|
||||
<p class="lb-text">high resolution 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-resolution>
|
||||
<p class="lb-text">high resolution 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-resolution>
|
||||
<p class="lb-text">high resolution 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-refresh>
|
||||
<p class="lb-text">high refresh 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/parts.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<p>this is for mouse</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/pc.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder: parts</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<p>this is for pc list</p>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/profile.css">
|
||||
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
|
||||
<title>Computer Builder: profile</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="banana.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
|
||||
<!-- profile top -->
|
||||
<div class="profile centered">
|
||||
<div class="profile-text">
|
||||
<span class="title">This is your user profile page</span>
|
||||
</div>
|
||||
<img class="profile-image" src="images/sal.jpeg">
|
||||
</div>
|
||||
<!-- end of profile top -->
|
||||
|
||||
<!-- profile entry -->
|
||||
|
||||
<div class="pfcard ">
|
||||
<span>
|
||||
very cool existing input
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- end of profile entry -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/parts.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<p style="margin-left: 60px; margin-top: 60px;font-size:35px;">From here you can select a variety of storage drives to
|
||||
look at and compare, those drives being from both faster more expensive drives and large volume drives</p>
|
||||
<!-- listing the products -->
|
||||
|
||||
|
||||
<!-- toggle's for AMD and INTEL -->
|
||||
|
||||
<div style="margin-left:60px;">
|
||||
<button class="pill" data-selected onclick="showAllCards()" id="all">All Components</button>
|
||||
<button class="pill" onclick="showCategory('stable')" id="stable">stable PSUs</button>
|
||||
<button class="pill" onclick="showCategory('power')" id="power">powerful PSUs</button>
|
||||
</div>
|
||||
|
||||
<!-- first stable PSU test -->
|
||||
|
||||
<div class="list-grid">
|
||||
|
||||
|
||||
<a class="card lb list" data-stable>
|
||||
<p class="lb-text">Test stable</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- stable PSU -->
|
||||
|
||||
<!-- first powerful PSU test -->
|
||||
<a class="card lb list" data-power>
|
||||
<p class="lb-text">Test power</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- powerful PSU -->
|
||||
|
||||
<!-- rest of list -->
|
||||
<a class="card lb list" data-power>
|
||||
<p class="lb-text">powerful PSU 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-stable>
|
||||
<p class="lb-text">stable PSU 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-stable>
|
||||
<p class="lb-text">stable PSU 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-stable>
|
||||
<p class="lb-text">stable PSU 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-power>
|
||||
<p class="lb-text">powerful PSU 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-power>
|
||||
<p class="lb-text">powerful PSU 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-power>
|
||||
<p class="lb-text">powerful PSU 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-stable>
|
||||
<p class="lb-text">stable PSU 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/parts.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder: RAM</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<p style="margin-left: 60px; margin-top: 60px;font-size:35px;">From here you can select a variety of storage drives to
|
||||
look at and compare, those drives being from both faster more expensive RAM sticks and RAM with a larger data
|
||||
capacity</p>
|
||||
<!-- listing the products -->
|
||||
|
||||
|
||||
<!-- toggle's for AMD and INTEL -->
|
||||
|
||||
<div style="margin-left:60px;">
|
||||
<button class="pill" data-selected onclick="showAllCards()" id="all">All Components</button>
|
||||
<button class="pill" onclick="showCategory('large')" id="large">large storage drives</button>
|
||||
<button class="pill" onclick="showCategory('fast')" id="fast">fast drives</button>
|
||||
</div>
|
||||
|
||||
<!-- first large storage drive test -->
|
||||
|
||||
<div class="list-grid">
|
||||
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">Test large</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- large storage drive -->
|
||||
|
||||
<!-- first fast drive test -->
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">Test fast</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- fast drive -->
|
||||
|
||||
<!-- rest of list -->
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">fast drive 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">large storage drive 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">large storage drive 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">large storage drive 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">fast drive 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">fast drive 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">fast drive 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">large storage drive 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/log.css">
|
||||
<script src="js/log.js"></script>
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<!-- Register page -->
|
||||
|
||||
<div class="lb centered" style="margin-top:100px;" login>
|
||||
<div class="wrapper">
|
||||
<header>Register</header>
|
||||
<form action="includes/signup.inc.php" method="post">
|
||||
<div class="input-area field">
|
||||
<input type="text" name="name" placeholder="Full name">
|
||||
<input type="text" name="email" placeholder="Email">
|
||||
<input type="text" name="uid" placeholder="Username">
|
||||
<input type="password" name="pwd" placeholder="Password">
|
||||
<input type="password" name="pwdrepeat" placeholder="Repeat Password">
|
||||
</div>
|
||||
<span class="reg-txt"><a href="log.html">Login</a></span>
|
||||
<input type="submit" name="submit" value="Register">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- End of Register page -->
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,6 @@
|
||||
{ pkgs }: {
|
||||
deps = [
|
||||
pkgs.nodePackages.vscode-langservers-extracted
|
||||
pkgs.nodePackages.typescript-language-server
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/parts.css">
|
||||
<!-- global resources -->
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<script src="global.js"></script>
|
||||
<!-- end of global resources -->
|
||||
<title>Computer Builder: SSD</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--nav bar-->
|
||||
<div class="topnav-container">
|
||||
<div class="topnav">
|
||||
<a href="home.html" class="logo">BOB INC.</a>
|
||||
<div class="topnav-links">
|
||||
<a href="home.html">HOME</a>
|
||||
<a href="profile.html">PROFILE</a>
|
||||
<a href="log.html">LOGOUT</a>
|
||||
<a href="pc.html">YOUR PC</a>
|
||||
<a href="about.html">ABOUT</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of nav bar -->
|
||||
|
||||
<p style="margin-left: 60px; margin-top: 60px;font-size:35px;">From here you can select a variety of storage drives to
|
||||
look at and compare, those drives being from both faster more expensive drives and large volume drives</p>
|
||||
<!-- listing the products -->
|
||||
|
||||
|
||||
<!-- toggle's for AMD and INTEL -->
|
||||
|
||||
<div style="margin-left:60px;">
|
||||
<button class="pill" data-selected onclick="showAllCards()" id="all">All Components</button>
|
||||
<button class="pill" onclick="showCategory('large')" id="large">large storage drives</button>
|
||||
<button class="pill" onclick="showCategory('fast')" id="fast">fast drives</button>
|
||||
</div>
|
||||
|
||||
<!-- first large storage drive test -->
|
||||
|
||||
<div class="list-grid">
|
||||
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">Test large</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- large storage drive -->
|
||||
|
||||
<!-- first fast drive test -->
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">Test fast</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<!-- fast drive -->
|
||||
|
||||
<!-- rest of list -->
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">fast drive 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">large storage drive 1</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">large storage drive 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">large storage drive 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">fast drive 2</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">fast drive 3</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-fast>
|
||||
<p class="lb-text">fast drive 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
<a class="card lb list" data-large>
|
||||
<p class="lb-text">large storage drive 4</p>
|
||||
<img class="lb-image" src="images/pc-case.png">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user