├── server.log ├── .gitignore ├── assets ├── os.jpg ├── bg1.avif ├── bg2.jpg ├── eoi.jpg ├── helb.jpg ├── kra.png ├── ntsa.jpg ├── pcc.jpg ├── passport.jpg ├── shoplogo.jpg ├── software.jpg ├── main.js └── style.css ├── .idea ├── vcs.xml ├── .gitignore ├── inspectionProfiles │ └── profiles_settings.xml ├── misc.xml ├── modules.xml └── cybercafe.iml ├── server.js ├── package.json ├── README.md ├── port.html └── index.html /server.log: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /assets/os.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myusercloud/cybercafe/HEAD/assets/os.jpg -------------------------------------------------------------------------------- /assets/bg1.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myusercloud/cybercafe/HEAD/assets/bg1.avif -------------------------------------------------------------------------------- /assets/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myusercloud/cybercafe/HEAD/assets/bg2.jpg -------------------------------------------------------------------------------- /assets/eoi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myusercloud/cybercafe/HEAD/assets/eoi.jpg -------------------------------------------------------------------------------- /assets/helb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myusercloud/cybercafe/HEAD/assets/helb.jpg -------------------------------------------------------------------------------- /assets/kra.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myusercloud/cybercafe/HEAD/assets/kra.png -------------------------------------------------------------------------------- /assets/ntsa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myusercloud/cybercafe/HEAD/assets/ntsa.jpg -------------------------------------------------------------------------------- /assets/pcc.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myusercloud/cybercafe/HEAD/assets/pcc.jpg -------------------------------------------------------------------------------- /assets/passport.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myusercloud/cybercafe/HEAD/assets/passport.jpg -------------------------------------------------------------------------------- /assets/shoplogo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myusercloud/cybercafe/HEAD/assets/shoplogo.jpg -------------------------------------------------------------------------------- /assets/software.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/myusercloud/cybercafe/HEAD/assets/software.jpg -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | # Datasource local storage ignored files 7 | /dataSources/ 8 | /dataSources.local.xml 9 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/cybercafe.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const cors = require('cors'); 3 | 4 | const app = express(); 5 | const port = 3000; 6 | 7 | app.use(cors()); 8 | app.use(express.json()); 9 | app.use(express.urlencoded({ extended: true })); 10 | 11 | app.post('/api/contact', (req, res) => { 12 | console.log('Received contact form submission:'); 13 | console.log(req.body); 14 | res.status(200).send({ message: 'Form submission received successfully.' }); 15 | }); 16 | 17 | app.listen(port, () => { 18 | console.log(`Server is running on http://localhost:${port}`); 19 | }); 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app", 3 | "version": "1.0.0", 4 | "description": "��#\u0000 \u0000c\u0000y\u0000b\u0000e\u0000r\u0000-\u0000c\u0000a\u0000f\u0000e\u0000\r\u0000 \u0000#\u0000 \u0000c\u0000y\u0000b\u0000e\u0000r\u0000-\u0000c\u0000a\u0000f\u0000e\u0000\r\u0000 \u0000#\u0000 \u0000h\u0000a\u0000r\u0000r\u0000y\u0000\r\u0000 \u0000", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/myusercloud/cybercafe.git" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "type": "commonjs", 17 | "bugs": { 18 | "url": "https://github.com/myusercloud/cybercafe/issues" 19 | }, 20 | "homepage": "https://github.com/myusercloud/cybercafe#readme", 21 | "dependencies": { 22 | "cors": "^2.8.5", 23 | "express": "^5.1.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mugei Digital Cyber 2 | 3 | This is a simple website for a cyber cafe, built with HTML, CSS, and a Node.js/Express backend for the contact form. 4 | 5 | ## Getting Started 6 | 7 | ### Prerequisites 8 | 9 | * Node.js and npm installed on your machine. 10 | 11 | ### Installation and Running 12 | 13 | 1. **Clone the repository:** 14 | ```bash 15 | git clone 16 | ``` 17 | 18 | 2. **Navigate to the project directory:** 19 | ```bash 20 | cd cybercafe 21 | ``` 22 | 23 | 3. **Install dependencies:** 24 | ```bash 25 | npm install 26 | ``` 27 | 28 | 4. **Start the server:** 29 | ```bash 30 | node server.js 31 | ``` 32 | The server will start on `http://localhost:3000`. 33 | 34 | 5. **Open the website:** 35 | Open the `index.html` file in your web browser to view the website. You can do this by double-clicking the file or by navigating to `file:///path/to/your/project/index.html` in your browser. 36 | 37 | ## Backend 38 | 39 | The backend is a simple Express server that listens for POST requests on the `/api/contact` endpoint. When a request is received, it logs the form data to the console. 40 | -------------------------------------------------------------------------------- /assets/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | const contactForm = document.querySelector('#contact form'); 3 | contactForm.addEventListener('submit', async (event) => { 4 | event.preventDefault(); 5 | 6 | const formData = new FormData(contactForm); 7 | const data = Object.fromEntries(formData.entries()); 8 | 9 | const responseContainer = document.createElement('p'); 10 | 11 | try { 12 | const response = await fetch('http://localhost:3000/api/contact', { 13 | method: 'POST', 14 | headers: { 15 | 'Content-Type': 'application/json', 16 | }, 17 | body: JSON.stringify(data), 18 | }); 19 | 20 | if (response.ok) { 21 | responseContainer.textContent = 'Thank you for your message! We will get back to you soon.'; 22 | responseContainer.style.color = 'green'; 23 | contactForm.reset(); 24 | } else { 25 | throw new Error('Something went wrong. Please try again.'); 26 | } 27 | } catch (error) { 28 | responseContainer.textContent = error.message; 29 | responseContainer.style.color = 'red'; 30 | } 31 | 32 | contactForm.appendChild(responseContainer); 33 | 34 | setTimeout(() => { 35 | responseContainer.remove(); 36 | }, 5000); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /port.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | 10 | 11 | Harry Portfolio 12 | 52 | 53 | 54 |
55 | 56 |

