문어 컬렉션 추가
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
aweso
185
etc/myoctopus.php
Normal file
185
etc/myoctopus.php
Normal file
@@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>My Octopus 홍보 영상</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--brand-color: #4f46e5;
|
||||
--glass-bg: rgba(255, 255, 255, 0.03);
|
||||
--glass-border: rgba(255, 255, 255, 0.1);
|
||||
--glass-blur: 20px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
background-color: #020617;
|
||||
color: #f8fafc;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.gradient-bg {
|
||||
background: radial-gradient(circle at 0% 0%, #0f172a 0%, #020617 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.blob {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
z-index: 0;
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
animation: float 20s infinite alternate;
|
||||
}
|
||||
.blob-1 { width: 500px; height: 500px; background: #6366f1; top: -100px; right: -100px; }
|
||||
.blob-2 { width: 400px; height: 400px; background: #db2777; bottom: 10%; left: -100px; opacity: 0.3; }
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translate(0, 0) scale(1); }
|
||||
100% { transform: translate(40px, 60px) scale(1.1); }
|
||||
}
|
||||
|
||||
.card-glass {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.card-glass:hover {
|
||||
transform: translateY(-8px);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from { opacity: 0; transform: translateY(30px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-slide-up {
|
||||
animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 1rem;
|
||||
background: #000;
|
||||
}
|
||||
.video-container iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="gradient-bg min-h-screen flex flex-col items-center justify-center py-20 px-4">
|
||||
<div class="blob blob-1"></div>
|
||||
<div class="blob blob-2"></div>
|
||||
|
||||
<div class="max-w-6xl w-full relative z-10">
|
||||
<header class="text-center mb-16 animate-slide-up">
|
||||
<h1 class="text-4xl md:text-5xl font-black mb-4 tracking-tight">
|
||||
<span class="bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">My Octopus</span>
|
||||
<span class="text-white opacity-90">홍보 프로젝트</span>
|
||||
</h1>
|
||||
<p class="text-slate-400 text-lg">혁신적인 업무 자동화의 미래를 영상으로 확인하세요.</p>
|
||||
</header>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 animate-slide-up" style="animation-delay: 0.2s;">
|
||||
<!-- Video Card 1 -->
|
||||
<div class="card-glass rounded-3xl p-6 flex flex-col">
|
||||
<div class="video-container mb-6 shadow-2xl">
|
||||
<iframe src="https://player.vimeo.com/video/1152125085?h=0&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold text-white mb-2">My Octopus 홍보 영상 1</h3>
|
||||
<p class="text-slate-400 text-sm leading-relaxed">디지털 전환의 핵심 솔루션, My Octopus가 제시하는 업무 효율화의 새로운 기준입니다.</p>
|
||||
</div>
|
||||
<div class="mt-6 pt-6 border-t border-white/5 flex items-center justify-between">
|
||||
<span class="text-[10px] font-bold text-indigo-400 uppercase tracking-widest">Promotion Video #1</span>
|
||||
<div class="flex gap-1">
|
||||
<span class="w-1 h-1 rounded-full bg-indigo-500"></span>
|
||||
<span class="w-1 h-1 rounded-full bg-indigo-500 opacity-50"></span>
|
||||
<span class="w-1 h-1 rounded-full bg-indigo-500 opacity-25"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video Card 2 -->
|
||||
<div class="card-glass rounded-3xl p-6 flex flex-col">
|
||||
<div class="video-container mb-6 shadow-2xl">
|
||||
<iframe src="https://player.vimeo.com/video/1152125432?h=0&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold text-white mb-2">My Octopus 홍보 영상 2</h3>
|
||||
<p class="text-slate-400 text-sm leading-relaxed">비즈니스 프로세스의 자동화, My Octopus와 함께라면 미래는 더 가까워집니다.</p>
|
||||
</div>
|
||||
<div class="mt-6 pt-6 border-t border-white/5 flex items-center justify-between">
|
||||
<span class="text-[10px] font-bold text-purple-400 uppercase tracking-widest">Promotion Video #2</span>
|
||||
<div class="flex gap-1">
|
||||
<span class="w-1 h-1 rounded-full bg-purple-500"></span>
|
||||
<span class="w-1 h-1 rounded-full bg-purple-500 opacity-50"></span>
|
||||
<span class="w-1 h-1 rounded-full bg-purple-500 opacity-25"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video Card 3: 방화셔터 문어 캐릭터 -->
|
||||
<div class="card-glass rounded-3xl p-6 flex flex-col">
|
||||
<div class="video-container mb-6 shadow-2xl">
|
||||
<iframe src="https://player.vimeo.com/video/1152126362?h=0&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold text-white mb-2">My Octopus 캐릭터 홍보</h3>
|
||||
<p class="text-slate-400 text-sm leading-relaxed">친근한 문어 캐릭터와 함께하는 방화셔터 품질인정제도 안내 영상입니다.</p>
|
||||
</div>
|
||||
<div class="mt-6 pt-6 border-t border-white/5 flex items-center justify-between">
|
||||
<span class="text-[10px] font-bold text-orange-400 uppercase tracking-widest">Character Animation</span>
|
||||
<div class="flex gap-1">
|
||||
<span class="w-1 h-1 rounded-full bg-orange-500"></span>
|
||||
<span class="w-1 h-1 rounded-full bg-orange-500 opacity-50"></span>
|
||||
<span class="w-1 h-1 rounded-full bg-orange-500 opacity-25"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Video Card 4: 문어 하단 문 출연 -->
|
||||
<div class="card-glass rounded-3xl p-6 flex flex-col">
|
||||
<div class="video-container mb-6 shadow-2xl">
|
||||
<iframe src="https://player.vimeo.com/video/1152126562?h=0&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold text-white mb-2">My Octopus 브랜드 애니메이션</h3>
|
||||
<p class="text-slate-400 text-sm leading-relaxed">문어 캐릭터와 문이 결합된 상징적인 브랜드 홍보 영상입니다.</p>
|
||||
</div>
|
||||
<div class="mt-6 pt-6 border-t border-white/5 flex items-center justify-between">
|
||||
<span class="text-[10px] font-bold text-emerald-400 uppercase tracking-widest">Identity Animation</span>
|
||||
<div class="flex gap-1">
|
||||
<span class="w-1 h-1 rounded-full bg-emerald-500"></span>
|
||||
<span class="w-1 h-1 rounded-full bg-emerald-500 opacity-50"></span>
|
||||
<span class="w-1 h-1 rounded-full bg-emerald-500 opacity-25"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="mt-20 text-center animate-slide-up" style="animation-delay: 0.4s;">
|
||||
<a href="../index.php" class="inline-flex items-center gap-2 px-8 py-3 bg-white/5 hover:bg-white/10 text-white rounded-2xl border border-white/10 transition-all backdrop-blur-md group">
|
||||
<svg class="w-4 h-4 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
|
||||
<span>메인페이지로 돌아가기</span>
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -195,6 +195,9 @@
|
||||
<i data-lucide="menu" class="w-5 h-5"></i>
|
||||
</button>
|
||||
<div class="absolute right-0 top-full mt-1 w-48 bg-white rounded-xl shadow-xl border border-slate-100 py-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform origin-top-right z-50">
|
||||
<a href="etc/myoctopus.php" class="block px-4 py-2 text-sm text-slate-700 hover:bg-brand-50 hover:text-brand-600 font-medium">
|
||||
문어이미지 선발
|
||||
</a>
|
||||
<a href="corp/kodata.php" class="block px-4 py-2 text-sm text-slate-700 hover:bg-brand-50 hover:text-brand-600 font-medium">
|
||||
기업분석 한국평가데이터 (kodata)
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user