Add dynamic configuration to all HTML pages

Added init.js script and data attributes to all HTML files:
- All pages now load company configuration dynamically
- Added data-company-name attributes for company name elements
- Title tags will be updated by init.js at runtime
- Enables full customization without editing HTML files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mikael Westöö
2026-01-23 23:27:36 +01:00
parent ac21e428a5
commit 9a97a575c6
9 changed files with 19 additions and 10 deletions

View File

@@ -5,11 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Ryans Recruit Firm</title> <title>About Us - Ryans Recruit Firm</title>
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<script src="/js/init.js"></script>
</head> </head>
<body> <body>
<header> <header>
<nav class="container"> <nav class="container">
<div class="logo">Ryans Recruit Firm</div> <div class="logo" data-company-name>Ryans Recruit Firm</div>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="/about" class="active">About</a></li> <li><a href="/about" class="active">About</a></li>
@@ -132,7 +133,7 @@
<div class="container"> <div class="container">
<div class="footer-content"> <div class="footer-content">
<div class="footer-section"> <div class="footer-section">
<h3>Ryans Recruit Firm</h3> <h3 data-company-name>Ryans Recruit Firm</h3>
<p style="color: rgba(255, 255, 255, 0.8);"> <p style="color: rgba(255, 255, 255, 0.8);">
Your trusted partner in career advancement and talent acquisition. Your trusted partner in career advancement and talent acquisition.
</p> </p>

View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Applications - Ryans Recruit Admin</title> <title>Applications - Ryans Recruit Admin</title>
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<script src="/js/init.js"></script>
</head> </head>
<body style="background: #F8FAFC; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0;"> <body style="background: #F8FAFC; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0;">
<!-- Admin Header --> <!-- Admin Header -->

View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard - Ryans Recruit</title> <title>Admin Dashboard - Ryans Recruit</title>
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<script src="/js/init.js"></script>
</head> </head>
<body style="background: #F8FAFC; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0;"> <body style="background: #F8FAFC; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0;">
<!-- Admin Header --> <!-- Admin Header -->

View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jobs - Ryans Recruit Admin</title> <title>Jobs - Ryans Recruit Admin</title>
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<script src="/js/init.js"></script>
</head> </head>
<body style="background: #F8FAFC; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0;"> <body style="background: #F8FAFC; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0;">
<!-- Admin Header --> <!-- Admin Header -->

View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Login - Ryans Recruit</title> <title>Admin Login - Ryans Recruit</title>
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<script src="/js/init.js"></script>
</head> </head>
<body style="background: linear-gradient(135deg, #2563EB 0%, #1E293B 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;"> <body style="background: linear-gradient(135deg, #2563EB 0%, #1E293B 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
<div style="background: white; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); padding: 48px 40px; width: 100%; max-width: 400px;"> <div style="background: white; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); padding: 48px 40px; width: 100%; max-width: 400px;">

View File

@@ -5,11 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apply for Job - Ryans Recruit Firm</title> <title>Apply for Job - Ryans Recruit Firm</title>
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<script src="/js/init.js"></script>
</head> </head>
<body> <body>
<header> <header>
<nav class="container"> <nav class="container">
<div class="logo">Ryans Recruit Firm</div> <div class="logo" data-company-name>Ryans Recruit Firm</div>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="/about">About</a></li> <li><a href="/about">About</a></li>
@@ -124,7 +125,7 @@
<div class="container"> <div class="container">
<div class="footer-content"> <div class="footer-content">
<div class="footer-section"> <div class="footer-section">
<h3>Ryans Recruit Firm</h3> <h3 data-company-name>Ryans Recruit Firm</h3>
<p style="color: rgba(255, 255, 255, 0.8);"> <p style="color: rgba(255, 255, 255, 0.8);">
Your trusted partner in career advancement and talent acquisition. Your trusted partner in career advancement and talent acquisition.
</p> </p>

View File

@@ -5,11 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - Ryans Recruit Firm</title> <title>Contact Us - Ryans Recruit Firm</title>
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<script src="/js/init.js"></script>
</head> </head>
<body> <body>
<header> <header>
<nav class="container"> <nav class="container">
<div class="logo">Ryans Recruit Firm</div> <div class="logo" data-company-name>Ryans Recruit Firm</div>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="/about">About</a></li> <li><a href="/about">About</a></li>
@@ -122,7 +123,7 @@
<div class="container"> <div class="container">
<div class="footer-content"> <div class="footer-content">
<div class="footer-section"> <div class="footer-section">
<h3>Ryans Recruit Firm</h3> <h3 data-company-name>Ryans Recruit Firm</h3>
<p style="color: rgba(255, 255, 255, 0.8);"> <p style="color: rgba(255, 255, 255, 0.8);">
Your trusted partner in career advancement and talent acquisition. Your trusted partner in career advancement and talent acquisition.
</p> </p>

View File

@@ -5,11 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Listings - Ryans Recruit Firm</title> <title>Job Listings - Ryans Recruit Firm</title>
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<script src="/js/init.js"></script>
</head> </head>
<body> <body>
<header> <header>
<nav class="container"> <nav class="container">
<div class="logo">Ryans Recruit Firm</div> <div class="logo" data-company-name>Ryans Recruit Firm</div>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="/about">About</a></li> <li><a href="/about">About</a></li>
@@ -45,7 +46,7 @@
<div class="container"> <div class="container">
<div class="footer-content"> <div class="footer-content">
<div class="footer-section"> <div class="footer-section">
<h3>Ryans Recruit Firm</h3> <h3 data-company-name>Ryans Recruit Firm</h3>
<p style="color: rgba(255, 255, 255, 0.8);"> <p style="color: rgba(255, 255, 255, 0.8);">
Your trusted partner in career advancement and talent acquisition. Your trusted partner in career advancement and talent acquisition.
</p> </p>

View File

@@ -5,11 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Services - Ryans Recruit Firm</title> <title>Our Services - Ryans Recruit Firm</title>
<link rel="stylesheet" href="/css/styles.css"> <link rel="stylesheet" href="/css/styles.css">
<script src="/js/init.js"></script>
</head> </head>
<body> <body>
<header> <header>
<nav class="container"> <nav class="container">
<div class="logo">Ryans Recruit Firm</div> <div class="logo" data-company-name>Ryans Recruit Firm</div>
<ul class="nav-links"> <ul class="nav-links">
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="/about">About</a></li> <li><a href="/about">About</a></li>
@@ -78,7 +79,7 @@
<div class="container"> <div class="container">
<div class="footer-content"> <div class="footer-content">
<div class="footer-section"> <div class="footer-section">
<h3>Ryans Recruit Firm</h3> <h3 data-company-name>Ryans Recruit Firm</h3>
<p style="color: rgba(255, 255, 255, 0.8);">Your trusted partner in career advancement and talent acquisition.</p> <p style="color: rgba(255, 255, 255, 0.8);">Your trusted partner in career advancement and talent acquisition.</p>
</div> </div>
<div class="footer-section"> <div class="footer-section">