Harrizon Lucas

57 |

Thiel fellow & fullstack developer

58 |

Hi! I'm a software & electronics engineer who is passionate about open-source platforms and fluid human-computer interaction.

59 |

Previously I co-founded and led ProTech, an augmented reality technology & 3D creator tools startup, from 2023 to date.

60 |

Highlighted work:

61 | 69 |
70 | 71 | -------------------------------------------------------------------------------- /assets/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | /* Body Styles */ 8 | body { 9 | font-family: Arial, sans-serif; 10 | line-height: 1.6; 11 | background-color: #f4f4f4; 12 | color: #333; 13 | } 14 | 15 | /* Header Styles */ 16 | header { 17 | background-color: red; 18 | color: white; 19 | padding: 10px; 20 | display: flex; 21 | justify-content: space-between; 22 | align-items: center; 23 | } 24 | 25 | header .logo-img { 26 | border-radius: 50%; 27 | width: 70px; 28 | height: 70px; 29 | } 30 | header .logo { 31 | display: flex; 32 | } 33 | 34 | nav ul { 35 | list-style: none; 36 | display: flex; 37 | } 38 | 39 | nav ul li { 40 | margin: 0 10px; 41 | } 42 | 43 | nav ul li a { 44 | color: white; 45 | text-decoration: none; 46 | font-weight: bold; 47 | } 48 | nav ul li a:hover{ 49 | color: #333; 50 | } 51 | 52 | 53 | 54 | /* Hero Section */ 55 | #hero { 56 | background-image: url('bg2.avif'); /* Replace with your image path */ 57 | background-size: cover; /* Cover the entire section */ 58 | background-position: center; /* Center the image */ 59 | 60 | height: 65vh; /* Full viewport height */ 61 | 62 | display: flex; /* Use flexbox for centering */ 63 | 64 | flex-direction: column; /* Stack items vertically */ 65 | 66 | justify-content: center; /* Center vertically */ 67 | 68 | align-items: center; /* Center horizontally */ 69 | 70 | text-align: center; /* Center text */ 71 | } 72 | 73 | #hero h1 { 74 | font-size: 3rem; 75 | color: #333; 76 | } 77 | 78 | #hero p { 79 | font-size: 1.2rem; 80 | color: #333; 81 | } 82 | #hero button { 83 | height: 40px; 84 | width: 120px; 85 | border: 2px solid black; 86 | border-radius: 10px; 87 | font-weight: bold; 88 | } 89 | #hero button a{ 90 | text-decoration: none; 91 | color: #333; 92 | } 93 | #hero button:hover{ 94 | background-color: red; 95 | border: 10px solid red; 96 | } 97 | 98 | /* Services Section */ 99 | #services { 100 | padding: 50px; 101 | background-color: white; 102 | } 103 | 104 | #services h2 { 105 | text-align: center; 106 | margin-bottom: 20px; 107 | font-size: 2rem; 108 | } 109 | 110 | .service { 111 | display: flex; 112 | align-items: center; 113 | margin-bottom: 50px; 114 | border: 4px solid red; 115 | border-radius: 10px; 116 | padding: 20px; 117 | 118 | } 119 | 120 | .service img { 121 | width: 260px; 122 | height: 200px; 123 | object-fit: cover; 124 | margin-right: 20px; 125 | } 126 | .service span{ 127 | font-weight: bold; 128 | } 129 | 130 | .service-info { 131 | max-width: 800px; 132 | } 133 | 134 | .service-info h3 { 135 | font-size: 1.8rem; 136 | color: red; 137 | } 138 | 139 | .service-info p { 140 | font-size: 1rem; 141 | margin-top: 10px; 142 | } 143 | 144 | /* About Section */ 145 | #about { 146 | padding: 50px; 147 | background-color: #fafafa; 148 | } 149 | #about h2{ 150 | color: red; 151 | } 152 | 153 | #about p { 154 | font-size: 1.2rem; 155 | } 156 | 157 | /* Contact Section */ 158 | #contact { 159 | padding: 50px; 160 | } 161 | #contact h2{ 162 | color: red; 163 | } 164 | 165 | form input, form textarea { 166 | width: 100%; 167 | padding: 10px; 168 | margin: 10px 0; 169 | border: 1px solid #ccc; 170 | border-radius: 5px; 171 | } 172 | 173 | form button { 174 | background-color: red; 175 | color: white; 176 | padding: 10px 20px; 177 | border: none; 178 | cursor: pointer; 179 | border-radius: 5px; 180 | } 181 | 182 | form button:hover { 183 | background-color: #cc0000; 184 | } 185 | 186 | /* Footer */ 187 | footer { 188 | background-color: #333; 189 | color: white; 190 | text-align: center; 191 | padding: 20px; 192 | } 193 | @media screen and (max-width: 768px) { 194 | header { 195 | flex-direction: column; 196 | text-align: center; 197 | } 198 | 199 | nav ul { 200 | flex-direction: column; 201 | } 202 | 203 | .service { 204 | flex-direction: column; 205 | text-align: center; 206 | } 207 | 208 | .service img { 209 | margin-bottom: 10px; 210 | } 211 | } 212 | 213 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mugei Digital Cyber 7 | 8 | 9 | 10 |
11 | 15 | 23 |
24 | 25 |
26 |
27 |

Welcome to Mugei Digital Cyber

28 |

Quick Online Services

29 |

Your one-stop solution for all digital services.

30 | 31 |
32 |
33 | 34 | 35 |
36 |

Our Services

37 |
38 | Passport Application 39 |
40 |

Passport Application

41 |

We assist you with passport applications, ensuring smooth processing. Price: Ksh. 0.00

42 |

A passport is an official travel document issued by a government that certifies a person's identity and 43 | nationality for international travel. A passport allows its bearer to enter and temporarily reside in a 44 | foreign country, access local aid and protection, 45 | and obtain consular assistance from their government. 46 | 47 |

48 |
49 |
50 | 51 |
52 | Passport Application 53 |
54 |

Police Clearance Certificate

55 |

A police certificate, is an official document often issued as a result of a background check conducted by 56 | the police or government agency within a country to enumerate any known criminal records that the applicant 57 | may have while there. Criminal records may include arrest, conviction, and possibly criminal proceedings. 58 | A police certificate is also known as good citizen certificate (in Hong Kong), good conduct certificate, 59 | police clearance certificate, national police history check (in Australia), certificate of good character/good 60 | character certificate (Caribbean), or judicial record extracts. 61 | 62 | Applicants may have to submit fingerprints and certain personal information to request the criminal record check, 63 | and the police or government agency may charge a fee.

64 |

We assist you with passport applications, ensuring smooth processing. Price: Ksh. 0.00

65 |
66 |
67 | 68 |
69 | Passport Application 70 |
71 |

KRA Services

72 |

Kenya Revenue Authority (KRA) is an agency of the Government of Kenya that is responsible for the assessment, 73 | collection and accounting of all revenues 74 | that are due to the government in accordance with the laws of Kenya.

75 |

We assist you with passport applications, ensuring smooth processing. Price: Ksh. 0.00

76 |
77 |
78 | 79 |
80 | Passport Application 81 |
82 |

NTSA TIMS/ DL

83 |

A driver's permit, learner's permit, student permit, learner's license or provisional license is a restricted 84 | license that is given to a person who is learning to drive, but has not yet satisfied the prerequisite to 85 | obtain a driver's license. Having a learner's permit for a certain length of time is usually one of the 86 | requirements (along with driver's education and a road test) for applying for a full driver's license. 87 | To get a learner's permit, 88 | one must typically pass a written permit test, take a basic competency test in the vehicle, or both.

