idcjp/daemon-idc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

daemon-idc init

Browse Source
This commit is contained in:
최준흠 2026-02-10 18:01:23 +09:00
parent e80091864b
commit ae9527dc74
6 changed files with 652 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/Config/Constants.php
View File

@ -128,13 +128,15 @@ define('LAYOUTS', [
'<link rel="icon" href="/favicon.ico">',
'<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">',
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">',
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">',
'<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">',
'<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">',
'<link href="//fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">',
'<link rel="stylesheet" href="/css/common/style.css" />',
],
'javascripts' => [
'<script src="//cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>',
'<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>',
'<script src="//cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>',
'<script src="//cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>',
'<script src="//cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>',
],
'footerScripts' => []

3
app/Controllers/Admin/Welcome.php
View File

@ -2,12 +2,11 @@
namespace App\Controllers\Admin;
use App\Controllers\AbstractWebController;
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use Psr\Log\LoggerInterface;
class Home extends AdminController
class Welcome extends AdminController
{
public function initController(RequestInterface $request, ResponseInterface $response, LoggerInterface $logger)
{

353
app/Views/front/welcome/index.php
View File

@ -3,6 +3,359 @@
<!-- Layout Middle Start -->
<div class="layout_top"><?= $this->include($viewDatas['layout']['layout'] . '/top'); ?></div>
<!-- Layout Middle Start -->
<!-- Hero Section -->
<section id="home" class="hero-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<h1 class="display-3 fw-bold mb-4">Enterprise-grade <span class="text-primary">Infrastructure</span>
</h1>
<p class="lead mb-5 text-light opacity-75">
High Performance • Secure • Low Latency<br>
도쿄 가야바초의 최첨단 IDC에서 제공하는 압도적 성능의 전용 서버 인프라.
</p>
<div class="d-flex justify-content-center gap-3">
<a href="#servers" class="btn btn-primary btn-lg px-5 py-3 fw-bold">서버 사양 보기</a>
<a href="#support" class="btn btn-outline-light btn-lg px-5 py-3 fw-bold">상담 및 문의</a>
</div>
</div>
</div>
</div>
</section>
<!-- Stats Bar -->
<section class="py-5 bg-white border-bottom">
<div class="container text-center">
<div class="row g-4">
<div class="col-6 col-lg-3">
<i class="fa-solid fa-microchip text-primary fa-2x mb-3"></i>
<h6 class="fw-bold">NVMe Gen4</h6>
<p class="small text-muted mb-0">엔터프라이즈 전용 SSD</p>
</div>
<div class="col-6 col-lg-3">
<i class="fa-solid fa-shield-halved text-primary fa-2x mb-3"></i>
<h6 class="fw-bold">DDoS Protected</h6>
<p class="small text-muted mb-0">실시간 L3/L4/L7 방어</p>
</div>
<div class="col-6 col-lg-3">
<i class="fa-solid fa-bolt text-primary fa-2x mb-3"></i>
<h6 class="fw-bold">100G Backbone</h6>
<p class="small text-muted mb-0">글로벌 고속 네트워크</p>
</div>
<div class="col-6 col-lg-3">
<i class="fa-solid fa-headset text-primary fa-2x mb-3"></i>
<h6 class="fw-bold">24/7 Monitoring</h6>
<p class="small text-muted mb-0">상주 엔지니어 지원</p>
</div>
</div>
</div>
</section>
<!-- Server Hosting Section -->
<section id="servers" class="py-5 bg-light">
<div class="container py-5">
<div class="text-center mb-5">
<h2 class="fw-bold mb-3">전용 서버 호스팅</h2>
<p class="text-muted">도쿄 IDC 기반의 최신 하드웨어 라인업을 확인하세요.</p>
</div>
<div class="row g-4">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<!-- Proxmox 가상 서버 (추가 요청) -->
<div class="col">
<div class="server-card border-info" style="border-width: 2px;">
<div class="card-header-custom">
<div class="type-title text-info">Proxmox VPS</div>
<div class="type-subtitle text-info">고성능 가상 서버</div>
</div>
<div class="spec-list">
<div class="spec-item"><i class="fa-solid fa-check text-info"></i> <span
class="spec-label">Hypervisor:</span> <span class="spec-value">Proxmox VE
(KVM)</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-info"></i> <span
class="spec-label">vCPU:</span> <span class="spec-value">Intel Xeon Gold
(Dedicated)</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-info"></i> <span
class="spec-label">RAM:</span> <span class="spec-value">8GB ~ 64GB (No
Overselling)</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-info"></i> <span
class="spec-label">Storage:</span> <span class="spec-value">Enterprise NVMe
SSD</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-info"></i> <span
class="spec-label">Feature:</span> <span class="spec-value">Snapshot, Backup, 웹
콘솔</span></div>
</div>
<div class="card-footer-custom">
<div class="price-text text-info">가격 문의</div>
<button class="btn btn-info btn-inquiry text-white shadow-sm">문의하기</button>
</div>
</div>
</div>
<!-- B타입 -->
<div class="col">
<div class="server-card">
<div class="card-header-custom">
<div class="type-title">B타입</div>
<div class="type-subtitle text-blue">범용 서버</div>
</div>
<div class="spec-list">
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">CPU:</span> <span class="spec-value">Xeon (4 Core)</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">RAM:</span> <span class="spec-value">16GB 이상</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">HDD:</span> <span class="spec-value">SSD 256GB x2 + SSD 500GB
x2</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">RAID 구성:</span> <span class="spec-value">RAID 1/1</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">주요 용도:</span> <span class="spec-value">모든 서비스 지원</span></div>
</div>
<div class="card-footer-custom">
<div class="price-text">월 45만원</div>
<button class="btn btn-primary btn-inquiry bg-blue shadow-sm">문의하기</button>
</div>
</div>
</div>
<!-- C타입 (가장 인기) -->
<div class="col">
<div class="server-card card-featured shadow">
<div class="popular-badge">가장 인기</div>
<div class="card-header-custom">
<div class="type-title">C타입</div>
<div class="type-subtitle text-purple">고성능 서버</div>
</div>
<div class="spec-list">
<div class="spec-item"><i class="fa-solid fa-check text-purple"></i> <span
class="spec-label">CPU:</span> <span class="spec-value">Xeon (8 Core)</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-purple"></i> <span
class="spec-label">RAM:</span> <span class="spec-value">16GB 이상</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-purple"></i> <span
class="spec-label">HDD:</span> <span class="spec-value">SSD 256GB x2 + SSD 500GB
x2</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-purple"></i> <span
class="spec-label">RAID 구성:</span> <span class="spec-value">RAID 1/1</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-purple"></i> <span
class="spec-label">주요 용도:</span> <span class="spec-value">모든 서비스 지원</span></div>
</div>
<div class="card-footer-custom">
<div class="price-text price-purple">월 55만원</div>
<button class="btn btn-primary btn-inquiry bg-purple shadow-sm">문의하기</button>
</div>
</div>
</div>
<!-- D타입 -->
<div class="col">
<div class="server-card">
<div class="card-header-custom">
<div class="type-title">D타입</div>
<div class="type-subtitle text-blue">프리미엄 서버</div>
</div>
<div class="spec-list">
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">CPU:</span> <span class="spec-value">Xeon (12 Core)</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">RAM:</span> <span class="spec-value">16GB 이상</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">HDD:</span> <span class="spec-value">SSD 256GB x2 + SSD 500GB
x2</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">RAID 구성:</span> <span class="spec-value">RAID 1/1</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">주요 용도:</span> <span class="spec-value">모든 서비스 지원</span></div>
</div>
<div class="card-footer-custom">
<div class="price-text">월 65만원</div>
<button class="btn btn-primary btn-inquiry bg-blue shadow-sm">문의하기</button>
</div>
</div>
</div>
<!-- E타입 -->
<div class="col">
<div class="server-card">
<div class="card-header-custom">
<div class="type-title">E타입</div>
<div class="type-subtitle text-blue">엔터프라이즈 서버</div>
</div>
<div class="spec-list">
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">CPU:</span> <span class="spec-value">Xeon (20 Core)</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">RAM:</span> <span class="spec-value">32GB 이상</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">HDD:</span> <span class="spec-value">SSD 256GB x2 + SSD 500GB
x2</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">RAID 구성:</span> <span class="spec-value">RAID 1/1</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">주요 용도:</span> <span class="spec-value">모든 서비스 지원</span></div>
</div>
<div class="card-footer-custom">
<div class="price-text">월 75만원</div>
<button class="btn btn-primary btn-inquiry bg-blue shadow-sm">문의하기</button>
</div>
</div>
</div>
<!-- E2타입 -->
<div class="col">
<div class="server-card">
<div class="card-header-custom">
<div class="type-title">E2타입</div>
<div class="type-subtitle text-blue">최상위 서버</div>
</div>
<div class="spec-list">
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">CPU:</span> <span class="spec-value">Xeon (28 Core)</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">RAM:</span> <span class="spec-value">32GB 이상</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">HDD:</span> <span class="spec-value">SSD 256GB x2 + SSD 500GB
x2</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">RAID 구성:</span> <span class="spec-value">RAID 1/1</span></div>
<div class="spec-item"><i class="fa-solid fa-check text-success"></i> <span
class="spec-label">주요 용도:</span> <span class="spec-value">모든 서비스 지원</span></div>
</div>
<div class="card-footer-custom">
<div class="price-text">월 85만원</div>
<button class="btn btn-primary btn-inquiry bg-blue shadow-sm">문의하기</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Network & DDoS Section -->
<section id="network" class="py-5 bg-white">
<div class="container py-5">
<div class="row align-items-center g-5">
<div class="col-lg-6">
<h6 class="text-primary fw-bold text-uppercase mb-3">Network & Security</h6>
<h2 class="fw-bold mb-4">실시간 지능형 DDoS 방어 시스템</h2>
<p class="text-muted mb-4">단순한 트래픽 차단이 아닌, 정교한 데이터 정화 엔진(Scrubbing Center)을 통해 정상적인 비즈니스 트래픽만을 서버로
전달합니다.</p>
<ul class="list-unstyled">
<li class="mb-3 d-flex align-items-start"><i
class="fa-solid fa-check-circle text-success me-3 mt-1"></i> <span><strong>L3/L4
Mitigation:</strong> UDP/SYN Flood 완벽 대응</span></li>
<li class="mb-3 d-flex align-items-start"><i
class="fa-solid fa-check-circle text-success me-3 mt-1"></i> <span><strong>BGP +
Anycast:</strong> 전 세계 주요 거점에서 공격 분산 처리</span></li>
<li class="mb-3 d-flex align-items-start"><i
class="fa-solid fa-check-circle text-success me-3 mt-1"></i> <span><strong>Always-on
Protection:</strong> 1초 미만의 탐지 및 즉각 대응</span></li>
</ul>
</div>
<div class="col-lg-6">
<div class="scrubbing-box">
<div class="text-center text-white fw-bold mb-4 uppercase tracking-widest">트래픽 흐름도(Traffic Flow)
</div>
<div class="d-flex flex-column align-items-center gap-4">
<div class="flow-item w-100">전체 트래픽 (All Internet Traffic)</div>
<i class="fa-solid fa-arrow-down opacity-25"></i>
<div class="flow-item w-100 bg-primary border-primary text-white shadow-lg">DAEMON Clean Center
</div>
<i class="fa-solid fa-arrow-down opacity-25"></i>
<div class="flow-item w-100 border-success text-success fw-bold">정상 트래픽(Cleaned Data) -> 고객
서버(Client Server)
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Data Center Section -->
<section id="datacenter" class="py-5 bg-light">
<div class="container py-5">
<div class="row g-4 align-items-center">
<div class="col-lg-5 order-2 order-lg-1">
<img src="https://images.unsplash.com/photo-1596272875729-ed2ff7d6d9c5?auto=format&fit=crop&q=80&w=800"
class="img-fluid rounded-4 shadow" alt="IDC Center">
</div>
<div class="col-lg-7 ps-lg-5 order-1 order-lg-2">
<h2 class="fw-bold mb-4">치바/도쿄 프리미엄 IDC</h2>
<p class="text-muted mb-5">아시아 비즈니스의 전략적 허브인 치바/도쿄에 위치하여 한국, 일본, 글로벌 트래픽을 가장 낮은 지연시간(Low Latency)으로
처리합니다.
</p>
<div class="row g-4">
<div class="col-sm-6">
<h5 class="fw-bold"><i class="fa-solid fa-bolt-lightning text-warning me-2"></i> 전력 보장</h5>
<p class="small text-muted">N+1 이중화 시스템 설비로 최대 가용성 보장.</p>
</div>
<div class="col-sm-6">
<h5 class="fw-bold"><i class="fa-solid fa-snowflake text-info me-2"></i> 공조 시설</h5>
<p class="small text-muted">고밀도 서버의 열기를 완벽히 제어하는 기업용 냉방 시스템 완비.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Support Section -->
<section id="support" class="py-5 bg-white">
<div class="container py-5">
<div class="row g-5">
<div class="col-lg-5">
<h2 class="fw-bold mb-4">기술 지원 & 문의</h2>
<p class="text-muted mb-5">견적 문의, 기술 지원, 장애 접수 등 데몬 IDC 엔지니어와 직접 상담하세요.</p>
<div class="card bg-light border-0 p-4 rounded-4 mb-4">
<div class="d-flex align-items-center mb-3">
<i class="fa-brands fa-telegram fa-2x text-primary me-3"></i>
<div>
<div class="fw-bold">Telegram 실시간 상담</div>
<div class="small text-muted">@daemonidc</div>
</div>
</div>
<a href="https://telegram.me/daemonidc" target="blank" class="btn btn-primary w-100 fw-bold">상담
시작하기</a>
</div>
<div class="card bg-light border-0 p-4 rounded-4">
<div class="d-flex align-items-center mb-3">
<i class="fa-brands fa-discord fa-2x text-indigo me-3" style="color: #5865F2;"></i>
<div>
<div class="fw-bold">Discord 커뮤니티</div>
<div class="small text-muted">k6nQg84N</div>
</div>
</div>
<a href="https://discord.com/invite/k6nQg84N" target="blank"
class="btn btn-outline-dark w-100 fw-bold">커뮤니티 입장</a>
</div>
</div>
<div class="col-lg-7">
<div class="card border-0 shadow-sm p-4 p-md-5 rounded-4 bg-light">
<form>
<div class="row g-3">
<div class="col-md-6">
<label class="form-label small fw-bold">성함 / 업체명</label>
<input type="text" class="form-control" placeholder="성함을 입력하세요">
</div>
<div class="col-md-6">
<label class="form-label small fw-bold">이메일</label>
<input type="email" class="form-control" placeholder="contact@domain.com">
</div>
<div class="col-12">
<label class="form-label small fw-bold">문의 내용</label>
<textarea class="form-control" rows="5" placeholder="문의하실 내용을 상세히 적어주세요."></textarea>
</div>
<div class="col-12 mt-4">
<button type="button" class="btn btn-dark w-100 py-3 fw-bold">문의 접수하기</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Layout Middle End -->
<div class=" layout_footer"><?= $this->include("{$viewDatas['layout']['template']}/index_footer"); ?></div>
<div class="layout_bottom"><?= $this->include($viewDatas['layout']['layout'] . '/bottom'); ?></div>

58
app/Views/layouts/front/bottom.php
View File

@ -1,5 +1,57 @@
<!-- botto start -->
<nav class="tail navbar navbar-expand-lg">
</nav>
<footer class="footer">
<div class="container text-center text-md-start">
<div class="row g-5">
<div class="col-lg-4">
<div class="d-flex align-items-center mb-4">
<img src="https://daemon-idc.com/wp-content/uploads/2024/08/cropped-logo-small-30x32.png"
height="32" class="me-2 filter-white" style="filter: brightness(0) invert(1);">
<span class="h4 mb-0 fw-bold text-white">DAEMON</span>
<span class="h4 mb-0 fw-light text-muted ms-1">IDC</span>
</div>
<p class="small lh-lg mb-0">데몬 IDC는 고성능 전용 서버와 엔터프라이즈급 보안 솔루션을 제공하는 글로벌 인프라 전문 브랜드입니다. 도쿄 가야바초의 최첨단 시설에서
귀사의 비즈니스를 보호합니다.</p>
</div>
<div class="col-6 col-lg-2">
<h6 class="text-white fw-bold mb-4">서비스</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#">데디케이티드 서버</a></li>
<li class="mb-2"><a href="#">베어메탈 호스팅</a></li>
<li class="mb-2"><a href="#">DDoS 방어</a></li>
<li class="mb-2"><a href="#">게임 서버 인프라</a></li>
</ul>
</div>
<div class="col-6 col-lg-2">
<h6 class="text-white fw-bold mb-4">고객지원</h6>
<ul class="list-unstyled">
<li class="mb-2"><a href="#">기술 지원</a></li>
<li class="mb-2"><a href="#">서비스 이용약관</a></li>
<li class="mb-2"><a href="#">개인정보처리방침</a></li>
<li class="mb-2"><a href="#">SLA 보장</a></li>
</ul>
</div>
<div class="col-lg-4">
<h6 class="text-white fw-bold mb-4">Contact Info</h6>
<ul class="list-unstyled small">
<li class="mb-3 d-flex align-items-center"><i class="fa-solid fa-envelope me-3"></i>
sales@daemon-idc.com</li>
<li class="mb-3 d-flex align-items-center"><i class="fa-brands fa-telegram me-3"></i> @daemonidc
(Telegram)</li>
<li class="mb-3 d-flex align-items-center"><i class="fa-brands fa-discord me-3"></i> k6nQg84N
(Discord)</li>
<li class="mt-4"><span class="badge bg-success text-white px-3 py-2 uppercase fw-bold">System
Status: Normal</span></li>
</ul>
</div>
</div>
<hr class="border-secondary opacity-25 my-5">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center small text-muted">
<p class="mb-0">&copy; 2024 Daemon IDC. All rights reserved.</p>
<div class="d-flex gap-4 mt-3 mt-md-0 fw-bold text-uppercase" style="font-size: 10px; letter-spacing: 2px;">
<span>Tokyo, Japan Facility</span>
<span>Engineering for Excellence</span>
</div>
</div>
</div>
</footer>
<!-- bottom end -->

34
app/Views/layouts/front/top.php
View File

@ -1,4 +1,36 @@
<!-- top start -->
<nav class="navbar navbar-expand-lg fixed-top shadow-sm">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="#">
<img src="https://daemon-idc.com/wp-content/uploads/2024/08/cropped-logo-small-30x32.png" alt="Logo" height="32"
class="me-2">
<span class="fw-bold text-primary">DAEMON</span>
<span class="fw-light text-secondary ms-1">IDC</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="#home">홈</a></li>
<li class="nav-item"><a class="nav-link" href="#servers">서버 호스팅</a></li>
<li class="nav-item"><a class="nav-link" href="#network">네트워크 & DDoS</a></li>
<li class="nav-item"><a class="nav-link" href="#datacenter">데이터 센터</a></li>
<li class="nav-item"><a class="nav-link" href="#solutions">솔루션</a></li>
<li class="nav-item"><a class="nav-link" href="#support">고객지원</a></li>
</ul>
<div class="d-flex align-items-center gap-2">
<a href="https://telegram.me/daemonidc" class="btn btn-telegram px-3 py-2 rounded-3">
<i class="fa-brands fa-telegram me-2"></i>Telegram
</a>
<a href="https://discord.com/invite/k6nQg84N" class="btn btn-discord px-3 py-2 rounded-3">
<i class="fa-brands fa-discord me-2"></i>Discord
</a>
<a href="#" class="btn btn-dark btn-sm fw-bold px-3 py-2 rounded-3 ms-lg-2">로그인</a>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<nav class="nav"><a class="navbar-brand" href="#">사용자페이지</a></nav>
@ -6,7 +38,6 @@
<li class="nav-item">
<?= ICONS['LOCK'] ?>
</li>
</ul>
<ul class="nav justify-content-end">
<li class="nav-item">
@ -40,3 +71,4 @@
</ul>
</div>
</nav>
<!-- top end -->

258
public/css/front.css
View File

@ -4,78 +4,230 @@
* Created : 2016/9/11 Tri-aBility by Junheum,Choi
* Updated :
------------------------------------------------------------ */
* {
margin: 0px;
padding: 0px;
border: 0px;
:root {
--daemon-blue: #0d6efd;
--daemon-dark: #0f172a;
--daemon-light: #f8fafc;
}
html,
body {
font-family: 'Inter', 'Noto Sans KR', sans-serif;
background-color: var(--daemon-light);
color: #334155;
scroll-behavior: smooth;
}
/* Navbar Custom */
.navbar {
background-color: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid #e2e8f0;
padding: 0.75rem 0;
}
.nav-link {
font-size: 0.9rem;
font-weight: 500;
color: #475569 !important;
padding: 0.5rem 1rem !important;
}
.nav-link:hover,
.nav-link.active {
color: var(--daemon-blue) !important;
}
/* Buttons */
.btn-telegram {
background-color: #229ED9;
color: white;
border: none;
font-size: 0.85rem;
font-weight: 600;
}
.btn-telegram:hover {
background-color: #1c87ba;
color: white;
}
.btn-discord {
background-color: #5865F2;
color: white;
border: none;
font-size: 0.85rem;
font-weight: 600;
}
.btn-discord:hover {
background-color: #4752c4;
color: white;
}
/* Hero Section */
.hero-section {
padding: 160px 0 100px;
background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)),
url('https://images.unsplash.com/photo-1558494949-ef010cbdcc48?auto=format&fit=crop&q=80&w=1920');
background-size: cover;
background-position: center;
color: white;
text-align: center;
}
/* Product Cards */
/* Server Card Styles */
.server-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 20px;
transition: all 0.3s ease;
height: 100%;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
div.layout_top {
height: 51px;
margin-bottom: 10px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
background-color: #e8e9ea;
.server-card:hover {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
transform: translateY(-5px);
}
div.layout_bottom {
height: 51px;
margin-top: 10px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
background-color: #efefef;
background-color: #e8e9ea;
/* Card Header */
.card-header-custom {
padding: 30px 20px 10px;
text-align: center;
border-bottom: none;
background: none;
}
table.layout_middle {
width: 100%;
/* border: 1px solid blue; */
.type-title {
font-size: 1.75rem;
font-weight: 900;
color: #0f172a;
margin-bottom: 5px;
}
table.layout_middle td.layout_left {
vertical-align: top;
/* border: 1px solid red; */
.type-subtitle {
font-size: 1rem;
font-weight: 500;
margin-bottom: 20px;
}
table.layout_middle td.layout_right {
padding-top: 5px;
padding-left: 23px;
padding-right: 5px;
padding-bottom: 5px;
/* overflow: auto; */
/* border: 1px solid blue; */
/* Specific Colors */
.text-blue {
color: #2563eb;
}
table.layout_middle td.layout_right div.layout_header {
/*content 헤더라인*/
height: 55px;
.text-purple {
color: #9333ea;
}
.bg-blue {
background-color: #2563eb !important;
}
.bg-purple {
background-color: #9333ea !important;
}
/* Badge for C-Type */
.popular-badge {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: #9333ea;
color: white;
text-align: center;
padding: 8px 0;
font-weight: 700;
font-size: 0.85rem;
}
.card-featured {
border: 2px solid #9333ea;
padding-top: 15px;
background-color: #e7e7e7;
border-top: 1px solid gray;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-radius: 15px 15px 0px 0px;
}
table.layout_middle td.layout_right div.layout_header li.nav-item {}
table.layout_middle td.layout_right div.layout_footer {
/*content 하단라인*/
height: 20px;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
border-radius: 0px 0px 15px 15px;
/* Spec List */
.spec-list {
padding: 0 30px;
margin-bottom: 30px;
flex-grow: 1;
}
table.layout_middle td.layout_right div.layout_content {
/*content 부분*/
padding: 5px;
border-left: 1px solid gray;
border-right: 1px solid gray;
.spec-item {
display: flex;
align-items: flex-start;
margin-bottom: 12px;
font-size: 0.95rem;
}
.spec-item i {
margin-right: 12px;
margin-top: 5px;
font-size: 0.85rem;
}
.spec-label {
font-weight: 700;
color: #1e293b;
margin-right: 8px;
white-space: nowrap;
}
.spec-value {
color: #64748b;
}
/* Price and Button */
.card-footer-custom {
padding: 0 30px 30px;
text-align: center;
}
.price-text {
font-size: 2rem;
font-weight: 800;
color: #2563eb;
margin-bottom: 25px;
}
.price-purple {
color: #9333ea;
}
/* Scrubbing Flow Visual */
.scrubbing-box {
background: #1e293b;
border-radius: 1.5rem;
padding: 3rem;
color: #94a3b8;
}
.flow-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem;
border-radius: 1rem;
text-align: center;
}
/* Footer */
.footer {
background-color: var(--daemon-dark);
color: #64748b;
padding: 80px 0 40px;
}
.footer a {
color: #64748b;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s;
}
.footer a:hover {
color: white;
}