89 |

We assist you with passport applications, ensuring smooth processing. Price: Ksh. 0.00

90 |
91 |
92 | 93 |
94 | Passport Application 95 |
96 |

HELB Application / Statement

97 |

We assist you with passport applications, ensuring smooth processing. Price: Ksh. 0.00

98 |
99 |
100 | 101 |
102 | Passport Application 103 |
104 |

Australian EOI

105 |

We assist you with passport applications, ensuring smooth processing. Price: Ksh. 0.00

106 |
107 |
108 | 109 |
110 | Passport Application 111 |
112 |

Phones Software Update

113 |

We assist you with passport applications, ensuring smooth processing. Price: Ksh. 0.00

114 |
115 |
116 | 117 |
118 | Passport Application 119 |
120 |

Windows / Linux Installation

121 |

We assist you with passport applications, ensuring smooth processing. Price: Ksh. 0.00

122 |
123 |
124 | 125 |
126 | 127 | 128 |
129 |

About Us

130 |

Mugei Digital Cyber offers a wide range of online services, catering to personal and business needs...

131 |
132 | 133 | 134 |
135 |

Contact Us

136 |
137 | 138 | 139 | 140 | 141 | 142 | 143 |
144 |
145 | 146 | 147 | 151 | 152 | 153 | 154 | --------------------------------------------------------------------------------